Added weather widget
This commit is contained in:
parent
83f4385e95
commit
02807cb59a
@ -25,20 +25,22 @@ import * as firebase from 'firebase/app';
|
||||
import {ServiceWorkerModule} from '@angular/service-worker';
|
||||
import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts';
|
||||
import {RoundPipe} from './round.pipe';
|
||||
import { WidgetComponent } from './battery/widget/widget.component';
|
||||
import {BatteryWidgetComponent} from './battery/widget/batteryWidget.component';
|
||||
import {WeatherWidgetComponent} from './weather/widget/weatherWidget.component';
|
||||
|
||||
export const firebaseApp = firebase.initializeApp(environment.firebase);
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
BatteryWidgetComponent,
|
||||
DashboardComponent,
|
||||
BatteryComponent,
|
||||
WeatherComponent,
|
||||
SecurityComponent,
|
||||
LoginComponent,
|
||||
RoundPipe,
|
||||
WidgetComponent
|
||||
WeatherWidgetComponent
|
||||
],
|
||||
imports: [
|
||||
AppRoutingModule,
|
||||
|
10
src/app/battery/widget/batteryWidget.component.ts
Normal file
10
src/app/battery/widget/batteryWidget.component.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {BatteryService} from '../battery.service';
|
||||
|
||||
@Component({
|
||||
selector: 'battery-widget',
|
||||
templateUrl: './batteryWidget.component.html'
|
||||
})
|
||||
export class BatteryWidgetComponent {
|
||||
constructor(public batteryService: BatteryService) { }
|
||||
}
|
@ -1,13 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {BatteryService} from '../battery.service';
|
||||
|
||||
@Component({
|
||||
selector: 'battery-widget',
|
||||
templateUrl: './widget.component.html'
|
||||
})
|
||||
export class WidgetComponent implements OnInit {
|
||||
|
||||
constructor(public batteryService: BatteryService) { }
|
||||
|
||||
ngOnInit() { }
|
||||
}
|
@ -1,7 +1,22 @@
|
||||
<div class="p-3">
|
||||
<div class="desktop-height p-3">
|
||||
<div>
|
||||
<h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
|
||||
<h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
|
||||
</div>
|
||||
<div class="mt-3 d-flex">
|
||||
<div class="flex-grow-1 pr-2">
|
||||
<mat-card class="w-100 hover" routerLink="/weather">
|
||||
<mat-card-content>
|
||||
<weather-widget class="mx-auto"></weather-widget>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="flex-grow-1 pl-2">
|
||||
<mat-card class="w-100 hover" routerLink="/battery">
|
||||
<mat-card-content>
|
||||
<battery-widget></battery-widget>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,15 +1,13 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {AppComponent} from '../app.component';
|
||||
import {Component} from '@angular/core';
|
||||
import {timer} from 'rxjs';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html'
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
constructor(private app: AppComponent) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
export class DashboardComponent {
|
||||
now = timer(0, 1000).pipe(map(() => new Date()));
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
30
src/app/weather/widget/weatherWidget.component.html
Normal file
30
src/app/weather/widget/weatherWidget.component.html
Normal 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
10
src/app/weather/widget/weatherWidget.component.ts
Normal 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) { }
|
||||
}
|
Loading…
Reference in New Issue
Block a user