From a2a13f6c6a2737d306f2c0f7e954c1609f1819b2 Mon Sep 17 00:00:00 2001 From: wyattb Date: Thu, 19 Sep 2024 13:23:25 -0400 Subject: [PATCH] #172 - requested improvements(mainly sizing stuff) --- angular-client/src/app/app.module.ts | 8 ++- .../src/components/graph/graph.component.ts | 2 +- .../charging-page-mobile.component.html | 22 +++--- .../charging-page-mobile.component.ts | 2 +- .../charging-page.component.html | 20 +++--- .../charging-page/charging-page.component.ts | 2 +- .../cell-temp-display.component.html | 17 +++-- .../cell-temp-display.component.ts | 4 +- .../cell-temp-mobile.component.css | 6 ++ .../cell-temp-mobile.component.html | 22 ++++++ .../cell-temp-mobile.component.ts | 24 +++++++ .../combined-status-display.component.ts | 2 +- .../fault-display.component.html | 18 ++--- .../fault-display/fault-display.component.ts | 30 ++++---- .../high-low-cell-display.component.html | 17 ++++- .../high-low-cell-display.component.ts | 17 +++-- .../high-low-cell-mobile.component.css | 6 ++ .../high-low-cell-mobile.component.html | 70 +++++++++++++++++++ .../high-low-cell-mobile.component.ts | 29 ++++++++ .../high-low-cell-graph.component.ts | 28 +------- .../pack-voltage-display.component.html | 9 +-- .../pack-voltage-display.component.ts | 9 +-- .../pack-voltage-mobile.component.css | 0 .../pack-voltage-mobile.component.html | 8 +++ .../pack-voltage-mobile.component.ts | 22 ++++++ .../pack-voltage-graph.component.ts | 14 +--- .../landing-page/landing-page.component.ts | 2 +- scylla-server/src/socket/mock-proxy-client.ts | 2 +- 28 files changed, 285 insertions(+), 127 deletions(-) create mode 100644 angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.css create mode 100644 angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.html create mode 100644 angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts create mode 100644 angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.css create mode 100644 angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.html create mode 100644 angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts create mode 100644 angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.css create mode 100644 angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.html create mode 100644 angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts diff --git a/angular-client/src/app/app.module.ts b/angular-client/src/app/app.module.ts index e57cc84f..7391deaa 100644 --- a/angular-client/src/app/app.module.ts +++ b/angular-client/src/app/app.module.ts @@ -101,6 +101,9 @@ import FaultedStatus from 'src/pages/charging-page/components/faulted-status/fau import ActiveStatus from 'src/pages/charging-page/components/active-status/active-status.component'; import CombinedStatusDisplay from 'src/pages/charging-page/components/combined-status-display/combined-status-display.component'; import CombinedStatusMobile from 'src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component'; +import PackVoltageMobileDisplay from 'src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component'; +import HighLowCellMobile from 'src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component'; +import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component'; @NgModule({ declarations: [ @@ -185,7 +188,10 @@ import CombinedStatusMobile from 'src/pages/charging-page/components/combined-st BalancingStatus, FaultedStatus, ActiveStatus, - CombinedStatusMobile + CombinedStatusMobile, + PackVoltageMobileDisplay, + HighLowCellMobile, + CellTempMobile ], imports: [ BrowserModule, diff --git a/angular-client/src/components/graph/graph.component.ts b/angular-client/src/components/graph/graph.component.ts index aa4cac14..58d1d64a 100644 --- a/angular-client/src/components/graph/graph.component.ts +++ b/angular-client/src/components/graph/graph.component.ts @@ -51,7 +51,7 @@ export class GraphComponent implements OnInit { updateChart = () => { this.chart.updateSeries([ { - name: 'Data Series', + name: this.title, data: Array.from(this.data) } ]); diff --git a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html index 77ba47d4..bab61520 100644 --- a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html +++ b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html @@ -1,9 +1,13 @@ - + - + - + @@ -11,15 +15,9 @@ - - - - - - - - - + + + diff --git a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts index f5432c30..4e96eede 100644 --- a/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts +++ b/angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.ts @@ -11,7 +11,7 @@ export default class ChargingPageMobile { @Input() time = new Date(); location: string = 'No Location Set'; constructor(private storage: Storage) {} - mobileThreshold = 1200; + mobileThreshold = 1070; isMobile = window.innerWidth < this.mobileThreshold; ngOnInit() { diff --git a/angular-client/src/pages/charging-page/charging-page.component.html b/angular-client/src/pages/charging-page/charging-page.component.html index c8fcef4f..a0f6fcb4 100644 --- a/angular-client/src/pages/charging-page/charging-page.component.html +++ b/angular-client/src/pages/charging-page/charging-page.component.html @@ -3,7 +3,7 @@ - +
- + - + - - - + + + - + - - - + + + diff --git a/angular-client/src/pages/charging-page/charging-page.component.ts b/angular-client/src/pages/charging-page/charging-page.component.ts index 64f8f344..405374ea 100644 --- a/angular-client/src/pages/charging-page/charging-page.component.ts +++ b/angular-client/src/pages/charging-page/charging-page.component.ts @@ -14,7 +14,7 @@ export default class ChargingPage implements OnInit { time = new Date(); location: string = 'No Location Set'; constructor(private storage: Storage) {} - mobileThreshold = 1200; + mobileThreshold = 1070; isMobile = window.innerWidth < this.mobileThreshold; ngOnInit() { diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html index ac952f2a..7364d816 100644 --- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html +++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html @@ -1,15 +1,12 @@ - -
+ -
-
@@ -18,10 +15,12 @@ - + + diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts index ad9483f5..a529a6c4 100644 --- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts +++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts @@ -12,7 +12,6 @@ import { GraphData } from 'src/utils/types.utils'; export default class CellTempDisplay { avgTemp: number = 0; maxTemp: number = 0; - resetGraph: boolean = false; resetGraphButton = { onClick: () => { this.cellTempData = []; @@ -20,7 +19,7 @@ export default class CellTempDisplay { icon: 'restart_alt' }; cellTempData: GraphData[] = []; - mobileThreshold = 1200; + mobileThreshold = 1070; isDesktop = window.innerWidth > this.mobileThreshold; @HostListener('window:resize', ['$event']) @@ -36,7 +35,6 @@ export default class CellTempDisplay { this.cellTempData.push({ x: new Date().getTime(), y: this.maxTemp }); }); this.storage.get(IdentifierDataType.CELL_TEMP_AVG).subscribe((value) => { - this.resetGraph = false; this.avgTemp = floatPipe(value.values[0]); }); } diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.css b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.css new file mode 100644 index 00000000..6f62df68 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.css @@ -0,0 +1,6 @@ +.connection-dot { + width: 50px; + height: 50px; + border-radius: 50%; + margin-top: 20px; +} diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.html new file mode 100644 index 00000000..edb2e720 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.html @@ -0,0 +1,22 @@ + +
+ + + + + + + +
+ + +
+ + + + + + + + + diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts new file mode 100644 index 00000000..dd53c284 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.ts @@ -0,0 +1,24 @@ +import { Component, Input } from '@angular/core'; +import Storage from 'src/services/storage.service'; + +import { GraphData } from 'src/utils/types.utils'; + +@Component({ + selector: 'cell-temp-mobile', + templateUrl: './cell-temp-mobile.component.html', + styleUrls: ['./cell-temp-mobile.component.css'] +}) +export default class CellTempMobile { + @Input() avgTemp: number = 0; + @Input() maxTemp: number = 0; + @Input() resetGraphButton = { + onClick: () => { + this.cellTempData = []; + }, + icon: 'restart_alt' + }; + @Input() cellTempData: GraphData[] = []; + constructor(private storage: Storage) {} + + ngOnInit() {} +} diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts index 7634beb2..b8146fac 100644 --- a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts +++ b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts @@ -6,7 +6,7 @@ import { Component, HostListener } from '@angular/core'; styleUrls: ['./combined-status-display.component.css'] }) export default class CombinedStatusDisplay { - mobileThreshold = 1200; + mobileThreshold = 1070; isMobile = window.innerWidth < this.mobileThreshold; @HostListener('window:resize', ['$event']) diff --git a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.html b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.html index b68358c7..3f51bd0e 100644 --- a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.html +++ b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.html @@ -10,24 +10,16 @@ : 'background-color: #4d453c; width: 100%; border-radius: 2px' " > - - +
+ - - + +
diff --git a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts index 813e6985..ce9a425a 100644 --- a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts +++ b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.ts @@ -46,31 +46,28 @@ export default class FaultDisplay { ngOnInit() { this.storage.get(IdentifierDataType.COMM_TIMEOUT_FAULT).subscribe((value) => { - this.addFault(value.values[0], 'Comm Timeout', FaultType.Charger); + this.addFault(parseInt(value.values[0]), 'Comm Timeout', FaultType.Charger); }); this.storage.get(IdentifierDataType.HARDWARE_FAILURE_FAULT).subscribe((value) => { - this.addFault(value.values[0], 'Hardware Failure', FaultType.Charger); + this.addFault(parseInt(value.values[0]), 'Hardware Failure', FaultType.Charger); }); this.storage.get(IdentifierDataType.OVER_TEMP_FAULT).subscribe((value) => { - this.addFault(value.values[0], 'Over Temp', FaultType.Charger); + this.addFault(parseInt(value.values[0]), 'Over Temp', FaultType.Charger); }); this.storage.get(IdentifierDataType.VOLTAGE_WRONG_FAULT).subscribe((value) => { - this.addFault(value.values[0], 'Voltage Wrong', FaultType.Charger); + this.addFault(parseInt(value.values[0]), 'Voltage Wrong', FaultType.Charger); }); this.storage.get(IdentifierDataType.WRONG_BAT_CONNECT_FAULT).subscribe((value) => { - this.addFault(value.values[0], 'Wrong Battery Connect', FaultType.Charger); + this.addFault(parseInt(value.values[0]), 'Wrong Battery Connect', FaultType.Charger); }); - /** - * This is based on the shepard enum for faults: - * https://github.com/Northeastern-Electric-Racing/ShepherdBMS-2/blob/6eb3f863ed131a15bdf98665532cb7807bbd2920/Core/Inc/datastructs.h#L39 - */ this.storage.get(IdentifierDataType.BMS_FAULTS).subscribe((value) => { - this.addFault(value.values[0], 'MASSIVE L, Should not be a fault hahaha', FaultType.BMS); + const bmsFaultID = parseInt(value.values[0]); + this.addFault(bmsFaultID, this.getBMSFaultName(bmsFaultID), FaultType.BMS); }); } @@ -81,11 +78,8 @@ export default class FaultDisplay { * @param faultValue an string with an integer value. * @param faultName the name of the fault, to be displayed. */ - addFault(faultValue: string, faultName: string, faultType: FaultType) { - if (parseInt(faultValue) !== 0) { - if (faultType === FaultType.BMS) { - faultName = this.getBMSFaultName(parseInt(faultValue)); - } + addFault(faultValue: number, faultName: string, faultType: FaultType) { + if (faultValue !== 0) { if (this.faults.length >= 50) { this.faults.pop(); } @@ -95,9 +89,15 @@ export default class FaultDisplay { } } + /** + * This is based on the shepard enum for faults: + * https://github.com/Northeastern-Electric-Racing/ShepherdBMS-2/blob/6eb3f863ed131a15bdf98665532cb7807bbd2920/Core/Inc/datastructs.h#L39 + */ getBMSFaultName(faultValue: number): string { let faultName = ''; switch (faultValue) { + case 0: + break; case BMS_FAULTS_TYPES.CELLS_NOT_BALANCING: faultName = 'Cells Not Balancing'; break; diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html index 64a107a2..9bff7d52 100644 --- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,20 @@ - + + diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts index 0bef7257..a0ba3c5d 100644 --- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts @@ -2,6 +2,7 @@ import { Component, HostListener } from '@angular/core'; import Storage from 'src/services/storage.service'; import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'; import { decimalPipe } from 'src/utils/pipes.utils'; +import { GraphData } from 'src/utils/types.utils'; @Component({ selector: 'high-low-cell-display', @@ -12,12 +13,14 @@ export default class HighLowCellDisplay { delta: number = 0; lowCellVoltage: number = 0; highCellVoltage: number = 0; - mobileThreshold = 1200; + mobileThreshold = 1070; isDesktop = window.innerWidth > this.mobileThreshold; - resetGraph: boolean = false; + highVoltsData: GraphData[] = []; + lowVoltsData: GraphData[] = []; resetGraphButton = { onClick: () => { - this.resetGraph = true; + this.highVoltsData = []; + this.lowVoltsData = []; }, icon: 'restart_alt' }; @@ -31,18 +34,14 @@ export default class HighLowCellDisplay { ngOnInit() { this.storage.get(IdentifierDataType.VOLTS_LOW).subscribe((value) => { - if (this.resetGraph) { - this.resetGraph = false; - } this.lowCellVoltage = decimalPipe(value.values[0], 3); this.delta = decimalPipe((this.highCellVoltage - this.lowCellVoltage).toFixed(3), 3); + this.lowVoltsData.push({ x: new Date().getTime(), y: this.lowCellVoltage }); }); this.storage.get(IdentifierDataType.VOLTS_HIGH).subscribe((value) => { - if (this.resetGraph) { - this.resetGraph = false; - } this.highCellVoltage = decimalPipe(value.values[0], 3); this.delta = decimalPipe((this.highCellVoltage - this.lowCellVoltage).toFixed(3), 3); + this.highVoltsData.push({ x: new Date().getTime(), y: this.highCellVoltage }); }); } } diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.css b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.css new file mode 100644 index 00000000..6f62df68 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.css @@ -0,0 +1,6 @@ +.connection-dot { + width: 50px; + height: 50px; + border-radius: 50%; + margin-top: 20px; +} diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.html b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.html new file mode 100644 index 00000000..3c9809aa --- /dev/null +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts new file mode 100644 index 00000000..35d31dd5 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.ts @@ -0,0 +1,29 @@ +import { Component, Input } from '@angular/core'; +import Storage from 'src/services/storage.service'; +import { GraphData } from 'src/utils/types.utils'; + +@Component({ + selector: 'high-low-cell-mobile', + templateUrl: './high-low-cell-mobile.component.html', + styleUrls: ['./high-low-cell-mobile.component.css'] +}) +export default class HighLowCellMobile { + @Input() delta: number = 0; + @Input() lowCellVoltage: number = 0; + @Input() highCellVoltage: number = 0; + mobileThreshold = 1070; + isDesktop = window.innerWidth > this.mobileThreshold; + @Input() highVoltsData: GraphData[] = []; + @Input() lowVoltsData: GraphData[] = []; + @Input() resetGraphButton = { + onClick: () => { + this.highVoltsData = []; + this.lowVoltsData = []; + }, + icon: 'restart_alt' + }; + + constructor(private storage: Storage) {} + + ngOnInit() {} +} diff --git a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts index 2ca780ad..e4483ae5 100644 --- a/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts +++ b/angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts @@ -1,7 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; import Storage from 'src/services/storage.service'; -import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'; -import { decimalPipe } from 'src/utils/pipes.utils'; import { GraphData } from 'src/utils/types.utils'; @Component({ @@ -10,29 +8,9 @@ import { GraphData } from 'src/utils/types.utils'; styleUrls: ['./high-low-cell-graph.component.css'] }) export default class HighLowCellGraph implements OnInit { - highVoltsData: GraphData[] = []; - lowVoltsData: GraphData[] = []; - maxDataPoints = 100; - @Input() resetGraph: boolean = false; + @Input() highVoltsData: GraphData[] = []; + @Input() lowVoltsData: GraphData[] = []; constructor(private storage: Storage) {} - ngOnInit() { - this.storage.get(IdentifierDataType.VOLTS_HIGH).subscribe((value) => { - if (this.resetGraph) { - this.resetData(); - } - this.highVoltsData.push({ x: new Date().getTime(), y: decimalPipe(value.values[0]) }); - }); - this.storage.get(IdentifierDataType.VOLTS_LOW).subscribe((value) => { - if (this.resetGraph) { - this.resetData(); - } - this.lowVoltsData.push({ x: new Date().getTime(), y: decimalPipe(value.values[0]) }); - }); - } - - resetData() { - this.lowVoltsData = []; - this.highVoltsData = []; - } + ngOnInit() {} } diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html index 54e82007..e7dfd8b5 100644 --- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html +++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html @@ -1,12 +1,9 @@ - + - + + diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts index 2af03aec..bf66db7b 100644 --- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts +++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts @@ -2,6 +2,7 @@ import { Component, HostListener } from '@angular/core'; import Storage from 'src/services/storage.service'; import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'; import { floatPipe } from 'src/utils/pipes.utils'; +import { GraphData } from 'src/utils/types.utils'; @Component({ selector: 'pack-voltage-display', @@ -10,14 +11,14 @@ import { floatPipe } from 'src/utils/pipes.utils'; }) export default class PackVoltageDisplay { voltage: number = 0; - resetGraph: boolean = false; + packVoltData: GraphData[] = []; resetGraphButton = { onClick: () => { - this.resetGraph = true; + this.packVoltData = []; }, icon: 'restart_alt' }; - mobileThreshold = 1200; + mobileThreshold = 1070; isDesktop = window.innerWidth > this.mobileThreshold; @HostListener('window:resize', ['$event']) @@ -29,8 +30,8 @@ export default class PackVoltageDisplay { ngOnInit() { this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => { - this.resetGraph = false; this.voltage = floatPipe(value.values[0]); + this.packVoltData.push({ x: new Date().getTime(), y: this.voltage }); }); } } diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.css b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.css new file mode 100644 index 00000000..e69de29b diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.html b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.html new file mode 100644 index 00000000..f761fded --- /dev/null +++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts new file mode 100644 index 00000000..0857c303 --- /dev/null +++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.ts @@ -0,0 +1,22 @@ +import { Component, Input } from '@angular/core'; +import Storage from 'src/services/storage.service'; +import { GraphData } from 'src/utils/types.utils'; + +@Component({ + selector: 'pack-voltage-mobile', + templateUrl: './pack-voltage-mobile.component.html', + styleUrls: ['./pack-voltage-mobile.component.css'] +}) +export default class PackVoltageMobileDisplay { + @Input() voltage: number = 0; + @Input() packVoltData: GraphData[] = []; + resetGraphButton = { + onClick: () => { + this.packVoltData = []; + }, + icon: 'restart_alt' + }; + constructor(private storage: Storage) {} + + ngOnInit() {} +} diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts index b5dc1ede..0e6d1724 100644 --- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts +++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts @@ -1,6 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; import Storage from 'src/services/storage.service'; -import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'; import { GraphData } from 'src/utils/types.utils'; @Component({ @@ -9,17 +8,8 @@ import { GraphData } from 'src/utils/types.utils'; styleUrls: ['./pack-voltage-graph.component.css'] }) export default class PackVoltageGraph implements OnInit { - packVoltData: GraphData[] = []; - @Input() resetGraph: boolean = false; - maxDataPoints = 100; + @Input() packVoltData: GraphData[] = []; constructor(private storage: Storage) {} - ngOnInit() { - this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => { - if (this.resetGraph) { - this.packVoltData = []; - } - this.packVoltData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) }); - }); - } + ngOnInit() {} } diff --git a/angular-client/src/pages/landing-page/landing-page.component.ts b/angular-client/src/pages/landing-page/landing-page.component.ts index 31144e04..13f15da1 100644 --- a/angular-client/src/pages/landing-page/landing-page.component.ts +++ b/angular-client/src/pages/landing-page/landing-page.component.ts @@ -17,7 +17,7 @@ export default class LandingPage implements OnInit { time = new Date(); location: string = 'No Location Set'; newRunIsLoading = false; - mobileThreshold = 1200; + mobileThreshold = 1070; isMobile = window.innerWidth < this.mobileThreshold; constructor( diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts index 4e5a103d..6bc4c97b 100644 --- a/scylla-server/src/socket/mock-proxy-client.ts +++ b/scylla-server/src/socket/mock-proxy-client.ts @@ -285,7 +285,7 @@ export default class MockProxyClient implements ProxyClient { return new Promise((resolve) => setTimeout(() => { resolve('loop'); - }, 1) + }, 10) ); };