Start to reorganize

Display/src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { LaundryComponent } from './laundry/laundry.component';
-import { WeatherChartsComponent } from './weather/charts/weather-charts.component';
-import { WeatherCurrentComponent } from './weather/current/weather-current.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { LaundryComponent } from './components/laundry/laundry.component';
+import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
+import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
 
 const routes: Routes = [
     {
@@ -25,7 +25,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
-    exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
 })
 export class AppRoutingModule { }

Display/src/app/app.component.html

@@ -1,51 +0,0 @@
-<div class="main-container">
-    <header class="header header-3">
-        <div class="branding">
-            <a [routerLink]="['/']">
-                <clr-icon shape="home" class="app-logo"></clr-icon>
-                <span class="title">
-                    Home Status
-                </span>
-            </a>
-        </div>
-    </header>
-    <div class="content-container">
-        <nav class="sidenav">
-            <section class="sidenav-content">
-                <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                    Dashboard
-                </a>
-                <a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                    Laundry
-                </a>
-                <a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                    Weather
-                </a>
-                <section class="nav-group">
-                    <input id="nav-weather" type="checkbox">
-                    <label for="nav-weather">Weather Charts</label>
-                    <ul class="nav-list">
-                        <li>
-                            <a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                                Temperature
-                            </a>
-                        </li>
-                        <li>
-                            <a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                                Humidity
-                            </a>
-                        </li>
-                        <li>
-                            <a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="nav-link">
-                                Pressure
-                            </a>
-                        </li>
-                    </ul>
-                </section>
-            </section>
-        </nav>
-        <div class="content-area">
-            <router-outlet></router-outlet>
-        </div>
-    </div>
-</div>

Display/src/app/app.component.scss

@@ -1,7 +0,0 @@
-.app-logo {
-    color: white;
-    width: 1.2rem !important;
-    height: 1.2rem !important;
-    position: relative;
-    top: -2px;
-}

Display/src/app/app.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-    title = 'Home Status';
-}

Display/src/app/app.module.ts

@@ -2,25 +2,29 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ChartModule } from 'angular-highcharts';
 import { HttpClientModule } from '@angular/common/http';
-import { ClarityModule } from '@clr/angular';
-
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import { AppComponent } from './components/app/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule } from '@angular/material';
+import { NavComponent } from './components/nav/nav.component';
+import { LayoutModule } from '@angular/cdk/layout';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+
 import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
 
