#191 self closing tags

angular-client/src/app/context/app-context.component.html

@@ -1,3 +1,3 @@
-<p-toast></p-toast>
-<app-sidebar></app-sidebar>
-<router-outlet></router-outlet>
+<p-toast />
+<app-sidebar />
+<router-outlet />

angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.html

@@ -4,5 +4,4 @@
   icon="speed"
   title="Acceleration Over Time"
   color="purple"
->
-</info-graph>
+/>

angular-client/src/components/graph-dialog/graph-dialog.component.html

@@ -5,5 +5,5 @@
     [data]="data"
     [title]="title"
     [color]="color"
-  ></graph-component>
+  />
 </div>

angular-client/src/components/half-gauge/half-gauge.component.html

@@ -7,5 +7,5 @@
     [plotOptions]="chartOptions.plotOptions"
     [labels]="chartOptions.labels"
     [fill]="chartOptions.fill"
-  ></apx-chart>
+  />
 </div>

angular-client/src/components/hstack/hstack.component.html

@@ -1,3 +1,3 @@
 <div fxLayout="row" [fxLayoutAlign]="alignment" [fxLayoutGap]="spacing" style="height: 100%">
-  <ng-content></ng-content>
+  <ng-content />
 </div>

angular-client/src/components/info-background/info-background.component.html

@@ -3,10 +3,10 @@
     <div class="title-container">
       <div class="title">
         @if (icon) {
-          <mat-icon aria-hidden="false" [fontIcon]="icon"></mat-icon>
+          <mat-icon aria-hidden="false" [fontIcon]="icon" />
         }
         @if (svgIcon) {
-          <mat-icon aria-hidden="false" [svgIcon]="svgIcon"></mat-icon>
+          <mat-icon aria-hidden="false" [svgIcon]="svgIcon" />
         }
         <typography variant="info-title" content="{{ title }}" />
       </div>
@@ -18,7 +18,7 @@
               (click)="button.onClick()"
               [fontIcon]="button.icon"
               style="position: relative; z-index: 10"
-            ></mat-icon>
+            />
           }
         </div>
       }
@@ -27,5 +27,5 @@
   @if (onClick) {
     <typography additionalStyles="text-align: left;" variant="info-subtitle" content="Click for more details" />
   }
-  <ng-content></ng-content>
+  <ng-content />
 </div>

angular-client/src/components/info-graph/info-graph.component.html

@@ -5,5 +5,5 @@
     [data]="data"
     [title]="subTitle"
     [color]="color"
-  ></graph-component>
+  />
 </info-background>

angular-client/src/components/loading-page/loading-page.component.html

@@ -1,3 +1,3 @@
 <div class="spinner-container">
-  <p-progressSpinner></p-progressSpinner>
+  <p-progressSpinner />
 </div>

angular-client/src/components/pie-chart/pie-chart.component.html

@@ -8,4 +8,4 @@
   [legend]="chartOptions.legend"
   [dataLabels]="chartOptions.dataLabels"
   [fill]="chartOptions.fill"
-></apx-chart>
+/>

angular-client/src/components/raspberry-pi/raspberry-pi-desktop-content/raspberry-pi-desktop.component.html

@@ -1,6 +1,6 @@
 <hstack style="width: 100%; height: 100%">
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed"></circular-percentage>
+    <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
 
     <typography variant="info-subtitle" content="CPU Usage" />
   </vstack>
@@ -19,7 +19,7 @@
   <divider style="height: 100px"></divider>
 
   <vstack style="width: 20%">
-    <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple"></circular-percentage>
+    <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>
@@ -31,7 +31,7 @@
     <hstack style="height: 110px">
       <typography variant="info-value" [content]="wifiRSSI.toString()" />
       <div>
-        <mat-icon svgIcon="wifi"></mat-icon>
+        <mat-icon svgIcon="wifi" />
         <span class="wifi-dbm-unit">dBM</span>
       </div>
     </hstack>

angular-client/src/components/raspberry-pi/raspberry-pi-mobile-content/raspberry-pi-mobile.component.html

