From 6fd416b7c6a672901705c939ebe3437303533d90 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Mon, 7 Oct 2019 19:50:09 -0400
Subject: [PATCH] Update dashboard layout

---
 .../dashboard/dashboard.component.html        |  6 +--
 .../dashboard/dashboard.component.ts          | 44 ++++++++++---------
 .../app/models/dashboard/dashboard-layout.ts  |  6 +++
 3 files changed, 32 insertions(+), 24 deletions(-)
 create mode 100644 Display/src/app/models/dashboard/dashboard-layout.ts

diff --git a/Display/src/app/components/dashboard/dashboard.component.html b/Display/src/app/components/dashboard/dashboard.component.html
index 568c3b7..0c68db3 100644
--- a/Display/src/app/components/dashboard/dashboard.component.html
+++ b/Display/src/app/components/dashboard/dashboard.component.html
@@ -10,7 +10,7 @@
         </button>
     </header>
     <gridster class="content" [options]="options">
-        <gridster-item [item]="dashboard[0]">
+        <gridster-item [item]="dashboardLayout.layout[0]">
             <div class="dashboard-item">
                 <div class="dashboard-item-header">
                     Weather
@@ -20,7 +20,7 @@
                 </div>
             </div>
         </gridster-item>
-        <gridster-item [item]="dashboard[1]">
+        <gridster-item [item]="dashboardLayout.layout[1]">
             <div class="dashboard-item">
                 <div class="dashboard-item-header">
                     Laundry
@@ -30,7 +30,7 @@
                 </div>
             </div>
         </gridster-item>
-        <gridster-item [item]="dashboard[2]">
+        <gridster-item [item]="dashboardLayout.layout[2]">
             <div class="dashboard-item">
                 <div class="dashboard-item-header">
                     Pressure Trend
diff --git a/Display/src/app/components/dashboard/dashboard.component.ts b/Display/src/app/components/dashboard/dashboard.component.ts
index f17c11d..a15819f 100644
--- a/Display/src/app/components/dashboard/dashboard.component.ts
+++ b/Display/src/app/components/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { GridsterConfig, GridsterItem, GridsterItemComponentInterface } from 'angular-gridster2';
+import { DashboardLayout } from 'src/app/models/dashboard/dashboard-layout';
 
 @Component({
     selector: 'app-dashboard',
@@ -8,9 +9,18 @@ import { GridsterConfig, GridsterItem, GridsterItemComponentInterface } from 'an
 })
 export class DashboardComponent implements OnInit {
     public options: GridsterConfig;
-    public dashboard: Array<GridsterItem>;
+    public dashboardLayout: DashboardLayout;
     public locked = true;
 
+    private defaultLayout: DashboardLayout = {
+        version: 1,
+        layout: [
+            { cols: 3, rows: 2, y: 0, x: 0 },
+            { cols: 2, rows: 2, y: 0, x: 3 },
+            { cols: 2, rows: 2, y: 0, x: 5 }
+        ]
+    };
+
     constructor() { }
 
     ngOnInit() {
@@ -36,14 +46,6 @@ export class DashboardComponent implements OnInit {
         this.options.api.optionsChanged();
     }
 
-    removeItem(item: GridsterItem) {
-        this.dashboard.splice(this.dashboard.indexOf(item), 1);
-    }
-
-    addItem() {
-        this.dashboard.push({} as GridsterItem);
-    }
-
     toggleLocked() {
         this.locked = !this.locked;
 
@@ -54,27 +56,27 @@ export class DashboardComponent implements OnInit {
     }
 
     saveOptions() {
-        localStorage.setItem('dashboard-layout', JSON.stringify(this.dashboard));
+        localStorage.setItem('dashboard-layout', JSON.stringify(this.dashboardLayout));
     }
 
     loadOptions() {
-        const savedLayout = localStorage.getItem('dashboard-layout');
+        const savedLayoutString = localStorage.getItem('dashboard-layout');
 
-        const defaultLayout = [
-            { cols: 3, rows: 2, y: 0, x: 0 },
-            { cols: 2, rows: 1, y: 0, x: 3 },
-            { cols: 1, rows: 1, y: 0, x: 5 }
-        ];
-
-        if (savedLayout == null) {
-            this.dashboard = defaultLayout;
+        if (savedLayoutString == null) {
+            this.dashboardLayout = this.defaultLayout;
             return;
         }
 
         try {
-            this.dashboard = JSON.parse(savedLayout);
+            const savedLayout = JSON.parse(savedLayoutString) as DashboardLayout;
+
+            if (savedLayout.version === this.defaultLayout.version) {
+                this.dashboardLayout = savedLayout;
+            } else {
+                this.dashboardLayout = this.defaultLayout;
+            }
         } catch (error) {
-            this.dashboard = defaultLayout;
+            this.dashboardLayout = this.defaultLayout;
         }
     }
 }
diff --git a/Display/src/app/models/dashboard/dashboard-layout.ts b/Display/src/app/models/dashboard/dashboard-layout.ts
new file mode 100644
index 0000000..bd29ba5
--- /dev/null
+++ b/Display/src/app/models/dashboard/dashboard-layout.ts
@@ -0,0 +1,6 @@
+import { GridsterItem } from 'angular-gridster2';
+
+export class DashboardLayout {
+    version: number;
+    layout: Array<GridsterItem>;
+}