#186 - clean up code/ landing page

Northeastern-Electric-Racing · Nov 11, 2024 · 03d65f0 · 03d65f0
1 parent a45c19a
commit 03d65f0
Show file tree

Hide file tree

Showing 20 changed files with 407 additions and 181 deletions.
diff --git a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.html b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.html
@@ -2,8 +2,17 @@
   <vstack>
     <hstack style="width: 100%">
       <div class="graph-container">
-        <graph-component [data]="xData" color="#4d9ac9" title="Longitudinal Acceleration" graphContainerId="xGraph" />
-        <typography variant="info-subtitle" content="Longitudinal Acceleration" additionalStyles="margin-top: 10px" />
+        <graph-component
+          [data]="xData"
+          color="#4d9ac9"
+          title="Longitudinal Acceleration"
+          graphContainerId="xGraph"
+        />
+        <typography
+          variant="info-subtitle"
+          content="Longitudinal Acceleration"
+          additionalStyles="margin-top: 10px"
+        />
       </div>
       <div class="right-panel">
         <div class="vBar"></div>
@@ -20,15 +29,28 @@
               additionalStyles="fontSize: 20px; margin-bottom: 10px; color: #797a7a"
             />
           </div>
-          <typography variant="info-subtitle" content="Peak Long. Accel." additionalStyles="" />
+          <typography
+            variant="info-subtitle"
+            content="Peak Long. Accel."
+            additionalStyles=""
+          />
         </div>
       </div>
     </hstack>
     <div class="hBar"></div>
     <hstack style="width: 100%">
       <div class="graph-container">
-        <graph-component [data]="yData" color="#17ff00" title="Lateral Acceleration" graphContainerId="yGraph" />
-        <typography variant="info-subtitle" content="Lateral Acceleration" additionalStyles="margin-top: 10px" />
+        <graph-component
+          [data]="yData"
+          color="#17ff00"
+          title="Lateral Acceleration"
+          graphContainerId="yGraph"
+        />
+        <typography
+          variant="info-subtitle"
+          content="Lateral Acceleration"
+          additionalStyles="margin-top: 10px"
+        />
       </div>
       <div class="right-panel">
         <div class="vBar"></div>
@@ -45,7 +67,11 @@
               additionalStyles="fontSize: 20px; margin-bottom: 10px; color: #797a7a"
             />
           </div>
-          <typography variant="info-subtitle" content="Peak Lat. Accel." additionalStyles="" />
+          <typography
+            variant="info-subtitle"
+            content="Peak Lat. Accel."
+            additionalStyles=""
+          />
         </div>
       </div>
     </hstack>

diff --git a/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.html b/angular-client/src/components/brake-pressure-display/brake-pressure-display.component.html
@@ -1,6 +1,13 @@
 <info-background svgIcon="back_hand" title="Brake Pressure">
-  <div style="height: 80%; display: flex; justify-content: center; align-items: center">
-    <typography variant="info-value" [content]="brakePressure.toString()"></typography>
+  <div
+    style="
+      height: 80%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    "
+  >
+    <typography variant="info-value" [content]="brakePressure.toString()" />
     <typography variant="info-unit" content="psi" />
   </div>
 </info-background>
