Merged battery repo

website/src/app/animations.ts

@@ -0,0 +1,50 @@
+import {
+    trigger,
+    animate,
+    transition,
+    style,
+    query, group
+} from '@angular/animations';
+
+export const collapseUp = trigger('collapseUp', [
+    transition('* => void', [
+        style({opacity: 1, transform: 'translateY(0%)'}),
+        animate('0.5s', style({opacity: 0, transform: 'translateY(-100%)'}))
+    ])
+]);
+
+export const expandDown = trigger('expandDown', [
+    transition('void => *', [
+        style({opacity: 0, transform: 'translateY(-100%)'}),
+        animate('0.5s', style({opacity: 1, transform: 'translateY(0%)'}))
+    ])
+]);
+
+export const fadeIn = trigger('fadeIn', [
+    transition('void => *', [
+        style({opacity: 0}),
+        animate('0.5s ease-in-out', style({opacity: 1}))
+    ])
+]);
+
+export const fadeOut = trigger('fadeOut', [
+    transition('* => void', [
+        style({opacity: 1}),
+        animate('0.5s ease-in-out', style({opacity: 0}))
+    ])
+]);
+
+export const routerTransition = trigger('routerTransition', [
+    transition('* <=> *', [
+        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}),
+        ])
+    ])
+]);

website/src/app/app.module.ts

@@ -0,0 +1,81 @@
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {environment} from '../environments/environment';
+import {AppRoutes} from './app.routes';
+import {AdminGuard} from './guards/admin.guard';
+import {GuestGuard} from './guards/guest.guard';
+import {LoginGuard} from './guards/login.guard';
+import {MaterialModule} from './material.module';
+import {AppComponent} from './views/app/app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {DashboardComponent} from './views/dashboard/dashboard.component';
+import {BatteryComponent} from './views/battery/battery.component';
+import {WeatherComponent} from './views/weather/weather.component';
+import {SecurityComponent} from './views/security/security.component';
+import {HttpClientModule} from '@angular/common/http';
+import {LoginComponent} from './views/login/login.component';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {RoundPipe} from './pipes/round.pipe';
+import {BatteryWidgetComponent} from './components/battery-widget/batteryWidget.component';
+import {WeatherWidgetComponent} from './components/weather-widget/weatherWidget.component';
+import {AngularFireAuthModule} from '@angular/fire/auth';
+import {AngularFireModule} from '@angular/fire';
+import {AngularFirestoreModule} from '@angular/fire/firestore';
+import {GaugeModule} from 'angular-gauge';
+import {ChartsModule} from 'ng2-charts';
+
+const APP_COMPONENTS = [
+    BatteryWidgetComponent,
+    WeatherWidgetComponent
+];
+
+const APP_GUARDS = [
+    AdminGuard,
+    GuestGuard,
+    LoginGuard
+];
+
+const APP_PIPES = [
+    RoundPipe
+];
+
+const APP_VIEWS = [
+    AppComponent,
+    BatteryComponent,
+    DashboardComponent,
+    LoginComponent,
+    SecurityComponent,
+    WeatherComponent
+];
+
+@NgModule({
+    declarations: [
+        APP_COMPONENTS,
+        APP_PIPES,
+        APP_VIEWS
+    ],
+    imports: [
+        AngularFireAuthModule,
+        AngularFireModule.initializeApp(environment.firebase),
+        AngularFirestoreModule,
+        AppRoutes,
+        BrowserModule,
+        BrowserAnimationsModule,
+        ChartsModule,
+        FormsModule,
+        GaugeModule.forRoot(),
+        HttpClientModule,
+        MaterialModule,
+        ServiceWorkerModule.register('ngsw-worker.js', {enabled: false}),
+        ServiceWorkerModule.register('ngsw-worker.js', {
+          enabled: environment.production,
+          // Register the ServiceWorker as soon as the app is stable
+          // or after 30 seconds (whichever comes first).
+          registrationStrategy: 'registerWhenStable:30000'
+        }),
+    ],
+    providers: [APP_GUARDS],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }

website/src/app/app.routes.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {DashboardComponent} from './views/dashboard/dashboard.component';
+import {WeatherComponent} from './views/weather/weather.component';
+import {SecurityComponent} from './views/security/security.component';
+import {BatteryComponent} from './views/battery/battery.component';
+import {LoginComponent} from './views/login/login.component';
+import {LoginGuard} from './guards/login.guard';
+
+const routes: Routes = [
+    {path: 'battery', component: BatteryComponent, canActivate: [LoginGuard]},
+    {path: 'login', component: LoginComponent, data: {hide: true, noAnimation: true}},
+    {path: 'security', component: SecurityComponent, canActivate: [LoginGuard]},
+    {path: 'weather', component: WeatherComponent, canActivate: [LoginGuard]},
+    {path: '', component: DashboardComponent, canActivate: [LoginGuard]},
+    {path: '**', redirectTo: '/'}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutes { }

website/src/app/components/battery-widget/batteryWidget.component.html

@@ -0,0 +1,6 @@
+<div class="w-100 h-100">
+    <div class="d-flex align-items-center">
+        <mat-icon class="mr-3" style="font-size: 36px; height: 36px">{{batteryService.icon}}</mat-icon>
+        <h2 class="d-inline mb-0">Powerwall: <span [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{batteryService.last.voltage | round}} V</span></h2>
+    </div>
+</div>

website/src/app/components/battery-widget/batteryWidget.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+import {BatteryService} from '../../services/battery.service';
+
+@Component({
+  selector: 'battery-widget',
+  templateUrl: './batteryWidget.component.html'
+})
+export class BatteryWidgetComponent {
+  constructor(public batteryService: BatteryService) { }
+}

website/src/app/components/weather-widget/weatherWidget.component.html

@@ -0,0 +1,30 @@
+<div *ngIf="weatherService.weather.length" class="w-100 h-100">
+    <h3 class="text-center">{{weatherService.weather[0].phrase}}</h3>
+    <div class="d-flex align-items-center justify-content-center">
+        <div><i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i></div>
+        <div>
+            <div>
+                <h1 class="mb-0">{{weatherService.weather[0].current | round: 1}} °C</h1>
+            </div>
+            <div>
+                Feels Like: {{weatherService.weather[0].feelsLike | 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[0].high | round}} °C
+            </div>
+            <div>
+                <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
+                {{weatherService.weather[0].low | round}} °C
+            </div>
+            <div>
+                <i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather[0].pop * 100 | round}}%
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="!weatherService.weather.length">
+    <h3 class="text-danger">No Weather Data (API Limit Reached)</h3>
+</div>