@@ -1,7 +1,7 @@
 <vstack style="width: 100%">
   <hstack style="width: 100%; height: 100%">
     <vstack style="width: 33%">
-      <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed"></circular-percentage>
+      <circular-percentage [percentage]="cpuUsage" [dimension]="85" [ringColor]="colorRed" />
 
       <typography variant="info-subtitle" content="CPU Usage" />
     </vstack>
@@ -29,7 +29,7 @@
 
   <hstack style="width: 50%">
     <vstack style="width: 50%">
-      <circular-percentage [percentage]="ramUsage" [dimension]="85" [ringColor]="colorPurple"></circular-percentage>
+      <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>
@@ -41,7 +41,7 @@
       <hstack style="height: 110px">
         <typography variant="info-value" [content]="wifiRSSI.toString()" />
         <div>
-          <mat-icon svgIcon="wifi"></mat-icon>
+          <mat-icon svgIcon="wifi" />
           <span class="wifi-dbm-unit">dBM</span>
         </div>
       </hstack>

angular-client/src/components/raspberry-pi/raspberry-pi.component.html

@@ -7,14 +7,14 @@
       [ramUsage]="ramUsage"
       [wifiRSSI]="wifiRSSI"
       [mcs]="mcs"
-    ></raspberry-pi-mobile>
+    />
   } @else {
     <raspberry-pi-desktop
       style="width: 100%"
       [cpuUsage]="cpuUsage"
       [ramUsage]="ramUsage"
       [wifiRSSI]="wifiRSSI"
       [mcs]="mcs"
-    ></raspberry-pi-desktop>
+    />
   }
 </info-background>

angular-client/src/components/sidebar-chip/sidebar-chip.component.html

@@ -1,4 +1,4 @@
 <div class="chip">
-  <mat-icon style="margin-right: 10px" [svgIcon]="icon"></mat-icon>
+  <mat-icon style="margin-right: 10px" [svgIcon]="icon" />
   <typography variant="sidebar-label" [content]="value" />
 </div>

angular-client/src/components/sidebar-toggle/sidebar-toggle.component.html

@@ -1 +1 @@
-<mat-icon style="color: white" aria-hidden="false" svgIcon="menu" (click)="toggleSidebar()"></mat-icon>
+<mat-icon style="color: white" aria-hidden="false" svgIcon="menu" (click)="toggleSidebar()" />

angular-client/src/components/speed-display/speed-display.component.html

@@ -1,3 +1,3 @@
 <info-background svgIcon="speed" title="Speed">
-  <half-gauge [current]="34" [max]="100" [min]="0" unit="m/s" color="#ff0000" [size]="400"></half-gauge>
+  <half-gauge [current]="34" [max]="100" [min]="0" unit="m/s" color="#ff0000" [size]="400" />
 </info-background>

angular-client/src/components/speed-over-time-display/speed-over-time-display.component.html

@@ -1,2 +1 @@
-<info-graph [data]="data" graphContainerId="speedOverTimeGraph" icon="speed" title="Speed Over Time" color="primary">
-</info-graph>
+<info-graph [data]="data" graphContainerId="speedOverTimeGraph" icon="speed" title="Speed Over Time" color="primary" />

angular-client/src/components/vstack/vstack.component.html

@@ -1,3 +1,3 @@
 <div fxLayout="column" fxLayoutAlign="center {{ align }}" [fxLayoutGap]="spacing">
-  <ng-content></ng-content>
+  <ng-content />
 </div>

angular-client/src/pages/charging-page/components/battery-info-display/battery-info-display.html

@@ -7,7 +7,7 @@
     [dischargeCurrentLimit]="dischargeCurrentLimit"
     [packTemp]="packTemp"
     [stateOfCharge]="stateOfCharge"
-  ></battery-info-mobile>
+  />
   } @else {
   <battery-info-desktop
     style="width: 100%"
@@ -16,6 +16,6 @@
     [dischargeCurrentLimit]="dischargeCurrentLimit"
     [packTemp]="packTemp"
     [stateOfCharge]="stateOfCharge"
-  ></battery-info-desktop>
+  />
   }
 </info-background>

angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html

@@ -14,10 +14,10 @@
       <!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
       <!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done...
       or just don't enforce -->
-      <cell-temp-graph style="width: 85%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
+      <cell-temp-graph style="width: 85%; padding-bottom: 30px" [maxCellTempData]="cellTempData" />
     </hstack>
   </info-background>
 }
 @if (!isDesktop) {
-  <cell-temp-mobile [cellTempData]="cellTempData" [avgTemp]="avgTemp" [maxTemp]="maxTemp"></cell-temp-mobile>
+  <cell-temp-mobile [cellTempData]="cellTempData" [avgTemp]="avgTemp" [maxTemp]="maxTemp" />
 }

angular-client/src/pages/charging-page/components/cell-temp/cell-temp-display/cell-temp-mobile/cell-temp-mobile.component.html

@@ -17,6 +17,6 @@
         <typography variant="info-subtitle" content="Max. Temp" additionalStyles="fontSize:15px" />
       </vstack>
     </hstack>
-    <cell-temp-graph style="width: 100%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
+    <cell-temp-graph style="width: 100%; padding-bottom: 30px" [maxCellTempData]="cellTempData" />
   </vstack>
 </info-background>

angular-client/src/pages/charging-page/components/cell-temp/cell-temp-graph/cell-temp-graph.component.html

@@ -4,4 +4,4 @@
   icon="speed"
   title="Max Cell Temp"
   color="#ffffff"
-></graph-component>
+/>

angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html

@@ -37,8 +37,7 @@
         style="width: 75%; padding-bottom: 35px"
         [highVoltsData]="highVoltsData"
         [lowVoltsData]="lowVoltsData"
-      >
-      </high-low-cell-graph>
+      />
     </hstack>
   </info-background>
 } @else {
@@ -49,5 +48,5 @@
     [highVoltsData]="highVoltsData"
     [lowVoltsData]="lowVoltsData"
     [resetGraphButton]="resetGraphButton"
-  ></high-low-cell-mobile>
+  />
 }

angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-mobile/high-low-cell-mobile.component.html

@@ -43,8 +43,7 @@
         style="width: 100%; padding-bottom: 35px"
         [highVoltsData]="highVoltsData"
         [lowVoltsData]="lowVoltsData"
-      >
-      </high-low-cell-graph>
+      />
     }
   </vstack>
 </info-background>

angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-graph/high-low-cell-graph.component.html

@@ -7,5 +7,4 @@
   [data2]="lowVoltsData"
   graphContainerId="highLowCellGraph"
   icon="speed"
->
-</double-line-graph>
+/>

angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html

@@ -4,9 +4,9 @@
       <hstack style="width: 15%">
         <typography variant="info-value" [content]="voltage.toString() + 'V'" />
       </hstack>
-      <pack-voltage-graph style="width: 80%; padding-bottom: 30px" [packVoltData]="packVoltData"></pack-voltage-graph>
+      <pack-voltage-graph style="width: 80%; padding-bottom: 30px" [packVoltData]="packVoltData" />
     </hstack>
   </info-background>
 } @else {
-  <pack-voltage-mobile [packVoltData]="packVoltData" [voltage]="voltage"></pack-voltage-mobile>
+  <pack-voltage-mobile [packVoltData]="packVoltData" [voltage]="voltage" />
 }

angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-mobile/pack-voltage-mobile.component.html

@@ -3,6 +3,6 @@
     <hstack style="width: 15%">
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
-    <pack-voltage-graph style="width: 100%; padding-bottom: 30px" [packVoltData]="packVoltData"></pack-voltage-graph>
+    <pack-voltage-graph style="width: 100%; padding-bottom: 30px" [packVoltData]="packVoltData" />
   </vstack>
 </info-background>

angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-graph/pack-voltage-graph.component.html

@@ -1,2 +1 @@
-<graph-component title="Pack Volts" color="#ffff00" [data]="packVoltData" graphContainerId="packVoltsGraph" icon="speed">
-</graph-component>
+<graph-component title="Pack Volts" color="#ffff00" [data]="packVoltData" graphContainerId="packVoltsGraph" icon="speed" />

