#212 header redesign

angular-client/src/app/app.module.ts

@@ -32,7 +32,6 @@ import Thermometer from 'src/components/thermometer/thermometer.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import HStack from 'src/components/hstack/hstack.component';
 import VStack from 'src/components/vstack/vstack.component';
-import LatencyDisplay from 'src/components/latency-display/latency-display';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { MatIconModule } from '@angular/material/icon';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -53,8 +52,6 @@ import { DriverComponent } from 'src/components/driver-component/driver-componen
 import PieChart from 'src/components/pie-chart/pie-chart.component';
 import RasberryPi from 'src/components/raspberry-pi/raspberry-pi.component';
 import { AccelerationGraphs } from 'src/components/acceleration-graphs/acceleration-graphs.component';
-import ViewerDisplay from 'src/components/viewer-display/viewer-display.component';
-import ConnectionDisplay from 'src/components/connection-display/connection-display.component';
 import SpeedDisplay from 'src/components/speed-display/speed-display.component';
 import SpeedOverTimeDisplay from 'src/components/speed-over-time-display/speed-over-time-display.component';
 import TorqueDisplay from 'src/components/torque-display/torque-display.component';
@@ -104,6 +101,11 @@ import CombinedStatusMobile from 'src/pages/charging-page/components/combined-st
 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';