website/src/app/components/weather-widget/weatherWidget.component.ts

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

website/src/app/guards/admin.guard.ts

@@ -0,0 +1,17 @@
+import {CanActivate, Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {filter, map} from 'rxjs/operators';
+import {AuthService} from '../services/auth.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AdminGuard implements CanActivate {
+
+    constructor(private auth: AuthService) {}
+
+    canActivate(): Observable<boolean> {
+        return this.auth.user.pipe(filter((user: any) => user != null), map(user => user && user.isAdmin));
+    }
+}

website/src/app/guards/guest.guard.ts

@@ -0,0 +1,17 @@
+import {CanActivate, Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {filter, map, tap} from 'rxjs/operators';
+import {AuthService} from '../services/auth.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class GuestGuard implements CanActivate {
+
+    constructor(private auth: AuthService, private router: Router) {}
+
+    canActivate(): Observable<boolean> {
+        return this.auth.user.pipe(filter((user: any) => user != null), map(user => user && user.isAnonymous), tap(auth => auth ? this.router.navigate(['/']) : null));
+    }
+}

website/src/app/guards/login.guard.ts

@@ -0,0 +1,23 @@
+import {CanActivate, Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Observable, timer} from 'rxjs';
+import {filter, map} from 'rxjs/operators';
+import {AngularFireAuth} from '@angular/fire/auth';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LoginGuard implements CanActivate {
+    loggedIn?: any;
+
+    constructor(private auth: AngularFireAuth, private router: Router) {
+        this.auth.onAuthStateChanged(user => this.loggedIn = !!user);
+    }
+
+    canActivate(): Observable<boolean> {
+        return timer(0, 100).pipe(filter(() => this.loggedIn != null), map(() => {
+            if(!this.loggedIn) this.router.navigate(['/login']);
+            return this.loggedIn;
+        }));
+    }
+}

website/src/app/material.module.ts

@@ -0,0 +1,32 @@
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+const MATERIAL_MODULES = [
+	MatButtonModule,
+	MatButtonToggleModule,
+	MatCardModule,
+	MatDividerModule,
+	MatFormFieldModule,
+	MatIconModule,
+	MatInputModule,
+	MatListModule,
+	MatProgressSpinnerModule,
+	MatSidenavModule,
+	MatToolbarModule
+];
+
+@NgModule({
+	imports: MATERIAL_MODULES,
+	exports: MATERIAL_MODULES
+})
+export class MaterialModule { }

website/src/app/models/battery.ts

@@ -0,0 +1,30 @@
+export interface IBattery {
+    ampHours: number;
+    avgCellVoltage: number;
+    capacity: number;
+    current: number;
+    lifetimeCharge: number;
+    lifetimeDischarge: number;
+    maxCellVoltage: number;
+    maxDischargeCurrent: number;
+    maxVoltage: number;
+    minCellVoltage: number;
+    minVoltage: number;
+    modules: {[key: number]: {
+        cells: {[key: number]: number}
+        negativeTemperature: number;
+        positiveTemperature: number;
+        temperature: number;
+        voltage: number;
+    }},
+    negativeContactor: boolean,
+    positiveContactor: boolean,
+    power: number;
+    soc: number;
+    temperature: number;
+    timestamp: number;
+    uptime: string;
+    version: number;
+    voltage: number;
+    wattHours: number;
+}

website/src/app/models/user.ts

@@ -0,0 +1,10 @@
+import {AngularFirestoreDocument} from '@angular/fire/firestore';
+import firebase from 'firebase';
+import User = firebase.User;
+
+export interface IUser extends User {
+    ref?: AngularFirestoreDocument;
+
+    isAdmin: boolean;
+    battery: string;
+}

website/src/app/models/weather.ts

@@ -0,0 +1,16 @@
+export interface IWeather {
+    cloudCover: number;
+    current: number;
+    date: Date;
+    feelsLike: number;
+    high: number;
+    humidity: number;
+    icon: string;
+    low: number;
+    phrase: string;
+    pop: number;
+    sunrise: Date;
+    sunset: Date;
+    UVIndex: number;
+    wind: {direction: number, speed: number, gusts: number}
+}

website/src/app/models/weatherIcons.ts