angular-client/src/pages/graph-page/graph-caption/graph-caption.component.html

@@ -32,14 +32,14 @@
       [onClick]="onClearDataType"
       label="Clear Data Type"
       additionalStyles="background-color: #323232; border: 1.4px solid #027bd7"
-    ></argos-button>
+    />
     @if (run) {
       <div>
         <argos-button
           [onClick]="onSetRealtime"
           label="Realtime"
           additionalStyles="background-color: #323232; border: 1.4px solid #027bd7"
-        ></argos-button>
+        />
       </div>
     } @else {
       <div style="width: 140px; height: 45px"></div>

angular-client/src/pages/graph-page/graph-caption/run-selector/run-selector.component.html

@@ -1 +1 @@
-<argos-button [onClick]="openDialog" [label]="label" additionalStyles="background-color: #027bd7"></argos-button>
+<argos-button [onClick]="openDialog" [label]="label" additionalStyles="background-color: #027bd7" />

angular-client/src/pages/graph-page/graph-sidebar/graph-sidebar-desktop/graph-sidebar-desktop.component.html

@@ -3,7 +3,7 @@
     <mat-toolbar class="search-block mat-elevation-z4">
       <mat-toolbar-row style="padding: 0px">
         <button mat-icon-button style="padding: 6px; width: 36px; height: 36px" disabled>
-          <mat-icon style="padding: 0px; color: #808080" svgIcon="search"></mat-icon>
+          <mat-icon style="padding: 0px; color: #808080" svgIcon="search" />
         </button>
         <form [formGroup]="filterForm">
           <input matInput class="search-control" type="text" placeholder="Search Topic" formControlName="searchFilter" />

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

@@ -1,7 +1,4 @@
 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';
 

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

@@ -3,16 +3,16 @@
   <typography variant="x-large-title" [content]="time | date: 'HH:mm:ss'"></typography>
   <typography variant="x-large-title" content="{{ time | date: 'MM/dd/yyyy' }}"></typography>
 
-  <driver-component style="width: 100%"></driver-component>
+  <driver-component style="width: 100%" />
 
-  <speed-over-time-display style="width: 100%"></speed-over-time-display>
-  <acceleration-over-time-display style="width: 100%"></acceleration-over-time-display>
+  <speed-over-time-display style="width: 100%" />
+  <acceleration-over-time-display style="width: 100%" />
 
-  <acceleration-graphs style="width: 100%"></acceleration-graphs>
+  <acceleration-graphs style="width: 100%" />
 
-  <map-info-display style="width: 100%"></map-info-display>
+  <map-info-display style="width: 100%" />
 
-  <motor-info style="width: 100%; height: 250px"></motor-info>
-  <battery-info-display style="width: 100%; height: 250px"></battery-info-display>
-  <raspberry-pi style="width: 100%"></raspberry-pi>
+  <motor-info style="width: 100%; height: 250px" />
+  <battery-info-display style="width: 100%; height: 250px" />
+  <raspberry-pi style="width: 100%" />
 </vstack>

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

@@ -6,7 +6,7 @@
   } @else {
     <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>
+        <toast-button [onClick]="this.onStartNewRun" label="Start New Run" />
       </div>
 
       <div style="width: 100%; display: grid; column-gap: 10px; row-gap: 10px">

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

@@ -3,7 +3,6 @@ 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';
 
 /**
  * Container for the landing page, obtains data from the storage service.

angular-client/src/pages/map/map.component.html

@@ -1,15 +1,15 @@
 @if (isError) {
   <div>
-    <error-page [errorMessage]="error!.message"></error-page>
+    <error-page [errorMessage]="error!.message" />
   </div>
 } @else {
   @if (isLoading) {
     <div>
-      <loading-page></loading-page>
+      <loading-page />
     </div>
   } @else {
     <div id="map" class="map-container">
-      <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px"></sidebar-toggle>
+      <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px" />
       <run-selector
         style="position: absolute; margin-bottom: 16px; margin-right: 16px; bottom: 0; right: 0"
         [selectRun]="onRunSelected"