#172 - battery status comp clean up + mobile view status comp

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,

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>

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" />

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

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

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>

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