@@ -0,0 +1,47 @@
+export const WeatherIcons = [
+    '',
+    'wi-day-sunny', // Sunny
+    'wi-day-sunny', // Mostly Sunny
+    'wi-day-sunny-overcast', // Partly Sunny
+    'wi-day-sunny-overcast', // Intermittent Clouds
+    'wi-day-cloudy', // Hazy Sunshine
+    'wi-day-cloudy-high', // Mostly Cloudy
+    'wi-cloudy', // Cloudy
+    'wi-cloudy', // Overcast
+    '',
+    '',
+    'wi-fog', // Fog
+    'wi-showers', // Showers
+    'wi-day-showers', // Mostly Cloudy With Showers
+    'wi-day-showers', // Partly Cloudy With Showers
+    'wi-thunderstorm', // Thunderstorms
+    'wi-day-storm-showers', // Mostly Cloudy With Thunderstorms
+    'wi-day-storm-showers', // Partly Cloudy With Thunderstorms
+    'wi-sprinkle', // Rain
+    'wi-sleet', // Flurries
+    'wi-day-sleet', // Mostly Cloudy With Flurries
+    'wi-day-sleet', // Partly Cloudy With Flurries
+    'wi-snow', // Snow
+    'wi-day-snow', // Mostly Cloudy With Snow
+    'wi-snowflake-cold', // Ice
+    'wi-sleet', // Sleet
+    'wi-hail', // Freezing Rain
+    '',
+    '',
+    'wi-rain-mix', // Rain And Snow
+    'wi-thermometer', // Hot
+    'wi-thermometer-exterior', // Cold
+    'wi-strong-wind', // Windy
+    'wi-night-clear', // Clear
+    'wi-night-clear', // Mostly Clear
+    'wi-night-partly-cloudy', // Partly Clear
+    'wi-night-partly-cloudy', // Intermittent Clouds
+    'wi-night-alt-cloudy', // Hazy Moonlight
+    'wi-night-alt-cloudy', // Mostly Cloudy
+    'wi-night-alt-showers', // Partly Cloudy With Showers
+    'wi-night-alt-showers', // Mostly Cloudy With Showers
+    'wi-night-alt-storm-showers', // Partly Cloudy With Thunderstorms
+    'wi-night-alt-storm-showers', // Mostly Cloudy With Thunderstorms
+    'wi-night-alt-sleet', // Mostly Cloudy With Flurries
+    'wi-night-alt-snow' // Mostly Cloudy With Snow
+];

website/src/app/pipes/round.pipe.ts

@@ -0,0 +1,11 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+    name: 'round'
+})
+export class RoundPipe implements PipeTransform {
+    transform(value: number, decimalPlaces: number = 0): any {
+        const shift = Math.pow(10, decimalPlaces);
+        return Math.round(value * shift) / shift;
+    }
+}

website/src/app/services/auth.service.ts

@@ -0,0 +1,36 @@
+import {Injectable} from "@angular/core";
+import firebase from 'firebase';
+import {BehaviorSubject, from} from "rxjs";
+import {AngularFirestore} from "@angular/fire/firestore";
+import {AngularFireAuth} from "@angular/fire/auth";
+import {Router} from "@angular/router";
+import {flatMap, map, skip} from 'rxjs/operators';
+import {IUser} from '../models/user';
+import GoogleAuthProvider = firebase.auth.GoogleAuthProvider;
+
+@Injectable({providedIn: 'root'})
+export class AuthService {
+    readonly collection = 'Users';
+
+    user = new BehaviorSubject<IUser>(null);
+
+    constructor(private afAuth: AngularFireAuth, private router: Router, private db: AngularFirestore) {
+        this.afAuth.user.pipe(
+            flatMap((user: any) => {
+                if(!user) return from([false]);
+                let ref = this.db.collection(this.collection).doc(user.uid);
+                return ref.valueChanges().pipe(map(dbUser => Object.assign({ref: ref}, user, dbUser)))
+            })
+        ).subscribe(user => this.user.next(<IUser>user));
+    }
+
+    async loginWithGoogle() {
+        this.afAuth.signInWithPopup(new GoogleAuthProvider());
+        return this.user.pipe(skip(1));
+    }
+
+    async logout() {
+        await this.afAuth.signOut();
+        return this.router.navigate(['/']);
+    }
+}

website/src/app/services/battery.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import {AngularFirestore} from '@angular/fire/firestore';
+import {IBattery} from '../models/battery';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BatteryService {
+    data = new BehaviorSubject<IBattery[]>([]);
+    last: IBattery = <IBattery>{};
+    modules = [];
+
+    get charging() {
+        let value = this.data.value;
+        if(!value.length) return null;
+        let last = value[value.length - 1];
+        let secondLast = value[value.length - 2];
+        return last.soc > secondLast.soc;
+    }
+
+    get icon() {
+        if(!this.last || new Date().getTime() - this.last.timestamp > 300000) return 'battery_alert';
+        if(this.charging) return 'battery_charging_full';
+        return 'battery_full';
+    }
+
+    constructor(private firestore: AngularFirestore) {
+        let afterDate = new Date();
+        afterDate.setDate(afterDate.getDate() - 1);
+
+        this.firestore.collection('Battery').doc('170614D').collection<IBattery>('data', ref => ref.where('timestamp', '>=', afterDate.getTime()).orderBy('timestamp')).valueChanges().subscribe(data => {
+            this.modules = data.reduce((acc: any, row) => {
+                Object.keys(row.modules).forEach(module => {
+                    if(!acc[module]) acc[module] = [];
+                    acc[module].push(Object.assign(row.modules[module], {timestamp: row.timestamp}));
+                });
+                return acc;
+            }, {});
+
+            this.last = data[data.length - 1];
+            this.data.next(data);
+        });
+    }
+}

