Initial dashboard

Display/src/app/components/dashboard/dashboard.component.html

@@ -1,3 +1,20 @@
-<div class="dashboard">
-    dashboard works!
+<div class="content">
+    <header class="header">
+        <button mat-stroked-button (click)="toggleLocked()" *ngIf="!locked">
+            <mat-icon>lock_open</mat-icon>
+            Unlocked
+        </button>
+        <button mat-stroked-button (click)="toggleLocked()" *ngIf="locked">
+            <mat-icon>lock</mat-icon>
+            Locked
+        </button>
+    </header>
+    <gridster [options]="options">
+        <gridster-item [item]="dashboard[0]">
+            <app-weather-current></app-weather-current>
+        </gridster-item>
+        <gridster-item [item]="dashboard[1]">
+            <app-laundry></app-laundry>
+        </gridster-item>
+    </gridster>
 </div>

Display/src/app/components/dashboard/dashboard.component.scss

@@ -1,3 +1,17 @@
-.dashboard {
-  padding: 20px;
+gridster {
+  background: #fafafa;
+  flex: 1 1 auto;
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+.header {
+  background-color: rgb(250, 250, 250);
+  padding: 10px;
+  flex: 0 0 auto;
+  text-align: right;
 }

Display/src/app/components/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { GridsterConfig, GridsterItem, GridsterItemComponentInterface } from 'angular-gridster2';
 
 @Component({
     selector: 'app-dashboard',
@@ -6,10 +7,73 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+    public options: GridsterConfig;
+    public dashboard: Array<GridsterItem>;
+    public locked = true;
 
     constructor() { }
 
     ngOnInit() {
+        this.options = {
+            itemChangeCallback: () => this.saveOptions(),
+            itemResizeCallback: () => this.saveOptions(),
+            resizable: {
+                enabled: !this.locked
+            },
+            draggable: {
+                enabled: !this.locked
+            },
+            gridType: 'fixed',
+            fixedColWidth: 105,
+            fixedRowHeight: 105,
+            displayGrid: 'none'
+        };
+
+        this.loadOptions();
     }
 
+    changedOptions() {
+        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;
+
+        this.options.resizable.enabled = !this.locked;
+        this.options.draggable.enabled = !this.locked;
+
+        this.changedOptions();
+    }
+
+    saveOptions() {
+        localStorage.setItem('dashboard-layout', JSON.stringify(this.dashboard));
+    }
+
+    loadOptions() {
+        const savedLayout = localStorage.getItem('dashboard-layout');
+
+        const defaultLayout = [
+            { cols: 3, rows: 2, y: 0, x: 0 },
+            { cols: 2, rows: 1, y: 0, x: 3 }
+        ];
+
+        if (savedLayout == null) {
+            this.dashboard = defaultLayout;
+            return;
+        }
+
+        try {
+            this.dashboard = JSON.parse(savedLayout);
+        } catch (error) {
+            this.dashboard = defaultLayout;
+        }
+    }
 }

Display/src/app/components/weather/current/weather-current.component.html

@@ -42,7 +42,7 @@
                     Rain
                 </td>
                 <td>
-                    {{ latestReading.Rain.toFixed(2) }}
+                    {{ latestReading.Rain.toFixed(2) }}"
                 </td>
             </tr>
             <tr>