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

Adjust weather layout

Browse Source
This commit is contained in:
Chris Kaczor
2019-09-10 20:56:13 -04:00
parent 38c32b4c3b
commit b69f4c70f1
11 changed files with 149 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ 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';
import { WeatherCurrentComponent } from './Weather/weather-current/weather-current.component';
const routes: Routes = [
{
@@ -16,11 +17,22 @@ const routes: Routes = [
},
{
path: 'weather',
component: WeatherComponent
},
{
path: 'weather/charts',
component: WeatherChartsComponent
component: WeatherComponent,
children: [
{
path: '',
redirectTo: 'current',
pathMatch: 'full'
},
{
path: 'current',
component: WeatherCurrentComponent
},
{
path: 'charts',
component: WeatherChartsComponent
}
]
},
{
path: 'laundry',

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

@@ -13,16 +13,4 @@
</mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="'/weather'">Current</a>
<a mat-list-item [routerLink]="'/weather/charts'">Charts</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 88vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<router-outlet></router-outlet>

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

@@ -1,7 +1,3 @@
.menu-spacer {
margin-right: 14px;
}
mat-sidenav {
width: 150px;
}

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

@@ -11,6 +11,7 @@ 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/weather-current/weather-current.component';
const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options: {} };
@@ -20,7 +21,8 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
WeatherComponent,
LaundryComponent,
DashboardComponent,
WeatherChartsComponent
WeatherChartsComponent,
WeatherCurrentComponent
],
imports: [
BrowserModule,

60
Display/src/app/weather/weather-current/weather-current.component.html Normal file
View File

@@ -0,0 +1,60 @@
<div style="height: 88vh;">
<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>
</div>

10
Display/src/app/weather/weather-current/weather-current.component.scss Normal file
View File

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

25
Display/src/app/weather/weather-current/weather-current.component.spec.ts Normal file
View File

@@ -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();
});
});

19
Display/src/app/weather/weather-current/weather-current.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component, OnInit } from '@angular/core';
import { WeatherReading } from 'src/app/weather-reading';
import { WeatherService } from 'src/app/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);
}
}

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

@@ -1,58 +1,11 @@
<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>
<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>

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

@@ -1,10 +1,3 @@
.weather-current {
margin: 10px;
font-size: 14px;
}
.weather-current-header {
font-weight: 500;
text-align: right;
padding-right: 10px;
mat-sidenav {
width: 150px;
}

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

@@ -1,6 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { WeatherService } from '../weather.service';
import { WeatherReading } from '../weather-reading';
@Component({
selector: 'app-weather',
@@ -8,11 +6,8 @@ import { WeatherReading } from '../weather-reading';
styleUrls: ['./weather.component.scss']
})
export class WeatherComponent implements OnInit {
public latestReading: WeatherReading;
constructor(private weatherService: WeatherService) { }
constructor() { }
ngOnInit() {
this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
}
}