Start to reorganize

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