#172 Charging Screen Improvements

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';
@@ -92,9 +91,19 @@ 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';
+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';
+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: [
@@ -159,7 +168,7 @@ import { BatteryInfoDisplay } from 'src/pages/charging-page/components/battery-i
     BatteryInfoMobile,
     NodeFilterPipe,
     DataTypeFilterPipe,
-    BatteryStatusDisplay,
+    CombinedStatusDisplay,
     StateOfChargeDisplay,
     PackTemp,
     CellTempDisplay,
@@ -173,7 +182,16 @@ import { BatteryInfoDisplay } from 'src/pages/charging-page/components/battery-i
     HighLowCellGraph,
     PackVoltageGraph,
     PackVoltageDisplay,
-    ChargingStateComponent
+    ChargingStatusComponent,
+    StartingSocTimer,
+    CurrentTotalTimer,
+    BalancingStatus,
+    FaultedStatus,
+    ActiveStatus,
+    CombinedStatusMobile,
+    PackVoltageMobileDisplay,
+    HighLowCellMobile,
+    CellTempMobile
   ],
   bootstrap: [AppContext],
   imports: [
@@ -244,6 +262,11 @@ 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'))
+      .addSvgIcon(
+        'arrow_drop_down_circle',
+        this.domSanitizer.bypassSecurityTrustResourceUrl('../assests/icons/arrow_drop_down_circle.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="10px" style="padding-left: 20px">
+      <hstack>
+        <typography variant="info-subtitle" content="CURRENT:" additionalStyles="fontSize:15px" />
+        <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:" additionalStyles="fontSize:15px" />
+        <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/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,

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

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

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 {

angular-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html

@@ -1,22 +1,23 @@
 <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>
-  <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%" />
+  <typography variant="x-large-title" content="Argos" additionalStyles="fontSize:40px"></typography>
+  <hstack>
+    <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' }}"
+      additionalStyles="fontSize:25px"
+    ></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: 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>

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 = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
   ngOnInit() {

angular-client/src/pages/charging-page/charging-page.component.html

@@ -17,29 +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%" />
-            <battery-status-display 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>
+      <vstack style="width: 100%">
+        <hstack spacing="10px" style="width: 100%; height: 50%">
+          <combined-status-display style="min-width: 590px; width: 45%; height: 380px" />
+          <vstack style="width: 15%">
+            <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: 300px; width: 40%" />
+        </hstack>
+        <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>
 </div>

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 = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
 
   ngOnInit() {

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,16 @@
+<info-background title="ACTIVE">
+  <hstack>
+    <current-total-timer
+      style="padding-left: 20px; min-height: 100px"
+      [currentTime]="currentSeconds"
+      [totalTime]="totalSeconds"
+    />
+    <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>