Added more stuff

src/app/animations.ts

@@ -9,24 +9,28 @@ import {
 export const expandDown = trigger('expandDown', [
     transition('void => *', [
         style({opacity: 0, transform: 'translateY(-100%)'}),
-        animate('0.5s ease-in-out', style({opacity: 1, transform: 'translateY(0%)'}))
+        animate('0.5s', style({opacity: 1, transform: 'translateY(0%)'}))
+    ])
+]);
+
+export const fade = trigger('fade', [
+    transition('void => *', [
+        style({opacity: 0}),
+        animate('0.5s ease-in-out', style({opacity: 1}))
     ])
 ]);
 
 export const routerTransition = trigger('routerTransition', [
     transition('* <=> *', [
-        /* order */
-        /* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' })
-            , { optional: true }),
-        /* 2 */ group([  // block executes in parallel
+        query(':enter, :leave', style({position: 'fixed', width: '100%'}), {optional: true}),
+        group([
             query(':enter', [
-                style({ transform: 'translateX(100%)' }),
-                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
-            ], { optional: true }),
-            query(':leave', [
-                style({ transform: 'translateX(0%)' }),
-                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
-            ], { optional: true }),
+                style({transform: 'translateX(100%)'}),
+                animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
+            ], {optional: true}), query(':leave', [
+                style({transform: 'translateX(0%)'}),
+                animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
+            ], {optional: true}),
         ])
     ])
 ]);

src/app/app.module.ts

@@ -10,7 +10,7 @@ import {
     MatCardModule,
     MatDividerModule, MatFormFieldModule,
     MatIconModule, MatInputModule,
-    MatListModule, MatProgressBarModule,
+    MatListModule, MatProgressSpinnerModule,
     MatSidenavModule,
     MatToolbarModule
 } from '@angular/material';
@@ -24,6 +24,7 @@ import { LoginComponent } from './login/login.component';
 import {environment} from '../environments/environment';
 import * as firebase from 'firebase/app';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import {LineChartModule} from '@swimlane/ngx-charts';
 
 export const firebaseApp = firebase.initializeApp(environment.firebase);
 
@@ -43,6 +44,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         BrowserAnimationsModule,
         FormsModule,
         HttpClientModule,
+        LineChartModule,
         MatButtonModule,
         MatCardModule,
         MatDividerModule,
@@ -50,7 +52,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         MatIconModule,
         MatInputModule,
         MatListModule,
-        MatProgressBarModule,
+        MatProgressSpinnerModule,
         MatSidenavModule,
         MatToolbarModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),

src/app/battery/battery.component.html

@@ -1,3 +1,8 @@
-<p>
-  batterys works!
-</p>
+<h1>BATTERY LEVEL: <span class="text-muted">{{batteryService.charging == null ? 'UNKNOWN' : batteryService.average}}</span></h1>
+<mat-card>
+    <h3>EMULATOR: <span class="text-muted">75%</span></h3>
+    <div>
+        <mat-icon style="font-size: 128px; height:128px; width:128px">{{batteryService.icon}}</mat-icon>
+        <i class="wi wi-fw wi-thermometer-exterior"></i> {{tempHist[tempHist.length - 1]}} °C
+    </div>
+</mat-card>

src/app/battery/battery.component.ts

@@ -1,14 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
+import {BatteryService} from './battery.service';
+import {firebaseApp} from '../app.module';
 
 @Component({
-  selector: 'app-batterys',
-  templateUrl: './battery.component.html'
+    selector: 'app-batterys',
+    templateUrl: './battery.component.html'
 })
-export class BatteryComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
+export class BatteryComponent {
+    tempHist = [];
 
+    constructor(public batteryService: BatteryService) {
+        firebaseApp.firestore().collection('Battery').doc('TEMP').onSnapshot(snap => {
+            this.tempHist.push(Math.round(snap.get('temp') * 10) / 10);
+        })
+    }
 }

src/app/battery/battery.service.ts

@@ -5,7 +5,7 @@ import {Injectable} from '@angular/core';
 })
 export class BatteryService {
     percentage: number[] = [0];
-    charging: boolean;
+    charging?: boolean;
 
     get average() {
         return this.percentage.reduce((acc, battery) => acc + battery, 0) / this.percentage.length;

src/app/login/login.component.html

@@ -1,19 +1,5 @@
-<!--
-<div class="align-self-center">
-    <div class="text-center">
-        <div>
-            <h1 class="d-inline text-white">Home Front</h1>
-            <div [@growX]="true" class="d-inline">
-                <span class="pl-2" style="color: #b7b7b7">v{{environment.version}}</span>
-            </div>
-        </div>
-    </div>
-    <div class="mt-5 text-center">
-        <img src="assets/icon-white.png" width="275px" height="auto">
-    </div>
-    <button mat-stroked-button class="mt-5" (click)="login()" [disabled]="loading">Login With Google</button>
-</div>
--->
+<div *ngIf="loading" [@fade]="true" style="position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);"></div>
+
 <div class="center">
     <div class="text-center">
         <h1 class="d-inline text-white">Home Front</h1>
@@ -22,6 +8,6 @@
         <img src="assets/icon-white.png" width="275px" height="auto">
     </div>
 </div>
-<div class="off-center" [@expandDown]="animate">
+<div class="off-center" [@expandDown]="true">
     <button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
 </div>

src/app/login/login.component.ts

@@ -2,15 +2,15 @@ import {Component, NgZone, OnInit} from '@angular/core';
 import {firebaseApp} from '../app.module';
 import {Router} from '@angular/router';
 import * as firebase from 'firebase';
-import {expandDown} from '../animations';
+import {expandDown, fade} from '../animations';
 
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
-    animations: [expandDown]
+    animations: [expandDown, fade]
 })
 export class LoginComponent implements OnInit {
-    animate = false;
+    loading = false;
 
     constructor(private router: Router, private ngZone: NgZone) { }
 
@@ -18,15 +18,13 @@ export class LoginComponent implements OnInit {
         firebaseApp.auth().onAuthStateChanged(user => {
             if(!!user) this.ngZone.run(() => this.router.navigate(['/dashboard']));
         });
-
-        setTimeout(() => this.ngZone.run(() => this.animate = true), 1000);
     }
 
     async login() {
+        this.loading = true;
         await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
-        await firebaseApp.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
-        this.ngZone.run(() => {
-            return this.router.navigate(['/dashboard']);
-        });
+        await firebaseApp.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());
+        this.loading = false;
+        this.router.navigate(['/dashboard']);
     }
 }

src/app/weather/weather.service.ts

@@ -1,6 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
 import {timer} from 'rxjs';
+import {database} from 'firebase';
 
 @Injectable({
     providedIn: 'root'

src/styles.scss

@@ -52,6 +52,10 @@ html, body {
     }
 }
 
+.text-muted {
+    color: #7f7f7f !important;
+}
+
 .mat-divider {
     color: #9CA4B6 !important;
 }