Weather is done

2018-11-14 12:07:55 -05:00
parent a158b4cb15
commit 83a61d50c7
36 changed files with 10509 additions and 150 deletions
--- a/src/app/animations.ts
+++ b/src/app/animations.ts
@@ -0,0 +1,25 @@
+import {
+    trigger,
+    animate,
+    transition,
+    style,
+    query, group
+} from '@angular/animations';
+
+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', [
+                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 }),
+        ])
+    ])
+])
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,19 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {WeatherComponent} from './weather/weather.component';
+import {SecurityComponent} from './security/security.component';
+import {SettingsComponent} from './settings/settings.component';
+import {BatteryComponent} from './battery/battery.component';

-const routes: Routes = [];
+const routes: Routes = [
+    {path: 'dashboard', component: DashboardComponent},
+    {path: 'battery', component: BatteryComponent},
+    {path: 'weather', component: WeatherComponent},
+    {path: 'security', component: SecurityComponent},
+    {path: 'settings', component: SettingsComponent},
+    {path: '**', redirectTo: '/dashboard'}
+];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1,28 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
-<router-outlet></router-outlet>
+<mat-toolbar 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 style="font-weight: 500;">Home Front</span>
+    <small class="text-muted ml-2">v{{environment.version}}</small>
+</mat-toolbar>
+<mat-drawer-container class="h-100 w-100 example-container" [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="dashboard" routerLinkActive="active"><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> Power Wall</span></a>
+            <mat-divider></mat-divider>
+            <a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">cloud</mat-icon> 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 routerLink="settings" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">settings</mat-icon> Settings</span></a>
+            <mat-divider></mat-divider>
+        </mat-nav-list>
+    </mat-drawer>
+    <mat-drawer-content class="bg-secondary text-white p-4" (click)="open = (mobile && open) ? false : open">
+        <main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
+            <router-outlet #o="outlet"></router-outlet>
+        </main>
+    </mat-drawer-content>
+</mat-drawer-container>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,35 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'HomeFront'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('HomeFront');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to HomeFront!');
-  });
-});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,23 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {BatteryService} from './battery/battery.service';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {environment} from '../environments/environment';
+import {routerTransition} from './animations';

@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    animations: [routerTransition]
 })
 export class AppComponent {
-  title = 'HomeFront';
+    mobile = true;
+    open = false;
+    environment = environment;
+
+    constructor(public batteryService: BatteryService, breakpointObserver: BreakpointObserver) {
+        breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
+            this.mobile = result.matches;
+            this.open = !this.mobile;
+        })
+    }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,49 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';

-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FormsModule} from '@angular/forms';
+import {
+    MatCardModule,
+    MatDividerModule,
+    MatIconModule,
+    MatListModule,
+    MatSidenavModule,
+    MatToolbarModule
+} from '@angular/material';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { BatteryComponent } from './battery/battery.component';
+import { WeatherComponent } from './weather/weather.component';
+import { SecurityComponent } from './security/security.component';
+import { SettingsComponent } from './settings/settings.component';
+import {HttpClientModule} from '@angular/common/http';