-import { WeatherComponent } from './weather/weather.component';
-import { LaundryComponent } from './laundry/laundry.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { WeatherChartsComponent } from './weather/charts/weather-charts.component';
-import { WeatherCurrentComponent } from './weather/current/weather-current.component';
+import { LaundryComponent } from './components/laundry/laundry.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
+import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
 
 const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options: {} };
 
 @NgModule({
     declarations: [
         AppComponent,
-        WeatherComponent,
+        NavComponent,
         LaundryComponent,
         DashboardComponent,
         WeatherChartsComponent,
@@ -32,8 +36,15 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
         BrowserAnimationsModule,
         SocketIoModule.forRoot(config),
         ChartModule,
-        HttpClientModule,
-        ClarityModule
+        HttpClientModule,	
+        MatIconModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatMenuModule,
+        LayoutModule,
+        MatSidenavModule,
+        MatListModule,
+        MatExpansionModule
     ],
     providers: [],
     bootstrap: [AppComponent]

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

@@ -0,0 +1 @@
+<app-nav></app-nav>

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'Display';
+}

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { LaundryService } from './service/laundry.service';
-import { LaundryStatus } from './service/laundry-status';
+import { LaundryService } from '../../services/laundry/laundry.service';
+import { LaundryStatus } from '../../services/laundry/laundry-status';
 
 @Component({
     selector: 'app-laundry',

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

@@ -0,0 +1,22 @@
+<mat-toolbar color="primary">
+    <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
+        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+    </button>
+    <span>Home Monitor</span>
+</mat-toolbar>
+<mat-sidenav-container class="sidenav-container">
+    <mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
+        <mat-nav-list>
+            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Dashboard</a>
+            <a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Laundry</a>
+            <a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Weather</a>
+
+            <a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Temperature</a>
+            <a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Humidity</a>
+            <a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Pressure</a>
+        </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <router-outlet></router-outlet>
+    </mat-sidenav-content>
+</mat-sidenav-container>

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

@@ -0,0 +1,21 @@
+.sidenav-container {
+  height: calc(100% - 64px);
+}
+
+.sidenav {
+  width: 200px;
+}
+
+.sidenav .mat-toolbar {
+  background: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.mat-sidenav-content {
+    padding: 20px;
+}

Display/src/app/components/nav/nav.component.spec.ts

@@ -0,0 +1,40 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss']
+})
+export class NavComponent {
+
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+    .pipe(
+      map(result => result.matches),
+      shareReplay()
+    );
+
+  constructor(private breakpointObserver: BreakpointObserver) {}
+
+}

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

@@ -0,0 +1,28 @@
+<!-- <div [hidden]="!loading" class="page-spinner">
+    <span class="spinner"></span>
+</div> -->
+<div class="chart-content">
+    <!-- <header class="chart-header">
+        <clr-dropdown class="clr-dropdown">
+            <button class="btn btn-outline-primary chart-button-spacer" clrDropdownTrigger>
+                {{ timeSpanItems[selectedTimeSpan] }}
+                <clr-icon shape="caret down"></clr-icon>
+            </button>
+            <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
+                <div *ngFor="let item of timeSpanItems | keyvalue" clrDropdownItem [class.active]="+item.key === selectedTimeSpan" (click)="selectedTimeSpan = +item.key">
+                    {{ item.value }}
+                </div>
+            </clr-dropdown-menu>
+        </clr-dropdown>
+        <button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day" (click)="handleDateArrowClick(-1)">
+            <clr-icon shape="caret left"></clr-icon>
+        </button>
+        <button class="btn btn-outline-primary chart-button-spacer" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="handleDateArrowClick(1)">
+            <clr-icon shape="caret right"></clr-icon>
+        </button>
+        <button class="btn btn-outline-primary" [hidden]="selectedTimeSpan !== timeSpans.Day || isSelectedDateToday()" (click)="resetToToday()">
+            Today
+        </button>
+    </header> -->
+    <div id="chart" [chart]="chart"></div>
+</div>

Display/src/app/components/weather/charts/weather-charts.component.scss

@@ -0,0 +1,24 @@
+.chart-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#chart {
+    position: absolute;
+    top: 50px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+.chart-header {
+    background-color: rgb(250, 250, 250);
+    height: 50px;
+}
+
+.chart-button-spacer {
+    margin-right: 20px;
+}

Display/src/app/components/weather/charts/weather-charts.component.ts

@@ -0,0 +1,158 @@
+import { Component, OnInit } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+import { SeriesLineOptions } from 'highcharts';
+import { HttpClient } from '@angular/common/http';
+import { WeatherValue } from '../../../services/weather/weather-value';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import * as moment from 'moment';
+
+enum TimeSpan {
+    Last24Hours,
+    Day,
+    Custom
+}
+
+@Component({
+    selector: 'app-weather-charts',
+    templateUrl: './weather-charts.component.html',
+    styleUrls: ['./weather-charts.component.scss']
+})
+export class WeatherChartsComponent implements OnInit {
+
+    public chart: Chart;
+
+    private loading = true;
+    private chartType: string;
+
+    public timeSpanItems: { [value: number]: string } = {};
+    public selectedTimeSpan: TimeSpan = TimeSpan.Last24Hours;
+    public selectedDate: Date = moment().startOf('day').toDate();
+    public timeSpans: typeof TimeSpan = TimeSpan;
+
+    constructor(private route: ActivatedRoute, private httpClient: HttpClient) { }
+
+    ngOnInit() {
+        this.timeSpanItems[TimeSpan.Last24Hours] = 'Last 24 hours';
+        this.timeSpanItems[TimeSpan.Day] = 'Day';
+
+        this.route.params.subscribe(params => {
+            this.loading = true;
+
+            const chartType = params.type;
+
+            switch (chartType) {
+                case 'temperature':
+                    this.chartType = 'PressureTemperature';
+                    break;
+
+                case 'humidity':
+                    this.chartType = 'Humidity';
+                    break;
+
+                case 'pressure':
+                    this.chartType = 'Pressure';
+                    break;
+            }
+
+            this.loadChart();
+        });
+    }
+
+    public handleDateArrowClick(value: number) {
+        this.selectedDate = moment(this.selectedDate).add(value, 'day').toDate();
+
+        this.loadChart();
+    }
+
+    public isSelectedDateToday(): boolean {
+        const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
+
+        return isToday;
+    }
+
+    public resetToToday() {
+        this.selectedDate = moment().startOf('day').toDate();
+
+        this.loadChart();
+    }
+
+    public getSelectedDateDisplayString(): string {
+        return moment(this.selectedDate).format('LL');
+    }
+
+    private loadChart() {
+        let start: Date;
+        let end: Date;
+
+        switch (this.selectedTimeSpan) {
+            case TimeSpan.Last24Hours: {
+                start = moment().subtract(24, 'h').toDate();
+                end = moment().toDate();
+
+                break;
+            }
+
+            case TimeSpan.Day: {
+                start = moment(this.selectedDate).startOf('d').toDate();
+                end = moment(this.selectedDate).endOf('d').toDate();
+
+                break;
+            }
+
+            default: {
+                return;
+            }
+        }
+
+        const startString = moment(start).toISOString();
+        const endString = moment(end).toISOString();
+
+        const request = this.httpClient.get<WeatherValue[]>(`http://172.23.10.3/api/weather/readings/value-history?weatherValueType=${this.chartType}&start=${startString}&end=${endString}&bucketMinutes=5`);
+
+        request.subscribe(data => {
+            const array = [];
+
+            let divisor = 1;
+
+            if (this.chartType === 'Pressure') {
+                divisor = 100;
+            }
+
+            data.forEach(dataElement => array.push([Date.parse(dataElement.bucket), dataElement.averageValue / divisor]));
+
+            this.chart = new Chart({
+                chart: {
+                    type: 'line'
+                },
+                title: {
+                    text: 'Linechart'
+                },
+                credits: {
+                    enabled: true
+                },
+                xAxis: {
+                    type: 'datetime',
+                },
+                yAxis: {
+                    labels: {
+                        format: '{value:.2f}'
+                    }
+                },
+                time: {
+                    useUTC: false
+                },
+                tooltip: {
+                    valueDecimals: 2
+                },
+                series: [
+                    {
+                        name: 'Line 1',
+                        data: array
+                    } as SeriesLineOptions
+                ]
+            });
+
+            this.loading = false;
+        });
+    }
+}

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

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { WeatherReading } from 'src/app/weather/service/weather-reading';
-import { WeatherService } from 'src/app/weather/service/weather.service';
+import { WeatherReading } from '../../../services/weather/weather-reading';
+import { WeatherService } from '../../../services/weather/weather.service';
 
 @Component({
     selector: 'app-weather-current',

Display/src/app/weather/charts/weather-charts.component.html

@@ -1,2 +0,0 @@
-{{loading}}
-<div id="chart" [chart]="chart"></div>

Display/src/app/weather/charts/weather-charts.component.scss

@@ -1,4 +0,0 @@
-#chart {
-    height: 100%;
-    width: 100%;
-}

Display/src/app/weather/charts/weather-charts.component.ts

@@ -1,84 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Chart } from 'angular-highcharts';
-import { SeriesLineOptions } from 'highcharts';
-import { HttpClient } from '@angular/common/http';
-import { WeatherValue } from 'src/app/weather/service/weather-value';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-
-@Component({
-    selector: 'app-weather-charts',
-    templateUrl: './weather-charts.component.html',
-    styleUrls: ['./weather-charts.component.scss']
-})
-export class WeatherChartsComponent implements OnInit {
-
-    private loading = true;
-
-    constructor(private route: ActivatedRoute, private httpClient: HttpClient) { }
-
-    ngOnInit() {
-        this.route.params.subscribe(params => {
-            this.loading = true;
-
-            const chartType = params.type;
-
-            switch (chartType) {
-                case 'temperature':
-                    this.loadChart('PressureTemperature');
-                    return;
-
-                case 'humidity':
-                    this.loadChart('Humidity');
-                    return;
-
-                case 'pressure':
-                    this.loadChart('Pressure');
-                    return;
-            }
-        });
-    }
-
-    private loadChart(chartType: string) {
-        const request = this.httpClient.get<WeatherValue[]>(`http://172.23.10.3/api/weather/readings/value-history?weatherValueType=${chartType}&start=2019-09-11T00:00:00-04:00&end=2019-09-12T00:00:00-04:00&bucketMinutes=5`);
-
-        request.subscribe(data => {
-            const array = [];
-
-            data.forEach(dataElement => array.push([Date.parse(dataElement.bucket), dataElement.averageValue / 100]));
-
-            const chart = new Chart({
-                chart: {
-                    type: 'line'
-                },
-                title: {
-                    text: 'Linechart'
-                },
-                credits: {
-                    enabled: true
-                },
-                xAxis: {
-                    type: 'datetime',
-                },
-                yAxis: {
-                    labels: {
-                        format: '{value:.2f}'
-                    }
-                },
-                time: {
-                    useUTC: false
-                },
-                tooltip: {
-                    valueDecimals: 2
-                },
-                series: [
-                    {
-                        name: 'Line 1',
-                        data: array
-                    } as SeriesLineOptions
-                ]
-            });
-
-            this.loading = false;
-        });
-    }
-}

Display/src/styles.scss

@@ -1,4 +1,9 @@
-/* You can add global styles to this file, and also import other style files */
+html,
+body {
+  height: 100%;
+}
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}