From 594eb2e61208e900766ddaa0b401d3848b3f73de Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Fri, 2 Aug 2024 16:04:33 -0400
Subject: [PATCH 01/31] #172 added fault fix, battery page graphs now show all
 data, added reset button for graphs, cell voltage comp has decimal padding
 for whole numbers

---
 .../cell-temp-display.component.html          |  4 +--
 .../cell-temp-display.component.ts            | 17 +++++-----
 .../cell-temp-graph.component.ts              |  9 +++---
 .../fault-display/fault-display.component.css |  2 +-
 .../fault-display.component.html              |  4 +--
 .../fault-display/fault-display.component.ts  | 32 +++++++++----------
 .../high-low-cell-display.component.html      | 11 ++++---
 .../high-low-cell-display.component.ts        | 13 ++++++++
 .../high-low-cell-graph.component.ts          | 20 ++++++++----
 .../pack-voltage-display.component.html       |  4 +--
 .../pack-voltage-display.component.ts         |  9 ++++++
 .../pack-voltage-graph.component.ts           |  9 +++---
 12 files changed, 83 insertions(+), 51 deletions(-)

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 2a6da959..56e39524 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,4 +1,4 @@
-<info-background icon="thermostat" title="Cell Temp">
+<info-background icon="thermostat" title="Cell Temp" [button]="resetGraphButton">
   <hstack>
     <vstack style="width: 10%">
       <hstack>
@@ -19,6 +19,6 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
     or just don't enforce -->
-    <cell-temp-graph style="width: 80%; padding-bottom: 5vh"></cell-temp-graph>
+    <cell-temp-graph style="width: 80%; padding-bottom: 5vh" [resetGraph]="resetGraph"></cell-temp-graph>
   </hstack>
 </info-background>
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 98144964..5a74b602 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
@@ -11,22 +11,23 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class CellTempDisplay {
   avgTemp: number = 0;
   maxTemp: number = 0;
-
-  // -------- Commented out for now, until mobile view is implemented -----//
-  // mobileThreshold = 1000;
-  // isDesktop = window.innerWidth > this.mobileThreshold;
-  // @HostListener('window:resize', ['$event'])
-  // onResize() {
-  //   this.isDesktop = window.innerWidth >= this.mobileThreshold;
-  // }
+  resetGraph: boolean = false;
+  resetGraphButton = {
+    onClick: () => {
+      this.resetGraph = true;
+    },
+    icon: 'restart_alt'
+  };
 
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
+      this.resetGraph = false; //!!!! FOR REVIEW !!!!: is there a better way to do this reseting of the graph boolean?
       this.maxTemp = floatPipe(value.values[0]);
     });
     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-graph/cell-temp-graph.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
index 8d0e8725..4504ad62 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+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';
@@ -10,15 +10,16 @@ import { GraphData } from 'src/utils/types.utils';
 })
 export default class CellTempGraph implements OnInit {
   cellTempData: GraphData[] = [];
+  @Input() resetGraph: boolean = false;
   maxDataPoints = 100;
 
   constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
-      this.cellTempData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
-      if (this.cellTempData.length >= 100) {
-        this.cellTempData.shift();
+      if (this.resetGraph) {
+        this.cellTempData = [];
       }
+      this.cellTempData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
     });
   }
 }
diff --git a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
index 9f6053ff..d7e78752 100644
--- a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
+++ b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
@@ -4,5 +4,5 @@
   align-items: left;
   justify-content: left;
   padding-left: 10%;
-  overflow: hidden;
+  overflow-y: auto;
 }
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 7db109f4..d8c61566 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
@@ -1,8 +1,8 @@
-<info-background title="Faults" icon="warning_amber" [button]="resetButton">
+<info-background title="Faults" svgIcon="warning" [button]="resetButton">
   <div style="min-width: 20vw; padding-right: 30px; padding-left: 0px" class="fault-text-body">
     <vstack style="width: 100%">
       <div style="height: 10px"></div>
-      <ng-container *ngFor="let fault of this.faults.reverse(); index as i">
+      <ng-container *ngFor="let fault of faults | slice: 0 : 50; index as i">
         <div
           [style]="
             i % 2 == 0
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 2df063ba..8102158f 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
@@ -11,7 +11,7 @@ export default class FaultDisplay {
   faults: { faultName: string; time: string }[] = [];
   resetButton = {
     onClick: () => {
-      this.faults = [];
+      this.faults.shift();
     },
     icon: 'restart_alt'
   };
@@ -19,33 +19,33 @@ export default class FaultDisplay {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.COMM_TIMEOUT_FAULT).subscribe((value) => {
-      if (value.values[0]) {
-        this.faults.push({ faultName: 'Communication Timeout', time: new Date().toLocaleTimeString() });
-      }
+      this.faultPushCheck(value.values[0], 'Comm Timeout');
     });
 
     this.storage.get(IdentifierDataType.HARDWARE_FAILURE_FAULT).subscribe((value) => {
-      if (value.values[0]) {
-        this.faults.push({ faultName: 'Hardware Failure', time: new Date().toLocaleTimeString() });
-      }
+      this.faultPushCheck(value.values[0], 'Hardware Failure');
     });
 
     this.storage.get(IdentifierDataType.OVER_TEMP_FAULT).subscribe((value) => {
-      if (value.values[0]) {
-        this.faults.push({ faultName: 'Over Temp', time: new Date().toLocaleTimeString() });
-      }
+      this.faultPushCheck(value.values[0], 'Over Temp');
     });
 
     this.storage.get(IdentifierDataType.VOLTAGE_WRONG_FAULT).subscribe((value) => {
-      if (value.values[0]) {
-        this.faults.push({ faultName: 'Voltage Wrong', time: new Date().toLocaleTimeString() });
-      }
+      this.faultPushCheck(value.values[0], 'Voltage Wrong');
     });
 
     this.storage.get(IdentifierDataType.WRONG_BAT_CONNECT_FAULT).subscribe((value) => {
-      if (value.values[0]) {
-        this.faults.push({ faultName: 'Wrong Battery Connect', time: new Date().toLocaleTimeString() });
-      }
+      this.faultPushCheck(value.values[0], 'Wrong Battery Connect');
     });
   }
+
+  // Takes in a string (which should be an integer) representing the storage value of a fault, and the faults name.
+  // If the string is 0 their is no fault, anything else means there was a fault.
+  // (this is check is required because the storage service still takes information from the server even if a fault hasn't happened, requiring
+  // us to ensure that change to the storage value was actually a fault)
+  faultPushCheck(addFault: string, faultName: string) {
+    if (parseInt(addFault) !== 0) {
+      this.faults.push({ faultName, time: new Date().toLocaleTimeString() });
+    }
+  }
 }
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 9ae21e43..08602890 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,8 +1,8 @@
-<info-background icon="electric_meter" title="Cell Voltage">
+<info-background icon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
   <hstack spacing="30px">
     <vstack style="width: 10%">
       <hstack>
-        <typography variant="info-value" [content]="delta.toString() + 'V'" additionalStyles="fontSize:30px" />
+        <typography variant="info-value" [content]="delta.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
       </hstack>
       <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
     </vstack>
@@ -11,7 +11,7 @@
     <divider style="height: 100px"></divider>
 
     <vstack style="width: 10%">
-      <typography variant="info-value" [content]="lowCellVoltage.toString() + 'V'" additionalStyles="fontSize:30px" />
+      <typography variant="info-value" [content]="lowCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
       <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
     </vstack>
 
@@ -20,13 +20,14 @@
 
     <vstack style="width: 10%">
       <hstack>
-        <typography variant="info-value" [content]="highCellVoltage.toString() + 'V'" additionalStyles="fontSize:30px" />
+        <typography variant="info-value" [content]="highCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
       </hstack>
       <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
     </vstack>
+
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
       or just don't enforce -->
-    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh"></high-low-cell-graph>
+    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph"> </high-low-cell-graph>
   </hstack>
 </info-background>
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 e1d2786f..baf907f0 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
@@ -14,6 +14,13 @@ export default class HighLowCellDisplay {
   highCellVoltage: number = 0;
   mobileThreshold = 1000;
   isDesktop = window.innerWidth > this.mobileThreshold;
+  resetGraph: boolean = false;
+  resetGraphButton = {
+    onClick: () => {
+      this.resetGraph = true;
+    },
+    icon: 'restart_alt'
+  };
 
   constructor(private storage: Storage) {}
 
@@ -24,10 +31,16 @@ 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.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);
     });
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 44356ed6..2ca780ad 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,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+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';
@@ -13,20 +13,26 @@ export default class HighLowCellGraph implements OnInit {
   highVoltsData: GraphData[] = [];
   lowVoltsData: GraphData[] = [];
   maxDataPoints = 100;
+  @Input() resetGraph: boolean = false;
 
   constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.VOLTS_HIGH).subscribe((value) => {
-      this.highVoltsData.push({ x: new Date().getTime(), y: decimalPipe(value.values[0]) });
-      if (this.highVoltsData.length >= 100) {
-        this.highVoltsData.shift();
+      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) => {
-      this.lowVoltsData.push({ x: new Date().getTime(), y: decimalPipe(value.values[0]) });
-      if (this.lowVoltsData.length >= 100) {
-        this.lowVoltsData.shift();
+      if (this.resetGraph) {
+        this.resetData();
       }
+      this.lowVoltsData.push({ x: new Date().getTime(), y: decimalPipe(value.values[0]) });
     });
   }
+
+  resetData() {
+    this.lowVoltsData = [];
+    this.highVoltsData = [];
+  }
 }
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 e2c07785..c3bec610 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,8 +1,8 @@
-<info-background icon="electric_meter" title="Pack. Voltage">
+<info-background icon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
   <hstack>
     <hstack style="width: 20%">
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
-    <pack-voltage-graph style="width: 70%; padding-bottom: 5vh"></pack-voltage-graph>
+    <pack-voltage-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph"></pack-voltage-graph>
   </hstack>
 </info-background>
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 617c0233..b627ed7f 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
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { waitForDebugger } from 'inspector';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
@@ -10,11 +11,19 @@ import { floatPipe } from 'src/utils/pipes.utils';
 })
 export default class PackVoltageDisplay {
   voltage: number = 0;
+  resetGraph: boolean = false;
+  resetGraphButton = {
+    onClick: () => {
+      this.resetGraph = true;
+    },
+    icon: 'restart_alt'
+  };
 
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => {
+      this.resetGraph = false;
       this.voltage = floatPipe(value.values[0]);
     });
   }
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 93503753..b5dc1ede 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,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+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';
@@ -10,15 +10,16 @@ import { GraphData } from 'src/utils/types.utils';
 })
 export default class PackVoltageGraph implements OnInit {
   packVoltData: GraphData[] = [];
+  @Input() resetGraph: boolean = false;
   maxDataPoints = 100;
 
   constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => {
-      this.packVoltData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
-      if (this.packVoltData.length >= 100) {
-        this.packVoltData.shift();
+      if (this.resetGraph) {
+        this.packVoltData = [];
       }
+      this.packVoltData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
     });
   }
 }

From c1e59eba4eb68feedf9fa4202e6e2915dd514b24 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Mon, 12 Aug 2024 13:46:29 -0400
Subject: [PATCH 02/31] #172 - added support for BMS faults

