Initial dashboard

Display/package-lock.json

@@ -2263,6 +2263,14 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-gridster2": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/angular-gridster2/-/angular-gridster2-8.2.0.tgz",
+      "integrity": "sha512-O/LYOFovnDZHlZ6yidO9DDN6XGSGevabQebv37mlaxfbBu5mi/svbO+uhttDhIeKbUZAorbP9CMBWsCn1tzdvw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "angular-highcharts": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/angular-highcharts/-/angular-highcharts-8.0.3.tgz",

Display/package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "~8.2.4",
     "@angular/router": "~8.2.4",
     "@aspnet/signalr": "^1.1.4",
+    "angular-gridster2": "^8.2.0",
     "angular-highcharts": "^8.0.3",
     "hammerjs": "^2.0.8",
     "highcharts": "^7.2.0",

Display/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
+import { GridsterModule } from 'angular-gridster2';
 
 import { LaundryComponent } from './components/laundry/laundry.component';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
@@ -52,7 +53,8 @@ const config: SocketIoConfig = { url: '/api/laundry', options: {} };
         FormsModule,
         ReactiveFormsModule,
         MatMomentDateModule,
-        MatProgressSpinnerModule
+        MatProgressSpinnerModule,
+        GridsterModule
     ],
     providers: [],
     bootstrap: [AppComponent]

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

@@ -1,3 +1,20 @@
-<div class="dashboard">
+<div class="content">
-    dashboard works!
+    <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 {
+gridster {
-  padding: 20px;
+  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>