Start to reorganize

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

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

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

@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'Display'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Display');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('Display app is running!');
+  });
+});

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/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+dashboard works!

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,24 @@
+<div class="laundry-current">
+    <div *ngIf="latestStatus === null">
+        Loading...
+    </div>
+    <div *ngIf="latestStatus !== null">
+        <table>
+            <tr>
+                <td class="laundry-current-header">
+                    Washer
+                </td>
+                <td [ngClass]="latestStatus.washer.toString()">
+                    {{ latestStatus.washer ? 'On' : 'Off' }}
+                </td>
+            </tr>
+            <tr>
+                <td class="laundry-current-header">
+                    Dryer
+                </td>
+                <td [ngClass]="latestStatus.dryer.toString()">
+                    {{ latestStatus.dryer ? 'On' : 'Off' }}
+                </td>
+            </tr>
+        </table>
+    </div>

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

@@ -0,0 +1,17 @@
+.laundry-current {
+    font-size: 14px;
+}
+
+.laundry-current-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 10px;
+}
+
+.true {
+	color: darkgoldenrod;
+}
+
+.false {
+	color: darkgreen;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LaundryComponent } from './laundry.component';
+
+describe('LaundryComponent', () => {
+  let component: LaundryComponent;
+  let fixture: ComponentFixture<LaundryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LaundryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LaundryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { LaundryService } from '../../services/laundry/laundry.service';
+import { LaundryStatus } from '../../services/laundry/laundry-status';
+
+@Component({
+    selector: 'app-laundry',
+    templateUrl: './laundry.component.html',
+    styleUrls: ['./laundry.component.scss']
+})
+export class LaundryComponent implements OnInit {
+    public latestStatus: LaundryStatus;
+    constructor(private laundryService: LaundryService) { }
+
+    ngOnInit() {
+        this.laundryService.getLatestStatus().subscribe(s => this.latestStatus = s);
+    }
+}

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.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherChartsComponent } from './weather-charts.component';
+
+describe('WeatherChartsComponent', () => {
+  let component: WeatherChartsComponent;
+  let fixture: ComponentFixture<WeatherChartsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WeatherChartsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WeatherChartsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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.html

@@ -0,0 +1,58 @@
+<div class="weather-current">
+    <div *ngIf="latestReading === null">
+        Loading...
+    </div>
+
+    <div *ngIf="latestReading !== null">
+        <table>
+            <tr>
+                <td class="weather-current-header">
+                    Temperature
+                </td>
+                <td>
+                    {{ latestReading.HumidityTemperature.toFixed(2) }}°F
+                </td>
+            </tr>
+            <tr>
+                <td class="weather-current-header">
+                    Humidity
+                </td>
+                <td>
+                    {{ latestReading.Humidity.toFixed(2) }}%
+                </td>
+            </tr>
+            <tr>
+                <td class="weather-current-header">
+                    Pressure
+                </td>
+                <td>
+                    {{ (latestReading.Pressure / 100).toFixed(2) }} mbar
+                </td>
+            </tr>
+            <tr>
+                <td class="weather-current-header">
+                    Wind
+                </td>
+                <td>
+                    {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }}
+                </td>
+            </tr>
+            <tr>
+                <td class="weather-current-header">
+                    Rain
+                </td>
+                <td>
+                    {{ latestReading.Rain.toFixed(2) }}
+                </td>
+            </tr>
+            <tr>
+                <td class="weather-current-header">
+                    Light
+                </td>
+                <td>
+                    {{ latestReading.LightLevel.toFixed(2) }}
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,9 @@
+.weather-current {
+    font-size: 14px;
+}
+
+.weather-current-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 10px;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherCurrentComponent } from './weather-current.component';
+
+describe('WeatherCurrentComponent', () => {
+  let component: WeatherCurrentComponent;
+  let fixture: ComponentFixture<WeatherCurrentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WeatherCurrentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WeatherCurrentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { WeatherReading } from '../../../services/weather/weather-reading';
+import { WeatherService } from '../../../services/weather/weather.service';
+
+@Component({
+    selector: 'app-weather-current',
+    templateUrl: './weather-current.component.html',
+    styleUrls: ['./weather-current.component.scss']
+})
+export class WeatherCurrentComponent implements OnInit {
+
+    public latestReading: WeatherReading;
+
+    constructor(private weatherService: WeatherService) { }
+
+    ngOnInit() {
+        this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
+    }
+}