website/src/app/services/weather.service.ts

@@ -0,0 +1,60 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Subscription, timer} from 'rxjs';
+import {environment} from '../../environments/environment';
+import {IWeather} from '../models/weather';
+import {WeatherIcons} from '../models/weatherIcons';
+
+@Injectable({providedIn: 'root'})
+export class WeatherService {
+    locationKey: string;
+    metric = true;
+    sub: Subscription;
+    weather: IWeather[] = [];
+
+    get icon() {
+        if(!this.weather.length) return '';
+        return this.weather[0].icon;
+    }
+
+    constructor(private http: HttpClient) {
+        this.search('London ON');
+    }
+
+    async search(text: string) {
+        this.locationKey = (await this.http.get(`https://dataservice.accuweather.com/locations/v1/search?apikey=${environment.accuWeather}&q=${text}`).toPromise())[0].Key;
+        this.update();
+    }
+
+    async update() {
+        if(this.sub) {
+            this.sub.unsubscribe();
+            this.sub = null;
+        }
+
+        this.sub = timer(0, 1800000).subscribe(async () => {
+            let temp: any = await this.http.get(`https://dataservice.accuweather.com/forecasts/v1/daily/5day/${this.locationKey}?apikey=${environment.accuWeather}&metric=${this.metric}&details=true`).toPromise();
+            this.weather = temp['DailyForecasts'].map(forecast => ({
+                cloudCover: forecast.Day.CloudCover / 100,
+                date: new Date(forecast.Date),
+                high: forecast.Temperature.Maximum.Value,
+                icon: WeatherIcons[forecast.Day.Icon],
+                low: forecast.Temperature.Minimum.Value,
+                phrase: forecast.Day.ShortPhrase,
+                pop: forecast.Day.PrecipitationProbability / 100,
+                sunrise: new Date(forecast.Sun.Rise),
+                sunset: new Date(forecast.Sun.Set),
+            }));
+            temp = (await this.http.get(`https://dataservice.accuweather.com/currentconditions/v1/${this.locationKey}?apikey=${environment.accuWeather}&details=true`).toPromise())[0];
+            Object.assign(this.weather[0], {
+                cloudCover: temp.CloudCover / 100,
+                current: temp.Temperature[this.metric ? 'Metric' : 'Imperial'].Value,
+                feelsLike: temp.RealFeelTemperature[this.metric ? 'Metric' : 'Imperial'].Value,
+                humidity: temp.RelativeHumidity,
+                icon: WeatherIcons[temp.WeatherIcon],
+                UVIndex: temp.UVIndex,
+                wind: {direction: temp.Wind.Direction.Degrees, speed: temp.Wind.Speed[this.metric ? 'Metric' : 'Imperial'].Value, gusts: temp.WindGust.Speed[this.metric ? 'Metric' : 'Imperial'].Value}
+            });
+        });
+    }
+}

website/src/app/views/app/app.component.html

@@ -0,0 +1,30 @@
+<mat-toolbar *ngIf="!hide" [@collapseUp]="!hide" [@expandDown]="!hide" class="bg-primary">
+    <mat-icon *ngIf="mobile" class="mr-2" (click)="open = !open">menu</mat-icon>
+    <img src="../../../assets/icon.png" class="mr-2" height="24px" width="auto">
+    <span>
+        <span style="font-weight: 500;">Home Front</span>
+        <small class="text-muted ml-2">v{{version}}</small>
+    </span>
+</mat-toolbar>
+<mat-drawer-container class="fill-height" [hasBackdrop]="false">
+    <mat-drawer class="bg-primary" [mode]="mobile ? 'push' : 'side'" [opened]="open" [disableClose]="!mobile" [autoFocus]="false">
+        <mat-nav-list class="p-0">
+            <mat-divider></mat-divider>
+            <a mat-list-item routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">insert_chart</mat-icon> Dashboard</span></a>
+            <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> Powerwall</span></a>
+            <mat-divider></mat-divider>
+            <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>
+            <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>
+            <a mat-list-item (click)="logout()"><span class="p-3 pl-0 mr-5" style="color: darkred"><mat-icon class="mr-2">logout</mat-icon> Logout</span></a>
+            <mat-divider></mat-divider>
+        </mat-nav-list>
+    </mat-drawer>
+    <mat-drawer-content class="bg-secondary text-white" (click)="open = (mobile && open) ? false : open">
+        <main class="h-100" [@routerTransition]="transition(o)">
+            <router-outlet #o="outlet"></router-outlet>
+        </main>
+    </mat-drawer-content>
+</mat-drawer-container>

website/src/app/views/app/app.component.ts