+import ConnectionDisplay from 'src/pages/landing-page/components/connection-display/connection-display.component';
+import { CurrentRunDisplay } from 'src/pages/landing-page/components/current-run-display/current-run-display.component';
+import LatencyDisplay from 'src/components/latency-display/latency-display';
+import { DateLocation } from 'src/pages/landing-page/components/date-location-display/date-location.component';
+import { ViewerDisplay } from 'src/pages/landing-page/components/viewer-display/viewer-display.component';
 
 @NgModule({
   declarations: [
@@ -134,7 +136,6 @@ import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-te
     Thermometer,
     VStack,
     HStack,
-    LatencyDisplay,
     BatteryInfoDisplay,
     GraphComponent,
     InfoGraph,
@@ -147,7 +148,6 @@ import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-te
     PieChart,
     AccelerationGraphs,
     ViewerDisplay,
-    ConnectionDisplay,
     SpeedDisplay,
     SpeedOverTimeDisplay,
     TorqueDisplay,
@@ -191,7 +191,12 @@ import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-te
     CombinedStatusMobile,
     PackVoltageMobileDisplay,
     HighLowCellMobile,
-    CellTempMobile
+    CellTempMobile,
+    ConnectionDisplay,
+    LatencyDisplay,
+    DateLocation,
+    CurrentRunDisplay,
+    ViewerDisplay
   ],
   bootstrap: [AppContext],
   imports: [

angular-client/src/pages/landing-page/components/connection-display/connection-display.component.css

@@ -0,0 +1,21 @@
+.connection-display {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.connection-display-data {
+  display: flex;
+  justify-content: center;
+}
+
+.connection-dot {
+  display: flex;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-right: 5px;
+}

angular-client/src/pages/landing-page/components/connection-display/connection-display.component.html

@@ -0,0 +1,16 @@
+<info-background>
+  <div class="connection-display">
+    <div class="connection-display-title">
+      <typography variant="header" content="Connection" additionalStyles="margin: 0px;"></typography>
+    </div>
+
+    <div class="connection-display-data">
+      <div
+        class="connection-dot"
+        [style.background-color]="getConnectedColor(connected)"
+        additionalStyles="height: 15px;"
+      ></div>
+      <typography variant="info-subtitle" [content]="getConnectedStatus(connected)" />
+    </div>
+  </div>
+</info-background>

angular-client/src/components/connection-display/connection-display.component.ts → angular-client/src/pages/landing-page/components/connection-display/connection-display.component.ts

@@ -4,7 +4,7 @@ import Storage from 'src/services/storage.service';
 @Component({
   selector: 'connection-display',
   templateUrl: './connection-display.component.html',
-  styleUrls: ['./connection-display.component.css']
+  styleUrl: './connection-display.component.css'
 })
 export default class ConnectionDisplay {
   connected: boolean = false;

angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.css

@@ -0,0 +1,7 @@
+.current-run-display {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.html

@@ -0,0 +1,6 @@
+<info-background>
+  <div class="current-run-display">
+    <typography variant="header" content="Current Run" additionalStyles="margin: 0px" />
+    <typography variant="info-subtitle" content="#{{ currentRun }}" additionalStyles="margin: 0px" />
+  </div>
+</info-background>

angular-client/src/pages/landing-page/components/current-run-display/current-run-display.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import Storage from 'src/services/storage.service';
+
+@Component({
+  selector: 'current-run-display',
+  templateUrl: './current-run-display.component.html',
+  styleUrl: './current-run-display.component.css'
+})
+export class CurrentRunDisplay {
+  currentRun: number = 0;
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    this.storage.getCurrentRunId().subscribe((runId) => {
+      if (runId) {
+        this.currentRun = runId;
+      }
+    });
+  }
+}

angular-client/src/pages/landing-page/components/date-location-display/date-location.component.css

@@ -0,0 +1,7 @@
+.date-location-display {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

angular-client/src/pages/landing-page/components/date-location-display/date-location.component.html

@@ -0,0 +1,6 @@
+<info-background>
+  <div class="date-location-display">
+    <typography variant="header" content="{{ time | date: 'MM/dd/yyyy' }}" additionalStyles="margin: 0px" />
+    <typography variant="info-subtitle" content="{{ location }}" />
+  </div>
+</info-background>

angular-client/src/pages/landing-page/components/date-location-display/date-location.component.ts

@@ -0,0 +1,35 @@
+import { Component, HostListener } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { startNewRun } from 'src/api/run.api';
+import APIService from 'src/services/api.service';
+import Storage from 'src/services/storage.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+
+@Component({
+  selector: 'date-location',
+  templateUrl: './date-location.component.html',
+  styleUrl: './date-location.component.css'
+})
+export class DateLocation {
+  time = new Date();
+  location: string = 'Boston, MA';
+  mobileThreshold = 1070;
+  isMobile = window.innerWidth < this.mobileThreshold;
+
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {
+    setInterval(() => {
+      this.time = new Date();
+    }, 1000);
+
+    this.storage.get(IdentifierDataType.LOCATION).subscribe((value) => {
+      [this.location] = value.values || ['No Location Set'];
+    });
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile = window.innerWidth <= this.mobileThreshold;
+  }
+}

angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.css

@@ -0,0 +1,7 @@
+.viewer-display {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.html

@@ -0,0 +1,6 @@
+<info-background>
+  <div class="viewer-display">
+    <typography variant="header" content="Viewers" additionalStyles="margin: 0px" />
+    <typography variant="info-subtitle" [content]="numViewers.toString()" />
+  </div>
+</info-background>

angular-client/src/components/viewer-display/viewer-display.component.ts → angular-client/src/pages/landing-page/components/viewer-display/viewer-display.component.ts

@@ -5,9 +5,9 @@ import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type'
 @Component({
   selector: 'viewer-display',
   templateUrl: './viewer-display.component.html',
-  styleUrls: ['./viewer-display.component.css']
+  styleUrl: './viewer-display.component.css'
 })
-export default class ViewerDisplay implements OnInit {
+export class ViewerDisplay implements OnInit {
   numViewers: number = 0;
   constructor(private storage: Storage) {}
 

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

@@ -4,42 +4,73 @@
   @if (isMobile) {
     <landing-page-mobile style="width: 100%" [time]="time" />
   } @else {
-    <vstack style="width: 100%" spacing="40px">
-      <hstack style="width: 100%">
-        <vstack style="width: 50%">
-          <typography style="width: 100%; text-align: center" variant="xx-large-title" [content]="time | date: 'HH:mm:ss'" />
-          <driver-component style="width: 100%" />
-        </vstack>
-        <vstack style="width: 50%">
-          <hstack style="width: 100%"
-            ><typography variant="header" content="{{ time | date: 'MM/dd/yyyy' }} | {{ location }} " />
-            <latency-display style="width: 40%" />
-            <toast-button [onClick]="this.onStartNewRun" label="Start New Run"></toast-button>
-          </hstack>
-          <hstack style="width: 100%">
-            <viewer-display style="height: 200px; width: 33%" />
-            <torque-display style="height: 200px; width: 33%" />
-            <connection-display style="height: 200px; width: 33%" />
-          </hstack>
-        </vstack>
-      </hstack>
-      <hstack style="width: 100%">
-        <vstack style="width: 50%" spacing="20px">
+    <div style="display: flex; flex-direction: column">
+      <div style="width: 100%; padding-bottom: 0px; padding-top: 10px; display: flex; justify-content: flex-end">
+        <toast-button [onClick]="this.onStartNewRun" label="Start New Run"></toast-button>
+      </div>
+
+      <div style="width: 100%; display: grid; column-gap: 10px; row-gap: 10px">
+        <div style="display: flex; justify-content: center; grid-column-start: 1; grid-column-end: 3; height: 100%">
+          <typography
+            variant="xx-large-title"
+            [content]="time | date: 'HH:mm:ss'"
+            additionalStyles="font-size: 7rem; text-align: center-bottom"
+          />
+        </div>
+        <div style="display: flex; grid-column-start: 3; grid-column-end: 4">
+          <date-location style="height: 100%; width: 100%" />
+        </div>
+        <div style="display: flex; grid-column-start: 4; grid-column-end: 5">
+          <connection-display style="height: 100%; width: 100%" />
+        </div>
+
+        <div style="display: flex; grid-column-start: 5; grid-column-end: 6">
+          <current-run-display style="height: 100%; width: 100%" />
+        </div>
+
+        <div style="display: flex; grid-column-start: 6; grid-column-end: 7">
+          <viewer-display style="width: 100%; height: 100%" />
+        </div>
+
+        <div style="display: flex; grid-column-start: 1; grid-column-end: 3">
+          <driver-component style="width: 100%; height: 250px" />
+        </div>
+        <div style="display: flex; grid-column-start: 3; grid-column-end: 4">
+          <torque-display style="width: 100%; height: 250px" />
+        </div>
+        <div style="display: flex; grid-column-start: 4; grid-column-end: 7">
+          <motor-info style="width: 100%; height: 100%" />
+        </div>
+
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            height: 550px;
+            justify-content: space-between;
+            grid-column-start: 1;
+            grid-column-end: 4;
+          "
+        >
           <speed-over-time-display style="width: 100%" />
           <acceleration-over-time-display style="width: 100%" />
-        </vstack>
-        <acceleration-graphs style="width: 60%; height: 550px" />
-      </hstack>
-      <hstack style="width: 100%">
-        <map-info-display style="width: 50%" />
-        <vstack style="width: 50%">
-          <motor-info style="width: 100%; height: 250px"> </motor-info>
-        </vstack>
-      </hstack>
-      <hstack style="width: 100%">
-        <raspberry-pi style="width: 80%" />
-        <brake-pressure-display style="height: 180px; width: 20%" />
-      </hstack>
-    </vstack>
+        </div>
+
+        <div style="display: flex; grid-column-start: 4; grid-column-end: 7">
+          <acceleration-graphs style="width: 100%; height: 550px" />
+        </div>
+
+        <div style="display: flex; grid-column-start: 1; grid-column-end: 6">
+          <raspberry-pi style="width: 100%" />
+        </div>
+        <div style="display: flex; grid-column-start: 6; grid-column-end: 7">
+          <brake-pressure-display style="width: 100%" />
+        </div>
+
+        <div style="display: flex; grid-column-start: 1; grid-column-end: 7">
+          <map-info-display style="width: 100%" />
+        </div>
+      </div>
+    </div>
   }
 </div>

angular-client/src/pages/landing-page/landing-page.component.ts

@@ -3,7 +3,7 @@
 import { startNewRun } from 'src/api/run.api';
 import APIService from 'src/services/api.service';
 import Storage from 'src/services/storage.service';
 import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
 
 /**
  * Container for the landing page, obtains data from the storage service.
@@ -15,7 +15,6 @@
 })
 export default class LandingPage implements OnInit {
   time = new Date();
-  location: string = 'No Location Set';
   newRunIsLoading = false;
   mobileThreshold = 1070;
   isMobile = window.innerWidth < this.mobileThreshold;
@@ -40,10 +39,6 @@
     setInterval(() => {
       this.time = new Date();
     }, 1000);
-
-    this.storage.get(IdentifierDataType.LOCATION).subscribe((value) => {
-      [this.location] = value.values || ['No Location Set'];
-    });
   }
 
   onStartNewRun!: () => void;