From dafe6813ed0062f93f99ab54e28eb8b403b5e349 Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Sun, 12 Mar 2023 09:36:33 +0100
Subject: [PATCH] enable save button only if dashboard is dirty

---
 .../app/dashboard-page/dashboard/dashboard.component.html | 2 +-
 .../app/dashboard-page/dashboard/dashboard.component.ts   | 8 ++++++++
 pdb-js/src/styles.scss                                    | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
index f16ddcd..b557347 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
+++ b/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>
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
index 56366cf..9d80e7c 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
+++ b/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);
       }
     });
   }
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 6058623..4ac0a95 100644
--- a/pdb-js/src/styles.scss
+++ b/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;