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

Added weather widget

Browse Source
This commit is contained in:
Zakary Timson
2019-01-01 20:51:03 -05:00
parent 83f4385e95
commit 02807cb59a
8 changed files with 83 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/weather/widget/weatherWidget.component.html Normal file
View File

@ -0,0 +1,30 @@
<div class="w-100 h-100">
<div class="d-flex align-items-center">
<div>
<h3 class="mb-0">London, ON</h3>
<h3 class="mb-0">{{weatherService.weather?.currently.summary}}</h3>
</div>
<div><i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i></div>
<div>
<div>
<h1 class="mb-0">{{weatherService.weather?.currently.temperature | round: 1}} °C</h1>
</div>
<div>
Feels Like: {{weatherService.weather?.currently.apparentTemperature | round}} °C
</div>
</div>
<div class="pl-3">
<div>
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
{{weatherService.weather?.daily.data[0].temperatureHigh | round}} °C
</div>
<div>
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
{{weatherService.weather?.daily.data[0].temperatureLow | round}} °C
</div>
<div>
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
</div>
</div>
</div>
</div>

10
src/app/weather/widget/weatherWidget.component.ts Normal file
View File

@ -0,0 +1,10 @@
import {Component} from '@angular/core';
import {WeatherService} from '../weather.service';
@Component({
selector: 'weather-widget',
templateUrl: './weatherWidget.component.html'
})
export class WeatherWidgetComponent {
constructor(public weatherService: WeatherService) { }
}