#221 rename pipe functions

angular-client/README.md

@@ -7,6 +7,7 @@ The Angular Frontend for Argos.
 Make sure you're in the `angular-client` directory.
 
 Set environment/environment.ts to the following for local development:
+
 ```
 export const environment = {
   production: false,
@@ -27,13 +28,10 @@ To run the client in development mode run:
 
 Navigate to `http://localhost:4200/` to ensure the website is running, and you're done! The application will automatically reload if you change any of the source files.
 
-
 ## Code scaffolding
 
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
 Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-

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 ResolutionSelector from 'src/components/resolution-selector/resolution-selector.component';
 import LatencyDisplay from 'src/components/latency-display/latency-display';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { MatIconModule } from '@angular/material/icon';
@@ -74,8 +73,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { ReactiveFormsModule } from '@angular/forms';
-import { NodeFilterPipe } from 'src/utils/pipes/node-filter-pipe';
-import { DataTypeFilterPipe } from 'src/utils/pipes/data-type-filter-pipe';
+import { NodeFilterPipe } from 'src/utils/pipes/node-filter.pipe';
+import { DataTypeFilterPipe } from 'src/utils/pipes/data-type-filter.pipe';
 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';
@@ -135,7 +134,6 @@ import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-te
     Thermometer,
     VStack,
     HStack,
-    ResolutionSelector,
     LatencyDisplay,
     BatteryInfoDisplay,
     GraphComponent,

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

@@ -1,25 +1,31 @@
-<div class="container" (click)="onClick()" [style]="{ 'background-color': backgroundColor }">
-  <div *ngIf="title" class="title-container">
-    <div class="title">
-      <mat-icon *ngIf="icon" aria-hidden="false" [fontIcon]="icon"></mat-icon>
-      <mat-icon *ngIf="svgIcon" aria-hidden="false" [svgIcon]="svgIcon"></mat-icon>
-      <typography variant="info-title" content="{{ title }}" />
+<div class="container" (click)="onClick ? onClick() : undefined" [style]="{ 'background-color': backgroundColor }">
+  @if (title) {
+    <div class="title-container">
+      <div class="title">
+        @if (icon) {
+          <mat-icon aria-hidden="false" [fontIcon]="icon"></mat-icon>
+        }
+        @if (svgIcon) {
+          <mat-icon aria-hidden="false" [svgIcon]="svgIcon"></mat-icon>
+        }
+        <typography variant="info-title" content="{{ title }}" />
+      </div>
+      @if (button) {
+        <div>
+          @if (button) {
+            <mat-icon
+              aria-hidden="false"
+              (click)="button.onClick()"
+              [fontIcon]="button.icon"
+              style="position: relative; z-index: 10"
+            ></mat-icon>
+          }
+        </div>
+      }
     </div>
-    <div *ngIf="button">
-      <mat-icon
-        *ngIf="button"
-        aria-hidden="false"
-        (click)="button.onClick()"
-        [fontIcon]="button.icon"
-        style="position: relative; z-index: 10"
-      ></mat-icon>
-    </div>
-  </div>
-  <typography
-    *ngIf="onClick"
-    additionalStyles="text-align: left;"
-    variant="info-subtitle"
-    content="Click for more details"
-  />
+  }
+  @if (onClick) {
+    <typography additionalStyles="text-align: left;" variant="info-subtitle" content="Click for more details" />
+  }
   <ng-content></ng-content>
 </div>

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

@@ -21,6 +21,6 @@ export class InfoBackgroundComponent {
   @Input() svgIcon?: string;
   @Input() backgroundColor?: string = Theme.infoBackground;
   @Input() title!: string;
-  @Input() onClick!: () => void;
+  @Input() onClick!: (() => void) | undefined;
   @Input() button?: ButtonInputs;
 }

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

@@ -1,20 +1,20 @@
 <info-background svgIcon="memory" title="Rasberry Pi">
