From b69f4c70f18712fb44753d91842942d6ea344507 Mon Sep 17 00:00:00 2001 From: Chris Kaczor Date: Tue, 10 Sep 2019 20:56:13 -0400 Subject: [PATCH] Adjust weather layout --- Display/src/app/app-routing.module.ts | 22 ++++-- Display/src/app/app.component.html | 14 +--- Display/src/app/app.component.scss | 4 -- Display/src/app/app.module.ts | 4 +- .../weather-current.component.html | 60 ++++++++++++++++ .../weather-current.component.scss | 10 +++ .../weather-current.component.spec.ts | 25 +++++++ .../weather-current.component.ts | 19 +++++ .../src/app/weather/weather.component.html | 69 +++---------------- .../src/app/weather/weather.component.scss | 11 +-- Display/src/app/weather/weather.component.ts | 7 +- 11 files changed, 149 insertions(+), 96 deletions(-) create mode 100644 Display/src/app/weather/weather-current/weather-current.component.html create mode 100644 Display/src/app/weather/weather-current/weather-current.component.scss create mode 100644 Display/src/app/weather/weather-current/weather-current.component.spec.ts create mode 100644 Display/src/app/weather/weather-current/weather-current.component.ts diff --git a/Display/src/app/app-routing.module.ts b/Display/src/app/app-routing.module.ts index c518228..99ea949 100644 --- a/Display/src/app/app-routing.module.ts +++ b/Display/src/app/app-routing.module.ts @@ -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', diff --git a/Display/src/app/app.component.html b/Display/src/app/app.component.html index 698906f..2ddc9e2 100644 --- a/Display/src/app/app.component.html +++ b/Display/src/app/app.component.html @@ -13,16 +13,4 @@ - - - - Current - Charts - - - -
- -
- - + diff --git a/Display/src/app/app.component.scss b/Display/src/app/app.component.scss index d080734..a80e4fe 100644 --- a/Display/src/app/app.component.scss +++ b/Display/src/app/app.component.scss @@ -1,7 +1,3 @@ .menu-spacer { margin-right: 14px; } - -mat-sidenav { - width: 150px; -} diff --git a/Display/src/app/app.module.ts b/Display/src/app/app.module.ts index be0b089..5acc38b 100644 --- a/Display/src/app/app.module.ts +++ b/Display/src/app/app.module.ts @@ -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, diff --git a/Display/src/app/weather/weather-current/weather-current.component.html b/Display/src/app/weather/weather-current/weather-current.component.html new file mode 100644 index 0000000..cd189d6 --- /dev/null +++ b/Display/src/app/weather/weather-current/weather-current.component.html @@ -0,0 +1,60 @@ +
+
+
+ Loading... +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ Temperature + + {{ latestReading.HumidityTemperature.toFixed(2) }}°F +
+ Humidity + + {{ latestReading.Humidity.toFixed(2) }}% +
+ Pressure + + {{ (latestReading.Pressure / 100).toFixed(2) }} mbar +
+ Wind + + {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }} +
+ Rain + + {{ latestReading.Rain.toFixed(2) }} +
+ Light + + {{ latestReading.LightLevel.toFixed(2) }} +
+
+
+
diff --git a/Display/src/app/weather/weather-current/weather-current.component.scss b/Display/src/app/weather/weather-current/weather-current.component.scss new file mode 100644 index 0000000..4281c4e --- /dev/null +++ b/Display/src/app/weather/weather-current/weather-current.component.scss @@ -0,0 +1,10 @@ +.weather-current { + margin: 10px; + font-size: 14px; +} + +.weather-current-header { + font-weight: 500; + text-align: right; + padding-right: 10px; +} diff --git a/Display/src/app/weather/weather-current/weather-current.component.spec.ts b/Display/src/app/weather/weather-current/weather-current.component.spec.ts new file mode 100644 index 0000000..371d9af --- /dev/null +++ b/Display/src/app/weather/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WeatherCurrentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WeatherCurrentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Display/src/app/weather/weather-current/weather-current.component.ts b/Display/src/app/weather/weather-current/weather-current.component.ts new file mode 100644 index 0000000..3f1d4c2 --- /dev/null +++ b/Display/src/app/weather/weather-current/weather-current.component.ts @@ -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); + } +} diff --git a/Display/src/app/weather/weather.component.html b/Display/src/app/weather/weather.component.html index 665b134..f889ab2 100644 --- a/Display/src/app/weather/weather.component.html +++ b/Display/src/app/weather/weather.component.html @@ -1,58 +1,11 @@ -
-
- Loading... -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- Temperature - - {{ latestReading.HumidityTemperature.toFixed(2) }}°F -
- Humidity - - {{ latestReading.Humidity.toFixed(2) }}% -
- Pressure - - {{ (latestReading.Pressure / 100).toFixed(2) }} mbar -
- Wind - - {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }} -
- Rain - - {{ latestReading.Rain.toFixed(2) }} -
- Light - - {{ latestReading.LightLevel.toFixed(2) }} -
-
-
+ + + + Current + Charts + + + + + + diff --git a/Display/src/app/weather/weather.component.scss b/Display/src/app/weather/weather.component.scss index 4281c4e..17f87c1 100644 --- a/Display/src/app/weather/weather.component.scss +++ b/Display/src/app/weather/weather.component.scss @@ -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; } diff --git a/Display/src/app/weather/weather.component.ts b/Display/src/app/weather/weather.component.ts index c478789..3d19651 100644 --- a/Display/src/app/weather/weather.component.ts +++ b/Display/src/app/weather/weather.component.ts @@ -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); } }