diff --git a/angular-client/src/components/motor-info/motor-info.component.css b/angular-client/src/components/motor-info/motor-info.component.css
@@ -14,7 +14,7 @@
 }
 
 .subsubtitle {
-  font-family: 'Roboto';
+  font-family: "Roboto";
   font-size: 12px;
   color: #cacaca;
   -webkit-touch-callout: none;

diff --git a/angular-client/src/components/motor-info/motor-info.component.html b/angular-client/src/components/motor-info/motor-info.component.html
@@ -1,31 +1,36 @@
 <info-background svgIcon="electric_car" title="Motor">
-  <hstack style="width: 100%; height: 100%">
-    <vstack style="padding-left: 20px">
-      <hstack spacing="5px">
-        <typography variant="info-value" [content]="motorTemp.toString() + '°'" />
-        <div class="thermometer-container">
-          <thermometer [temperature]="motorTemp" [min]="-15" [max]="30" />
-        </div>
-      </hstack>
-      <typography variant="info-subtitle" content="Motor Temp" />
-    </vstack>
+  <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+    <hstack>
+      <vstack style="padding-left: 20px">
+        <hstack spacing="5px">
+          <typography
+            variant="info-value"
+            [content]="motorTemp.toString() + '°'"
+          />
+          <div class="thermometer-container">
+            <thermometer [temperature]="motorTemp" [min]="-15" [max]="30" />
+          </div>
+        </hstack>
+        <typography variant="info-subtitle" content="Motor Temp" />
+      </vstack>
 
-    <divider></divider>
+      <divider style="height: 78px" />
 
-    <vstack>
-      <hstack spacing="0px">
-        <vstack spacing="0px">
-          <div class="usage-container">
-            <typography variant="info-value" [content]="getTotalUsage([motorUsage, coolUsage]).toString()" />
-            <typography variant="info-unit" [content]="'kWh'" />
-          </div>
-          <span class="subsubtitle">Total Consumption</span>
-        </vstack>
-        <pie-chart style="width: 100%" [data]="piechartData" />
-      </hstack>
-      <div style="display: flex; justify-content: center; align-items: center">
-        <typography variant="info-subtitle" content="Motor Power Consumption" />
-      </div>
-    </vstack>
-  </hstack>
+      <vstack>
+        <hstack spacing="0px">
+          <vstack spacing="0px">
+            <div class="usage-container">
+              <typography
+                variant="info-value"
+                [content]="getTotalUsage([motorUsage, coolUsage]).toString()"
+              />
+              <typography variant="info-unit" [content]="'kWh'" />
+            </div>
+            <span class="subsubtitle">Total Consumption</span>
+          </vstack>
+        </hstack>
+      </vstack>
+    </hstack>
+    <pie-chart style="margin-top: -15px" [data]="piechartData" />
+  </div>
 </info-background>
diff --git a/angular-client/src/components/motor-info/motor-info.component.ts b/angular-client/src/components/motor-info/motor-info.component.ts
@@ -8,7 +8,7 @@ import { floatPipe } from 'src/utils/pipes.utils';
 @Component({
   selector: 'motor-info',
   templateUrl: './motor-info.component.html',
-  styleUrls: ['./motor-info.component.css']
+  styleUrls: ['./motor-info.component.css'],
 })
 export default class MotorInfo {
   motorUsage: number = 100;
@@ -30,7 +30,7 @@ export default class MotorInfo {
     });
     this.piechartData = [
       { value: this.motorUsage, name: 'Motor' },
-      { value: this.coolUsage, name: 'Cooling' }
+      { value: this.coolUsage, name: 'Cooling' },
     ];
   }
 

diff --git a/angular-client/src/components/pie-chart/pie-chart.component.ts b/angular-client/src/components/pie-chart/pie-chart.component.ts
@@ -1,6 +1,11 @@
 import { Component, ElementRef, Input, Renderer2 } from '@angular/core';
 
-import { ApexNonAxisChartSeries, ApexPlotOptions, ApexChart, ApexFill } from 'ng-apexcharts';
+import {
+  ApexNonAxisChartSeries,
+  ApexPlotOptions,
+  ApexChart,
+  ApexFill,
+} from 'ng-apexcharts';
 import Theme from 'src/services/theme.service';
 
 export type ChartOptions = {
@@ -14,7 +19,7 @@ export type ChartOptions = {
 @Component({
   selector: 'pie-chart',
   templateUrl: 'pie-chart.component.html',
-  styleUrls: ['pie-chart.component.css']
+  styleUrls: ['pie-chart.component.css'],
 })
 export default class PieChart {
   public chartOptions!: Partial<ChartOptions> | any;
@@ -24,7 +29,7 @@ export default class PieChart {
 
   constructor(
     private renderer: Renderer2,
-    private el: ElementRef
+    private el: ElementRef,
   ) {}
 
   ngOnInit() {
@@ -47,32 +52,36 @@ export default class PieChart {
       plotOptions: {
         pie: {
           dataLabels: {
-            offset: -10
-          }
-        }
+            offset: -10,
+          },
+        },
       },
       colors: ['#ce2727', '#2799ce', '#3cba40', '#ba3cb4', '#efce29'],
       chart: {
         width: '100%',
         type: 'pie',
         background: this.backgroundColor,
         redrawOnParentResize: true,
-        foreColor: '#ffffff'
+        foreColor: '#ffffff',
       },
       dataLabels: {
         style: {
-          offset: -10
-        }
+          offset: -10,
+        },
       },
       labels,
       legend: {
-        offsetX: 10
-      }
+        offsetX: 10,
+      },
     };
   }
 
   private setChartWidth() {
     const containerWidth = this.el.nativeElement.offsetWidth;
-    this.renderer.setStyle(this.el.nativeElement.querySelector('apx-chart'), 'width', containerWidth + 'px');
+    this.renderer.setStyle(
+      this.el.nativeElement.querySelector('apx-chart'),
+      'width',
+      containerWidth + 'px',
+    );
   }
 }