---
 .../fault-display/fault-display.component.ts  | 113 ++++++++++++++++--
 .../enumerations/identifier-data-type.ts      |   3 +-
 scylla-server/src/socket/mock-proxy-client.ts |   9 +-
 scylla-server/src/utils/data.utils.ts         |   3 +-
 4 files changed, 118 insertions(+), 10 deletions(-)

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 558ebf21..6faedea7 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
@@ -2,6 +2,32 @@ import { Component } from '@angular/core';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
+enum BMS_FAULTS_TYPES {
+  CELLS_NOT_BALANCING = 1,
+  CELL_VOLTAGE_TOO_LOW = 2,
+  CELL_VOLTAGE_TOO_HIGH = 4,
+  PACK_TOO_HOT = 8,
+  OPEN_WIRING_FAULT = 16,
+  INTERNAL_SOFTWARE_FAULT = 32,
+  INTERNAL_THERMAL_ERROR = 64,
+  INTERNAL_CELL_COMM_FAULT = 128,
+  CURRENT_SENSOR_FAULT = 256,
+  CHARGE_READING_MISMATCH = 512,
+  LOW_CELL_VOLTAGE = 1024,
+  WEAK_PACK_FAULT = 2048,
+  EXTERNAL_CAN_FAULT = 4096,
+  DISCHARGE_LIMIT_ENFORCEMENT_FAULT = 8192,
+  CHARGER_SAFETY_RELAY = 16384,
+  BATTERY_THERMISTOR = 32768,
+  CHARGER_CAN_FAULT = 65536,
+  CHARGER_LIMIT_ENFORCEMENT_FAULT = 131072
+}
+
+enum FaultType {
+  BMS,
+  Charger
+}
+
 @Component({
   selector: 'fault-display',
   templateUrl: './fault-display.component.html',
@@ -19,27 +45,34 @@ export default class FaultDisplay {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.COMM_TIMEOUT_FAULT).subscribe((value) => {
-      this.addFault(value.values[0], 'Comm Timeout');
+      this.addFault(value.values[0], 'Comm Timeout', FaultType.Charger);
     });
 
     this.storage.get(IdentifierDataType.HARDWARE_FAILURE_FAULT).subscribe((value) => {
-      this.addFault(value.values[0], 'Hardware Failure');
+      this.addFault(value.values[0], 'Hardware Failure', FaultType.Charger);
     });
 
     this.storage.get(IdentifierDataType.OVER_TEMP_FAULT).subscribe((value) => {
-      this.addFault(value.values[0], 'Over Temp');
+      this.addFault(value.values[0], 'Over Temp', FaultType.Charger);
     });
 
     this.storage.get(IdentifierDataType.VOLTAGE_WRONG_FAULT).subscribe((value) => {
-      this.addFault(value.values[0], 'Voltage Wrong');
+      this.addFault(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');
+      this.addFault(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);
     });
   }
 
-  //
   /**
    * Adds the fault name, with the current time to the faults array, if the faultValue is NOT 0.
    * Shifts through the fault array to keep only the most recent 50 faults.
@@ -47,12 +80,78 @@ 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) {
+  addFault(faultValue: string, faultName: string, faultType: FaultType) {
     if (parseInt(faultValue) !== 0) {
+      if (faultType === FaultType.BMS) {
+        faultName = this.getBMSFaultName(parseInt(faultValue));
+      }
+      // current implementation doesn't need a specified case for charger faults
+      // (they have indiv binary id's)
       if (this.faults.length >= 50) {
         this.faults.pop();
       }
       this.faults.unshift({ faultName, time: new Date().toLocaleTimeString() });
     }
   }
+
+  getBMSFaultName(faultValue: number): string {
+    let faultName = '';
+    switch (faultValue) {
+      case BMS_FAULTS_TYPES.CELLS_NOT_BALANCING:
+        faultName = 'Cells Not Balancing';
+        break;
+      case BMS_FAULTS_TYPES.CELL_VOLTAGE_TOO_LOW:
+        faultName = 'Cell Voltage too Low';
+        break;
+      case BMS_FAULTS_TYPES.CELL_VOLTAGE_TOO_HIGH:
+        faultName = 'Cell Voltage too High';
+        break;
+      case BMS_FAULTS_TYPES.PACK_TOO_HOT:
+        faultName = ' Pack too Hot';
+        break;
+      case BMS_FAULTS_TYPES.OPEN_WIRING_FAULT:
+        faultName = 'Open Wiring Fault';
+        break;
+      case BMS_FAULTS_TYPES.INTERNAL_SOFTWARE_FAULT:
+        faultName = 'Internal Software Fault';
+        break;
+      case BMS_FAULTS_TYPES.INTERNAL_THERMAL_ERROR:
+        faultName = 'Internal Thermal Error';
+        break;
+      case BMS_FAULTS_TYPES.INTERNAL_CELL_COMM_FAULT:
+        faultName = 'Internal Cell Comm Fault';
+        break;
+      case BMS_FAULTS_TYPES.CURRENT_SENSOR_FAULT:
+        faultName = 'Current Sensor Fault';
+        break;
+      case BMS_FAULTS_TYPES.CHARGE_READING_MISMATCH:
+        faultName = 'Charge Reading Mismatch';
+        break;
+      case BMS_FAULTS_TYPES.LOW_CELL_VOLTAGE:
+        faultName = 'Low Cell Voltage';
+        break;
+      case BMS_FAULTS_TYPES.WEAK_PACK_FAULT:
+        faultName = 'Weak Pack Fault';
+        break;
+      case BMS_FAULTS_TYPES.EXTERNAL_CAN_FAULT:
+        faultName = 'External Can Fault';
+        break;
+      case BMS_FAULTS_TYPES.DISCHARGE_LIMIT_ENFORCEMENT_FAULT:
+        faultName = 'Discharge Limit Enforcement Fault';
+        break;
+      case BMS_FAULTS_TYPES.CHARGER_SAFETY_RELAY:
+        faultName = 'Charger Safety Relay';
+        break;
+      case BMS_FAULTS_TYPES.BATTERY_THERMISTOR:
+        faultName = 'Battery Thermistor';
+        break;
+      case BMS_FAULTS_TYPES.CHARGER_CAN_FAULT:
+        faultName = 'Charger Can Fault';
+        break;
+      case BMS_FAULTS_TYPES.CHARGER_LIMIT_ENFORCEMENT_FAULT:
+        faultName = 'Charger Limit Enforcement Fault';
+        break;
+    }
+    return faultName;
+  }
 }
diff --git a/angular-client/src/utils/enumerations/identifier-data-type.ts b/angular-client/src/utils/enumerations/identifier-data-type.ts
index f2996d9f..ef71be97 100644
--- a/angular-client/src/utils/enumerations/identifier-data-type.ts
+++ b/angular-client/src/utils/enumerations/identifier-data-type.ts
@@ -17,6 +17,7 @@ export enum IdentifierDataType {
   OVER_TEMP_FAULT = 'Box-F_OverTemp',
   VOLTAGE_WRONG_FAULT = 'Box-F_OverVoltage',
   WRONG_BAT_CONNECT_FAULT = 'Box-F_WrongBatConnect',
+  BMS_FAULTS = 'Status-Faults',
   VIEWERS = 'Viewers',
   SPEED = 'State-Speed',
   TORQUE = 'Torque',
@@ -30,7 +31,7 @@ export enum IdentifierDataType {
   CHARGE_CURRENT_LIMIT = 'Pack-CCL',
   DISCHARGE_CURRENT_LIMIT = 'Pack-DCL',
   XYZAccel = 'XYZAcceleration',
-  STATUS = 'Status-Balancing',
+  STATUS_BALANCING = 'Status-Balancing',
   BMS_MODE = 'Status-State',
   VOLTS_HIGH = 'Cells-Volts_High_Value',
   VOLTS_LOW = 'Cells-Volts_Low_Value',
diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts
index ebdc7e94..370dec8a 100644
--- a/scylla-server/src/socket/mock-proxy-client.ts
+++ b/scylla-server/src/socket/mock-proxy-client.ts
@@ -32,7 +32,7 @@ const baseMockData: MockData[] = [
     max: 100
   },
   {
-    name: DataType.STATUS,
+    name: DataType.STATUS_BALANCING,
     unit: Unit.BINARY,
     vals: [0],
     min: 0,
@@ -227,6 +227,13 @@ const baseMockData: MockData[] = [
     vals: [0],
     min: 0,
     max: 1
+  },
+  {
+    name: DataType.BMS_FAULTS,
+    unit: Unit.HEX,
+    vals: [0, 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768, 65536, 131072],
+    min: 0,
+    max: 131072
   }
 ];
 
diff --git a/scylla-server/src/utils/data.utils.ts b/scylla-server/src/utils/data.utils.ts
index f2ef63a2..82247c8d 100644
--- a/scylla-server/src/utils/data.utils.ts
+++ b/scylla-server/src/utils/data.utils.ts
@@ -17,6 +17,7 @@ export enum DataType {
   OVER_TEMP_FAULT = 'Box-F_OverTemp',
   VOLTAGE_WRONG_FAULT = 'Box-F_OverVoltage',
   WRONG_BAT_CONNECT_FAULT = 'Box-F_WrongBatConnect',
+  BMS_FAULTS = 'Status-Faults',
   VIEWERS = 'Viewers',
   SPEED = 'State-Speed',
   TORQUE = 'Torque',
@@ -30,7 +31,7 @@ export enum DataType {
   CHARGE_CURRENT_LIMIT = 'Pack-CCL',
   DISCHARGE_CURRENT_LIMIT = 'Pack-DCL',
   XYZAccel = 'XYZAcceleration',
-  STATUS = 'Status-Balancing',
+  STATUS_BALANCING = 'Status-Balancing',
   BMS_MODE = 'Status-State',
   VOLTS_HIGH = 'Cells-Volts_High_Value',
   VOLTS_LOW = 'Cells-Volts_Low_Value',

From ee25cd0228548e40f0f5ba3db94bd4cc49442f3c Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Mon, 12 Aug 2024 17:14:15 -0400
Subject: [PATCH 03/31] #172 added support for BMS faults + proxy client multi
 vals not random

---
 .../battery-status-display.component.ts           |  2 +-
 .../fault-display/fault-display.component.html    |  5 +++--
 .../fault-display/fault-display.component.ts      | 11 +++++++----
 scylla-server/src/socket/mock-proxy-client.ts     | 15 ++++++++++-----
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
index 696c225a..08d47192 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
@@ -13,7 +13,7 @@ export default class BatteryStatusDisplay {
   constructor(private storage: Storage) {}
 
   ngOnInit() {
-    this.storage.get(IdentifierDataType.STATUS).subscribe((value) => {
+    this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
       this.isBalancing = floatPipe(value.values[0]) === 1;
     });
   }
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 fafc8612..29ee62c3 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
@@ -5,12 +5,13 @@
       <ng-container *ngFor="let fault of faults; index as i">
         <div
           [style]="
-            i % 2 == 0
+            (i % 2 == 0) === faultsShifted
               ? 'background-color: #d4760b	; width: 100%; border-radius: 2px'
               : 'background-color: #4d453c; width: 100%; border-radius: 2px'
           "
         >
-          <typography variant="info-subtitle" [content]="fault.faultName"></typography>
+          <typography variant="info-subtitle" [content]="fault.type" additionalStyles="font-weight: bold;"></typography>
+          <typography variant="info-subtitle" [content]="fault.name"></typography>
           <typography variant="info-subtitle" [content]="fault.time"></typography>
         </div>
         <div style="height: 2px"></div>
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 6faedea7..e17150b4 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
@@ -24,8 +24,8 @@ enum BMS_FAULTS_TYPES {
 }
 
 enum FaultType {
-  BMS,
-  Charger
+  BMS = 'BMS',
+  Charger = 'Charger'
 }
 
 @Component({
@@ -34,7 +34,8 @@ enum FaultType {
   styleUrls: ['./fault-display.component.css']
 })
 export default class FaultDisplay {
-  faults: { faultName: string; time: string }[] = [];
+  faults: { type: string; name: string; time: string }[] = [];
+  faultsShifted: boolean = false;
   resetButton = {
     onClick: () => {
       this.faults.shift();
@@ -90,7 +91,9 @@ export default class FaultDisplay {
       if (this.faults.length >= 50) {
         this.faults.pop();
       }
-      this.faults.unshift({ faultName, time: new Date().toLocaleTimeString() });
+      this.faultsShifted = !this.faultsShifted;
+
+      this.faults.unshift({ type: faultType, name: faultName, time: new Date().toLocaleTimeString() });
     }
   }
 
diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts
index 370dec8a..78f1374b 100644
--- a/scylla-server/src/socket/mock-proxy-client.ts
+++ b/scylla-server/src/socket/mock-proxy-client.ts
@@ -304,11 +304,16 @@ export default class MockProxyClient implements ProxyClient {
         index = this.getRandomIndex(this.mockData.length);
         numericalData = this.mockData[index];
 
-        for (const val in numericalData.vals) {
-          if (numericalData.vals.hasOwnProperty(val)) {
-            let newVal = numericalData.vals[val] + Math.random() * 2 - 1;
-            newVal = Math.max(numericalData.min, Math.min(numericalData.max, newVal));
-            numericalData.vals[val] = newVal;
+        // IF MORE THAN ONE VALUE IS GIVEN in the numerical data, it is assumed that only those values should be choosen from.
+        if (numericalData.vals.length > 1) {
+          numericalData.vals[0] = numericalData.vals[this.getRandomIndex(numericalData.vals.length)];
+        } else {
+          for (const val in numericalData.vals) {
+            if (numericalData.vals.hasOwnProperty(val)) {
+              let newVal = numericalData.vals[val] + Math.random() * 2 - 1;
+              newVal = Math.max(numericalData.min, Math.min(numericalData.max, newVal));
+              numericalData.vals[val] = newVal;
+            }
           }
         }
 

From 84c1d45165715ba0a5a10ca5dd6f74184c9cb509 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 17 Aug 2024 22:14:41 -0400
Subject: [PATCH 04/31] #172 - added new multi status comp

---
 .DS_Store                                     | Bin 10244 -> 10244 bytes
 angular-client/src/app/app.module.ts          |  15 +++++++-
 angular-client/src/assets/icons/timer.svg     |   1 +
 .../current-total-timer.component.css         |   0
 .../current-total-timer.component.html        |  22 +++++++++++
 .../current-total-timer.component.ts          |  35 ++++++++++++++++++
 .../charging-page.component.html              |   3 +-
 .../active-status/active-status.component.css |   7 ++++
 .../active-status.component.html              |  12 ++++++
 .../active-status/active-status.component.ts  |  25 +++++++++++++
 .../balancing-status.component.css            |   7 ++++
 .../balancing-status.component.html           |  12 ++++++
 .../balancing-status.component.ts             |  29 +++++++++++++++
 .../battery-status-display.component.css      |   7 ++--
 .../battery-status-display.component.html     |  13 +++++--
 .../battery-status-display.component.ts       |   3 +-
 .../charging-state.component.css              |   7 ++--
 .../charging-state.component.html             |  18 +++++----
 .../charging-state.component.ts               |  32 ++--------------
 .../faulted-status.component.css              |   7 ++++
 .../faulted-status.component.html             |  12 ++++++
 .../faulted-status.component.ts               |  25 +++++++++++++
 .../starting-soc-timer.component.css          |   0
 .../starting-soc-timer.component.html         |   4 ++
 .../starting-soc-timer.component.ts           |  22 +++++++++++
 scylla-server/src/socket/mock-proxy-client.ts |   2 +-
 26 files changed, 269 insertions(+), 51 deletions(-)
 create mode 100644 angular-client/src/assets/icons/timer.svg
 create mode 100644 angular-client/src/components/current-total-timer/current-total-timer.component.css
 create mode 100644 angular-client/src/components/current-total-timer/current-total-timer.component.html
 create mode 100644 angular-client/src/components/current-total-timer/current-total-timer.component.ts
 create mode 100644 angular-client/src/pages/charging-page/components/active-status/active-status.component.css
 create mode 100644 angular-client/src/pages/charging-page/components/active-status/active-status.component.html
 create mode 100644 angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
 create mode 100644 angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.css
 create mode 100644 angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
 create mode 100644 angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
 create mode 100644 angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.css
 create mode 100644 angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
 create mode 100644 angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
 create mode 100644 angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.css
 create mode 100644 angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.html
 create mode 100644 angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts

diff --git a/.DS_Store b/.DS_Store
index 11caee4584ac71e248e1c291ea278ec110454c76..12a7b0673d975db203b5ce53178041ab032f4ca4 100644
GIT binary patch
delta 74
vcmZn(XbIS0FV6J7ak8Vh7TXHZPoFJJCl`wAAeai94~y6E<5e;Fu(%@tKH41H

delta 74
vcmZn(XbIS0FV6HxZ?dDf7TfouWuH6cCl`wAAeai94~y6E<5e;Fu(%@tgybI+

diff --git a/angular-client/src/app/app.module.ts b/angular-client/src/app/app.module.ts
index eaccd1eb..f3763a56 100644
--- a/angular-client/src/app/app.module.ts
+++ b/angular-client/src/app/app.module.ts
@@ -95,6 +95,11 @@ import PackVoltageDisplay from 'src/pages/charging-page/components/pack-voltage/
 import ChargingStateComponent from 'src/pages/charging-page/components/charging-state/charging-state.component';
 import { BatteryPercentageComponent } from 'src/pages/charging-page/components/battery-percentage/battery-percentage.component';
 import { BatteryInfoDisplay } from 'src/pages/charging-page/components/battery-info-display/battery-info-display';
+import StartingSocTimer from 'src/pages/charging-page/components/starting-soc/starting-soc-timer.component';
+import CurrentTotalTimer from 'src/components/current-total-timer/current-total-timer.component';
+import BalancingStatus from 'src/pages/charging-page/components/balancing-status/balancing-status.component';
+import FaultedStatus from 'src/pages/charging-page/components/faulted-status/faulted-status.component';
+import ActiveStatus from 'src/pages/charging-page/components/active-status/active-status.component';
 
 @NgModule({
   declarations: [
@@ -173,7 +178,12 @@ import { BatteryInfoDisplay } from 'src/pages/charging-page/components/battery-i
     HighLowCellGraph,
     PackVoltageGraph,
     PackVoltageDisplay,
-    ChargingStateComponent
+    ChargingStateComponent,
+    StartingSocTimer,
+    CurrentTotalTimer,
+    BalancingStatus,
+    FaultedStatus,
+    ActiveStatus
   ],
   imports: [
     BrowserModule,
@@ -245,6 +255,7 @@ export class AppModule {
       .addSvgIcon('thermostat', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/thermostat.svg'))
       .addSvgIcon('model_training', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/model_training.svg'))
       .addSvgIcon('quickreply', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/quickreply.svg'))
-      .addSvgIcon('bolt', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/bolt.svg'));
+      .addSvgIcon('bolt', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/bolt.svg'))
+      .addSvgIcon('timer', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/timer.svg'));
   }
 }
diff --git a/angular-client/src/assets/icons/timer.svg b/angular-client/src/assets/icons/timer.svg
new file mode 100644
index 00000000..6a08fce5
--- /dev/null
+++ b/angular-client/src/assets/icons/timer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-840v-80h240v80H360Zm80 440h80v-240h-80v240Zm40 320q-74 0-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80Zm0-80q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-280Z"/></svg>
\ No newline at end of file
diff --git a/angular-client/src/components/current-total-timer/current-total-timer.component.css b/angular-client/src/components/current-total-timer/current-total-timer.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/angular-client/src/components/current-total-timer/current-total-timer.component.html b/angular-client/src/components/current-total-timer/current-total-timer.component.html
new file mode 100644
index 00000000..dae262ab
--- /dev/null
+++ b/angular-client/src/components/current-total-timer/current-total-timer.component.html
@@ -0,0 +1,22 @@
+<info-background svgIcon="timer" title="Timer">
+  <div style="display: flex; justify-content: center; align-items: center; height: 80%; padding-top: 20px">
+    <vstack spacing="20px" style="padding-left: 20px">
+      <hstack>
+        <typography variant="info-subtitle" content="CURRENT:" />
+        <typography
+          variant="info-subtitle"
+          [content]="getCurrentTime()"
+          additionalStyles="color: #fbf7f5; text-shadow: 0 0 5px rgba(217,217,214, 0.3);"
+        />
+      </hstack>
+      <hstack spacing="42px">
+        <typography variant="info-subtitle" content="TOTAL:" />
+        <typography
+          variant="info-subtitle"
+          [content]="getTotalTime()"
+          additionalStyles="color: #fbf7f5; text-shadow: 0 0 5px rgba(217,217,214, 0.3);"
+        />
+      </hstack>
+    </vstack>
+  </div>
+</info-background>
diff --git a/angular-client/src/components/current-total-timer/current-total-timer.component.ts b/angular-client/src/components/current-total-timer/current-total-timer.component.ts
new file mode 100644
index 00000000..859cae53
--- /dev/null
+++ b/angular-client/src/components/current-total-timer/current-total-timer.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import Storage from 'src/services/storage.service';
+
+@Component({
+  selector: 'current-total-timer',
+  templateUrl: './current-total-timer.component.html',
+  styleUrls: ['./current-total-timer.component.css']
+})
+export default class CurrentTotalTimer {
+  @Input() currentTime: number = 0;
+  @Input() totalTime: number = 0;
+
+  constructor(private storage: Storage) {}
+
+  getCurrentTime() {
+    return this.formatTime(this.currentTime);
+  }
+
+  getTotalTime() {
+    return this.formatTime(this.totalTime);
+  }
+
+  /**
+   * Formats the given time.
+   *
+   * @param time the time to format.
+   * @returns the time as a string in the given format: 00:00 (leading zeros included).
+   */
+  formatTime(time: number) {
+    const minutes = Math.floor(time / 60);
+    const seconds = time % 60;
+
+    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+}
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 19209636..a02fa2e7 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -26,7 +26,7 @@
         <vstack style="width: 80%" spacing="15px">
           <hstack style="width: 100%">
             <charging-state style="width: 25%" />
-            <battery-status-display style="width: 25%" />
+            <charging-state style="width: 25%" />
             <BMS-mode-display style="width: 25%" />
             <pack-temp style="height: 142px; width: 25%" />
           </hstack>
@@ -40,6 +40,7 @@
           </div>
         </vstack>
       </hstack>
+      <battery-status-display style="width: 306; height: 808" />
     </vstack>
   </ng-template>
 </div>
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.css b/angular-client/src/pages/charging-page/components/active-status/active-status.component.css
new file mode 100644
index 00000000..2783a6a3
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.css
@@ -0,0 +1,7 @@
+.connection-dot {
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.html b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
new file mode 100644
index 00000000..22c21df1
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
@@ -0,0 +1,12 @@
+<info-background title="ACTIVE">
+  <hstack>
+    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <div style="padding-top: 40px">
+      <div
+        class="connection-dot"
+        [style.background-color]="getStatusColor(isActive)"
+        [style.border-color]="isActive ? getStatusColor(isActive) : 'white'"
+      ></div>
+    </div>
+  </hstack>
+</info-background>
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
new file mode 100644
index 00000000..86e54f65
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { floatPipe } from 'src/utils/pipes.utils';
+
+@Component({
+  selector: 'active-status',
+  templateUrl: './active-status.component.html',
+  styleUrls: ['./active-status.component.css']
+})
+export default class ActiveStatus {
+  isActive: boolean = false;
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
+      this.isActive = floatPipe(value.values[0]) === 2;
+    });
+  }
+
+  getStatusColor(isActive: boolean) {
+    return isActive ? 'green' : Theme.infoBackground;
+  }
+}
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.css b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.css
new file mode 100644
index 00000000..2783a6a3
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.css
@@ -0,0 +1,7 @@
+.connection-dot {
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
new file mode 100644
index 00000000..e92b33cc
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
@@ -0,0 +1,12 @@
+<info-background title="BALANCING">
+  <hstack>
+    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <div style="padding-top: 40px">
+      <div
+        class="connection-dot"
+        [style.background-color]="getStatusColor(isBalancing)"
+        [style.border-color]="isBalancing ? getStatusColor(isBalancing) : 'white'"
+      ></div>
+    </div>
+  </hstack>
+</info-background>
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
new file mode 100644
index 00000000..e886cf2f
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { floatPipe } from 'src/utils/pipes.utils';
+
+@Component({
+  selector: 'balancing-status',
+  templateUrl: './balancing-status.component.html',
+  styleUrls: ['./balancing-status.component.css']
+})
+export default class BalancingStatus {
+  isBalancing: boolean = false;
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
+      this.isBalancing = floatPipe(value.values[0]) === 1;
+    });
+  }
+
+  getBatteryStatus(connected: boolean) {
+    return connected ? 'BALANCING' : 'NOT BALANCING';
+  }
+
+  getStatusColor(isBalancing: boolean) {
+    return isBalancing ? 'blue' : Theme.infoBackground;
+  }
+}
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css
index 6f62df68..2783a6a3 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css
@@ -1,6 +1,7 @@
 .connection-dot {
-  width: 50px;
-  height: 50px;
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  margin-top: 20px;
 }
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
index 3ff24e66..348ec624 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
@@ -1,8 +1,13 @@
 <info-background svgIcon="quickreply" title="Status">