@@ -0,0 +1,45 @@
+import {Component} from '@angular/core';
+import {BatteryService} from '../../services/battery.service';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {collapseUp, expandDown, routerTransition} from '../../animations';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
+import {filter} from 'rxjs/operators';
+import {WeatherService} from '../../services/weather.service';
+import {AngularFireAuth} from '@angular/fire/auth';
+import packageJson from 'package.json';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    animations: [collapseUp, expandDown, routerTransition]
+})
+export class AppComponent {
+    hide = false; // Hide nav
+    mobile = true; // Mobile or desktop size
+    noTransition = false; // Stop router transitions
+    open = false; // Side nav open
+    version = packageJson.version;
+
+    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute, public batteryService: BatteryService, public weatherService: WeatherService, breakpointObserver: BreakpointObserver) {
+        router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this.hide = !!route.root.firstChild?.snapshot.data.hide;
+            this.open = !this.hide && !this.mobile;
+        });
+
+        breakpointObserver.observe([Breakpoints.Handset, Breakpoints.Tablet]).subscribe(result => {
+            this.mobile = result.matches;
+            this.open = !this.mobile;
+        })
+    }
+
+    async logout() {
+        this.noTransition = true;
+        await this.auth.signOut();
+        return this.router.navigate(['/login']).then(() => this.noTransition = false);
+    }
+
+    transition(outlet: any) {
+        if(!outlet.isActivated || !!outlet.activatedRouteData.noAnimation || this.noTransition) return '';
+        return outlet.activatedRoute;
+    }
+}

website/src/app/views/battery/battery.component.html

@@ -0,0 +1,64 @@
+<div class="fill-height p-3" style="background-color: #b52e3c !important; overflow-y: scroll">
+    <!-- Header -->
+    <div class="ml-2 d-flex align-items-center">
+        <div class="d-inline pr-2">
+            <img src="../../../assets/tesla.png" height="85px" width="auto">
+        </div>
+        <div>
+            <h1 class="mb-0">Powerwall: {{batteryService.last.voltage | number : '1.1-1'}} V</h1>
+            <h6>Last Updated At: {{batteryService.last.timestamp | date: 'short'}}</h6>
+            <h6 class="mb-0">Uptime: {{batteryService.last.uptime}}</h6>
+        </div>
+    </div>
+    <div class="mt-3 d-flex flex-column flex-md-row">
+        <div class="d-flex flex-md-column flex-row flex-wrap">
+            <mat-card style="margin: 10px; min-width: 200px; width: 200px; height: 200px;">
+                <canvas id="netPower" class="w-100"></canvas>
+                <h5 class="text-center text-muted"><strong>Power: </strong>{{batteryService.last.power | number : '1.1-1'}} Watts</h5>
+                <h5 class="text-center text-muted"><strong>Current: </strong>{{batteryService.last.current | number : '1.1-1'}} Amps</h5>
+            </mat-card>
+            <mat-card style="margin: 10px; min-width: 200px; width: 200px; height: 200px;">
+                <mwl-gauge
+                        [max]="100"
+                        [color]="color"
+                        [dialStartAngle]="-90"
+                        [dialEndAngle]="-90.001"
+                        [value]="(batteryService.last.soc || 0) * 100"
+                        [label]="percent"
+                        [animated]="true"
+                        [animationDuration]="1">
+                </mwl-gauge>
+            </mat-card>
+        </div>
+        <div class="flex-grow-1" style="overflow: hidden; margin: 10px">
+            <mat-card class="w-100">
+                <canvas baseChart
+                        [datasets]="socData"
+                        [labels]="socLabels"
+                        [options]="socOptions"
+                        [legend]="false"
+                        chartType="line">
+                </canvas>
+            </mat-card>
+        </div>
+    </div>
+    <!-- Battery Cells -->
+    <div class="d-flex flex-wrap mt-5">
+        <div class="p-2 col-12 col-sm-6 col-lg-3" *ngFor="let battery of batteries; let i = index">
+            <mat-card>
+                <div class="d-flex w-100 justify-content-between align-items-center">
+                    <div>
+                        <h5 class="mb-0">{{battery.name}}</h5>
+                    </div>
+                    <div class="text-muted">
+                        {{battery.negativeTemperature | number : '1.1-1'}} °C / {{battery.positiveTemperature | number : '1.1-1'}} °C
+                    </div>
+                </div>
+                <div class="text-center my-3">
+                    <mat-icon style="width: 240px; height: 240px; font-size: 240px">battery_full</mat-icon>
+                    <span class="text-white font-weight-bold" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, 25%)">{{battery.voltage | number : '1.1-1'}} V</span>
+                </div>
+            </mat-card>
+        </div>
+    </div>
+</div>

website/src/app/views/battery/battery.component.ts