@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent,
+        DashboardComponent,
+        BatteryComponent,
+        WeatherComponent,
+        SecurityComponent,
+        SettingsComponent
+    ],
+    imports: [
+        AppRoutingModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        HttpClientModule,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
--- a/src/app/battery/battery.component.html
+++ b/src/app/battery/battery.component.html
@@ -0,0 +1,3 @@
+<p>
+  batterys works!
+</p>
--- a/src/app/battery/battery.component.ts
+++ b/src/app/battery/battery.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-batterys',
+  templateUrl: './battery.component.html'
+})
+export class BatteryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/battery/battery.service.ts
+++ b/src/app/battery/battery.service.ts
@@ -0,0 +1,42 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BatteryService {
+    percentage: number[] = [0];
+    charging: boolean;
+
+    get average() {
+        return this.percentage.reduce((acc, battery) => acc + battery, 0) / this.percentage.length;
+    }
+
+    get icon() {
+        if (this.charging == null) return 'battery_unknown';
+
+        let temp = 'battery';
+        if (this.charging) temp += '_charging';
+
+        let average = this.average;
+        if (average <= 20) {
+            temp += '_20';
+        } else if (average <= 30) {
+            temp += '_30';
+        } else if (average <= 50) {
+            temp += '_50';
+        } else if (average <= 60) {
+            temp += '_60';
+        } else if (average <= 80) {
+            temp += '_80';
+        } else if (average <= 90) {
+            temp += '_90';
+        } else if (average > 90) {
+            temp += 'full'
+        }
+
+        return temp;
+    }
+
+    constructor() {
+    }
+}
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,3 @@
+<p>
+  dashboard works!
+</p>
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html'
+})
+export class DashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/security/security.component.html
+++ b/src/app/security/security.component.html
@@ -0,0 +1,3 @@
+<p>
+  security works!
+</p>
--- a/src/app/security/security.component.ts
+++ b/src/app/security/security.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-security',
+  templateUrl: './security.component.html'
+})
+export class SecurityComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -0,0 +1,3 @@
+<p>
+  settings works!
+</p>
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html'
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/weather/weather.component.html
+++ b/src/app/weather/weather.component.html
@@ -0,0 +1,27 @@
+<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
+    <i [class]="'wi wi-fw wi-' + weatherService.icon" style="font-size: 6rem"></i>
+    <div class="ml-0 ml-md-3">
+        <h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
+        <h3 class="m-0">{{weatherService.weather}}</h3>
+    </div>
+</div>
+<div class="my-4 d-flex mx-auto" style="max-width: 450px">
+    <div class="text-center" style="flex-grow: 1">
+        <i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
+    </div>
+    <div class="text-center" style="flex-grow: 1">
+        <i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
+    </div>
+    <div class="text-center" style="flex-grow: 1">
+        <i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
+    </div>
+</div>
+<mat-divider></mat-divider>
+<div class="my-4 d-flex justify-content-center">
+    <div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
+        {{w.day}}
+        <i [class]="'my-2 wi wi-fw wi-' + w.icon" style="font-size: 2rem"></i>
+        {{w.temp}} °C
+    </div>
+</div>
+<mat-divider></mat-divider>
--- a/src/app/weather/weather.component.ts
+++ b/src/app/weather/weather.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import {WeatherService} from './weather.service';
+
+@Component({
+  selector: 'app-weather',
+  templateUrl: './weather.component.html'
+})
+export class WeatherComponent implements OnInit {
+
+  constructor(public weatherService: WeatherService) { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/weather/weather.service.ts
+++ b/src/app/weather/weather.service.ts
@@ -0,0 +1,56 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {timer} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class WeatherService {
+    readonly apiKey = 'e8391af54b6fc09dc82b019fc68b8409';
+    readonly city = 'London';
+    readonly countryCode = 'CA';
+    readonly days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+    readonly weatherCodes = require('./weatherCodes.json');
+
+    // Weather information
+    cloudCover = 0;
+    forecast = [];
+    humidity = 0;
+    icon: string;
+    pressure = 0;
+    sunrise: Date;
+    sunset: Date;
+    temp = 0;
+    tempMin = 0;
+    tempMax = 0;
+    weather: string = '';
+    wind: [number, number] = [0, 0];
+
+    constructor(httpClient: HttpClient) {
+        timer(0, 5 * 60000).subscribe(async () => {
+            httpClient.get(`https://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => {
+                this.cloudCover = weather.clouds.all;
+                this.humidity = weather.main.humidity;
+                this.icon = this.weatherCodes[weather.weather[0].id].icon;
+                this.pressure = weather.main.pressure;
+                this.sunrise = new Date(weather.sys.sunrise);
+                this.sunset = new Date(weather.sys.sunset);
+                this.temp = Math.round(weather.main.temp);
+                this.tempMin = Math.round(weather.main.temp_min);
+                this.tempMax = Math.round(weather.main.temp_max);
+                this.weather = weather.weather[0].description;
+                this.wind = [weather.wind.deg, Math.round(weather.wind.speed)];
+            });
+            httpClient.get(`https://api.openweathermap.org/data/2.5/forecast?q=${this.city},${this.countryCode}&APPID=${this.apiKey}&units=metric`).toPromise().then((weather: any) => {
+                let temp = weather.list.filter(weather => weather.dt_txt.indexOf('12:00:00') != -1);
+                temp.splice(0, temp.length - 5);
+                this.forecast = temp.map(weather => ({
+                    day: this.days[new Date(weather.dt_txt).getDay()],
+                    icon: this.weatherCodes[weather.weather[0].id].icon,
+                    temp: Math.round(weather.main.temp)
+                }));
+                console.log(this.forecast[3])
+            });
+        });
+    }
+}
--- a/src/app/weather/weatherCodes.json
+++ b/src/app/weather/weatherCodes.json
@@ -0,0 +1,367 @@
+{
+    "200": {
+        "label": "thunderstorm with light rain",
+        "icon": "storm-showers"
+    },
+
+    "201": {
+        "label": "thunderstorm with rain",
+        "icon": "storm-showers"
+    },
+
+    "202": {
+        "label": "thunderstorm with heavy rain",
+        "icon": "storm-showers"
+    },
+
+    "210": {
+        "label": "light thunderstorm",
+        "icon": "storm-showers"
+    },
+
+    "211": {
+        "label": "thunderstorm",
+        "icon": "thunderstorm"
+    },
+
+    "212": {
+        "label": "heavy thunderstorm",
+        "icon": "thunderstorm"
+    },
+
+    "221": {
+        "label": "ragged thunderstorm",
+        "icon": "thunderstorm"
+    },
+
+    "230": {
+        "label": "thunderstorm with light drizzle",
+        "icon": "storm-showers"
+    },
+
+    "231": {
+        "label": "thunderstorm with drizzle",
+        "icon": "storm-showers"
+    },
+
+    "232": {
+        "label": "thunderstorm with heavy drizzle",
+        "icon": "storm-showers"
+    },
+
+    "300": {
+        "label": "light intensity drizzle",
+        "icon": "sprinkle"
+    },
+
+    "301": {
+        "label": "drizzle",
+        "icon": "sprinkle"
+    },
+
+    "302": {
+        "label": "heavy intensity drizzle",
+        "icon": "sprinkle"
+    },
+
+    "310": {
+        "label": "light intensity drizzle rain",
+        "icon": "sprinkle"
+    },
+
+    "311": {
+        "label": "drizzle rain",
+        "icon": "sprinkle"
+    },
+
+    "312": {
+        "label": "heavy intensity drizzle rain",
+        "icon": "sprinkle"
+    },
+
+    "313": {
+        "label": "shower rain and drizzle",
+        "icon": "sprinkle"
+    },
+
+    "314": {
+        "label": "heavy shower rain and drizzle",
+        "icon": "sprinkle"
+    },
+
+    "321": {
+        "label": "shower drizzle",
+        "icon": "sprinkle"
+    },
+
+    "500": {
+        "label": "light rain",
+        "icon": "rain"
+    },
+
+    "501": {
+        "label": "moderate rain",
+        "icon": "rain"
+    },
+
+    "502": {
+        "label": "heavy intensity rain",
+        "icon": "rain"
+    },
+
+    "503": {
+        "label": "very heavy rain",
+        "icon": "rain"
+    },
+
+    "504": {
+        "label": "extreme rain",
+        "icon": "rain"
+    },
+
+    "511": {
+        "label": "freezing rain",
+        "icon": "rain-mix"
+    },
+
+    "520": {
+        "label": "light intensity shower rain",
+        "icon": "showers"
+    },
+
+    "521": {
+        "label": "shower rain",
+        "icon": "showers"
+    },
+
+    "522": {
+        "label": "heavy intensity shower rain",
+        "icon": "showers"
+    },
+
+    "531": {
+        "label": "ragged shower rain",
+        "icon": "showers"
+    },
+
+    "600": {
+        "label": "light snow",
+        "icon": "snow"
+    },
+
+    "601": {
+        "label": "snow",
+        "icon": "snow"
+    },
+
+    "602": {
+        "label": "heavy snow",
+        "icon": "snow"
+    },
+
+    "611": {
+        "label": "sleet",
+        "icon": "sleet"
+    },
+
+    "612": {
+        "label": "shower sleet",
+        "icon": "sleet"
+    },
+
+    "615": {
+        "label": "light rain and snow",
+        "icon": "rain-mix"
+    },
+
+    "616": {
+        "label": "rain and snow",
+        "icon": "rain-mix"
+    },
+
+    "620": {
+        "label": "light shower snow",
+        "icon": "rain-mix"
+    },
+
+    "621": {
+        "label": "shower snow",
+        "icon": "rain-mix"
+    },
+
+    "622": {
+        "label": "heavy shower snow",
+        "icon": "rain-mix"
+    },
+
+    "701": {
+        "label": "mist",
+        "icon": "sprinkle"
+    },
+
+    "711": {
+        "label": "smoke",
+        "icon": "smoke"
+    },
+
+    "721": {
+        "label": "haze",
+        "icon": "day-haze"
+    },
+
+    "731": {
+        "label": "sand, dust whirls",
+        "icon": "cloudy-gusts"
+    },
+
+    "741": {
+        "label": "fog",
+        "icon": "fog"
+    },
+
+    "751": {
+        "label": "sand",
+        "icon": "cloudy-gusts"
+    },
+
+    "761": {
+        "label": "dust",
+        "icon": "dust"
+    },
+
+    "762": {
+        "label": "volcanic ash",
+        "icon": "smog"
+    },
+
+    "771": {
+        "label": "squalls",
+        "icon": "day-windy"
+    },
+
+    "781": {
+        "label": "tornado",
+        "icon": "tornado"
+    },
+
+    "800": {
+        "label": "clear sky",
+        "icon": "day-sunny"
+    },
+
+    "801": {
+        "label": "few clouds",
+        "icon": "cloudy"
+    },
+
+    "802": {
+        "label": "scattered clouds",
+        "icon": "cloudy"
+    },
+
+    "803": {
+        "label": "broken clouds",
+        "icon": "cloudy"
+    },
+
+    "804": {
+        "label": "overcast clouds",
+        "icon": "cloudy"
+    },
+
+
+    "900": {
+        "label": "tornado",
+        "icon": "tornado"
+    },
+
+    "901": {
+        "label": "tropical storm",
+        "icon": "hurricane"
+    },
+
+    "902": {
+        "label": "hurricane",
+        "icon": "hurricane"
+    },
+
+    "903": {
+        "label": "cold",
+        "icon": "snowflake-cold"
+    },
+
+    "904": {
+        "label": "hot",
+        "icon": "hot"
+    },
+
+    "905": {
+        "label": "windy",
+        "icon": "windy"
+    },
+
+    "906": {
+        "label": "hail",
+        "icon": "hail"
+    },
+
+    "951": {
+        "label": "calm",
+        "icon": "day-sunny"
+    },
+
+    "952": {
+        "label": "light breeze",
+        "icon": "cloudy-gusts"
+    },
+
+    "953": {
+        "label": "gentle breeze",
+        "icon": "cloudy-gusts"
+    },
+
+    "954": {
+        "label": "moderate breeze",
+        "icon": "cloudy-gusts"
+    },
+
+    "955": {
+        "label": "fresh breeze",
+        "icon": "cloudy-gusts"
+    },
+
+    "956": {
+        "label": "strong breeze",
+        "icon": "cloudy-gusts"
+    },
+
+    "957": {
+        "label": "high wind, near gale",
+        "icon": "cloudy-gusts"
+    },
+
+    "958": {
+        "label": "gale",
+        "icon": "cloudy-gusts"
+    },
+
+    "959": {
+        "label": "severe gale",
+        "icon": "cloudy-gusts"
+    },
+
+    "960": {
+        "label": "storm",
+        "icon": "thunderstorm"
+    },
+
+    "961": {
+        "label": "violent storm",
+        "icon": "thunderstorm"
+    },
+
+    "962": {
+        "label": "hurricane",
+        "icon": "cloudy-gusts"
+    }
+}
--- a/src/assets/bootstrap.min.css
+++ b/src/assets/bootstrap.min.css
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,12 @@
 export const environment = {
-  production: true
+    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,
+    version: require('../../package.json').version
 };
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,16 +1,12 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
 export const environment = {
-  production: false
+    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,
+    version: require('../../package.json').version
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/src/index.html
@@ -1,14 +1,15 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>HomeFront</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>Home Front</title>
+    <base href="/">

-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="assets/icon.png">
+    <link rel="stylesheet" type="text/css" href="assets/bootstrap.min.css">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';

+import 'hammerjs';
+
 if (environment.production) {
  enableProdMode();
 }
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,58 @@
 /* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css?family=Archivo|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');
+
+html, body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+
+    font-family: 'Archivo', sans-serif;
+}
+
+.mat-list-item {
+    height: auto !important;
+    color: #9CA4B6 !important;
+
+    &.active {
+        background-color: #262930 !important;
+        color: #1CA8DD !important;
+    }
+}
+
+.mat-divider {
+    color: #9CA4B6 !important;
+}
+
+.bg-primary {
+    background-color: #f8f8f8 !important;
+}
+
+.bg-secondary {
+    background-color: #2F323A !important;
+}
+
+.scale-150 {
+    transform: scale(1.5);
+}
+
+.scale-200 {
+    transform: scale(2);
+}
+
+.scale-300 {
+    transform: scale(3);
+}
+
+.scale-500 {
+    transform: scale(5);
+}
+
+.material-icons {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+}
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -2,7 +2,7 @@
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
-    "types": []
+    "types": ["node"]
  },
  "exclude": [
    "test.ts",