-  <div style="display: flex; justify-content: center; align-items: center; height: 80%">
-    <vstack>
-      <div class="connection-dot" [style.background-color]="getStatusColor(isBalancing)"></div>
-      <typography variant="info-subtitle" [content]="getBatteryStatus(isBalancing)" />
+  <div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
+    <vstack style="padding-top: 30px" align="start">
+      <active-status />
+      <divider style="width: 250px" />
+      <charging-state />
+      <divider style="width: 250px" />
+      <balancing-status />
+      <divider style="width: 250px" />
+      <faulted-status />
     </vstack>
   </div>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
index 08d47192..58fac048 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
 
@@ -23,6 +24,6 @@ export default class BatteryStatusDisplay {
   }
 
   getStatusColor(isBalancing: boolean) {
-    return isBalancing ? 'green' : 'red';
+    return isBalancing ? 'green' : Theme.infoBackground;
   }
 }
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css
index 38059d73..c4a9a4da 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css
@@ -1,8 +1,9 @@
 .connection-dot {
-  width: 50px;
-  height: 50px;
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  margin-top: 20px;
 }
 
 .typography-centered {
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html
index 8a6c24fc..a69c8279 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html
@@ -1,8 +1,12 @@
-<info-background svgIcon="electrical_services" title="Charging">
-  <div style="display: flex; justify-content: center; align-items: center; height: 80%">
-    <vstack>
-      <div class="connection-dot" [style.background-color]="getStateColor(isCharging)"></div>
-      <typography variant="info-subtitle" [content]="getChargingState(isCharging) + ' FOR: ' + getTimerInfo()" />
-    </vstack>
-  </div>
+<info-background title="CHARGING">
+  <hstack>
+    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <div style="padding-top: 40px">
+      <div
+        class="connection-dot"
+        [style.background-color]="getStateColor(isCharging)"
+        [style.border-color]="isCharging ? getStateColor(isCharging) : 'white'"
+      ></div>
+    </div>
+  </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
index f460728d..0f7ca708 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
 
@@ -16,18 +17,8 @@ export default class ChargingStateComponent {
   constructor(private storage: Storage) {}
 
   ngOnInit() {
-    this.startTimer();
     this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
-      const newChargingState = floatPipe(value.values[0]) === 1;
-
-      if (this.isCharging !== newChargingState) {
-        this.resetTimer();
-        if (newChargingState) {
-          this.startTimer();
-        }
-      }
-
-      this.isCharging = newChargingState;
+      this.isCharging = floatPipe(value.values[0]) === 1;
     });
   }
 
@@ -36,23 +27,6 @@ export default class ChargingStateComponent {
   }
 
   getStateColor(isCharging: boolean) {
-    return isCharging ? 'green' : 'red';
-  }
-
-  startTimer() {
-    this.timerInterval = setInterval(() => {
-      this.timer++;
-    }, 1000);
-  }
-
-  resetTimer() {
-    clearInterval(this.timerInterval);
-    this.timer = 0;
-  }
-
-  getTimerInfo() {
-    const minutes = Math.floor(this.timer / 60);
-    const seconds = this.timer % 60;
-    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    return isCharging ? 'yellow' : Theme.infoBackground;
   }
 }
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.css b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.css
new file mode 100644
index 00000000..2783a6a3
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.css
@@ -0,0 +1,7 @@
+.connection-dot {
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
new file mode 100644
index 00000000..a5a5176d
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
@@ -0,0 +1,12 @@
+<info-background title="FAULTED">
+  <hstack>
+    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <div style="padding-top: 40px">
+      <div
+        class="connection-dot"
+        [style.background-color]="getStatusColor(isFaulted)"
+        [style.border-color]="isFaulted ? getStatusColor(isFaulted) : 'white'"
+      ></div>
+    </div>
+  </hstack>
+</info-background>
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
new file mode 100644
index 00000000..1aeeb690
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { floatPipe } from 'src/utils/pipes.utils';
+
+@Component({
+  selector: 'faulted-status',
+  templateUrl: './faulted-status.component.html',
+  styleUrls: ['./faulted-status.component.css']
+})
+export default class FaultedStatus {
+  isFaulted: boolean = false;
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
+      this.isFaulted = floatPipe(value.values[0]) === 3;
+    });
+  }
+
+  getStatusColor(isFaulted: boolean) {
+    return isFaulted ? 'red' : Theme.infoBackground;
+  }
+}
diff --git a/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.css b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.html b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.html
new file mode 100644
index 00000000..edbb3da1
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.html
@@ -0,0 +1,4 @@
+<info-background>
+  <typography content="Starting Soc Value: "></typography>
+  <typography [content]="startingSoc.toString()"></typography>
+</info-background>
diff --git a/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts
new file mode 100644
index 00000000..aa0187d5
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/starting-soc/starting-soc-timer.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { take } from 'rxjs';
+import Storage from 'src/services/storage.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { floatPipe } from 'src/utils/pipes.utils';
+
+@Component({
+  selector: 'starting-soc-timer',
+  templateUrl: './starting-soc-timer.component.html',
+  styleUrls: ['./starting-soc-timer.component.css']
+})
+export default class StartingSocTimer {
+  startingSoc: number = 0;
+  constructor(private storage: Storage) {
+    this.storage
+      .get(IdentifierDataType.STATE_OF_CHARGE)
+      .pipe(take(1))
+      .subscribe((value) => {
+        this.startingSoc = floatPipe(value.values[0]);
+      });
+  }
+}
diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts
index 78f1374b..66c6ab34 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)
     );
   };
 

From c336bcef76cf8e75eacc7865dd916e123b66bc7c Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Tue, 20 Aug 2024 17:10:04 -0400
Subject: [PATCH 05/31] cleaned up charge page arrangment

---
 .../current-total-timer.component.html        |  6 +--
 .../thermometer/thermometer.component.css     |  4 +-
 .../charging-page.component.html              | 38 +++++++------------
 .../current-display.component.html            |  4 +-
 .../battery-status-display.component.html     | 20 +++++-----
 .../fault-display/fault-display.component.css |  1 -
 .../fault-display.component.html              | 23 +++++++++--
 .../pack-temp/pack-temp.component.html        |  2 +-
 .../pack-voltage-display.component.html       |  4 +-
 .../state-of-charge-display.component.html    |  8 ++--
 10 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/angular-client/src/components/current-total-timer/current-total-timer.component.html b/angular-client/src/components/current-total-timer/current-total-timer.component.html
index dae262ab..ba85c731 100644
--- a/angular-client/src/components/current-total-timer/current-total-timer.component.html
+++ b/angular-client/src/components/current-total-timer/current-total-timer.component.html
@@ -1,8 +1,8 @@
 <info-background svgIcon="timer" title="Timer">
   <div style="display: flex; justify-content: center; align-items: center; height: 80%; padding-top: 20px">
-    <vstack spacing="20px" style="padding-left: 20px">
+    <vstack spacing="10px" style="padding-left: 20px">
       <hstack>
-        <typography variant="info-subtitle" content="CURRENT:" />
+        <typography variant="info-subtitle" content="CURRENT:" additionalStyles="fontSize:15px" />
         <typography
           variant="info-subtitle"
           [content]="getCurrentTime()"
@@ -10,7 +10,7 @@
         />
       </hstack>
       <hstack spacing="42px">
-        <typography variant="info-subtitle" content="TOTAL:" />
+        <typography variant="info-subtitle" content="TOTAL:" additionalStyles="fontSize:15px" />
         <typography
           variant="info-subtitle"
           [content]="getTotalTime()"
diff --git a/angular-client/src/components/thermometer/thermometer.component.css b/angular-client/src/components/thermometer/thermometer.component.css
index 46848651..c5bad99a 100644
--- a/angular-client/src/components/thermometer/thermometer.component.css
+++ b/angular-client/src/components/thermometer/thermometer.component.css
@@ -2,8 +2,8 @@
   position: relative;
   display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
+  width: 75%;
+  height: 75%;
 }
 
 .glass {
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 a02fa2e7..7367d1f9 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -17,30 +17,20 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-
-      <hstack style="width: 100%">
-        <vstack style="width: 20%" spacing="15px">
-          <state-of-charge-display style="height: 142px; width: 100%" />
-          <fault-display style="height: 580px; width: 100%" />
-        </vstack>
-        <vstack style="width: 80%" spacing="15px">
-          <hstack style="width: 100%">
-            <charging-state style="width: 25%" />
-            <charging-state style="width: 25%" />
-            <BMS-mode-display style="width: 25%" />
-            <pack-temp style="height: 142px; width: 25%" />
-          </hstack>
-          <div style="width: 100%; height: 580px; display: flex; flex-direction: column; justify-content: space-between">
-            <cell-temp-display style="width: 100%; height: 200px" />
-            <high-low-cell-display style="width: 100%; height: 200px" />
-            <hstack style="width: 100%">
-              <pack-voltage-display style="height: 150px; width: 80%" />
-              <current-display style="height: 150px; width: 20%" />
-            </hstack>
-          </div>
-        </vstack>
-      </hstack>
-      <battery-status-display style="width: 306; height: 808" />
+      <vstack>
+        <hstack spacing="10px">
+          <battery-status-display style="width: 625px; height: 380px" />
+          <vstack>
+            <state-of-charge-display style="width: 230px; height: 123px" />
+            <current-display style="width: 230px; height: 122px" />
+            <pack-temp style="width: 230px; height: 122px" />
+          </vstack>
+          <fault-display style="height: 380px; width: 520px" />
+        </hstack>
+        <cell-temp-display style="width: 1400px; height: 170px" />
+        <high-low-cell-display style="width: 1400px; height: 175px" />
+        <pack-voltage-display style="height: 150px; width: 100%" />
+      </vstack>
     </vstack>
   </ng-template>
 </div>
diff --git a/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.html b/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.html
index ec23472e..5e29a5e1 100644
--- a/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.html
+++ b/angular-client/src/pages/charging-page/components/battery-current/current-display/current-display.component.html
@@ -1,6 +1,6 @@
 <info-background title="Current" svgIcon="bolt">
   <div style="display: flex; justify-content: center; align-items: center; height: 80%">
-    <typography variant="info-value" [content]="amps.toString()" />
-    <typography variant="info-unit" content="amps" />
+    <typography variant="info-value" [content]="amps.toString()" additionalStyles="fontSize:40px" />
+    <typography variant="info-unit" content="amps" additionalStyles="fontSize:20px" />
   </div>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
index 348ec624..8035e89f 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
@@ -1,13 +1,15 @@
 <info-background svgIcon="quickreply" title="Status">
   <div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
-    <vstack style="padding-top: 30px" align="start">
-      <active-status />
-      <divider style="width: 250px" />
-      <charging-state />
-      <divider style="width: 250px" />
-      <balancing-status />
-      <divider style="width: 250px" />
-      <faulted-status />
-    </vstack>
+    <hstack>
+      <vstack>
+        <active-status />
+        <faulted-status />
+      </vstack>
+      <divider style="height: 300px" />
+      <vstack>
+        <charging-state />
+        <balancing-status />
+      </vstack>
+    </hstack>
   </div>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
index d7e78752..07b6e76e 100644
--- a/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
+++ b/angular-client/src/pages/charging-page/components/fault-display/fault-display.component.css
@@ -3,6 +3,5 @@
   display: flex;
   align-items: left;
   justify-content: left;
-  padding-left: 10%;
   overflow-y: auto;
 }
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 29ee62c3..daf30504 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
@@ -1,5 +1,5 @@
 <info-background title="Faults" svgIcon="warning" [button]="resetButton">
-  <div style="min-width: 20vw; padding-right: 30px; padding-left: 0px" class="fault-text-body">
+  <div style="width: 100%; padding-right: 5px; padding-left: 0px" class="fault-text-body">
     <vstack style="width: 100%">
       <div style="height: 10px"></div>
       <ng-container *ngFor="let fault of faults; index as i">
@@ -10,9 +10,24 @@
               : 'background-color: #4d453c; width: 100%; border-radius: 2px'
           "
         >
-          <typography variant="info-subtitle" [content]="fault.type" additionalStyles="font-weight: bold;"></typography>
-          <typography variant="info-subtitle" [content]="fault.name"></typography>
-          <typography variant="info-subtitle" [content]="fault.time"></typography>
+          <hstack>
+            <typography
+              variant="info-subtitle"
+              [content]="fault.type"
+              style="width: 33%; height: 40px; padding-top: 10px"
+            ></typography>
+            <typography
+              variant="info-subtitle"
+              [content]="fault.name"
+              additionalStyles="font-weight: bold;"
+              style="width: 33%; height: 40px; padding-top: 10px; width: 350px"
+            ></typography>
+            <typography
+              variant="info-subtitle"
+              [content]="fault.time"
+              style="width: 33%; height: 40px; padding-top: 10px"
+            ></typography>
+          </hstack>
         </div>
         <div style="height: 2px"></div>
       </ng-container>
diff --git a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
index bc829247..e0619feb 100644
--- a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
+++ b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
@@ -1,6 +1,6 @@
 <info-background title="Pack Temp" svgIcon="device_thermostat">
   <hstack>
-    <typography variant="info-value" [content]="packTemp.toString() + '°'" />
+    <typography variant="info-value" [content]="packTemp.toString() + '°'" additionalStyles="fontSize:40px" />
     <div class="thermometer-container">
       <thermometer [temperature]="packTemp" [min]="-15" [max]="30" />
     </div>
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 0b22b65e..d0d6ec2d 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,8 +1,8 @@
 <info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
   <hstack>
-    <hstack style="width: 20%">
+    <hstack style="width: 15%">
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
-    <pack-voltage-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph"></pack-voltage-graph>
+    <pack-voltage-graph style="width: 80%; padding-bottom: 5vh" [resetGraph]="resetGraph"></pack-voltage-graph>
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.html b/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.html
index e4bc6c3f..158541b5 100644
--- a/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.html
+++ b/angular-client/src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component.html
@@ -1,9 +1,9 @@
-<info-background title="State of Charge" svgIcon="battery_charging_full">
+<info-background title="SOC" svgIcon="battery_charging_full">
   <hstack>
-    <battery-percentage [percentage]="stateOfCharge" [height]="60" [width]="30" />
+    <battery-percentage [percentage]="stateOfCharge" [height]="50" [width]="25" />
     <div class="battery-display-body">
-      <typography variant="info-value" [content]="stateOfCharge.toString()" />
-      <typography variant="info-unit" content="%" />
+      <typography variant="info-value" [content]="stateOfCharge.toString()" additionalStyles="fontSize:40px" />
+      <typography variant="info-unit" content="%" additionalStyles="fontSize:20px" />
     </div>
   </hstack>
 </info-background>

From 01b58a1e5ff7c1ba1d4ad028d363ccc17d14cd79 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Wed, 21 Aug 2024 16:34:00 -0400
Subject: [PATCH 06/31] #172 moved thermometer in pack temp + enlarged
 pack-volt graph

---
 .../src/pages/charging-page/charging-page.component.html        | 2 +-
 .../components/active-status/active-status.component.html       | 2 +-
 .../charging-page/components/pack-temp/pack-temp.component.html | 2 +-
 .../pack-voltage-graph/pack-voltage-graph.component.html        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

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 7367d1f9..ab1fe4c8 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -29,7 +29,7 @@
         </hstack>
         <cell-temp-display style="width: 1400px; height: 170px" />
         <high-low-cell-display style="width: 1400px; height: 175px" />
-        <pack-voltage-display style="height: 150px; width: 100%" />
+        <pack-voltage-display style="height: 175px; width: 100%" />
       </vstack>
     </vstack>
   </ng-template>
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.html b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
index 22c21df1..b3ca7259 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
@@ -1,6 +1,6 @@
 <info-background title="ACTIVE">
   <hstack>
-    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <current-total-timer style="padding-left: 20px; min-height: 100px" [currentTime]="8" [totalTime]="8" />
     <div style="padding-top: 40px">
       <div
         class="connection-dot"
diff --git a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
index e0619feb..efee2dff 100644
--- a/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
+++ b/angular-client/src/pages/charging-page/components/pack-temp/pack-temp.component.html
@@ -1,8 +1,8 @@
 <info-background title="Pack Temp" svgIcon="device_thermostat">
   <hstack>
-    <typography variant="info-value" [content]="packTemp.toString() + '°'" additionalStyles="fontSize:40px" />
     <div class="thermometer-container">
       <thermometer [temperature]="packTemp" [min]="-15" [max]="30" />
     </div>
+    <typography variant="info-value" [content]="packTemp.toString() + '°'" additionalStyles="fontSize:40px" />
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
index 6eb1718e..8e3f98a5 100644
--- a/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html
@@ -1,2 +1,2 @@
-<graph-component title="Pack Temp" color="#ffff00" [data]="packVoltData" graphContainerId="packTempGraph" icon="speed">
+<graph-component title="Pack Volts" color="#ffff00" [data]="packVoltData" graphContainerId="packVoltsGraph" icon="speed">
 </graph-component>

From 95836794f23b79330b9d0650d870a1cf3b09232f Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Wed, 21 Aug 2024 17:09:19 -0400
Subject: [PATCH 07/31] #172  charging status timers work (only based on page
 being open)

---
 angular-client/src/app/app.module.ts          |  4 +-
 .../active-status.component.html              |  6 +-
 .../active-status/active-status.component.ts  | 28 ++++++++-
 .../balancing-status.component.html           |  6 +-
 .../balancing-status.component.ts             | 29 +++++++++-
 .../battery-status-display.component.html     |  2 +-
 .../charging-state.component.ts               | 32 -----------
 ...nent.css => charging-status.component.css} |  0
 ...nt.html => charging-status.component.html} |  6 +-
 .../charging-status.component.ts              | 57 +++++++++++++++++++
 .../faulted-status.component.html             |  6 +-
 .../faulted-status.component.ts               | 29 +++++++++-
 12 files changed, 163 insertions(+), 42 deletions(-)
 delete mode 100644 angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
 rename angular-client/src/pages/charging-page/components/charging-state/{charging-state.component.css => charging-status.component.css} (100%)
 rename angular-client/src/pages/charging-page/components/charging-state/{charging-state.component.html => charging-status.component.html} (67%)
 create mode 100644 angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts

