ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-09 09:42:37 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Some work on new UI

Browse Source
This commit is contained in:
Chris Kaczor
2019-09-13 21:02:09 -04:00
parent 7dc326c02f
commit aee51c8a15
20 changed files with 594 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Display/angular.json
View File

@@ -28,10 +28,14 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "node_modules/@clr/icons/clr-icons.min.css",
"node_modules/@clr/ui/clr-ui.min.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": [
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@clr/icons/clr-icons.min.js"
]
}, },
"configurations": { "configurations": {
"production": { "production": {
@@ -94,7 +98,6 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []

763
Display/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
Display/package.json
View File

@@ -17,18 +17,21 @@
"@angular/compiler": "~8.2.4", "@angular/compiler": "~8.2.4",
"@angular/core": "~8.2.4", "@angular/core": "~8.2.4",
"@angular/forms": "~8.2.4", "@angular/forms": "~8.2.4",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "~8.2.4", "@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4", "@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4", "@angular/router": "~8.2.4",
"@aspnet/signalr": "^1.1.4", "@aspnet/signalr": "^1.1.4",
"@clr/angular": "^2.2.0",
"angular-highcharts": "^8.0.3", "angular-highcharts": "^8.0.3",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"highcharts": "^7.2.0", "highcharts": "^7.2.0",
"ngx-socket-io": "^3.0.1", "ngx-socket-io": "^3.0.1",
"rxjs": "~6.4.0", "rxjs": "~6.4.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.9.1" "zone.js": "~0.9.1",
"@clr/ui": "2.2.0",
"@clr/icons": "2.2.0",
"@webcomponents/custom-elements": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.803.3", "@angular-devkit/build-angular": "~0.803.3",

22
Display/src/app/app-routing.module.ts
View File

@@ -1,6 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { WeatherComponent } from './weather/weather.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { LaundryComponent } from './laundry/laundry.component'; import { LaundryComponent } from './laundry/laundry.component';
import { WeatherChartsComponent } from './weather/charts/weather-charts.component'; import { WeatherChartsComponent } from './weather/charts/weather-charts.component';
@@ -13,22 +12,11 @@ const routes: Routes = [
}, },
{ {
path: 'weather', path: 'weather',
component: WeatherComponent, component: WeatherCurrentComponent
children: [ },
{ {
path: '', path: 'weather-charts/:type',
redirectTo: 'current', component: WeatherChartsComponent
pathMatch: 'full'
},
{
path: 'current',
component: WeatherCurrentComponent
},
{
path: 'charts',
component: WeatherChartsComponent
}
]
}, },
{ {
path: 'laundry', path: 'laundry',

61
Display/src/app/app.component.html
View File

@@ -1,12 +1,51 @@
<mat-toolbar color="primary"> <div class="main-container">
<mat-toolbar-row> <header class="header header-3">
<a mat-button [routerLink]="'/'"><h1>Home Status</h1></a> <div class="branding">
<span class="menu-spacer"></span> <a [routerLink]="['/']">
<div> <clr-icon shape="home" class="app-logo"></clr-icon>
<a mat-button [routerLink]="'/weather'">Weather</a> <span class="title">
<a mat-button [routerLink]="'/laundry'">Laundry</a> Home Status
</span>
</a>
</div> </div>
</mat-toolbar-row> </header>
</mat-toolbar> <div class="content-container">
<nav class="sidenav">
<router-outlet></router-outlet> <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>

8
Display/src/app/app.component.scss
View File

@@ -1,3 +1,7 @@
.menu-spacer { .app-logo {
margin-right: 14px; color: white;
width: 1.2rem !important;
height: 1.2rem !important;
position: relative;
top: -2px;
} }

14
Display/src/app/app.module.ts
View File

@@ -1,6 +1,8 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatToolbarModule, MatIconModule, MatSidenavModule, MatListModule, MatButtonModule } from '@angular/material'; import { ChartModule } from 'angular-highcharts';
import { HttpClientModule } from '@angular/common/http';
import { ClarityModule } from '@clr/angular';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
@@ -28,12 +30,10 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
MatToolbarModule, SocketIoModule.forRoot(config),
MatSidenavModule, ChartModule,
MatListModule, HttpClientModule,
MatButtonModule, ClarityModule
MatIconModule,
SocketIoModule.forRoot(config)
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

2
Display/src/app/dashboard/dashboard.component.html
View File

@@ -1 +1 @@
<p>dashboard works!</p> dashboard works!

1
Display/src/app/laundry/laundry.component.scss
View File

@@ -1,5 +1,4 @@
.laundry-current { .laundry-current {
margin: 10px;
font-size: 14px; font-size: 14px;
} }

3
Display/src/app/weather/charts/weather-charts.component.html
View File

@@ -1 +1,2 @@
<p>weather-charts works!</p> {{loading}}
<div id="chart" [chart]="chart"></div>

4
Display/src/app/weather/charts/weather-charts.component.scss
View File

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

81
Display/src/app/weather/charts/weather-charts.component.ts
View File

@@ -1,15 +1,84 @@
import { Component, OnInit } from '@angular/core'; 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({ @Component({
selector: 'app-weather-charts', selector: 'app-weather-charts',
templateUrl: './weather-charts.component.html', templateUrl: './weather-charts.component.html',
styleUrls: ['./weather-charts.component.scss'] styleUrls: ['./weather-charts.component.scss']
}) })
export class WeatherChartsComponent implements OnInit { export class WeatherChartsComponent implements OnInit {
constructor() { } private loading = true;
ngOnInit() { 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;
});
}
} }

112
Display/src/app/weather/current/weather-current.component.html
View File

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

1
Display/src/app/weather/current/weather-current.component.scss
View File

@@ -1,5 +1,4 @@
.weather-current { .weather-current {
margin: 10px;
font-size: 14px; font-size: 14px;
} }

4
Display/src/app/weather/service/weather-value.ts Normal file
View File

@@ -0,0 +1,4 @@
export class WeatherValue {
bucket: string;
averageValue: number;
}

11
Display/src/app/weather/weather.component.html
View File

@@ -1,11 +0,0 @@
<mat-sidenav-container style="height: 88vh;">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="'/weather/current'">Current</a>
<a mat-list-item [routerLink]="'/weather/charts'">Charts</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

3
Display/src/app/weather/weather.component.scss
View File

@@ -1,3 +0,0 @@
mat-sidenav {
width: 150px;
}

25
Display/src/app/weather/weather.component.spec.ts
View File

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

13
Display/src/app/weather/weather.component.ts
View File

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

3
Display/tslint.json
View File

@@ -28,8 +28,7 @@
"interface-name": false, "interface-name": false,
"max-classes-per-file": false, "max-classes-per-file": false,
"max-line-length": [ "max-line-length": [
true, false
140
], ],
"member-access": false, "member-access": false,
"member-ordering": [ "member-ordering": [