diff --git a/.../components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html b/.../components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html
@@ -1,10 +1,14 @@
 <hstack style="width: 100%; height: 100%">
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
+    <circular-percentage
+      [percentage]="cpuUsage"
+      [dimension]="85"
+      [ringColor]="colorRed"
+    />
 
     <typography variant="info-subtitle" content="CPU Usage" />
   </vstack>
-  <divider style="height: 100px"></divider>
+  <divider style="height: 100px" />
 
   <vstack style="width: 20%">
     <hstack>
@@ -16,16 +20,20 @@
     <typography variant="info-subtitle" content="CPU Temp" />
   </vstack>
 
-  <divider style="height: 100px"></divider>
+  <divider style="height: 100px" />
 
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple" />
+    <circular-percentage
+      [percentage]="ramUsage"
+      [dimension]="85"
+      [ringColor]="colorPurple"
+    />
     <div style="display: flex; justify-content: center; align-items: center">
       <typography variant="info-subtitle" content="RAM Usage" />
     </div>
   </vstack>
 
-  <divider style="height: 100px"></divider>
+  <divider style="height: 100px" />
 
   <vstack style="width: 20%">
     <hstack style="height: 110px">
@@ -37,7 +45,7 @@
     </hstack>
     <typography variant="info-subtitle" content="Wi-Fi RSSI" />
   </vstack>
-  <divider style="height: 100px"></divider>
+  <divider style="height: 100px" />
 
   <vstack style="width: 20%">
     <hstack style="height: 110px">

diff --git a/...rc/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html b/...rc/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html
@@ -1,11 +1,15 @@
 <vstack style="width: 100%">
   <hstack style="width: 100%; height: 100%">
     <vstack style="width: 33%">
-      <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
+      <circular-percentage
+        [percentage]="cpuUsage"
+        [dimension]="85"
+        [ringColor]="colorRed"
+      />
 
       <typography variant="info-subtitle" content="CPU Usage" />
     </vstack>
-    <divider style="height: 100px"></divider>
+    <divider style="height: 100px" />
 
     <vstack style="width: 33%">
       <hstack>
@@ -17,7 +21,7 @@
       <typography variant="info-subtitle" content="CPU Temp" />
     </vstack>
 
-    <divider style="height: 100px"></divider>
+    <divider style="height: 100px" />
 
     <vstack style="width: 33%">
       <hstack style="height: 110px">
@@ -29,13 +33,17 @@
 
   <hstack style="width: 50%">
     <vstack style="width: 50%">
-      <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple" />
+      <circular-percentage
+        [percentage]="ramUsage"
+        [dimension]="85"
+        [ringColor]="colorPurple"
+      />
       <div style="display: flex; justify-content: center; align-items: center">
         <typography variant="info-subtitle" content="RAM Usage" />
       </div>
     </vstack>
 
-    <divider style="height: 100px"></divider>
+    <divider style="height: 100px" />
 
     <vstack style="width: 50%">
       <hstack style="height: 110px">

diff --git a/...r-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html b/...r-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html
@@ -1,13 +1,21 @@
 <vstack style="width: 100%" spacing="20px">
-  <typography variant="x-large-title" content="Argos" additionalStyles="fontSize:40px"></typography>
+  <typography
+    variant="x-large-title"
+    content="Argos"
+    additionalStyles="fontSize:40px"
+  />
   <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: 'HH:mm:ss'"
+      additionalStyles="fontSize:25px"
+    />
+    <divider style="height: 40px" />
     <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">