@@ -0,0 +1,113 @@
+import {Component, OnInit} from '@angular/core';
+import {BatteryService} from '../../services/battery.service';
+import {AppComponent} from '../app/app.component';
+
+declare const Gauge: any;
+
+@Component({
+    selector: 'app-batteries',
+    templateUrl: './battery.component.html',
+    styles: [`.selected { background-color: rgba(0, 0, 0, 0.1); }`]
+})
+export class BatteryComponent implements OnInit {
+    batteries: any[] = [];
+    gauge: any;
+    socData: any[] = [];
+    socLabels: string[] = [];
+    socOptions = {
+        responsive: true,
+        scales: {
+            xAxes: [{}],
+            yAxes: [{
+                ticks: {
+                    min: 0,
+                    max: 1.2,
+                    step: 0.1,
+                    callback: (label: any) => this.percent(Math.round(label * 100))
+                }
+            }]
+        },
+        tooltips: {
+            callbacks: {
+                label: (tooltipItem: any) => `SOC: ${this.percent(tooltipItem.yLabel * 100)}`
+            }
+        }
+    };
+
+    constructor(public app: AppComponent, public batteryService: BatteryService) {
+        this.batteryService.data.subscribe((data) => {
+            this.socLabels = data.filter(row => new Date(row.timestamp).getMinutes() % 15 == 0).map(row => this.dateFormat(new Date(row.timestamp)));
+            this.socData = [{label: 'SOC', fill: false, data: data.filter(row => new Date(row.timestamp).getMinutes() % 15 == 0).map(row => row.soc)}];
+            if(this.gauge) this.gauge.set(batteryService.last.power || 0);
+            this.batteries = Object.keys(this.batteryService.modules).map((key: string) => {
+                return {
+                    name: `Module ${key}`,
+                    negativeTemperature: this.batteryService.modules[key][this.batteryService.modules[key].length - 1].negativeTemperature,
+                    positiveTemperature: this.batteryService.modules[key][this.batteryService.modules[key].length - 1].positiveTemperature,
+                    voltage: this.batteryService.modules[key][this.batteryService.modules[key].length - 1].voltage
+                }
+            });
+        });
+    }
+
+    ngOnInit() {
+        const canvas = document.getElementById('netPower');
+        if(!canvas) return;
+
+        canvas.style.height = canvas.style.width;
+        this.gauge = new Gauge(canvas).setOptions({
+            angle: 0.2, // The span of the gauge arc
+            lineWidth: 0.2, // The line thickness
+            radiusScale: 1, // Relative radius
+            pointer: {
+                length: 0.5,
+                strokeWidth: 0.035,
+                color: '#000000'
+            },
+            limitMax: true,
+            limitMin: true,
+            generateGradient: true,
+            highDpiSupport: true,
+            staticLabels: {
+                font: "75% sans-serif",
+                labels: [-4000, 0, 4000],
+                color: "black",
+            },
+            staticZones: [
+                {strokeStyle: "#eb575c", min: -4000, max: 0},
+                {strokeStyle: "#49b571", min: 0, max: 4000}
+            ],
+            renderTicks: {
+                divisions: 2,
+                divWidth: 1.1,
+                divLength: 1,
+                divColor: '#000',
+                subDivisions: 4,
+                subLength: 0.5,
+                subWidth: 0.6,
+                subColor: '#000'
+            }
+        });
+        this.gauge.minValue = -4000;
+        this.gauge.maxValue = 4000;
+        this.gauge.set(this.batteryService.last.power); // set actual value
+    }
+
+    color() {
+        return '#4f55b6';
+    }
+
+    percent(val: number) {
+        return `${Math.round(val)}%`;
+    }
+
+    dateFormat(date: Date) {
+        let hours = date.getHours();
+        if(hours > 12) hours -= 12;
+
+        let minutes: any = date.getMinutes();
+        if(minutes < 10) minutes = '0' + minutes;
+
+        return `${hours}:${minutes} ${date.getHours() > 12 ? 'PM' : 'AM'}`;
+    }
+}

website/src/app/views/dashboard/dashboard.component.html

@@ -0,0 +1,22 @@
+<div class="fill-height p-3">
+    <div style="max-width: 1000px;">
+        <div class="d-flex">
+            <div class="pr-2 border-right border-white">
+                <h1 class="mb-0">{{formatDate(now | async)}}</h1>
+            </div>
+            <div class="pl-2">
+                <h1 class="mb-0">{{now | async | date: 'shortTime'}}</h1>
+            </div>
+        </div>
+        <mat-card class="mt-3 w-100 hover" routerLink="/battery">
+            <mat-card-content>
+                <battery-widget></battery-widget>
+            </mat-card-content>
+        </mat-card>
+        <mat-card class="mt-3 w-100 hover" routerLink="/weather">
+            <mat-card-content>
+                <weather-widget class="mx-auto"></weather-widget>
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>

website/src/app/views/dashboard/dashboard.component.ts

@@ -0,0 +1,18 @@
+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 {
+    now = timer(0, 1000).pipe(map(() => new Date()));
+
+    constructor() { }
+
+    formatDate(date: Date) {
+        if(!date) return '';
+        return `${date.toDateString().substr(4, 3)} ${date.getDate()}`;
+    }
+}

website/src/app/views/login/login.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="loading" [@fadeIn]="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" *ngIf="show" [@fadeOut]="true">
+    <div class="text-center">
+        <h1 class="d-inline text-white">Home Front</h1>
+    </div>
+    <div class="mt-5">
+        <img src="../../../assets/icon-inv.png" width="275px" height="auto">
+    </div>
+</div>
+<div class="off-center" *ngIf="show" [@fadeOut]="true" [@expandDown]="animate">
+    <button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
+</div>

website/src/app/views/login/login.component.ts

