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

Switched to accuWeather and updated some css

Browse Source
This commit is contained in:
Zakary Timson
2019-01-02 00:29:18 -05:00
parent 454fe07d49
commit 1ee0606b5b
14 changed files with 148 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,9 @@
<div class="w-100 p-3" [style.backgroundColor]="day ? '#88aaff' : '#000e31'">
<div class="fill-height p-3" [style.backgroundColor]="day ? '#88aaff' : '#000e31'" style="overflow-y: scroll">
<!-- Current Weather -->
<div class="my-5 d-flex flex-column align-items-center">
<div class="d-flex flex-column align-items-center">
<div>
<h3 class="mb-0 text-center">London, ON</h3>
<h3>{{weatherService.weather?.currently.summary}}</h3>
<h3>{{weatherService.weather[0].phrase}}</h3>
</div>
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
<div class="p-3 text-center">
@ -12,23 +12,23 @@
<div class="d-flex">
<div class="d-flex flex-column mr-3">
<div>
<h1 class="mb-0">{{weatherService.weather?.currently.temperature | round: 1}} °C</h1>
<h1 class="mb-0">{{weatherService.weather[0].current | round: 1}} °C</h1>
</div>
<div>
Feels Like: {{weatherService.weather?.currently.apparentTemperature | round}} °C
Feels Like: {{weatherService.weather[0].feelsLike | round}} °C
</div>
</div>
<div class="d-flex flex-column">
<div>
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
{{weatherService.weather?.daily.data[0].temperatureHigh | round}} °C
{{weatherService.weather[0].high | 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
{{weatherService.weather[0].low | round}} °C
</div>
<div>
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather[0].pop * 100 | round}}%
</div>
</div>
</div>
@ -37,11 +37,11 @@
<!-- Forecast -->
<mat-card class="m-3 mx-auto" style="max-width: 450px">
<div class="d-flex justify-content-center">
<div *ngFor="let day of weatherService.weather?.daily.data.slice(1, 7)" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
{{day.time.toString().slice(0, 4).toUpperCase()}}
<div *ngFor="let day of weatherService.weather.slice(1, 5)" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
{{day.date.toString().slice(0, 4).toUpperCase()}}
<i [class]="'my-2 wi wi-fw ' + day.icon" style="font-size: 2rem"></i>
<div class="text-center">{{day.temperatureHigh | round}} °C</div>
<div class="text-center text-muted">{{day.temperatureLow | round}} °C</div>
<div class="text-center">{{day.high | round}} °C</div>
<div class="text-center text-muted">{{day.low | round}} °C</div>
</div>
</div>
</mat-card>
@ -50,13 +50,13 @@
<h5>Sunlight</h5>
<div class="d-flex justify-content-center">
<div class="d-flex align-items-center flex-grow-1">
<i class="wi wi-sunrise mr-1"></i> {{weatherService.weather?.daily.data[0].sunriseTime | date: 'shortTime'}}
<i class="wi wi-sunrise mr-1"></i> {{weatherService.weather[0].sunrise | date: 'shortTime'}}
</div>
<div class="d-flex align-items-center justify-content-center flex-grow-1">
<i class="wi wi-fw wi-cloud mr-1"></i> {{weatherService.weather?.currently.cloudCover * 100 | round}}%
<i class="wi wi-fw wi-cloud mr-1"></i> {{weatherService.weather[0].cloudCover * 100 | round}}%
</div>
<div class="d-flex align-items-center justify-content-end flex-grow-1">
<i class="wi wi-sunset mr-1"></i> {{weatherService.weather?.daily.data[0].sunsetTime | date: 'shortTime'}}
<i class="wi wi-sunset mr-1"></i> {{weatherService.weather[0].sunset | date: 'shortTime'}}
</div>
</div>
<canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
@ -66,47 +66,17 @@
<h5>Wind</h5>
<div class="d-flex justify-content-center">
<div class="d-flex align-items-center flex-grow-1">
<i class="wi wi-fw wi-windy"></i> {{weatherService.weather?.currently.windSpeed | round}} km/h
<i class="wi wi-fw wi-windy"></i> {{weatherService.weather[0].wind.speed | round}} km/h
</div>
<div class="d-flex align-items-center justify-content-center flex-grow-1">
{{weatherService.weather?.currently.windBearing}}°
{{weatherService.weather[0].wind.direction}}°
</div>
<div class="d-flex align-items-center justify-content-end flex-grow-1">
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.weather?.currently.windGust | round}} km/h
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.weather[0].wind.gusts | round}} km/h
</div>
</div>
<div class="p-3 text-center">
<i class="wi wi-wind wi-fw wi-towards-0" [style.transform]="'rotate(' + weatherService.weather?.currently.windBearing + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
<i class="wi wi-wind wi-fw wi-towards-0" [style.transform]="'rotate(' + weatherService.weather[0].wind.direction + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
</div>
</mat-card>
<!-- Atmospheric -->
<mat-card class="m-3 mx-auto" style="max-width: 450px">
<h5>Atmospheric</h5>
<div class="d-flex">
<div class="flex-grow-1">
<div>
<i class="wi wi-fw wi-barometer"></i> {{weatherService.weather?.currently.pressure / 10 | round: 1}} kPa
</div>
<div>
<i class="wi wi-fw wi-hot"></i> UV Index: {{weatherService.weather?.currently.uvIndex}}
</div>
<div>
<mat-icon>remove_red_eye</mat-icon> {{weatherService.weather?.currently.visibility | round}} km
</div>
</div>
<div class="flex-grow-1">
<div>
<i class="wi wi-fw wi-humidity"></i> {{weatherService.weather?.currently.humidity * 100 | round}}% Humidity
</div>
<div>
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
</div>
<div>
<i class="wi wi-fw wi-flood"></i> {{weatherService.weather?.daily.data[0].precipAccumulation | round: 1}} cm {{weatherService.weather?.daily.data[0].precipType}}
</div>
</div>
</div>
</mat-card>
</div>