diff --git a/angular-client/src/app/app.module.ts b/angular-client/src/app/app.module.ts
index f3763a56..2d649684 100644
--- a/angular-client/src/app/app.module.ts
+++ b/angular-client/src/app/app.module.ts
@@ -92,7 +92,7 @@ import HighLowCellDisplay from 'src/pages/charging-page/components/high-low-cell
 import HighLowCellGraph from 'src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component';
 import PackVoltageGraph from 'src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component';
 import PackVoltageDisplay from 'src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component';
-import ChargingStateComponent from 'src/pages/charging-page/components/charging-state/charging-state.component';
+import ChargingStatusComponent from 'src/pages/charging-page/components/charging-state/charging-status.component';
 import { BatteryPercentageComponent } from 'src/pages/charging-page/components/battery-percentage/battery-percentage.component';
 import { BatteryInfoDisplay } from 'src/pages/charging-page/components/battery-info-display/battery-info-display';
 import StartingSocTimer from 'src/pages/charging-page/components/starting-soc/starting-soc-timer.component';
@@ -178,7 +178,7 @@ import ActiveStatus from 'src/pages/charging-page/components/active-status/activ
     HighLowCellGraph,
     PackVoltageGraph,
     PackVoltageDisplay,
-    ChargingStateComponent,
+    ChargingStatusComponent,
     StartingSocTimer,
     CurrentTotalTimer,
     BalancingStatus,
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.html b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
index b3ca7259..25cad486 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.html
@@ -1,6 +1,10 @@
 <info-background title="ACTIVE">
   <hstack>
-    <current-total-timer style="padding-left: 20px; min-height: 100px" [currentTime]="8" [totalTime]="8" />
+    <current-total-timer
+      style="padding-left: 20px; min-height: 100px"
+      [currentTime]="currentSeconds"
+      [totalTime]="totalSeconds"
+    />
     <div style="padding-top: 40px">
       <div
         class="connection-dot"
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index 86e54f65..5bceafde 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -11,14 +11,40 @@ import { floatPipe } from 'src/utils/pipes.utils';
 })
 export default class ActiveStatus {
   isActive: boolean = false;
+  currentSeconds: number = 0;
+  totalSeconds: number = 0;
+  intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
-      this.isActive = floatPipe(value.values[0]) === 2;
+      if (this.isActive) {
+        if (!(floatPipe(value.values[0]) === 2)) {
+          this.isActive = false;
+          this.stopTimer();
+          this.resetCurrentSecs();
+        }
+      } else if (floatPipe(value.values[0]) === 2) {
+        this.isActive = true;
+        this.startTimer();
+      }
     });
   }
 
+  startTimer() {
+    this.intervalId = setInterval(() => {
+      this.currentSeconds++;
+      this.totalSeconds++;
+    }, 1000);
+  }
+
+  stopTimer() {
+    clearInterval(this.intervalId);
+  }
+
+  resetCurrentSecs() {
+    this.currentSeconds = 0;
+  }
   getStatusColor(isActive: boolean) {
     return isActive ? 'green' : Theme.infoBackground;
   }
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
index e92b33cc..e00c2500 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.html
@@ -1,6 +1,10 @@
 <info-background title="BALANCING">
   <hstack>
-    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <current-total-timer
+      style="padding-left: 20px; min-height: 100px"
+      [currentTime]="currentSeconds"
+      [totalTime]="totalSeconds"
+    />
     <div style="padding-top: 40px">
       <div
         class="connection-dot"
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index e886cf2f..3e3b73ee 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -11,14 +11,41 @@ import { floatPipe } from 'src/utils/pipes.utils';
 })
 export default class BalancingStatus {
   isBalancing: boolean = false;
+  currentSeconds: number = 0;
+  totalSeconds: number = 0;
+  intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
-      this.isBalancing = floatPipe(value.values[0]) === 1;
+      if (this.isBalancing) {
+        if (!(floatPipe(value.values[0]) === 1)) {
+          this.isBalancing = false;
+          this.stopTimer();
+          this.resetCurrentSecs();
+        }
+      } else if (floatPipe(value.values[0]) === 1) {
+        this.isBalancing = true;
+        this.startTimer();
+      }
     });
   }
 
+  startTimer() {
+    this.intervalId = setInterval(() => {
+      this.currentSeconds++;
+      this.totalSeconds++;
+    }, 1000);
+  }
+
+  stopTimer() {
+    clearInterval(this.intervalId);
+  }
+
+  resetCurrentSecs() {
+    this.currentSeconds = 0;
+  }
+
   getBatteryStatus(connected: boolean) {
     return connected ? 'BALANCING' : 'NOT BALANCING';
   }
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
index 8035e89f..c73d19ce 100644
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
+++ b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
@@ -7,7 +7,7 @@
       </vstack>
       <divider style="height: 300px" />
       <vstack>
-        <charging-state />
+        <charging-status />
         <balancing-status />
       </vstack>
     </hstack>
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
deleted file mode 100644
index 0f7ca708..00000000
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-import Storage from 'src/services/storage.service';
-import Theme from 'src/services/theme.service';
-import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
-import { floatPipe } from 'src/utils/pipes.utils';
-
-@Component({
-  selector: 'charging-state',
-  templateUrl: './charging-state.component.html',
-  styleUrls: ['./charging-state.component.css']
-})
-export default class ChargingStateComponent {
-  isCharging: boolean = false;
-  timer: number = 0;
-  timerInterval: any;
-
-  constructor(private storage: Storage) {}
-
-  ngOnInit() {
-    this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
-      this.isCharging = floatPipe(value.values[0]) === 1;
-    });
-  }
-
-  getChargingState(connected: boolean) {
-    return connected ? 'PAUSED' : 'NOT PAUSED';
-  }
-
-  getStateColor(isCharging: boolean) {
-    return isCharging ? 'yellow' : Theme.infoBackground;
-  }
-}
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.css
similarity index 100%
rename from angular-client/src/pages/charging-page/components/charging-state/charging-state.component.css
rename to angular-client/src/pages/charging-page/components/charging-state/charging-status.component.css
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.html
similarity index 67%
rename from angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html
rename to angular-client/src/pages/charging-page/components/charging-state/charging-status.component.html
index a69c8279..37974bc4 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-state.component.html
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.html
@@ -1,6 +1,10 @@
 <info-background title="CHARGING">
   <hstack>
-    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <current-total-timer
+      style="padding-left: 20px; min-height: 100px"
+      [currentTime]="currentSeconds"
+      [totalTime]="totalSeconds"
+    />
     <div style="padding-top: 40px">
       <div
         class="connection-dot"
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
new file mode 100644
index 00000000..32c3560d
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import Theme from 'src/services/theme.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { floatPipe } from 'src/utils/pipes.utils';
+
+@Component({
+  selector: 'charging-status',
+  templateUrl: './charging-status.component.html',
+  styleUrls: ['./charging-status.component.css']
+})
+export default class ChargingStatusComponent {
+  isCharging: boolean = false;
+  currentSeconds: number = 0;
+  totalSeconds: number = 0;
+  intervalId!: NodeJS.Timeout;
+
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
+      if (this.isCharging) {
+        if (!(floatPipe(value.values[0]) === 1)) {
+          this.isCharging = false;
+          this.stopTimer();
+          this.resetCurrentSecs();
+        }
+      } else if (floatPipe(value.values[0]) === 1) {
+        this.isCharging = true;
+        this.startTimer();
+      }
+    });
+  }
+
+  startTimer() {
+    this.intervalId = setInterval(() => {
+      this.currentSeconds++;
+      this.totalSeconds++;
+    }, 1000);
+  }
+
+  stopTimer() {
+    clearInterval(this.intervalId);
+  }
+
+  resetCurrentSecs() {
+    this.currentSeconds = 0;
+  }
+
+  getChargingState(connected: boolean) {
+    return connected ? 'PAUSED' : 'NOT PAUSED';
+  }
+
+  getStateColor(isCharging: boolean) {
+    return isCharging ? 'yellow' : Theme.infoBackground;
+  }
+}
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
index a5a5176d..a568376c 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.html
@@ -1,6 +1,10 @@
 <info-background title="FAULTED">
   <hstack>
-    <current-total-timer style="padding-left: 20px; min-height: 100px" />
+    <current-total-timer
+      style="padding-left: 20px; min-height: 100px"
+      [currentTime]="currentSeconds"
+      [totalTime]="totalSeconds"
+    />
     <div style="padding-top: 40px">
       <div
         class="connection-dot"
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index 1aeeb690..c254b343 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -11,14 +11,41 @@ import { floatPipe } from 'src/utils/pipes.utils';
 })
 export default class FaultedStatus {
   isFaulted: boolean = false;
+  currentSeconds: number = 0;
+  totalSeconds: number = 0;
+  intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
-      this.isFaulted = floatPipe(value.values[0]) === 3;
+      if (this.isFaulted) {
+        if (!(floatPipe(value.values[0]) === 3)) {
+          this.isFaulted = false;
+          this.stopTimer();
+          this.resetCurrentSecs();
+        }
+      } else if (floatPipe(value.values[0]) === 3) {
+        this.isFaulted = true;
+        this.startTimer();
+      }
     });
   }
 
+  startTimer() {
+    this.intervalId = setInterval(() => {
+      this.currentSeconds++;
+      this.totalSeconds++;
+    }, 1000);
+  }
+
+  stopTimer() {
+    clearInterval(this.intervalId);
+  }
+
+  resetCurrentSecs() {
+    this.currentSeconds = 0;
+  }
+
   getStatusColor(isFaulted: boolean) {
     return isFaulted ? 'red' : Theme.infoBackground;
   }

From 226e67354831da6ccc5dce0041d789c3bea74e8e Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 22 Aug 2024 22:54:09 -0400
Subject: [PATCH 08/31] #172 - fixed info-background reset button

---
 .../info-background/info-background.component.html        | 8 +++++++-
 .../src/pages/charging-page/charging-page.component.html  | 2 +-
 .../cell-temp-display/cell-temp-display.component.html    | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/angular-client/src/components/info-background/info-background.component.html b/angular-client/src/components/info-background/info-background.component.html
index 76814958..2107c29a 100644
--- a/angular-client/src/components/info-background/info-background.component.html
+++ b/angular-client/src/components/info-background/info-background.component.html
@@ -6,7 +6,13 @@
       <typography variant="info-title" content="{{ title }}" />
     </div>
     <div *ngIf="button">
-      <mat-icon *ngIf="button" aria-hidden="false" (click)="button.onClick()" [fontIcon]="button.icon"></mat-icon>
+      <mat-icon
+        *ngIf="button"
+        aria-hidden="false"
+        (click)="button.onClick()"
+        [fontIcon]="button.icon"
+        style="position: relative; z-index: 10"
+      ></mat-icon>
     </div>
   </div>
   <typography
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 ab1fe4c8..848ab400 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -27,7 +27,7 @@
           </vstack>
           <fault-display style="height: 380px; width: 520px" />
         </hstack>
-        <cell-temp-display style="width: 1400px; height: 170px" />
+        <cell-temp-display style="width: 1400px; height: 175px" />
         <high-low-cell-display style="width: 1400px; height: 175px" />
         <pack-voltage-display style="height: 175px; width: 100%" />
       </vstack>
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 17d00457..3ea9887e 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
@@ -19,6 +19,6 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
     or just don't enforce -->
-    <cell-temp-graph style="width: 80%; padding-bottom: 5vh" [resetGraph]="resetGraph"></cell-temp-graph>
+    <cell-temp-graph style="width: 80%; padding-bottom: 35px" [resetGraph]="resetGraph"></cell-temp-graph>
   </hstack>
 </info-background>

From fbac39a487370ec0e4510e7cc6ce6d516a9fb4d0 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 22 Aug 2024 23:24:10 -0400
Subject: [PATCH 09/31] #172 - fixed fault display component & total timer now
 has client lifetime total

