#172 added fault fix, battery page graphs now show all data, added re…

…set button for graphs, cell voltage comp has decimal padding for whole numbers
Northeastern-Electric-Racing · Aug 2, 2024 · 594eb2e · 594eb2e
1 parent e32a39e
commit 594eb2e
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 51 deletions.
diff --git a/...ges/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html b/...ges/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/...pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.ts b/...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/...src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.ts b/...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
@@ -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
@@ -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
@@ -11,41 +11,41 @@ export default class FaultDisplay {
   faults: { faultName: string; time: string }[] = [];
   resetButton = {
     onClick: () => {
-      this.faults = [];
+      this.faults.shift();
     },
     icon: 'restart_alt'
   };
   constructor(private storage: Storage) {}
 
   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/...-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html b/...-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/...ng-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.ts b/...ng-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/...arging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.ts b/...arging-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/...ing-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html b/...ing-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/...rging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.ts b/...rging-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/.../charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.ts b/.../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]) });
     });
   }
 }