@@ -0,0 +1,38 @@
+import {Component, NgZone, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import firebase from 'firebase';
+import {expandDown, fadeIn, fadeOut} from '../../animations';
+import {AngularFireAuth} from '@angular/fire/auth';
+import GoogleAuthProvider = firebase.auth.GoogleAuthProvider;
+
+@Component({
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    animations: [expandDown, fadeIn, fadeOut]
+})
+export class LoginComponent implements OnInit {
+    animate = false;
+    show = true;
+    loading = false;
+
+    constructor(private auth: AngularFireAuth, private ngZone: NgZone, public router: Router) { }
+
+    ngOnInit() {
+        this.auth.onAuthStateChanged(user => {
+            if(!!user) {
+                this.show = false;
+                setTimeout(() => {
+                    this.ngZone.runTask(() => this.router.navigate(['/dashboard']));
+                }, 800);
+            }
+        });
+
+        setTimeout(() => this.animate = true, 1000);
+    }
+
+    async login() {
+        this.loading = true;
+        await this.auth.signInWithPopup(new GoogleAuthProvider());
+        this.loading = false;
+    }
+}

website/src/app/views/security/security.component.html

@@ -0,0 +1,31 @@
+<div class="fill-height p-3">
+    <div style="max-width: 1000px">
+        <mat-card>
+            <mat-card-content>
+                <div class="d-flex align-items-center">
+                    <div class="mr-3">
+                        <button mat-icon-button (click)="toggle()">
+                            <mat-icon style="font-size: 36px" [ngClass]="{'text-primary': armed}">power_settings_new</mat-icon>
+                        </button>
+                    </div>
+                    <div>
+                        <h1 *ngIf="armed" class="d-inline mb-0">Armed</h1>
+                        <h1 *ngIf="!armed" class="d-inline mb-0">Standby</h1>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+        <mat-card class="mt-3">
+            <mat-card-content>
+                <h3>Log</h3>
+                <mat-divider></mat-divider>
+                <div class="pt-2">
+                    <div *ngFor="let l of log">
+                        <span class="text-muted">{{l.timestamp | date: 'short'}}:</span>
+                        <span class="ml-2">{{l.message}}</span>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>

website/src/app/views/security/security.component.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'app-security',
+    templateUrl: './security.component.html'
+})
+export class SecurityComponent {
+    armed: boolean = false;
+    log = [
+        {timestamp: new Date(), message: 'Currently under construction'},
+        {timestamp: new Date(), message: 'Give the power button a flick!'},
+    ];
+
+    constructor() { }
+
+    toggle() {
+        this.armed = !this.armed;
+        this.log = [{timestamp: new Date(), message: this.armed ? 'Arming Security' : 'Disengaged'}].concat(this.log);
+    }
+}

website/src/app/views/weather/weather.component.html

