ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 10:58:32 -05:00
Code Issues 9 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 { 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';
import { WeatherCurrentComponent } from './Weather/weather-current/weather-current.component';
const routes: Routes = [ const routes: Routes = [
{ {
@@ -16,11 +17,22 @@ const routes: Routes = [
}, },
{ {
path: 'weather', path: 'weather',
component: WeatherComponent component: WeatherComponent,
}, children: [
{ {
path: 'weather/charts', path: '',
component: WeatherChartsComponent redirectTo: 'current',
pathMatch: 'full'
},
{
path: 'current',
component: WeatherCurrentComponent
},
{
path: 'charts',
component: WeatherChartsComponent
}
]
}, },
{ {
path: 'laundry', path: 'laundry',

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

@@ -13,16 +13,4 @@
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
<mat-sidenav-container> <router-outlet></router-outlet>
<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>

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

@@ -1,7 +1,3 @@
.menu-spacer { .menu-spacer {
margin-right: 14px; 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 { LaundryComponent } from './laundry/laundry.component';
import { DashboardComponent } from './dashboard/dashboard.component'; import { DashboardComponent } from './dashboard/dashboard.component';
import { WeatherChartsComponent } from './weather-charts/weather-charts.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: {} }; 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, WeatherComponent,
LaundryComponent, LaundryComponent,
DashboardComponent, DashboardComponent,
WeatherChartsComponent WeatherChartsComponent,
WeatherCurrentComponent
], ],
imports: [ imports: [
BrowserModule, 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"> <mat-sidenav-container style="height: 88vh;">
<div *ngIf="latestReading === null"> <mat-sidenav #sidenav mode="side" opened>
Loading... <mat-nav-list>
</div> <a mat-list-item [routerLink]="'/weather/current'">Current</a>
<a mat-list-item [routerLink]="'/weather/charts'">Charts</a>
<div *ngIf="latestReading !== null"> </mat-nav-list>
<table> </mat-sidenav>
<tr> <mat-sidenav-content>
<td class="weather-current-header"> <router-outlet></router-outlet>
Temperature </mat-sidenav-content>
</td> </mat-sidenav-container>
<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>

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

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

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

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