Update dashboard layout

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

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;
         }
     }
 }

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>;
+}