---
 .../components/active-status/active-status.component.ts        | 3 ++-
 .../components/balancing-status/balancing-status.component.ts  | 3 ++-
 .../components/charging-state/charging-status.component.ts     | 3 ++-
 .../components/fault-display/fault-display.component.html      | 2 +-
 .../components/faulted-status/faulted-status.component.ts      | 3 ++-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index 5bceafde..d15c872f 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ActiveStatus {
   isActive: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = 0;
+  totalSeconds: number = Number(localStorage.getItem('active total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,6 +35,7 @@ export default class ActiveStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
+      localStorage.setItem('active total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index 3e3b73ee..bf9a60f3 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class BalancingStatus {
   isBalancing: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = 0;
+  totalSeconds: number = Number(localStorage.getItem('balancing total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,6 +35,7 @@ export default class BalancingStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
+      localStorage.setItem('balancing total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 32c3560d..541c028f 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ChargingStatusComponent {
   isCharging: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = 0;
+  totalSeconds: number = Number(localStorage.getItem('charging total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
 
   constructor(private storage: Storage) {}
@@ -36,6 +36,7 @@ export default class ChargingStatusComponent {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
+      localStorage.setItem('charging total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
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 daf30504..b68358c7 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
@@ -20,7 +20,7 @@
               variant="info-subtitle"
               [content]="fault.name"
               additionalStyles="font-weight: bold;"
-              style="width: 33%; height: 40px; padding-top: 10px; width: 350px"
+              style="width: 33%; height: 40px; padding-top: 10px; width: 400px"
             ></typography>
             <typography
               variant="info-subtitle"
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index c254b343..750ce12a 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class FaultedStatus {
   isFaulted: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = 0;
+  totalSeconds: number = Number(localStorage.getItem('faulted total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,6 +35,7 @@ export default class FaultedStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
+      localStorage.setItem('faulted total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 

From 74909ef62045e62a415762741db5275e0538f772 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Fri, 23 Aug 2024 15:13:58 -0400
Subject: [PATCH 10/31] #172 - total seconds now in session storage

---
 .../components/active-status/active-status.component.ts       | 4 ++--
 .../components/balancing-status/balancing-status.component.ts | 4 ++--
 .../components/charging-state/charging-status.component.ts    | 4 ++--
 .../components/faulted-status/faulted-status.component.ts     | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index d15c872f..c47392f3 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ActiveStatus {
   isActive: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(localStorage.getItem('active total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('active total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,7 +35,7 @@ export default class ActiveStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      localStorage.setItem('active total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('active total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index bf9a60f3..eed11d4d 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class BalancingStatus {
   isBalancing: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(localStorage.getItem('balancing total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('balancing total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,7 +35,7 @@ export default class BalancingStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      localStorage.setItem('balancing total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('balancing total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 541c028f..c7168c36 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ChargingStatusComponent {
   isCharging: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(localStorage.getItem('charging total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('charging total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
 
   constructor(private storage: Storage) {}
@@ -36,7 +36,7 @@ export default class ChargingStatusComponent {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      localStorage.setItem('charging total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('charging total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index 750ce12a..45d308a3 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class FaultedStatus {
   isFaulted: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(localStorage.getItem('faulted total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('faulted total seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
@@ -35,7 +35,7 @@ export default class FaultedStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      localStorage.setItem('faulted total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('faulted total seconds', this.totalSeconds.toString());
     }, 1000);
   }
 

From 03428696c924b91e9571a563d60b9c30527ad337 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 29 Aug 2024 21:58:05 -0400
Subject: [PATCH 11/31] #172 - double line graph resizing

---
 .../components/double-line-graph/double-line-graph.component.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/angular-client/src/components/double-line-graph/double-line-graph.component.ts b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
index 63975cda..07a9a27a 100644
--- a/angular-client/src/components/double-line-graph/double-line-graph.component.ts
+++ b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
@@ -128,6 +128,7 @@ export class DoubleLineGraphComponent implements OnInit {
       xaxis: {
         type: 'category',
         tickAmount: 2,
+        range: 120000,
         labels: {
           show: true,
           style: {

From fdae63e1a5747ca9a6b9a9fe8d88ae0e2b53f83a Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 5 Sep 2024 17:33:52 -0400
Subject: [PATCH 12/31] #172 - battery status comp clean up + mobile view
 status comp

---
 .DS_Store                                     | Bin 10244 -> 10244 bytes
 angular-client/src/app/app.module.ts          |   4 +--
 .../charging-page-mobile.component.html       |  17 ----------
 .../charging-page.component.html              |   2 +-
 .../battery-status-display.component.ts       |  29 ------------------
 .../combined-status-display.component.css}    |   0
 .../combined-status-display.component.html}   |   0
 .../combined-status-display.component.ts      |   8 +++++
 .../combined-status-display.component.css     |   7 +++++
 .../combined-status-display.component.html    |   8 +++++
 .../combined-status-display.component.ts      |   8 +++++
 11 files changed, 34 insertions(+), 49 deletions(-)
 delete mode 100644 angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
 rename angular-client/src/pages/charging-page/components/{battery-status-display/battery-status-display.component.css => combined-status-display/combined-status-display.component.css} (100%)
 rename angular-client/src/pages/charging-page/components/{battery-status-display/battery-status-display.component.html => combined-status-display/combined-status-display.component.html} (100%)
 create mode 100644 angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts
 create mode 100644 angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css
 create mode 100644 angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html
 create mode 100644 angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts

diff --git a/.DS_Store b/.DS_Store
index 12a7b0673d975db203b5ce53178041ab032f4ca4..ff82cb45c0f67d2e1df7881fe5e77bddae2ecacc 100644
GIT binary patch
delta 406
zcmZn(XbG6$&uF+YU^hRb;ba~G$+)FV<_ruBEDU-K=?s|+CAs-7E=f80NkB0U!MKa1
zoleIbQRP$c$`@o91}Ep|76A1yFy%9BZWhR4VsZEuyLa*fK?M<H)0Lh|#5Vy=he{xf
zMV6RcEzH9lxuan6eL=;^tA!ibW;D2md1y~I6j4Gj#Wv@Qq%$)LO};B8CC8x4P{dHm
zP|Q%0la6r8$)K2*Ko^0PC?S*}yXU<b#64J*AzX*9ObTHdvfoczPhgm=FCnq{wYUlU
RW_E@1>=5?}Bb3A42LKgpabN%d

delta 245
zcmZn(XbG6$&#1dGU^hRb?qnVT$++^n_ZS!$SQzve(it)tN^<jET#|C~lYn9z%lAod
z=#oF?h$^3gSH2*_FgQ6sw*aVzf$^Bb=4OE$CKf~ISl-DG1QkS(O?Q_0UScS9%n>Sq
zFcw*2a<woIv**cz$@c{nC$AQ6U}KwC@wroevZ06)f+@B+UnHG*@+S$=&6g!i*e4de
Q*vzhQo*g7G`Lcv0000S09{>OV

diff --git a/angular-client/src/app/app.module.ts b/angular-client/src/app/app.module.ts
index 2d649684..174a7ea1 100644
--- a/angular-client/src/app/app.module.ts
+++ b/angular-client/src/app/app.module.ts
@@ -80,7 +80,6 @@ import { SwitchComponent } from 'src/components/switch/switch.component';
 import { DoubleLineGraphComponent } from 'src/components/double-line-graph/double-line-graph.component';
 import BatteryInfoDesktop from 'src/pages/charging-page/components/battery-info-display/battery-info-desktop/battery-info-desktop.component';
 import BatteryInfoMobile from 'src/pages/charging-page/components/battery-info-display/battery-info-mobile/battery-info-mobile.component';
-import BatteryStatusDisplay from 'src/pages/charging-page/components/battery-status-display/battery-status-display.component';
 import StateOfChargeDisplay from 'src/pages/charging-page/components/state-of-charge/state-of-charge-display/state-of-charge-display.component';
 import PackTemp from 'src/pages/charging-page/components/pack-temp/pack-temp.component';
 import CellTempDisplay from 'src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component';
@@ -100,6 +99,7 @@ import CurrentTotalTimer from 'src/components/current-total-timer/current-total-
 import BalancingStatus from 'src/pages/charging-page/components/balancing-status/balancing-status.component';
 import FaultedStatus from 'src/pages/charging-page/components/faulted-status/faulted-status.component';
 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';
 
 @NgModule({
   declarations: [
@@ -164,7 +164,7 @@ import ActiveStatus from 'src/pages/charging-page/components/active-status/activ
     BatteryInfoMobile,
     NodeFilterPipe,
     DataTypeFilterPipe,
-    BatteryStatusDisplay,
+    CombinedStatusDisplay,
     StateOfChargeDisplay,
     PackTemp,
     CellTempDisplay,
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 5e60ec4a..2d2ba1c4 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
@@ -2,21 +2,4 @@
   <typography variant="xx-large-title" content="Argos"></typography>
   <typography variant="x-large-title" [content]="time | date: 'HH:mm:ss'"></typography>
   <typography variant="x-large-title" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
-  <state-of-charge-display style="width: 100%" />
-
-  <hstack style="width: 100%">
-    <battery-status-display style="width: 100%" />
-    <latency-display style="width: 70%" />
-  </hstack>
-
-  <hstack style="width: 100%">
-    <pack-temp style="width: 50%; height: 20vh" />
-  </hstack>
-  <cell-temp-display style="width: 100%; height: 20vh" />
-  <cell-temp-graph style="width: 100%; height: 20vh" />
-
-  <hstack style="width: 100%">
-    <current-display style="width: 60%" />
-    <fault-display style="width: 40%" />
-  </hstack>
 </vstack>
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 848ab400..d2197ff5 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -19,7 +19,7 @@
       </div>
       <vstack>
         <hstack spacing="10px">
-          <battery-status-display style="width: 625px; height: 380px" />
+          <combined-status-display style="width: 625px; height: 380px" />
           <vstack>
             <state-of-charge-display style="width: 230px; height: 123px" />
             <current-display style="width: 230px; height: 122px" />
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts b/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
deleted file mode 100644
index 58fac048..00000000
--- a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import Storage from 'src/services/storage.service';
-import Theme from 'src/services/theme.service';
-import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
-import { floatPipe } from 'src/utils/pipes.utils';
-
-@Component({
-  selector: 'battery-status-display',
-  templateUrl: './battery-status-display.component.html',
-  styleUrls: ['./battery-status-display.component.css']
-})
-export default class BatteryStatusDisplay {
-  isBalancing: boolean = false;
-  constructor(private storage: Storage) {}
-
-  ngOnInit() {
-    this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
-      this.isBalancing = floatPipe(value.values[0]) === 1;
-    });
-  }
-
-  getBatteryStatus(connected: boolean) {
-    return connected ? 'BALANCING' : 'NOT BALANCING';
-  }
-
-  getStatusColor(isBalancing: boolean) {
-    return isBalancing ? 'green' : Theme.infoBackground;
-  }
-}
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.css
similarity index 100%
rename from angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.css
rename to angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.css
diff --git a/angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
similarity index 100%
rename from angular-client/src/pages/charging-page/components/battery-status-display/battery-status-display.component.html
rename to angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
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
new file mode 100644
index 00000000..984c4089
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'combined-status-display',
+  templateUrl: './combined-status-display.component.html',
+  styleUrls: ['./combined-status-display.component.css']
+})
+export default class CombinedStatusDisplay {}
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css
new file mode 100644
index 00000000..2783a6a3
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css
@@ -0,0 +1,7 @@
+.connection-dot {
+  background-color: #2c2c2c;
+  border: 3px solid;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html
new file mode 100644
index 00000000..e06618ec
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html
@@ -0,0 +1,8 @@
+<div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
+  <vstack>
+    <active-status />
+    <faulted-status />
+    <charging-status />
+    <balancing-status />
+  </vstack>
+</div>
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts
new file mode 100644
index 00000000..562a046e
--- /dev/null
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'combined-status-mobile',
+  templateUrl: './combined-status-mobile.component.html',
+  styleUrls: ['./combined-status-mobile.component.css']
+})
+export default class CombinedStatusMobile {}

From aaaaf16ec135661b56d34b575dcbdb25b5bdfa19 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 14 Sep 2024 12:50:06 -0400
Subject: [PATCH 13/31] #172 -combined status name change

---
 .DS_Store                                     | Bin 10244 -> 10244 bytes
 angular-client/src/app/app.module.ts          |  10 ++++++++--
 .../combined-status-display.component.ts      |  12 ++++++++++--
 ...s => combined-status-mobile.component.css} |   0
 ... => combined-status-mobile.component.html} |   0
 ...ts => combined-status-mobile.component.ts} |   0
 6 files changed, 18 insertions(+), 4 deletions(-)
 rename angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/{combined-status-display.component.css => combined-status-mobile.component.css} (100%)
 rename angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/{combined-status-display.component.html => combined-status-mobile.component.html} (100%)
 rename angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/{combined-status-display.component.ts => combined-status-mobile.component.ts} (100%)

diff --git a/.DS_Store b/.DS_Store
index ff82cb45c0f67d2e1df7881fe5e77bddae2ecacc..87ea4e46b4f5900ae077cffecf3f41773c4b7d36 100644
GIT binary patch
delta 133
zcmZn(XbIS$A`r*&Qm~(afq{iVk0G5Qlc6Lx-^C><CqD@&#_?C^p7~YRV~(iuDR|`z
xG7N*0^K%P;dKg%DY;F?BWnwX5EqOfofuO=<Vc`;HpVJAG?+Yq!UM(Cc0sx{UCU*b;

delta 133
zcmZn(XbIS$A`r*8l*ycdfq{iVk0G5Qlc6Lx-^C><CqD@&#vvGYv9#0am?Nru3SRkw
x48!2${M-Vd9tNiT%}oNiOe_xHV)ssdAgC}|Sh$2aa!0}B`+|y_R|`jq007`hB+CE*

diff --git a/angular-client/src/app/app.module.ts b/angular-client/src/app/app.module.ts
index 174a7ea1..e57cc84f 100644
--- a/angular-client/src/app/app.module.ts
+++ b/angular-client/src/app/app.module.ts
@@ -100,6 +100,7 @@ import BalancingStatus from 'src/pages/charging-page/components/balancing-status
 import FaultedStatus from 'src/pages/charging-page/components/faulted-status/faulted-status.component';
 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';
 
 @NgModule({
   declarations: [
@@ -183,7 +184,8 @@ import CombinedStatusDisplay from 'src/pages/charging-page/components/combined-s
     CurrentTotalTimer,
     BalancingStatus,
     FaultedStatus,
-    ActiveStatus
+    ActiveStatus,
+    CombinedStatusMobile
   ],
   imports: [
     BrowserModule,
@@ -256,6 +258,10 @@ export class AppModule {
       .addSvgIcon('model_training', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/model_training.svg'))
       .addSvgIcon('quickreply', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/quickreply.svg'))
       .addSvgIcon('bolt', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/bolt.svg'))
-      .addSvgIcon('timer', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/timer.svg'));
+      .addSvgIcon('timer', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/icons/timer.svg'))
+      .addSvgIcon(
+        'arrow_drop_down_circle',
+        this.domSanitizer.bypassSecurityTrustResourceUrl('../assests/icons/arrow_drop_down_circle.svg')
+      );
   }
 }
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 984c4089..c0ba4099 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
@@ -1,8 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 
 @Component({
   selector: 'combined-status-display',
   templateUrl: './combined-status-display.component.html',
   styleUrls: ['./combined-status-display.component.css']
 })
-export default class CombinedStatusDisplay {}
+export default class CombinedStatusDisplay {
+  mobileThreshold = 1000;
+  isMobile = window.innerWidth < this.mobileThreshold;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile = window.innerWidth <= this.mobileThreshold;
+  }
+}
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.css
similarity index 100%
rename from angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.css
rename to angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.css
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html
similarity index 100%
rename from angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.html
rename to angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.ts
similarity index 100%
rename from angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-display.component.ts
rename to angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.ts

From a5418e790a3ee149dec3ca6e101e3c07d97e9de9 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 14 Sep 2024 14:42:15 -0400
Subject: [PATCH 14/31] #172 - minor changes

---
 .../cell-temp-display.component.html               | 14 +++++---------
 .../cell-temp-graph/cell-temp-graph.component.html |  8 +-------
 .../fault-display/fault-display.component.ts       |  2 +-
 scylla-server/src/socket/mock-proxy-client.ts      |  2 +-
 4 files changed, 8 insertions(+), 18 deletions(-)

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 3ea9887e..4600c760 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,24 +1,20 @@
 <info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
   <hstack>
-    <vstack style="width: 10%">
-      <hstack>
-        <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
-      </hstack>
+    <vstack style="width: 10%; padding-bottom: 30px">
+      <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
       <typography variant="info-subtitle" content="Avg. Temp" />
     </vstack>
 
     <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
     <divider style="height: 100px"></divider>
 
-    <vstack style="width: 10%">
-      <hstack>
-        <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
-      </hstack>
+    <vstack style="width: 10%; padding-bottom: 30px">
+      <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
       <typography variant="info-subtitle" content="Max. Temp" />
     </vstack>
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
     or just don't enforce -->
-    <cell-temp-graph style="width: 80%; padding-bottom: 35px" [resetGraph]="resetGraph"></cell-temp-graph>
+    <cell-temp-graph style="width: 85%; padding-bottom: 30px" [resetGraph]="resetGraph"></cell-temp-graph>
   </hstack>
 </info-background>
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
index 5a79bf4b..b80b7793 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
@@ -1,8 +1,2 @@
-<graph-component
-  [data]="cellTempData"
-  graphContainerId="cellTempGraph"
-  icon="speed"
-  title="Voltage Over Time"
-  color="#ffffff"
->
+<graph-component [data]="cellTempData" graphContainerId="cellTempGraph" icon="speed" title="Cell Temp" color="#ffffff">
 </graph-component>
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 e17150b4..2acd5e10 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
@@ -38,7 +38,7 @@ export default class FaultDisplay {
   faultsShifted: boolean = false;
   resetButton = {
     onClick: () => {
-      this.faults.shift();
+      this.faults = [];
     },
     icon: 'restart_alt'
   };
diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts
index 66c6ab34..78f1374b 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');
-      }, 10)
+      }, 1)
     );
   };
 

From ba7f31f170aa8d0ad0ed6c87d38d62274161a76f Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 14 Sep 2024 14:43:42 -0400
Subject: [PATCH 15/31] #172 - fixed cell temp data name

---
 .../cell-temp/cell-temp-graph/cell-temp-graph.component.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
index b80b7793..cb5371df 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
@@ -1,2 +1,2 @@
-<graph-component [data]="cellTempData" graphContainerId="cellTempGraph" icon="speed" title="Cell Temp" color="#ffffff">
+<graph-component [data]="cellTempData" graphContainerId="cellTempGraph" icon="speed" title="Max Cell Temp" color="#ffffff">
 </graph-component>

From 470e6b0f0457e80ed5335b6d9a8069276b365c0e Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 14 Sep 2024 17:16:31 -0400
Subject: [PATCH 16/31] #172 - charging page mobile MVP

---
 .../charging-page-mobile.component.html       | 20 ++++++-
 .../cell-temp-display.component.html          | 46 +++++++++-----
 .../cell-temp-display.component.ts            |  9 ++-
 .../combined-status-mobile.component.html     |  4 +-
 .../high-low-cell-display.component.html      | 60 +++++++++++--------
 .../pack-voltage-display.component.html       | 22 +++++--
 .../pack-voltage-display.component.ts         |  9 ++-
 7 files changed, 116 insertions(+), 54 deletions(-)

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 2d2ba1c4..f49f9023 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,5 +1,19 @@
 <vstack style="width: 100%" spacing="20px">
-  <typography variant="xx-large-title" content="Argos"></typography>
-  <typography variant="x-large-title" [content]="time | date: 'HH:mm:ss'"></typography>
-  <typography variant="x-large-title" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
+  <typography variant="x-large-title" content="Argos"></typography>
+  <hstack>
+    <typography variant="large-header" [content]="time | date: 'HH:mm:ss'"></typography>
+    <divider style="height: 40px"></divider>
+    <typography variant="large-header" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
+  </hstack>
+  <latency-display style="padding-bottom: 20px; margin-top: -10px" />
+  <vstack style="width: 100%" spacing="15px">
+    <combined-status-mobile style="width: 80%; height: 720px" />
+    <state-of-charge-display style="width: 80%; height: 123px" />
+    <current-display style="width: 80%; height: 122px" />
+    <pack-temp style="width: 80%; height: 122px" />
+    <cell-temp-display style="width: 80%; height: 375px" />
+    <high-low-cell-display style="width: 80%; height: 400px" />
+    <pack-voltage-display style="width: 80%; height: 290px" />
+    <fault-display style="width: 80%; height: 375px" />
+  </vstack>
 </vstack>
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 4600c760..24241956 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,20 +1,34 @@
 <info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
-  <hstack>
-    <vstack style="width: 10%; padding-bottom: 30px">
-      <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
-      <typography variant="info-subtitle" content="Avg. Temp" />
-    </vstack>
+  <vstack>
+    <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
+    <hstack>
+      <vstack style="width: 10%; padding-bottom: 30px">
+        <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
+        <typography variant="info-subtitle" content="Avg. Temp" />
+      </vstack>
 
-    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-    <divider style="height: 100px"></divider>
+      <div *ngIf="!isDesktop" style="padding-left: 20px"></div>
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
+      <div *ngIf="!isDesktop" style="padding-right: 20px"></div>
 
-    <vstack style="width: 10%; padding-bottom: 30px">
-      <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
-      <typography variant="info-subtitle" content="Max. Temp" />
-    </vstack>
-    <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
-    <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
-    or just don't enforce -->
-    <cell-temp-graph style="width: 85%; padding-bottom: 30px" [resetGraph]="resetGraph"></cell-temp-graph>
-  </hstack>
+      <vstack style="width: 10%; padding-bottom: 30px">
+        <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
+        <typography variant="info-subtitle" content="Max. Temp" />
+      </vstack>
+      <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
+      <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
+      or just don't enforce -->
+      <cell-temp-graph
+        style="width: 85%; padding-bottom: 30px"
+        [resetGraph]="resetGraph"
+        *ngIf="isDesktop"
+      ></cell-temp-graph>
+    </hstack>
+    <cell-temp-graph
+      style="width: 100%; padding-bottom: 30px"
+      [resetGraph]="resetGraph"
+      *ngIf="!isDesktop"
+    ></cell-temp-graph>
+  </vstack>
 </info-background>
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 5a74b602..f9be630d 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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+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';
@@ -18,6 +18,13 @@ export default class CellTempDisplay {
     },
     icon: 'restart_alt'
   };
+  mobileThreshold = 1000;
+  isDesktop = window.innerWidth > this.mobileThreshold;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isDesktop = window.innerWidth >= this.mobileThreshold;
+  }
 
   constructor(private storage: Storage) {}
 
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html
index e06618ec..e2e50ee3 100644
--- a/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/mobile-view/combined-status-mobile.component.html
@@ -1,8 +1,8 @@
-<div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
+<info-background svgIcon="quickreply" title="Status">
   <vstack>
     <active-status />
     <faulted-status />
     <charging-status />
     <balancing-status />
   </vstack>
-</div>
+</info-background>
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 e077c13f..6a4db6f8 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,33 +1,41 @@
 <info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
-  <hstack spacing="30px">
-    <vstack style="width: 10%">
-      <hstack>
-        <typography variant="info-value" [content]="delta.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
-      </hstack>
-      <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
-    </vstack>
+  <vstack>
+    <hstack spacing="30px">
+      <vstack style="width: 10%">
+        <hstack>
+          <typography variant="info-value" [content]="delta.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
+        </hstack>
+        <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
+      </vstack>
 
-    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-    <divider style="height: 100px"></divider>
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
 
-    <vstack style="width: 10%">
-      <typography variant="info-value" [content]="lowCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
-      <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
-    </vstack>
+      <vstack style="width: 10%">
+        <typography variant="info-value" [content]="lowCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
+        <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
+      </vstack>
 
-    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-    <divider style="height: 100px"></divider>
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
 
-    <vstack style="width: 10%">
-      <hstack>
-        <typography variant="info-value" [content]="highCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:30px" />
-      </hstack>
-      <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
-    </vstack>
+      <vstack style="width: 10%">
+        <hstack>
+          <typography variant="info-value" [content]="highCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
+        </hstack>
+        <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
+      </vstack>
 
-    <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
-    <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
-      or just don't enforce -->
-    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph"> </high-low-cell-graph>
-  </hstack>
+      <!--On desktop view we don't want the graph component to be in a horizontal stack-->
+      <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
+      </high-low-cell-graph>
+    </hstack>
+    <!--We want the graph to be in a vertical stack-->
+    <high-low-cell-graph
+      style="width: 100%; padding-bottom: 5vh; height: 280px"
+      [resetGraph]="resetGraph"
+      *ngIf="!isDesktop"
+    >
+    </high-low-cell-graph>
+  </vstack>
 </info-background>
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 d0d6ec2d..012da6cb 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,8 +1,20 @@
 <info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
-  <hstack>
-    <hstack style="width: 15%">
-      <typography variant="info-value" [content]="voltage.toString() + 'V'" />
+  <vstack>
+    <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
+    <hstack>
+      <hstack style="width: 15%">
+        <typography variant="info-value" [content]="voltage.toString() + 'V'" />
+      </hstack>
+      <pack-voltage-graph
+        style="width: 80%; padding-bottom: 5vh"
+        [resetGraph]="resetGraph"
+        *ngIf="isDesktop"
+      ></pack-voltage-graph>
     </hstack>
-    <pack-voltage-graph style="width: 80%; padding-bottom: 5vh" [resetGraph]="resetGraph"></pack-voltage-graph>
-  </hstack>
+    <pack-voltage-graph
+      style="width: 100%; padding-bottom: 5vh"
+      [resetGraph]="resetGraph"
+      *ngIf="!isDesktop"
+    ></pack-voltage-graph>
+  </vstack>
 </info-background>
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 b627ed7f..5fe30e78 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
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { waitForDebugger } from 'inspector';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
@@ -18,6 +18,13 @@ export default class PackVoltageDisplay {
     },
     icon: 'restart_alt'
   };
+  mobileThreshold = 1000;
+  isDesktop = window.innerWidth > this.mobileThreshold;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isDesktop = window.innerWidth >= this.mobileThreshold;
+  }
 
   constructor(private storage: Storage) {}
 

From b52479083480211e9a60139c52020c2e1fc62cc3 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sat, 14 Sep 2024 18:26:35 -0400
Subject: [PATCH 17/31] #172 - mobile view fixes + double line graph fix

---
 .../double-line-graph.component.ts            | 30 ++++++-
 .../charging-page-mobile.component.html       | 15 +++-
 .../cell-temp-display.component.html          | 47 ++++------
 .../high-low-cell-display.component.html      | 90 ++++++++++++-------
 .../pack-voltage-display.component.html       | 20 ++---
 5 files changed, 119 insertions(+), 83 deletions(-)

diff --git a/angular-client/src/components/double-line-graph/double-line-graph.component.ts b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
index 07a9a27a..c5bb3aae 100644
--- a/angular-client/src/components/double-line-graph/double-line-graph.component.ts
+++ b/angular-client/src/components/double-line-graph/double-line-graph.component.ts
@@ -47,9 +47,13 @@ export class DoubleLineGraphComponent implements OnInit {
   @Input() title2?: string;
   @Input() header?: string;
   @Input() graphContainerId!: string;
+  @Input({ required: false }) timeRangeSec!: number;
   options!: ChartOptions;
   chart!: ApexCharts;
   series: ApexAxisChartSeries = [];
+  timeDiffMs: number = 0;
+  isSliding: boolean = false;
+  timeRangeMs: number = 120000; // 2 minutes in ms
 
   constructor(public dialogService: DialogService) {}
 
@@ -68,20 +72,39 @@ export class DoubleLineGraphComponent implements OnInit {
     this.series = [
       {
         name: this.title1,
-        data: this.data1
+        data: Array.from(this.data1)
       },
       {
         name: this.title2,
-        data: this.data2
+        data: Array.from(this.data2)
       }
     ];
+    // temp fix, for now just basing change on data1 length...
+    // even though probably should check data1 also
+    if (!this.isSliding && this.data1.length > 2) {
+      this.timeDiffMs = this.data1[this.data1.length - 1].x - this.data1[0].x;
+    }
+
+    if (!this.isSliding && this.timeDiffMs > this.timeRangeMs) {
+      this.isSliding = true;
+      this.chart.updateOptions({
+        ...this.options,
+        xaxis: {
+          ...this.options.xaxis,
+          range: this.timeRangeMs
+        }
+      });
+    }
+
     this.chart.updateSeries(this.series);
     setTimeout(() => {
       this.updateChart();
-    }, 1000);
+    }, 800);
   };
 
   ngOnInit(): void {
+    this.timeRangeMs = (this.timeRangeSec ?? 120) * 1000;
+
     this.series = [
       {
         name: this.title1,
@@ -128,7 +151,6 @@ export class DoubleLineGraphComponent implements OnInit {
       xaxis: {
         type: 'category',
         tickAmount: 2,
-        range: 120000,
         labels: {
           show: true,
           style: {
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 f49f9023..3f8fedeb 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
@@ -11,9 +11,18 @@
     <state-of-charge-display style="width: 80%; height: 123px" />
     <current-display style="width: 80%; height: 122px" />
     <pack-temp style="width: 80%; height: 122px" />
-    <cell-temp-display style="width: 80%; height: 375px" />
-    <high-low-cell-display style="width: 80%; height: 400px" />
-    <pack-voltage-display style="width: 80%; height: 290px" />
+    <cell-temp-display style="width: 80%; height: 210px" />
+    <info-background style="width: 80%">
+      <cell-temp-graph></cell-temp-graph>
+    </info-background>
+    <high-low-cell-display style="width: 80%; height: 200px" />
+    <info-background style="width: 80%">
+      <high-low-cell-graph></high-low-cell-graph>
+    </info-background>
+    <pack-voltage-display style="width: 80%; height: 120px" />
+    <info-background style="width: 80%">
+      <pack-voltage-graph></pack-voltage-graph>
+    </info-background>
     <fault-display style="width: 80%; height: 375px" />
   </vstack>
 </vstack>
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 24241956..9a69c583 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,34 +1,23 @@
 <info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
-  <vstack>
-    <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
-    <hstack>
-      <vstack style="width: 10%; padding-bottom: 30px">
-        <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
-        <typography variant="info-subtitle" content="Avg. Temp" />
-      </vstack>
+  <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
+  <hstack>
+    <vstack style="width: 10%; padding-bottom: 30px">
+      <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
+      <typography variant="info-subtitle" content="Avg. Temp" />
+    </vstack>
 
-      <div *ngIf="!isDesktop" style="padding-left: 20px"></div>
-      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-      <divider style="height: 100px"></divider>
-      <div *ngIf="!isDesktop" style="padding-right: 20px"></div>
+    <div *ngIf="!isDesktop" style="padding-left: 20px"></div>
+    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+    <divider style="height: 100px"></divider>
+    <div *ngIf="!isDesktop" style="padding-right: 20px"></div>
 
-      <vstack style="width: 10%; padding-bottom: 30px">
-        <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
-        <typography variant="info-subtitle" content="Max. Temp" />
-      </vstack>
-      <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
-      <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
+    <vstack style="width: 10%; padding-bottom: 30px">
+      <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
+      <typography variant="info-subtitle" content="Max. Temp" />
+    </vstack>
+    <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
+    <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
       or just don't enforce -->
-      <cell-temp-graph
-        style="width: 85%; padding-bottom: 30px"
-        [resetGraph]="resetGraph"
-        *ngIf="isDesktop"
-      ></cell-temp-graph>
-    </hstack>
-    <cell-temp-graph
-      style="width: 100%; padding-bottom: 30px"
-      [resetGraph]="resetGraph"
-      *ngIf="!isDesktop"
-    ></cell-temp-graph>
-  </vstack>
+    <cell-temp-graph style="width: 85%; padding-bottom: 30px" [resetGraph]="resetGraph" *ngIf="isDesktop"></cell-temp-graph>
+  </hstack>
 </info-background>
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 6a4db6f8..e67afceb 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,41 +1,65 @@
 <info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
-  <vstack>
-    <hstack spacing="30px">
-      <vstack style="width: 10%">
-        <hstack>
-          <typography variant="info-value" [content]="delta.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
-        </hstack>
-        <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
-      </vstack>
+  <hstack spacing="30px">
+    <vstack style="width: 10%">
+      <hstack>
+        <typography
+          variant="info-value"
+          [content]="delta.toFixed(3) + 'V'"
+          additionalStyles="fontSize:40px"
+          *ngIf="isDesktop"
+        />
+        <typography
+          variant="info-value"
+          [content]="delta.toFixed(3) + 'V'"
+          additionalStyles="fontSize:20px"
+          *ngIf="!isDesktop"
+        />
+      </hstack>
+      <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
+    </vstack>
 
-      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-      <divider style="height: 100px"></divider>
+    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+    <divider style="height: 100px"></divider>
 
-      <vstack style="width: 10%">
-        <typography variant="info-value" [content]="lowCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
-        <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
-      </vstack>
+    <vstack style="width: 10%">
+      <typography
+        variant="info-value"
+        [content]="lowCellVoltage.toFixed(3) + 'V'"
+        additionalStyles="fontSize:40px"
+        *ngIf="isDesktop"
+      />
+      <typography
+        variant="info-value"
+        [content]="lowCellVoltage.toFixed(3) + 'V'"
+        additionalStyles="fontSize:20px"
+        *ngIf="!isDesktop"
+      />
+      <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
+    </vstack>
 
-      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-      <divider style="height: 100px"></divider>
+    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+    <divider style="height: 100px"></divider>
 
-      <vstack style="width: 10%">
-        <hstack>
-          <typography variant="info-value" [content]="highCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
-        </hstack>
-        <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
-      </vstack>
+    <vstack style="width: 10%">
+      <hstack>
+        <typography
+          variant="info-value"
+          [content]="highCellVoltage.toFixed(3) + 'V'"
+          additionalStyles="fontSize:40px"
+          *ngIf="isDesktop"
+        />
+        <typography
+          variant="info-value"
+          [content]="highCellVoltage.toFixed(3) + 'V'"
+          additionalStyles="fontSize:20px"
+          *ngIf="!isDesktop"
+        />
+      </hstack>
+      <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
+    </vstack>
 
-      <!--On desktop view we don't want the graph component to be in a horizontal stack-->
-      <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
-      </high-low-cell-graph>
-    </hstack>
-    <!--We want the graph to be in a vertical stack-->
-    <high-low-cell-graph
-      style="width: 100%; padding-bottom: 5vh; height: 280px"
-      [resetGraph]="resetGraph"
-      *ngIf="!isDesktop"
-    >
+    <!--On desktop view we don't want the graph component to be in a horizontal stack-->
+    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
     </high-low-cell-graph>
-  </vstack>
+  </hstack>
 </info-background>
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 012da6cb..6099c147 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,20 +1,12 @@
 <info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
-  <vstack>
-    <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
-    <hstack>
-      <hstack style="width: 15%">
-        <typography variant="info-value" [content]="voltage.toString() + 'V'" />
-      </hstack>
-      <pack-voltage-graph
-        style="width: 80%; padding-bottom: 5vh"
-        [resetGraph]="resetGraph"
-        *ngIf="isDesktop"
-      ></pack-voltage-graph>
+  <hstack>
+    <hstack style="width: 15%">
+      <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
     <pack-voltage-graph
-      style="width: 100%; padding-bottom: 5vh"
+      style="width: 80%; padding-bottom: 5vh"
       [resetGraph]="resetGraph"
-      *ngIf="!isDesktop"
+      *ngIf="isDesktop"
     ></pack-voltage-graph>
-  </vstack>
+  </hstack>
 </info-background>

From 1b24395ee93276079d777003e26e36d97d30ee8c Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sun, 15 Sep 2024 17:21:53 -0400
Subject: [PATCH 18/31] 172 -charging status bug fix

---
 .../components/charging-state/charging-status.component.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index c7168c36..3a56a903 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -20,12 +20,12 @@ export default class ChargingStatusComponent {
   ngOnInit() {
     this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
       if (this.isCharging) {
-        if (!(floatPipe(value.values[0]) === 1)) {
+        if (floatPipe(value.values[0]) === 1) {
           this.isCharging = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 1) {
+      } else if (floatPipe(value.values[0]) === 0) {
         this.isCharging = true;
         this.startTimer();
       }

From 09b4924959bde68c9eea45b2d71db1ca85d1dbd2 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sun, 15 Sep 2024 18:13:24 -0400
Subject: [PATCH 19/31] #172 - smaller cell volts values

---
 .../high-low-cell-display.component.html                    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 e67afceb..6cd84485 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
@@ -5,7 +5,7 @@
         <typography
           variant="info-value"
           [content]="delta.toFixed(3) + 'V'"
-          additionalStyles="fontSize:40px"
+          additionalStyles="fontSize:30px"
           *ngIf="isDesktop"
         />
         <typography
@@ -25,7 +25,7 @@
       <typography
         variant="info-value"
         [content]="lowCellVoltage.toFixed(3) + 'V'"
-        additionalStyles="fontSize:40px"
+        additionalStyles="fontSize:30px"
         *ngIf="isDesktop"
       />
       <typography
@@ -45,7 +45,7 @@
         <typography
           variant="info-value"
           [content]="highCellVoltage.toFixed(3) + 'V'"
-          additionalStyles="fontSize:40px"
+          additionalStyles="fontSize:30px"
           *ngIf="isDesktop"
         />
         <typography

From 7d08abe8c26f1a303553b35768b133624a426f40 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sun, 15 Sep 2024 18:59:45 -0400
Subject: [PATCH 20/31] #172 - fixed charging screen value

---
 .../charging-page.component.html              | 22 +++++++++----------
 .../charging-status.component.ts              |  4 ++--
 .../combined-status-display.component.html    |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

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 d2197ff5..5a9123ea 100644
--- a/angular-client/src/pages/charging-page/charging-page.component.html
+++ b/angular-client/src/pages/charging-page/charging-page.component.html
@@ -17,19 +17,19 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-      <vstack>
-        <hstack spacing="10px">
-          <combined-status-display style="width: 625px; height: 380px" />
-          <vstack>
-            <state-of-charge-display style="width: 230px; height: 123px" />
-            <current-display style="width: 230px; height: 122px" />
-            <pack-temp style="width: 230px; height: 122px" />
+      <vstack style="width: 100%">
+        <hstack spacing="10px" style="width: 100%">
+          <combined-status-display style="width: 45%; height: 380px" />
+          <vstack style="width: 15%">
+            <state-of-charge-display style="min-width: 230px; height: 123px" />
+            <current-display style="min-width: 230px; height: 122px" />
+            <pack-temp style="min-width: 230px; height: 122px" />
           </vstack>
-          <fault-display style="height: 380px; width: 520px" />
+          <fault-display style="height: 380px; min-width: 520px; width: 40%" />
         </hstack>
-        <cell-temp-display style="width: 1400px; height: 175px" />
-        <high-low-cell-display style="width: 1400px; height: 175px" />
-        <pack-voltage-display style="height: 175px; width: 100%" />
+        <cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
+        <high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />
+        <pack-voltage-display style="min-width: 1300px; width: 100%; height: 175px" />
       </vstack>
     </vstack>
   </ng-template>
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index c7168c36..3a56a903 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -20,12 +20,12 @@ export default class ChargingStatusComponent {
   ngOnInit() {
     this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
       if (this.isCharging) {
-        if (!(floatPipe(value.values[0]) === 1)) {
+        if (floatPipe(value.values[0]) === 1) {
           this.isCharging = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 1) {
+      } else if (floatPipe(value.values[0]) === 0) {
         this.isCharging = true;
         this.startTimer();
       }
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
index c73d19ce..6aecbb98 100644
--- a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
@@ -1,12 +1,12 @@
 <info-background svgIcon="quickreply" title="Status">
   <div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
     <hstack>
-      <vstack>
+      <vstack style="width: 45%">
         <active-status />
         <faulted-status />
       </vstack>
       <divider style="height: 300px" />
-      <vstack>
+      <vstack style="width: 45%">
         <charging-status />
         <balancing-status />
       </vstack>

From 5cc5fc3826c0052d0c4aea83242ec756cbf06d2c Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sun, 15 Sep 2024 19:56:40 -0400
Subject: [PATCH 21/31] #172 - whole page now responsive

---
 .../charging-page.component.html              | 16 +++++++-------
 .../combined-status-display.component.html    | 22 +++++++++----------
 .../high-low-cell-display.component.html      |  2 +-
 .../pack-voltage-display.component.html       |  2 +-
 4 files changed, 20 insertions(+), 22 deletions(-)

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 5a9123ea..c8fcef4f 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 @@
 
   <charging-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
   <ng-template #isDesktop>
-    <vstack style="width: 100%" spacing="15px">
+    <vstack style="width: 100%; min-width: 1290px" spacing="15px">
       <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
         <typography
           style="margin-bottom: -30px; margin-top: -10px"
@@ -17,15 +17,15 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-      <vstack style="width: 100%">
-        <hstack spacing="10px" style="width: 100%">
-          <combined-status-display style="width: 45%; height: 380px" />
+      <vstack style="width: 100%; min-width: 1290px">
+        <hstack spacing="10px" style="width: 100%; height: 50%">
+          <combined-status-display style="min-width: 620px; width: 45%; height: 380px" />
           <vstack style="width: 15%">
-            <state-of-charge-display style="min-width: 230px; height: 123px" />
-            <current-display style="min-width: 230px; height: 122px" />
-            <pack-temp style="min-width: 230px; height: 122px" />
+            <state-of-charge-display style="min-width: 200px; width: 100%; height: 123px" />
+            <current-display style="min-width: 200px; width: 100%; height: 122px" />
+            <pack-temp style="min-width: 200px; width: 100%; height: 122px" />
           </vstack>
-          <fault-display style="height: 380px; min-width: 520px; width: 40%" />
+          <fault-display style="height: 380px; min-width: 500px; width: 40%" />
         </hstack>
         <cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
         <high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />
diff --git a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
index 6aecbb98..fa0c10f0 100644
--- a/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
+++ b/angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html
@@ -1,15 +1,13 @@
 <info-background svgIcon="quickreply" title="Status">
-  <div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
-    <hstack>
-      <vstack style="width: 45%">
-        <active-status />
-        <faulted-status />
-      </vstack>
-      <divider style="height: 300px" />
-      <vstack style="width: 45%">
-        <charging-status />
-        <balancing-status />
-      </vstack>
-    </hstack>
+  <div style="display: flex; justify-content: space-between; align-items: flex-start; height: 80%">
+    <vstack style="width: 45%">
+      <active-status />
+      <faulted-status />
+    </vstack>
+    <divider style="height: 300px" />
+    <vstack style="width: 45%">
+      <charging-status />
+      <balancing-status />
+    </vstack>
   </div>
 </info-background>
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 6cd84485..7ca605b6 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
@@ -59,7 +59,7 @@
     </vstack>
 
     <!--On desktop view we don't want the graph component to be in a horizontal stack-->
-    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
+    <high-low-cell-graph style="width: 75%; padding-bottom: 35px" [resetGraph]="resetGraph" *ngIf="isDesktop">
     </high-low-cell-graph>
   </hstack>
 </info-background>
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 6099c147..54e82007 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
@@ -4,7 +4,7 @@
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
     <pack-voltage-graph
-      style="width: 80%; padding-bottom: 5vh"
+      style="width: 80%; padding-bottom: 30px"
       [resetGraph]="resetGraph"
       *ngIf="isDesktop"
     ></pack-voltage-graph>

From e9cccc74685e38cafbfc4f4badd58c99467b21f0 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Sun, 15 Sep 2024 20:13:01 -0400
Subject: [PATCH 22/31] #172 - mobile threshold change to 1200

---
 .../charging-page-mobile/charging-page-mobile.component.ts      | 2 +-
 .../src/pages/charging-page/charging-page.component.ts          | 2 +-
 .../cell-temp/cell-temp-display/cell-temp-display.component.ts  | 2 +-
 .../combined-status-display.component.ts                        | 2 +-
 .../high-low-cell-display/high-low-cell-display.component.ts    | 2 +-
 .../pack-voltage-display/pack-voltage-display.component.ts      | 2 +-
 angular-client/src/pages/landing-page/landing-page.component.ts | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

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 56bdcc74..f5432c30 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 = 1000;
+  mobileThreshold = 1200;
   isMobile = window.innerWidth < this.mobileThreshold;
 
   ngOnInit() {
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 56689a3a..64f8f344 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 = 1000;
+  mobileThreshold = 1200;
   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.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts
index f9be630d..3fd155d4 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
@@ -18,7 +18,7 @@ export default class CellTempDisplay {
     },
     icon: 'restart_alt'
   };
-  mobileThreshold = 1000;
+  mobileThreshold = 1200;
   isDesktop = window.innerWidth > this.mobileThreshold;
 
   @HostListener('window:resize', ['$event'])
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 c0ba4099..7634beb2 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 = 1000;
+  mobileThreshold = 1200;
   isMobile = window.innerWidth < this.mobileThreshold;
 
   @HostListener('window:resize', ['$event'])
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 baf907f0..0bef7257 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
@@ -12,7 +12,7 @@ export default class HighLowCellDisplay {
   delta: number = 0;
   lowCellVoltage: number = 0;
   highCellVoltage: number = 0;
-  mobileThreshold = 1000;
+  mobileThreshold = 1200;
   isDesktop = window.innerWidth > this.mobileThreshold;
   resetGraph: boolean = false;
   resetGraphButton = {
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 5fe30e78..8f8ee8db 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
@@ -18,7 +18,7 @@ export default class PackVoltageDisplay {
     },
     icon: 'restart_alt'
   };
-  mobileThreshold = 1000;
+  mobileThreshold = 1200;
   isDesktop = window.innerWidth > this.mobileThreshold;
 
   @HostListener('window:resize', ['$event'])
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 1efe7598..31144e04 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 = 1000;
+  mobileThreshold = 1200;
   isMobile = window.innerWidth < this.mobileThreshold;
 
   constructor(

From fae16123746404d074d95cc65aac8e8d055a704b Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 09:31:04 -0400
Subject: [PATCH 23/31] #172 - minor changes to comments and comp inputs

---
 .../charging-page-mobile.component.html           |  3 ---
 .../active-status/active-status.component.ts      |  5 +++--
 .../balancing-status.component.ts                 |  5 +++--
 .../cell-temp-display.component.html              |  6 +++++-
 .../cell-temp-display.component.ts                |  6 ++++--
 .../cell-temp-graph.component.html                |  9 +++++++--
 .../cell-temp-graph/cell-temp-graph.component.ts  | 15 ++-------------
 .../charging-state/charging-status.component.ts   |  5 +++--
 .../fault-display/fault-display.component.ts      |  2 --
 .../faulted-status/faulted-status.component.ts    |  5 +++--
 .../high-low-cell-display.component.html          |  1 -
 .../pack-voltage-display.component.ts             |  1 -
 scylla-server/src/socket/mock-proxy-client.ts     |  2 +-
 13 files changed, 31 insertions(+), 34 deletions(-)

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 3f8fedeb..77ba47d4 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
@@ -12,9 +12,6 @@
     <current-display style="width: 80%; height: 122px" />
     <pack-temp style="width: 80%; height: 122px" />
     <cell-temp-display style="width: 80%; height: 210px" />
-    <info-background style="width: 80%">
-      <cell-temp-graph></cell-temp-graph>
-    </info-background>
     <high-low-cell-display style="width: 80%; height: 200px" />
     <info-background style="width: 80%">
       <high-low-cell-graph></high-low-cell-graph>
diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index c47392f3..fc763b16 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -18,13 +18,14 @@ export default class ActiveStatus {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
+      const statusStateValue = floatPipe(value.values[0]);
       if (this.isActive) {
-        if (!(floatPipe(value.values[0]) === 2)) {
+        if (!(statusStateValue === 2)) {
           this.isActive = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 2) {
+      } else if (statusStateValue === 2) {
         this.isActive = true;
         this.startTimer();
       }
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index eed11d4d..a15a4791 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -18,13 +18,14 @@ export default class BalancingStatus {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.STATUS_BALANCING).subscribe((value) => {
+      const statusBalancingValue = floatPipe(value.values[0]);
       if (this.isBalancing) {
-        if (!(floatPipe(value.values[0]) === 1)) {
+        if (!(statusBalancingValue === 1)) {
           this.isBalancing = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 1) {
+      } else if (statusBalancingValue === 1) {
         this.isBalancing = true;
         this.startTimer();
       }
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 9a69c583..ac952f2a 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
@@ -18,6 +18,10 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
       or just don't enforce -->
-    <cell-temp-graph style="width: 85%; padding-bottom: 30px" [resetGraph]="resetGraph" *ngIf="isDesktop"></cell-temp-graph>
+    <cell-temp-graph
+      style="width: 85%; padding-bottom: 30px"
+      [maxCellTempData]="cellTempData"
+      *ngIf="isDesktop"
+    ></cell-temp-graph>
   </hstack>
 </info-background>
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 3fd155d4..ad9483f5 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
@@ -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: 'cell-temp-display',
@@ -14,10 +15,11 @@ export default class CellTempDisplay {
   resetGraph: boolean = false;
   resetGraphButton = {
     onClick: () => {
-      this.resetGraph = true;
+      this.cellTempData = [];
     },
     icon: 'restart_alt'
   };
+  cellTempData: GraphData[] = [];
   mobileThreshold = 1200;
   isDesktop = window.innerWidth > this.mobileThreshold;
 
@@ -30,8 +32,8 @@ export default class CellTempDisplay {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
-      this.resetGraph = false; //!!!! FOR REVIEW !!!!: is there a better way to do this reseting of the graph boolean?
       this.maxTemp = floatPipe(value.values[0]);
+      this.cellTempData.push({ x: new Date().getTime(), y: this.maxTemp });
     });
     this.storage.get(IdentifierDataType.CELL_TEMP_AVG).subscribe((value) => {
       this.resetGraph = false;
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
index cb5371df..d3063595 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html
@@ -1,2 +1,7 @@
-<graph-component [data]="cellTempData" graphContainerId="cellTempGraph" icon="speed" title="Max Cell Temp" color="#ffffff">
-</graph-component>
+<graph-component
+  [data]="maxCellTempData"
+  graphContainerId="cellTempGraph"
+  icon="speed"
+  title="Max Cell Temp"
+  color="#ffffff"
+></graph-component>
diff --git a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
index 4504ad62..fe31f261 100644
--- a/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts
+++ b/angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-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,7 @@ import { GraphData } from 'src/utils/types.utils';
   styleUrls: ['./cell-temp-graph.component.css']
 })
 export default class CellTempGraph implements OnInit {
-  cellTempData: GraphData[] = [];
-  @Input() resetGraph: boolean = false;
-  maxDataPoints = 100;
-
+  @Input() maxCellTempData: GraphData[] = [];
   constructor(private storage: Storage) {}
-  ngOnInit() {
-    this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
-      if (this.resetGraph) {
-        this.cellTempData = [];
-      }
-      this.cellTempData.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
-    });
-  }
+  ngOnInit() {}
 }
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 3a56a903..546af14a 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -19,13 +19,14 @@ export default class ChargingStatusComponent {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.CHARGING).subscribe((value) => {
+      const chargingControlValue = floatPipe(value.values[0]);
       if (this.isCharging) {
-        if (floatPipe(value.values[0]) === 1) {
+        if (chargingControlValue === 1) {
           this.isCharging = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 0) {
+      } else if (chargingControlValue === 0) {
         this.isCharging = true;
         this.startTimer();
       }
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 2acd5e10..813e6985 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
@@ -86,8 +86,6 @@ export default class FaultDisplay {
       if (faultType === FaultType.BMS) {
         faultName = this.getBMSFaultName(parseInt(faultValue));
       }
-      // current implementation doesn't need a specified case for charger faults
-      // (they have indiv binary id's)
       if (this.faults.length >= 50) {
         this.faults.pop();
       }
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index 45d308a3..2a08e8c0 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -18,13 +18,14 @@ export default class FaultedStatus {
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.BMS_MODE).subscribe((value) => {
+      const statusStateValue = floatPipe(value.values[0]);
       if (this.isFaulted) {
-        if (!(floatPipe(value.values[0]) === 3)) {
+        if (!(statusStateValue === 3)) {
           this.isFaulted = false;
           this.stopTimer();
           this.resetCurrentSecs();
         }
-      } else if (floatPipe(value.values[0]) === 3) {
+      } else if (statusStateValue === 3) {
         this.isFaulted = true;
         this.startTimer();
       }
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 7ca605b6..64a107a2 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
@@ -58,7 +58,6 @@
       <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
     </vstack>
 
-    <!--On desktop view we don't want the graph component to be in a horizontal stack-->
     <high-low-cell-graph style="width: 75%; padding-bottom: 35px" [resetGraph]="resetGraph" *ngIf="isDesktop">
     </high-low-cell-graph>
   </hstack>
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 8f8ee8db..2af03aec 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
@@ -1,5 +1,4 @@
 import { Component, HostListener } from '@angular/core';
-import { waitForDebugger } from 'inspector';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 import { floatPipe } from 'src/utils/pipes.utils';
diff --git a/scylla-server/src/socket/mock-proxy-client.ts b/scylla-server/src/socket/mock-proxy-client.ts
index 78f1374b..4e5a103d 100644
--- a/scylla-server/src/socket/mock-proxy-client.ts
+++ b/scylla-server/src/socket/mock-proxy-client.ts
@@ -304,7 +304,7 @@ export default class MockProxyClient implements ProxyClient {
         index = this.getRandomIndex(this.mockData.length);
         numericalData = this.mockData[index];
 
-        // IF MORE THAN ONE VALUE IS GIVEN in the numerical data, it is assumed that only those values should be choosen from.
+        // if more than one value is given in the numerical data, it is assumed that only those values should be choosen from.
         if (numericalData.vals.length > 1) {
           numericalData.vals[0] = numericalData.vals[this.getRandomIndex(numericalData.vals.length)];
         } else {

From a2a13f6c6a2737d306f2c0f7e954c1609f1819b2 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 13:23:25 -0400
Subject: [PATCH 24/31] #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 @@
 <vstack style="width: 100%" spacing="20px">
-  <typography variant="x-large-title" content="Argos"></typography>
+  <typography variant="x-large-title" content="Argos" additionalStyles="fontSize:40px"></typography>
   <hstack>
-    <typography variant="large-header" [content]="time | date: 'HH:mm:ss'"></typography>
+    <typography variant="large-header" [content]="time | date: 'HH:mm:ss'" additionalStyles="fontSize:25px"></typography>
     <divider style="height: 40px"></divider>
-    <typography variant="large-header" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
+    <typography
+      variant="large-header"
+      content="{{ time | date: 'MM/dd/yyyy' }}"
+      additionalStyles="fontSize:25px"
+    ></typography>
   </hstack>
   <latency-display style="padding-bottom: 20px; margin-top: -10px" />
   <vstack style="width: 100%" spacing="15px">
@@ -11,15 +15,9 @@
     <state-of-charge-display style="width: 80%; height: 123px" />
     <current-display style="width: 80%; height: 122px" />
     <pack-temp style="width: 80%; height: 122px" />
-    <cell-temp-display style="width: 80%; height: 210px" />
-    <high-low-cell-display style="width: 80%; height: 200px" />
-    <info-background style="width: 80%">
-      <high-low-cell-graph></high-low-cell-graph>
-    </info-background>
-    <pack-voltage-display style="width: 80%; height: 120px" />
-    <info-background style="width: 80%">
-      <pack-voltage-graph></pack-voltage-graph>
-    </info-background>
+    <cell-temp-display style="width: 80%; height: 325px" />
+    <high-low-cell-display style="width: 80%; height: 325px" />
+    <pack-voltage-display style="width: 80%; height: 275px" />
     <fault-display style="width: 80%; height: 375px" />
   </vstack>
 </vstack>
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 @@
 
   <charging-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
   <ng-template #isDesktop>
-    <vstack style="width: 100%; min-width: 1290px" spacing="15px">
+    <vstack style="width: 100%" spacing="15px">
       <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
         <typography
           style="margin-bottom: -30px; margin-top: -10px"
@@ -17,19 +17,19 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-      <vstack style="width: 100%; min-width: 1290px">
+      <vstack style="width: 100%">
         <hstack spacing="10px" style="width: 100%; height: 50%">
-          <combined-status-display style="min-width: 620px; width: 45%; height: 380px" />
+          <combined-status-display style="min-width: 590px; width: 45%; height: 380px" />
           <vstack style="width: 15%">
-            <state-of-charge-display style="min-width: 200px; width: 100%; height: 123px" />
-            <current-display style="min-width: 200px; width: 100%; height: 122px" />
-            <pack-temp style="min-width: 200px; width: 100%; height: 122px" />
+            <state-of-charge-display style="min-width: 160px; width: 100%; height: 123px" />
+            <current-display style="min-width: 160px; width: 100%; height: 122px" />
+            <pack-temp style="min-width: 160px; width: 100%; height: 122px" />
           </vstack>
-          <fault-display style="height: 380px; min-width: 500px; width: 40%" />
+          <fault-display style="height: 380px; min-width: 300px; width: 40%" />
         </hstack>
-        <cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
-        <high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />
-        <pack-voltage-display style="min-width: 1300px; width: 100%; height: 175px" />
+        <cell-temp-display style="min-width: 1070px; width: 100%; height: 175px" />
+        <high-low-cell-display style="min-width: 1070px; width: 100%; height: 175px" />
+        <pack-voltage-display style="min-width: 1070px; width: 100%; height: 175px" />
       </vstack>
     </vstack>
   </ng-template>
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 @@
-<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
-  <div *ngIf="!isDesktop" style="padding-top: 20px"></div>
+<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton" *ngIf="isDesktop">
   <hstack>
     <vstack style="width: 10%; padding-bottom: 30px">
       <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
       <typography variant="info-subtitle" content="Avg. Temp" />
     </vstack>
 
-    <div *ngIf="!isDesktop" style="padding-left: 20px"></div>
     <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
     <divider style="height: 100px"></divider>
-    <div *ngIf="!isDesktop" style="padding-right: 20px"></div>
 
     <vstack style="width: 10%; padding-bottom: 30px">
       <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
@@ -18,10 +15,12 @@
     <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
     <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done... 
       or just don't enforce -->
-    <cell-temp-graph
-      style="width: 85%; padding-bottom: 30px"
-      [maxCellTempData]="cellTempData"
-      *ngIf="isDesktop"
-    ></cell-temp-graph>
+    <cell-temp-graph style="width: 85%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
   </hstack>
 </info-background>
+<cell-temp-mobile
+  *ngIf="!isDesktop"
+  [cellTempData]="cellTempData"
+  [avgTemp]="avgTemp"
+  [maxTemp]="maxTemp"
+></cell-temp-mobile>
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 @@
+<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
+  <div style="padding-top: 20px"></div>
+  <vstack>
+    <hstack>
+      <vstack style="width: 10%; padding-bottom: 10px">
+        <typography variant="info-value" [content]="avgTemp.toString() + '°'" additionalStyles="fontSize:30px" />
+        <typography variant="info-subtitle" content="Avg. Temp" additionalStyles="fontSize:15px" />
+      </vstack>
+
+      <div style="padding-left: 20px"></div>
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
+      <div style="padding-right: 20px"></div>
+
+      <vstack style="width: 10%; padding-bottom: 10px">
+        <typography variant="info-value" [content]="maxTemp.toString() + '°'" additionalStyles="fontSize:30px" />
+        <typography variant="info-subtitle" content="Max. Temp" additionalStyles="fontSize:15px" />
+      </vstack>
+    </hstack>
+    <cell-temp-graph style="width: 100%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
+  </vstack>
+</info-background>
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'
           "
         >
-          <hstack>
-            <typography
-              variant="info-subtitle"
-              [content]="fault.type"
-              style="width: 33%; height: 40px; padding-top: 10px"
-            ></typography>
+          <div style="display: flex; flex-direction: row; justify-content: space-between; height: 45px; padding: 3px">
+            <typography variant="info-subtitle" [content]="fault.type" style="align-self: center"></typography>
             <typography
               variant="info-subtitle"
               [content]="fault.name"
               additionalStyles="font-weight: bold;"
-              style="width: 33%; height: 40px; padding-top: 10px; width: 400px"
-            ></typography>
-            <typography
-              variant="info-subtitle"
-              [content]="fault.time"
-              style="width: 33%; height: 40px; padding-top: 10px"
+              style="align-self: center; padding-left: 5px"
             ></typography>
-          </hstack>
+            <typography variant="info-subtitle" [content]="fault.time" style="align-self: center"></typography>
+          </div>
         </div>
         <div style="height: 2px"></div>
       </ng-container>
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 @@
-<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
+<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton" *ngIf="isDesktop">
   <hstack spacing="30px">
     <vstack style="width: 10%">
       <hstack>
@@ -58,7 +58,20 @@
       <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
     </vstack>
 
-    <high-low-cell-graph style="width: 75%; padding-bottom: 35px" [resetGraph]="resetGraph" *ngIf="isDesktop">
+    <high-low-cell-graph
+      style="width: 75%; padding-bottom: 35px"
+      [highVoltsData]="highVoltsData"
+      [lowVoltsData]="lowVoltsData"
+    >
     </high-low-cell-graph>
   </hstack>
 </info-background>
+<high-low-cell-mobile
+  *ngIf="!isDesktop"
+  [delta]="delta"
+  [lowCellVoltage]="lowCellVoltage"
+  [highCellVoltage]="highCellVoltage"
+  [highVoltsData]="highVoltsData"
+  [lowVoltsData]="lowVoltsData"
+  [resetGraphButton]="resetGraphButton"
+></high-low-cell-mobile>
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 @@
+<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
+  <vstack>
+    <hstack style="width: 100%">
+      <vstack style="width: 10%">
+        <hstack>
+          <typography
+            variant="info-value"
+            [content]="delta.toFixed(3) + 'V'"
+            additionalStyles="fontSize:30px"
+            *ngIf="isDesktop"
+          />
+          <typography
+            variant="info-value"
+            [content]="delta.toFixed(3) + 'V'"
+            additionalStyles="fontSize:20px"
+            *ngIf="!isDesktop"
+          />
+        </hstack>
+        <typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
+      </vstack>
+
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
+
+      <vstack style="width: 10%">
+        <typography
+          variant="info-value"
+          [content]="lowCellVoltage.toFixed(3) + 'V'"
+          additionalStyles="fontSize:30px"
+          *ngIf="isDesktop"
+        />
+        <typography
+          variant="info-value"
+          [content]="lowCellVoltage.toFixed(3) + 'V'"
+          additionalStyles="fontSize:20px"
+          *ngIf="!isDesktop"
+        />
+        <typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
+      </vstack>
+
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
+
+      <vstack style="width: 10%">
+        <hstack>
+          <typography
+            variant="info-value"
+            [content]="highCellVoltage.toFixed(3) + 'V'"
+            additionalStyles="fontSize:30px"
+            *ngIf="isDesktop"
+          />
+          <typography
+            variant="info-value"
+            [content]="highCellVoltage.toFixed(3) + 'V'"
+            additionalStyles="fontSize:20px"
+            *ngIf="!isDesktop"
+          />
+        </hstack>
+        <typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
+      </vstack>
+    </hstack>
+    <high-low-cell-graph
+      style="width: 100%; padding-bottom: 35px"
+      [highVoltsData]="highVoltsData"
+      [lowVoltsData]="lowVoltsData"
+      *ngIf="!isDesktop"
+    >
+    </high-low-cell-graph>
+  </vstack>
+</info-background>
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 @@
-<info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
+<info-background svgIcon="electric_meter" *ngIf="isDesktop" title="Pack. Voltage" [button]="resetGraphButton">
   <hstack>
     <hstack style="width: 15%">
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
-    <pack-voltage-graph
-      style="width: 80%; padding-bottom: 30px"
-      [resetGraph]="resetGraph"
-      *ngIf="isDesktop"
-    ></pack-voltage-graph>
+    <pack-voltage-graph style="width: 80%; padding-bottom: 30px" [packVoltData]="packVoltData"></pack-voltage-graph>
   </hstack>
 </info-background>
+<pack-voltage-mobile *ngIf="!isDesktop" [packVoltData]="packVoltData" [voltage]="voltage"></pack-voltage-mobile>
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 @@
+<info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
+  <vstack>
+    <hstack style="width: 15%">
+      <typography variant="info-value" [content]="voltage.toString() + 'V'" />
+    </hstack>
+    <pack-voltage-graph style="width: 100%; padding-bottom: 30px" [packVoltData]="packVoltData"></pack-voltage-graph>
+  </vstack>
+</info-background>
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)
     );
   };
 

From 23033b7f3f2bd3ac829c46387eadc39022c04ccf Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 14:52:07 -0400
Subject: [PATCH 25/31] #172 - deleted ds store

---
 .DS_Store | Bin 10244 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 87ea4e46b4f5900ae077cffecf3f41773c4b7d36..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10244
zcmeHMPmB{~6o0dHY3l;%Za_?oIBH@{++E9xtm|G%=|)LVlP!URn9^>W-NJOfrhj%N
zn@uV=@BlaD;@JZPZ+bBy9!v}|@gN+z5Dz3I7&v(_`g`9@>6^AQlmlwa_a!rL=9~Av
z_ulXK=9_+BiO9;f%lnCJB1+(3nc9KVkjBsX7-(aD55^%2_T;SY&#$OjeL&N67z7Lg
z1_6VBLBJsJUqJxhY;K7OPnxqqz#w1{c#Htg4>k^#8DDlhsizK{^b!CvhHl+(o#G2f
z+m{(%c07qEXqIOR>6u#o62tP$(Qo^D8DDlh>6w$|FFq{av*oW)EbSfR+ghEhj3>?6
zAYc#}M1a@sF`A`Ss!~g?-(&YCFUn^%mCKbJRYG6l&#61}x0Zf96ntKed|qGc?G227
z2TP)O*DtM6n@Z9<(ZbF_4H?7Am7jl4?$t5$jZ;&-NW!&bJVd{A<5{OBt&pNJRf6%1
zeecI3G-N!de+a}A(CWn#t`&?&&tki%NG_OZlY^@U%^)%dJXO%!I^w7mpAS}ME@uDI
zjZ>jW+tNm}?%RG_syo$YE1kY=jctpKZ;!{5@rn4S`8BnXZxvhZX13V)gzt_i<&?VD
z#nSO=WuuVVeOS4zV%4oQv_Z98fy&7fRky4*va0Qto7y(-JxC@K$wF%H=H}eN`DuGT
zy)|ubF3hE;?E?#QTU*J*p4Z-5TrQk(YOXr3lOW5V?TL#)whOq4Oi_||V7ztrN&1q?
zSATn<a4xG$E7FH7v{7v&%|~yZ;+!IVtmhl9quf>KF%}6B-9Skwl<5)rnDTvPa2-0b
z3<mTiF7)En*N2TMvG}s{{_zjq)L0CRCG(HclR4AA8*oX_;{{VF=QAi~udo%>sIK#>
zpwRL9(K@Dwv*>k#Ia)8lUgkIzIo9wozUUhxPDg>~VOpY(C{Ig$9{=dm-hmfTPZ3l=
ze0;^PXoZ?VyD?@>MjC1-S&6^$_BGgr>PmJN3!gnY|FUK$LccftjG`~unz(WUq0l6l
zDQdQgs6FP#@!6ZD)2Kv6ZeQlNU=_?fI6{b>p2ofs(^!(0!O0=Y(T9+;K)W3DL|pOG
zVyB+K&muyeG-q(f6}Hajprx*(5iKP@srwH;htCK<lA*8nJbd)-JDQ<LiylX#SxA;9
zFMor8XevB&;Lt#gHiMt|pO#PF8`Vzc^x)v*`Eewla-MivTbbw0#Y>#$bI7BLeE2gs
zLnW{bj{CUf_giv1)JC$3B7ZMzY?=GD+rM^yb_^X;=K3UEnH!M}_of*H3<3rLgMdNc
z*(0#cb7AxT|5Et>|Ia=U<G~<c5ct;+uwuD<E(`bF-Io4Hc(2{YaS8`F*6Vmuo8Y9k
z<018SJZ^Y9{tX<gn`X%k*BM`SJc%B(fBeq?%dG!H_Y35z#H|0lodda2{GY7<{|1$x
B5{>`>


From 02e714163b291ad30af5a21bfff9540c8bcd5465 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 16:47:34 -0400
Subject: [PATCH 26/31] #172 - small clean up

---
 .../components/active-status/active-status.component.ts       | 2 +-
 .../components/balancing-status/balancing-status.component.ts | 2 +-
 .../cell-temp-display/cell-temp-display.component.ts          | 4 ++--
 .../components/charging-state/charging-status.component.ts    | 2 +-
 .../components/faulted-status/faulted-status.component.ts     | 2 +-
 .../high-low-cell-display/high-low-cell-display.component.ts  | 4 ++--
 .../pack-voltage-display/pack-voltage-display.component.ts    | 4 ++--
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index fc763b16..ecd6cd92 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ActiveStatus {
   isActive: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(sessionStorage.getItem('active total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('active-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index a15a4791..49484bbc 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class BalancingStatus {
   isBalancing: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(sessionStorage.getItem('balancing total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('balancing-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
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 a529a6c4..5cc41734 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
@@ -1,7 +1,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 { decimalPipe, floatPipe } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 @Component({
@@ -32,7 +32,7 @@ export default class CellTempDisplay {
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
       this.maxTemp = floatPipe(value.values[0]);
-      this.cellTempData.push({ x: new Date().getTime(), y: this.maxTemp });
+      this.cellTempData.push({ x: decimalPipe(value.time), y: this.maxTemp });
     });
     this.storage.get(IdentifierDataType.CELL_TEMP_AVG).subscribe((value) => {
       this.avgTemp = floatPipe(value.values[0]);
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 546af14a..84b41415 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class ChargingStatusComponent {
   isCharging: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(sessionStorage.getItem('charging total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('charging-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
 
   constructor(private storage: Storage) {}
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index 2a08e8c0..66db690e 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -12,7 +12,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 export default class FaultedStatus {
   isFaulted: boolean = false;
   currentSeconds: number = 0;
-  totalSeconds: number = Number(sessionStorage.getItem('faulted total seconds')) || 0;
+  totalSeconds: number = Number(sessionStorage.getItem('faulted-total-seconds')) || 0;
   intervalId!: NodeJS.Timeout;
   constructor(private storage: Storage) {}
 
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 a0ba3c5d..6bc3140c 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
@@ -36,12 +36,12 @@ export default class HighLowCellDisplay {
     this.storage.get(IdentifierDataType.VOLTS_LOW).subscribe((value) => {
       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.lowVoltsData.push({ x: decimalPipe(value.time), y: this.lowCellVoltage });
     });
     this.storage.get(IdentifierDataType.VOLTS_HIGH).subscribe((value) => {
       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 });
+      this.highVoltsData.push({ x: decimalPipe(value.time), y: this.highCellVoltage });
     });
   }
 }
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 bf66db7b..d3a36636 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
@@ -1,7 +1,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 { decimalPipe, floatPipe } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 @Component({
@@ -31,7 +31,7 @@ export default class PackVoltageDisplay {
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => {
       this.voltage = floatPipe(value.values[0]);
-      this.packVoltData.push({ x: new Date().getTime(), y: this.voltage });
+      this.packVoltData.push({ x: decimalPipe(value.time), y: this.voltage });
     });
   }
 }

From 8a809a7a63979f8fe4148ab2d1d9ebad70307d02 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 20:25:32 -0400
Subject: [PATCH 27/31] #172 - minor fault display change

---
 .../components/fault-display/fault-display.component.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3f51bd0e..4f984ebb 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,7 +10,7 @@
               : 'background-color: #4d453c; width: 100%; border-radius: 2px'
           "
         >
-          <div style="display: flex; flex-direction: row; justify-content: space-between; height: 45px; padding: 3px">
+          <div style="display: flex; flex-direction: row; justify-content: space-between; height: 45px; padding: 10px">
             <typography variant="info-subtitle" [content]="fault.type" style="align-self: center"></typography>
             <typography
               variant="info-subtitle"

From acc685ca7934fc39ca40551db47536af0da4e38f Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 23:23:56 -0400
Subject: [PATCH 28/31] #172 - chaging sessionStoreage name for total times

---
 .../components/active-status/active-status.component.ts         | 2 +-
 .../components/balancing-status/balancing-status.component.ts   | 2 +-
 .../components/charging-state/charging-status.component.ts      | 2 +-
 .../components/faulted-status/faulted-status.component.ts       | 2 +-
 scylla-server/src/odyssey-base                                  | 1 +
 5 files changed, 5 insertions(+), 4 deletions(-)
 create mode 160000 scylla-server/src/odyssey-base

diff --git a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
index ecd6cd92..2bbce720 100644
--- a/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/active-status/active-status.component.ts
@@ -36,7 +36,7 @@ export default class ActiveStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      sessionStorage.setItem('active total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('active-total-seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
index 49484bbc..ae0cc038 100644
--- a/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/balancing-status/balancing-status.component.ts
@@ -36,7 +36,7 @@ export default class BalancingStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      sessionStorage.setItem('balancing total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('balancing-total-seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
index 84b41415..84b4093c 100644
--- a/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/charging-state/charging-status.component.ts
@@ -37,7 +37,7 @@ export default class ChargingStatusComponent {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      sessionStorage.setItem('charging total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('charging-total-seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
index 66db690e..9c0820cd 100644
--- a/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
+++ b/angular-client/src/pages/charging-page/components/faulted-status/faulted-status.component.ts
@@ -36,7 +36,7 @@ export default class FaultedStatus {
     this.intervalId = setInterval(() => {
       this.currentSeconds++;
       this.totalSeconds++;
-      sessionStorage.setItem('faulted total seconds', this.totalSeconds.toString());
+      sessionStorage.setItem('faulted-total-seconds', this.totalSeconds.toString());
     }, 1000);
   }
 
diff --git a/scylla-server/src/odyssey-base b/scylla-server/src/odyssey-base
new file mode 160000
index 00000000..dd43023b
--- /dev/null
+++ b/scylla-server/src/odyssey-base
@@ -0,0 +1 @@
+Subproject commit dd43023b9246af522a45dd6b36257a14072aa642

From 36cef52c4fbb6073877102e7b130b91cf462aa9d Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Thu, 19 Sep 2024 23:32:38 -0400
Subject: [PATCH 29/31] #172 - fixed rust test fails

---
 scylla-server/src/odyssey-base | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 scylla-server/src/odyssey-base

diff --git a/scylla-server/src/odyssey-base b/scylla-server/src/odyssey-base
deleted file mode 160000
index dd43023b..00000000
--- a/scylla-server/src/odyssey-base
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit dd43023b9246af522a45dd6b36257a14072aa642

From 27d9cd1204221cfd90f196ea9fbdf597d2123f34 Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Fri, 20 Sep 2024 14:38:21 -0400
Subject: [PATCH 30/31] #172 - date convert to int change

---
 .../acceleration-graphs/acceleration-graphs.component.ts      | 2 +-
 .../cell-temp-display/cell-temp-display.component.ts          | 2 +-
 .../high-low-cell-display/high-low-cell-display.component.ts  | 4 ++--
 .../pack-voltage-display/pack-voltage-display.component.ts    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
index e5a1786a..718950d1 100644
--- a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
+++ b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
@@ -30,7 +30,7 @@ export class AccelerationGraphs implements OnInit {
     this.storage.get(IdentifierDataType.XYZAccel).subscribe((value) => {
       const x1 = decimalPipe(value.values[0]);
       const y1 = decimalPipe(value.values[1]);
-      const time = decimalPipe(value.time);
+      const time = +value.time;
       this.xData.push({
         x: time,
         y: x1
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 5cc41734..172e1ce1 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
@@ -32,7 +32,7 @@ export default class CellTempDisplay {
   ngOnInit() {
     this.storage.get(IdentifierDataType.CELL_TEMP_HIGH).subscribe((value) => {
       this.maxTemp = floatPipe(value.values[0]);
-      this.cellTempData.push({ x: decimalPipe(value.time), y: this.maxTemp });
+      this.cellTempData.push({ x: +value.time, y: this.maxTemp });
     });
     this.storage.get(IdentifierDataType.CELL_TEMP_AVG).subscribe((value) => {
       this.avgTemp = floatPipe(value.values[0]);
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 6bc3140c..d9ca65cc 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
@@ -36,12 +36,12 @@ export default class HighLowCellDisplay {
     this.storage.get(IdentifierDataType.VOLTS_LOW).subscribe((value) => {
       this.lowCellVoltage = decimalPipe(value.values[0], 3);
       this.delta = decimalPipe((this.highCellVoltage - this.lowCellVoltage).toFixed(3), 3);
-      this.lowVoltsData.push({ x: decimalPipe(value.time), y: this.lowCellVoltage });
+      this.lowVoltsData.push({ x: +value.time, y: this.lowCellVoltage });
     });
     this.storage.get(IdentifierDataType.VOLTS_HIGH).subscribe((value) => {
       this.highCellVoltage = decimalPipe(value.values[0], 3);
       this.delta = decimalPipe((this.highCellVoltage - this.lowCellVoltage).toFixed(3), 3);
-      this.highVoltsData.push({ x: decimalPipe(value.time), y: this.highCellVoltage });
+      this.highVoltsData.push({ x: +value.time, y: this.highCellVoltage });
     });
   }
 }
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 d3a36636..717a7aa2 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
@@ -31,7 +31,7 @@ export default class PackVoltageDisplay {
   ngOnInit() {
     this.storage.get(IdentifierDataType.PACK_VOLTAGE).subscribe((value) => {
       this.voltage = floatPipe(value.values[0]);
-      this.packVoltData.push({ x: decimalPipe(value.time), y: this.voltage });
+      this.packVoltData.push({ x: +value.time, y: this.voltage });
     });
   }
 }

From 3c25205559fb4ba6093a7e851e2491436e65202b Mon Sep 17 00:00:00 2001
From: wyattb <bracy.w@northeastern.edu>
Date: Fri, 20 Sep 2024 14:48:03 -0400
Subject: [PATCH 31/31] #172 - unused import fixed

---
 .../cell-temp/cell-temp-display/cell-temp-display.component.ts  | 2 +-
 .../pack-voltage-display/pack-voltage-display.component.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 172e1ce1..a694ff4a 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
@@ -1,7 +1,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, floatPipe } from 'src/utils/pipes.utils';
+import { floatPipe } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 @Component({
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 717a7aa2..7a859e0e 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
@@ -1,7 +1,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, floatPipe } from 'src/utils/pipes.utils';
+import { floatPipe } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 @Component({