@@ -0,0 +1,82 @@
+<div class="fill-height p-3" [style.backgroundColor]="day ? '#88aaff' : '#000e31'" style="overflow-y: scroll">
+    <!-- Current Weather -->
+    <div class="d-flex flex-column align-items-center">
+        <div>
+            <h3 class="mb-0 text-center">London, ON</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">
+                <i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
+            </div>
+            <div class="d-flex">
+                <div class="d-flex flex-column mr-3">
+                    <div>
+                        <h1 class="mb-0">{{weatherService.weather[0].current | round: 1}} °C</h1>
+                    </div>
+                    <div>
+                        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[0].high | round}} °C
+                    </div>
+                    <div>
+                        <mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
+                        {{weatherService.weather[0].low | round}} °C
+                    </div>
+                    <div>
+                        <i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather[0].pop * 100 | round}}%
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 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" 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.high | round}} °C</div>
+                <div class="text-center text-muted">{{day.low | round}} °C</div>
+            </div>
+        </div>
+    </mat-card>
+    <!-- Sunlight -->
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
+        <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[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[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[0].sunset | date: 'shortTime'}}
+            </div>
+        </div>
+        <canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
+    </mat-card>
+    <!-- Wind -->
+    <mat-card class="m-3 mx-auto" style="max-width: 450px">
+        <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[0].wind.speed | round}} km/h
+            </div>
+            <div class="d-flex align-items-center justify-content-center flex-grow-1">
+                {{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[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[0].wind.direction + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
+        </div>
+    </mat-card>
+</div>

website/src/app/views/weather/weather.component.ts

@@ -0,0 +1,91 @@
+import {Component, OnInit} from '@angular/core';
+import {WeatherService} from '../../services/weather.service';
+import {timer} from 'rxjs';
+import {filter} from 'rxjs/operators';
+
+@Component({
+    selector: 'app-weather',
+    templateUrl: './weather.component.html'
+})
+export class WeatherComponent implements OnInit {
+    day = false;
+
+    constructor(public weatherService: WeatherService) { }
+
+    ngOnInit() {
+        timer(0, 1000).pipe(filter(() => !!this.weatherService.weather[0])).subscribe(() => {
+            const now = new Date().getTime();
+            const sunrise = this.weatherService.weather[0].sunrise.getTime();
+            const sunset = this.weatherService.weather[0].sunset.getTime();
+
+            this.day = now > sunrise && now < sunset;
+            let diff = sunset - sunrise;
+            let current = new Date().getTime() - sunrise;
+            this.drawSunChart(current / diff);
+        });
+    }
+
+    drawSunChart(progress: number) {
+        const c = <HTMLCanvasElement>document.getElementById('myCanvas');
+        if (c) {
+            const ctx = c.getContext('2d');
+            if(!ctx) return;
+
+            // All the points in 2D space we care about
+            const width = c.width;
+            const height = c.height;
+            const centerX = width / 2;
+            const centerY = height - 20;
+            const radius = height * 0.8;
+            const pointX = centerX + radius * Math.cos(Math.PI * (1 + progress));
+            const pointY = centerY + radius * Math.sin(Math.PI * (1 + progress));
+
+            // Reset
+            ctx.clearRect(0, 0, width, height);
+
+            // Path background
+            ctx.fillStyle = '#aeaeae';
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, Math.PI, 0);
+            ctx.fill();
+            ctx.stroke();
+
+            // Path
+            ctx.lineWidth = 5;
+            ctx.strokeStyle = '#585858';
+            ctx.fillStyle = '#585858';
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, Math.PI, 0);
+            ctx.stroke();
+
+            // Show sun
+            if(this.day) {
+                // Stroke background
+                ctx.lineWidth = 2;
+                ctx.strokeStyle = '#e5df00';
+                ctx.fillStyle = '#b3ad00';
+                ctx.beginPath();
+                ctx.arc(centerX, centerY, radius, Math.PI, Math.PI * (1 + progress));
+                ctx.lineTo(pointX, centerY);
+                ctx.fill();
+                ctx.stroke();
+
+                // Stroke
+                ctx.lineWidth = 6;
+                ctx.strokeStyle = '#e5df00';
+                ctx.fillStyle = '#e5df00';
+                ctx.beginPath();
+                ctx.arc(centerX, centerY, radius, Math.PI, Math.PI * (1 + progress));
+                ctx.stroke();
+
+                // Stroke end dot
+                ctx.lineWidth = 1;
+                ctx.fillStyle = '#e5df00';
+                ctx.beginPath();
+                ctx.arc(pointX, pointY, 6, 0, 2 * Math.PI);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+    }
+}

website/src/environments/environment.prod.ts

@@ -0,0 +1,12 @@
+export const environment = {
+  accuWeather: 'DktD9hoGvnnylAWDA3p1lVvqPXOAuRZD',
+  firebase: {
+    apiKey: "AIzaSyAs3FvBCADM66wR1-leBz6aIjK1wZfUxRo",
+    authDomain: "homefront-2ccb4.firebaseapp.com",
+    databaseURL: "https://homefront-2ccb4.firebaseio.com",
+    projectId: "homefront-2ccb4",
+    storageBucket: "homefront-2ccb4.appspot.com",
+    messagingSenderId: "482384317544"
+  },
+  production: true
+};

website/src/environments/environment.ts

@@ -0,0 +1,12 @@
+export const environment = {
+  accuWeather: 'DktD9hoGvnnylAWDA3p1lVvqPXOAuRZD',
+  firebase: {
+    apiKey: "AIzaSyAs3FvBCADM66wR1-leBz6aIjK1wZfUxRo",
+    authDomain: "homefront-2ccb4.firebaseapp.com",
+    databaseURL: "https://homefront-2ccb4.firebaseio.com",
+    projectId: "homefront-2ccb4",
+    storageBucket: "homefront-2ccb4.appspot.com",
+    messagingSenderId: "482384317544"
+  },
+  production: false
+};

website/src/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <base href="/">
+  <title>Home Front</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#000000">
+
+  <link rel="icon" type="image/x-icon" href="assets/icon.png">
+  <link rel="manifest" href="src/manifest.json">
+
+  <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
+</head>
+<body style="background-color: #2F323A;">
+<app-root>
+  <div style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);">
+    <div class="text-center">
+      <h1 class="d-inline text-white">Home Front</h1>
+    </div>
+    <div class="mt-5">
+      <img src="assets/icon-inv.png" width="275px" height="auto">
+    </div>
+  </div>
+</app-root>
+</body>
+</html>

website/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

website/src/manifest.json

@@ -0,0 +1,51 @@
+{
+  "name": "Home Front",
+  "short_name": "Home Front",
+  "theme_color": "#f8f8f8",
+  "background_color": "#2f323a",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "assets/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "assets/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

website/src/polyfills.ts

@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

website/src/styles.scss

@@ -0,0 +1,159 @@
+/* You can add global styles to this file, and also import other style files */
+@import '~bootstrap/dist/css/bootstrap.min.css';
+@import url('https://fonts.googleapis.com/css?family=Roboto|Material+Icons');
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css');
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #555;
+}
+
+:focus {
+  outline: none !important;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+
+  font-family: 'Roboto', sans-serif;
+  background-color: #2F323A;
+}
+
+.bg-primary {
+  background-color: #f8f8f8 !important;
+}
+
+.bg-secondary {
+  background-color: #2F323A !important;
+}
+
+.center {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.curs-pointer {
+  cursor: pointer;
+}
+
+.fill-height {
+  height: calc(100vh - 64px);
+}
+
+.hover:hover {
+  cursor: pointer;
+  background-color: #dddddd !important;
+}
+
+.flex-basis-0 {
+  flex-basis: 0;
+}
+
+.flex-basis-auto {
+  flex-basis: auto;
+}
+
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.flex-grow-2 {
+  flex-grow: 2;
+}
+
+.flex-grow-3 {
+  flex-grow: 3;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+
+.mat-divider {
+  color: #9CA4B6 !important;
+}
+
+.mat-form-field label {
+  color: #ffffff !important;
+}
+
+.mat-list-item {
+  height: auto !important;
+  color: #9CA4B6 !important;
+
+  &.active {
+    background-color: #262930 !important;
+    color: #1CA8DD !important;
+  }
+}
+
+.mat-stroked-button:not([disabled]) {
+  border-color: #ffffff !important;
+}
+
+.material-icons {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.off-center {
+  position: fixed;
+  left: calc(50% - 75px);
+  top: 75%;
+}
+
+.scale-150 {
+  transform: scale(1.5);
+}
+
+.scale-200 {
+  transform: scale(2);
+}
+
+.scale-300 {
+  transform: scale(3);
+}
+
+.scale-500 {
+  transform: scale(5);
+}
+
+.text-muted {
+  color: #7f7f7f !important;
+}
+
+@media (max-width: 599px) {
+  .fill-height {
+    height: calc(100vh - 56px);
+  }
+}
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }