From c0a15a99502af5f4a6f2f71e7facab4f20a73a23 Mon Sep 17 00:00:00 2001 From: Zak Timson Date: Thu, 15 Nov 2018 12:57:34 -0500 Subject: [PATCH] Pushed new battery page --- src/app/app.module.ts | 3 +- src/app/battery/battery.component.html | 42 ++++++++++++++++++---- src/app/battery/battery.component.ts | 22 ++++++++---- src/app/battery/battery.service.ts | 48 ++++++++++++++++++-------- src/styles.scss | 6 ++++ 5 files changed, 93 insertions(+), 28 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9c5fe31..ca59a13 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,7 +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'; +import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts'; export const firebaseApp = firebase.initializeApp(environment.firebase); @@ -55,6 +55,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase); MatProgressSpinnerModule, MatSidenavModule, MatToolbarModule, + NgxChartsModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }), ], providers: [], diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html index ab6cc7a..9d58502 100644 --- a/src/app/battery/battery.component.html +++ b/src/app/battery/battery.component.html @@ -1,8 +1,38 @@ -

BATTERY LEVEL: {{batteryService.charging == null ? 'UNKNOWN' : batteryService.average}}

- -

EMULATOR: 75%

-
- {{batteryService.icon}} - {{tempHist[tempHist.length - 1]}} °C +

POWER WALL: + {{batteryService.average * 100}}% + UNKNOWN +

+
+
+
+
+ +
+
+ + {{b.name}} +
+ {{b.history[0].percentage * 100}}% +
+ {{b.history[0].temp}} °C +
+ Charging: {{b.history[0].charging}} diff --git a/src/app/battery/battery.component.ts b/src/app/battery/battery.component.ts index 7648688..ddfb4ea 100644 --- a/src/app/battery/battery.component.ts +++ b/src/app/battery/battery.component.ts @@ -1,17 +1,25 @@ import {Component} from '@angular/core'; import {BatteryService} from './battery.service'; -import {firebaseApp} from '../app.module'; @Component({ selector: 'app-batterys', templateUrl: './battery.component.html' }) 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); - }) - } + airScheme = { + name: 'air', + selectable: true, + group: 'Continuous', + domain: ['#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b'] + }; + + fireScheme = { + name: 'flame', + selectable: false, + group: 'Continuous', + domain: ['#00deff', '#3db0ff', '#a274d7', '#c42576', '#9f0000'] + }; + + constructor(public batteryService: BatteryService) { } } diff --git a/src/app/battery/battery.service.ts b/src/app/battery/battery.service.ts index 6fcfe29..7aac8da 100644 --- a/src/app/battery/battery.service.ts +++ b/src/app/battery/battery.service.ts @@ -1,36 +1,56 @@ import {Injectable} from '@angular/core'; +import {firebaseApp} from '../app.module'; @Injectable({ providedIn: 'root' }) export class BatteryService { - percentage: number[] = [0]; - charging?: boolean; + readonly firestore; - get average() { - return this.percentage.reduce((acc, battery) => acc + battery, 0) / this.percentage.length; + average = 0; + temperatureData = []; + percentageData = []; + batteries = []; + last: Date; + + constructor() { + this.firestore = firebaseApp.firestore(); + this.firestore.settings({timestampsInSnapshots: true}); + this.firestore.collection('Battery').doc('TEMP').onSnapshot(snap => { + this.last = new Date(); + + let data = snap.data(); + this.batteries = Object.keys(data).map(key => ({name: key, history: data[key].reverse()})); + this.average = this.batteries.reduce((acc, battery) => acc + battery.history[0].percentage, 0) / this.batteries.length; + this.percentageData = this.batteries.map(battery => ({name: battery.name, value: battery.history[0].percentage * 100})); + this.temperatureData = this.batteries.map(battery => ({name: battery.name, value: Math.round(battery.history[0].temp * 10) / 10})); + }); } + + get icon() { - if (this.charging == null) return 'battery_unknown'; + if (!this.batteries.length) return 'battery_alert'; + if (!this.last || this.last.getTime() < new Date().setMinutes(new Date().getMinutes() - 2).getTime()) return 'battery_warn'; + + return 'battery_20'; let temp = 'battery'; - if (this.charging) temp += '_charging'; + //if (this.batteries.length) temp += '_charging'; - let average = this.average; - if (average <= 20) { + if (this.average <= 20) { temp += '_20'; - } else if (average <= 30) { + } else if (this.average <= 30) { temp += '_30'; - } else if (average <= 50) { + } else if (this.average <= 50) { temp += '_50'; - } else if (average <= 60) { + } else if (this.average <= 60) { temp += '_60'; - } else if (average <= 80) { + } else if (this.average <= 80) { temp += '_80'; - } else if (average <= 90) { + } else if (this.average <= 90) { temp += '_90'; - } else if (average > 90) { + } else if (this.average > 90) { temp += 'full' } diff --git a/src/styles.scss b/src/styles.scss index 1f7d3c8..946a9e6 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,6 +29,12 @@ html, body { background-color: #2F323A; } +.ngx-charts { + text { + fill: #ffffff; + } +} + .center { position: fixed; left: 50%;