ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues 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"
],
"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"
],
"scripts": []
"scripts": [
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@clr/icons/clr-icons.min.js"
]
},
"configurations": {
"production": {
@@ -94,7 +98,6 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
"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/core": "~8.2.4",
"@angular/forms": "~8.2.4",
"@angular/material": "^8.1.4",
"@angular/platform-browser": "~8.2.4",
"@angular/platform-browser-dynamic": "~8.2.4",
"@angular/router": "~8.2.4",
"@aspnet/signalr": "^1.1.4",
"@clr/angular": "^2.2.0",
"angular-highcharts": "^8.0.3",
"hammerjs": "^2.0.8",
"highcharts": "^7.2.0",
"ngx-socket-io": "^3.0.1",
"rxjs": "~6.4.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": {
"@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 { Routes, RouterModule } from '@angular/router';
import { WeatherComponent } from './weather/weather.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LaundryComponent } from './laundry/laundry.component';
import { WeatherChartsComponent } from './weather/charts/weather-charts.component';
@@ -13,22 +12,11 @@ const routes: Routes = [
},
{
path: 'weather',
component: WeatherComponent,
children: [
{
path: '',
redirectTo: 'current',
pathMatch: 'full'
},
{
path: 'current',
component: WeatherCurrentComponent
},
{
path: 'charts',
component: WeatherChartsComponent
}
]
component: WeatherCurrentComponent
},
{
path: 'weather-charts/:type',
component: WeatherChartsComponent
},
{
path: 'laundry',

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

@@ -1,12 +1,51 @@
<mat-toolbar color="primary">
<mat-toolbar-row>
<a mat-button [routerLink]="'/'"><h1>Home Status</h1></a>
<span class="menu-spacer"></span>
<div>
<a mat-button [routerLink]="'/weather'">Weather</a>
<a mat-button [routerLink]="'/laundry'">Laundry</a>
<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>
</mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>
</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>

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

@@ -1,3 +1,7 @@
.menu-spacer {
margin-right: 14px;
.app-logo {
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 { 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 { AppComponent } from './app.component';
@@ -28,12 +30,10 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatSidenavModule,
MatListModule,
MatButtonModule,
MatIconModule,
SocketIoModule.forRoot(config)
SocketIoModule.forRoot(config),
ChartModule,
HttpClientModule,
ClarityModule
],
providers: [],
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 {
margin: 10px;
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 { 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']
selector: 'app-weather-charts',
templateUrl: './weather-charts.component.html',
styleUrls: ['./weather-charts.component.scss']
})
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 *ngIf="latestReading === null">
Loading...
</div>
<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 *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>

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

@@ -1,5 +1,4 @@
.weather-current {
margin: 10px;
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() {
}
}

5
Display/tslint.json
View File

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