#172 - added new multi status comp

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'));
   }
 }

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>

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')}`;
+  }
+}

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>

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%;
+}

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>

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;
+  }
+}

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%;
+}

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>

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;
+  }
+}

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;
 }

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>

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;
   }
 }

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 {

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>

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;
   }
 }

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%;
+}

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>

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;
+  }
+}

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>