ztimson/homefront
ztimson/homefront
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Use current weather icon in nav bar

Browse Source
This commit is contained in:
Zakary Timson 2018-11-14 15:00:27 -05:00
parent c733f38e7e
commit 1e1af77150
4 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="battery" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">{{batteryService.icon}}</mat-icon> Power Wall</span></a> <a mat-list-item routerLink="battery" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">{{batteryService.icon}}</mat-icon> Power Wall</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">cloud</mat-icon> Weather</span></a> <a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><i [class]="'mr-2 scale-150 wi wi-fw ' + weatherService.icon"></i> Weather</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="security" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">security</mat-icon> Security</span></a> <a mat-list-item routerLink="security" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">security</mat-icon> Security</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>

3
src/app/app.component.ts
View File

@ -5,6 +5,7 @@ import {environment} from '../environments/environment';
import {expandDown, routerTransition} from './animations'; import {expandDown, routerTransition} from './animations';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators'; import {filter} from 'rxjs/operators';
import {WeatherService} from './weather/weather.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -17,7 +18,7 @@ export class AppComponent {
open = false; open = false;
environment = environment; environment = environment;
constructor(public batteryService: BatteryService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { constructor(public batteryService: BatteryService, public weatherService: WeatherService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
this.hide = !!route.root.firstChild.snapshot.data.hide; this.hide = !!route.root.firstChild.snapshot.data.hide;
this.open = !this.hide && !this.mobile; this.open = !this.hide && !this.mobile;

4
src/app/weather/weather.component.html
View File

@ -1,6 +1,6 @@
<div> <div>
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;"> <div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
<i [class]="'wi wi-fw wi-' + weatherService.icon" style="font-size: 6rem"></i> <i [class]="'wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
<div class="ml-0 ml-md-3"> <div class="ml-0 ml-md-3">
<h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1> <h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
<h3 class="m-0">{{weatherService.weather}}</h3> <h3 class="m-0">{{weatherService.weather}}</h3>
@ -21,7 +21,7 @@
<div class="my-4 d-flex justify-content-center"> <div class="my-4 d-flex justify-content-center">
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1"> <div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
{{w.day}} {{w.day}}
<i [class]="'my-2 wi wi-fw wi-' + w.icon" style="font-size: 2rem"></i> <i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
{{w.temp}} °C {{w.temp}} °C
</div> </div>
</div> </div>

4
src/app/weather/weather.service.ts
View File

@ -32,7 +32,7 @@ export class WeatherService {
httpClient.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => { httpClient.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => {
this.cloudCover = weather.clouds.all; this.cloudCover = weather.clouds.all;
this.humidity = weather.main.humidity; this.humidity = weather.main.humidity;
this.icon = this.weatherCodes[weather.weather[0].id].icon; this.icon = `wi-${this.weatherCodes[weather.weather[0].id].icon}`;
this.pressure = weather.main.pressure; this.pressure = weather.main.pressure;
this.sunrise = new Date(weather.sys.sunrise); this.sunrise = new Date(weather.sys.sunrise);
this.sunset = new Date(weather.sys.sunset); this.sunset = new Date(weather.sys.sunset);
@ -49,7 +49,7 @@ export class WeatherService {
temp.splice(0, temp.length - 5); temp.splice(0, temp.length - 5);
this.forecast = temp.map(weather => ({ this.forecast = temp.map(weather => ({
day: this.days[new Date(weather.dt_txt).getDay()], day: this.days[new Date(weather.dt_txt).getDay()],
icon: this.weatherCodes[weather.weather[0].id].icon, icon: `wi-${this.weatherCodes[weather.weather[0].id].icon}`,
temp: Math.round(weather.main.temp) temp: Math.round(weather.main.temp)
})); }));
}); });