enable save button only if dashboard is dirty

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -53,7 +53,7 @@
   <div class="toolbar">
     <button mat-button  (click)="addText()">Add Text</button>
     <button mat-button (click)="addPlot()">Add Plot</button>
-    <button class="save-button" mat-button (click)="save()">Save</button>
+    <button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button>
   </div>
   <div class="editable">
     <h1>{{dashboard.name}}<button mat-icon-button (click)="editNameAndDescription()" class="editable-hovered"><img src="/assets/img/edit-outline.svg"/></button></h1>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -18,6 +18,8 @@ export class DashboardComponent implements OnInit {
 
   dashboard?: Dashboard = undefined;
 
+  pristineDashboardJSON?: string = undefined;
+
   error = "";
 
   plotWidgetRenderData: PlotWidgetRenderData[] = [];
@@ -34,6 +36,7 @@ export class DashboardComponent implements OnInit {
       this.service.getDashboard(<string>this.route.snapshot.paramMap.get("id")).subscribe({
         'next':(dashboard: Dashboard) => {
           this.dashboard = dashboard;
+          this.pristineDashboardJSON = JSON.stringify(dashboard);
           this.repairArrangement();
 
           dashboard.plots.forEach(p => {
@@ -54,6 +57,10 @@ export class DashboardComponent implements OnInit {
       });
   }
 
+  isDirty() {
+    return this.pristineDashboardJSON !== JSON.stringify(this.dashboard);
+  }
+
   loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) {
 
     if (index < plotWidgetQueue.length){
@@ -161,6 +168,7 @@ export class DashboardComponent implements OnInit {
           duration: 5000,
           verticalPosition: 'top'
         });
+        this.pristineDashboardJSON = JSON.stringify(this.dashboard);
       }
     });
   }

pdb-js/src/styles.scss

@@ -110,6 +110,9 @@ button[disabled] .icon-inline {
 button.save-button {
   background-color: #ff9900;
 }
+button.save-button:disabled {
+  background-color: inherit;
+}
 
 .icon-small {
   width: 1.5em;