-  <raspberry-pi-mobile
-    *ngIf="isMobile; else isDesktop"
-    style="width: 100%"
-    [cpuTemp]="cpuTemp"
-    [cpuUsage]="cpuUsage"
-    [ramUsage]="ramUsage"
-    [wifiRSSI]="wifiRSSI"
-    [mcs]="mcs"
-  ></raspberry-pi-mobile>
-  <ng-template #isDesktop>
+  @if (isMobile) {
+    <raspberry-pi-mobile
+      style="width: 100%"
+      [cpuTemp]="cpuTemp"
+      [cpuUsage]="cpuUsage"
+      [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>
-  </ng-template>
+  }
 </info-background>

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

@@ -1,8 +1,9 @@
 <div class="image-container" style="margin-right: 16px; margin-left: 16px">
   <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px" />
 
-  <charging-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
-  <ng-template #isDesktop>
+  @if (isMobile) {
+    <charging-page-mobile style="width: 100%" [time]="time" />
+  } @else {
     <vstack style="width: 100%" spacing="15px">
       <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
         <typography
@@ -32,5 +33,5 @@
         <pack-voltage-display style="min-width: 1070px; width: 100%; height: 175px" />
       </vstack>
     </vstack>
-  </ng-template>
+  }
 </div>

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

@@ -1,21 +1,21 @@
 <info-background title="Battery" svgIcon="battery_charging_full">
+  @if (isMobile) {
   <battery-info-mobile
-    *ngIf="isMobile; else isDesktop"
     style="width: 100%"
     [voltage]="voltage"
     [chargeCurrentLimit]="chargeCurrentLimit"
     [dischargeCurrentLimit]="dischargeCurrentLimit"
     [packTemp]="packTemp"
     [stateOfCharge]="stateOfCharge"
   ></battery-info-mobile>
-  <ng-template #isDesktop>
-    <battery-info-desktop
-      style="width: 100%"
-      [voltage]="voltage"
-      [chargeCurrentLimit]="chargeCurrentLimit"
-      [dischargeCurrentLimit]="dischargeCurrentLimit"
-      [packTemp]="packTemp"
-      [stateOfCharge]="stateOfCharge"
-    ></battery-info-desktop>
-  </ng-template>
+  } @else {
+  <battery-info-desktop
+    style="width: 100%"
+    [voltage]="voltage"
+    [chargeCurrentLimit]="chargeCurrentLimit"
+    [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

@@ -1,26 +1,23 @@
-<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton" *ngIf="isDesktop">
-  <hstack>
-    <vstack style="width: 10%; padding-bottom: 30px">
-      <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
-      <typography variant="info-subtitle" content="Avg. Temp" />
-    </vstack>
-
-    <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
-    <divider style="height: 100px"></divider>
-
-    <vstack style="width: 10%; padding-bottom: 30px">
-      <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
-      <typography variant="info-subtitle" content="Max. Temp" />
-    </vstack>
-    <!--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... 
+@if (isDesktop) {
+  <info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
+    <hstack>
+      <vstack style="width: 10%; padding-bottom: 30px">
+        <typography variant="info-value" [content]="avgTemp.toString() + '°'" />
+        <typography variant="info-subtitle" content="Avg. Temp" />
+      </vstack>
+      <!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
+      <divider style="height: 100px"></divider>
+      <vstack style="width: 10%; padding-bottom: 30px">
+        <typography variant="info-value" [content]="maxTemp.toString() + '°'" />
+        <typography variant="info-subtitle" content="Max. Temp" />
+      </vstack>
+      <!--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>
-  </hstack>
-</info-background>
-<cell-temp-mobile
-  *ngIf="!isDesktop"
-  [cellTempData]="cellTempData"
-  [avgTemp]="avgTemp"
-  [maxTemp]="maxTemp"
-></cell-temp-mobile>
+      <cell-temp-graph style="width: 85%; padding-bottom: 30px" [maxCellTempData]="cellTempData"></cell-temp-graph>
+    </hstack>
+  </info-background>
+}
+@if (!isDesktop) {
+  <cell-temp-mobile [cellTempData]="cellTempData" [avgTemp]="avgTemp" [maxTemp]="maxTemp"></cell-temp-mobile>
+}

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

@@ -2,7 +2,7 @@
   <div style="width: 100%; padding-right: 5px; padding-left: 0px" class="fault-text-body">
     <vstack style="width: 100%">
       <div style="height: 10px"></div>
-      <ng-container *ngFor="let fault of faults; index as i">
+      @for (fault of faults; track fault; let i = $index) {
         <div
           [style]="
             (i % 2 == 0) === faultsShifted
@@ -22,7 +22,7 @@
           </div>
         </div>
         <div style="height: 2px"></div>
-      </ng-container>
+      }
       <div style="height: 50px"></div>
     </vstack>
   </div>