#156 fault page

README.md

@@ -1,17 +1,13 @@
 # Argos
 
-### Initializing Submodule
-
-To initialize the odyssey submodule run `git submodule update --init`
-
 ## Local Development
 
 Setup angular-client and scylla-server:
 
 [Angular Client](./angular-client/README.md)\
 [Scylla Server](./scylla-server/README.md)
 
-Once you've sucessfully setup Scylla and the Client, you can either run them separately, or follow the docker commands below to run them together.
+Once you've sucessfully setup Scylla and the Client, you can either run them separately, use `npm run start` from the root directory to run them together, or follow the docker commands below to run them together.
 
 ## Production
 

angular-client/src/api/data.api.ts

@@ -3,3 +3,7 @@ import { urls } from './urls';
 export const getDataByDataTypeNameAndRunId = (dataTypeName: string, runId: number): Promise<Response> => {
   return fetch(urls.getDataByDataTypeNameAndRunId(dataTypeName, runId));
 };
+
+export const getDataByDatetime = (dateTime: string): Promise<Response> => {
+  return fetch(urls.getDataByDatetime(dateTime));
+};

angular-client/src/api/node.api.ts

@@ -7,3 +7,13 @@ import { urls } from './urls';
 export const getAllNodes = (): Promise<Response> => {
   return fetch(urls.getAllNodes());
 };
+
+/**
+ * Fetches all nodes with their associated data.
+ * @param toTime the most recent time you want data for all nodes (in milliseconds since midnight, January 1, 1970 UTC.)
+ * @param fromTime the time to begin querying from (in milliseconds since midnight, January 1, 1970 UTC.)
+ * @returns a list of full nodes with data from between from_time and to_time
+ */
+export const getSingleNodeWithData = (nodeName: string, timeToQueryFrom: number): Promise<Response> => {
+  return fetch(urls.getSingleNodeWithData(nodeName, timeToQueryFrom));
+};

angular-client/src/api/urls.ts

@@ -5,11 +5,16 @@ const baseURL = (environment as any).url || 'http://localhost:8000';
 /* Nodes */
 const getAllNodes = () => `${baseURL}/nodes`;
 
+/* Nodes with Data */
+const getSingleNodeWithData = (nodeName: string, timeToQueryFrom: number) =>
+  `${baseURL}/nodesWithData/singleNode/${nodeName}/${timeToQueryFrom}`;
+
 /* Systems */
 const getAllSystems = () => `${baseURL}/systems`;
 
 /* Data */
 const getDataByDataTypeNameAndRunId = (dataTypeName: string, runId: number) => `${baseURL}/data/${dataTypeName}/${runId}`;
+const getDataByDatetime = (dateTime: string) => `${baseURL}/dataByDatetime/${dateTime}`;
 
 /* Runs */
 const getRunById = (id: number) => `${baseURL}/runs/${id}`;
@@ -18,10 +23,12 @@ const startNewRun = () => `${baseURL}/runs/new`;
 
 export const urls = {
   getAllNodes,
+  getSingleNodeWithData,
 
   getAllSystems,
 
   getDataByDataTypeNameAndRunId,
+  getDataByDatetime,
 
   getAllRuns,
   getRunById,

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

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import ChargingPage from 'src/pages/charging-page/charging-page.component';
+import FaultPage from 'src/pages/fault-page/fault-page.component';
 import GraphPage from 'src/pages/graph-page/graph-page.component';
 import LandingPage from 'src/pages/landing-page/landing-page.component';
 import Map from 'src/pages/map/map.component';
@@ -10,7 +11,8 @@ const routes: Routes = [
   { path: 'graph', component: GraphPage },
   { path: '', redirectTo: '/landing', pathMatch: 'full' },
   { path: 'map', component: Map },
-  { path: 'charging', component: ChargingPage }
+  { path: 'charging', component: ChargingPage },
+  { path: 'fault', component: FaultPage }
 ];
 
 @NgModule({

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

@@ -7,5 +7,6 @@
     <sidebar-chip icon="ev_station" value="Charging" (click)="navigateTo('/charging')" />
     <sidebar-chip icon="bar_chart" value="Graph" (click)="navigateTo('/graph')" />
     <sidebar-chip icon="map" value="Map" (click)="navigateTo('/map')" />
+    <sidebar-chip icon="warning" value="Fault" (click)="navigateTo('/fault')" />
   </ng-template>
 </p-sidebar>

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

@@ -105,11 +105,15 @@ 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 FaultPage from 'src/pages/fault-page/fault-page.component';
+import FaultLog from 'src/pages/fault-page/components/fault-log/fault-log.component';
+import FaultBox from 'src/pages/fault-page/components/fault-display/fault-box.component';
 
 @NgModule({
   declarations: [
     AppContext,
     LandingPage,
+    FaultPage,
     ChargingPage,
     ChargingPageMobile,
     GraphPage,
@@ -176,6 +180,8 @@ import CellTempMobile from 'src/pages/charging-page/components/cell-temp/cell-te
     CellTempGraph,
     CurrentDisplay,
     FaultDisplay,
+    FaultLog,
+    FaultBox,
     SwitchComponent,
     BMSModeDisplay,
     DoubleLineGraphComponent,

angular-client/src/pages/fault-page/components/fault-display/fault-box.component.css

@@ -0,0 +1,7 @@
+.fault-box-body {
+  height: 95%;
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,9 @@
+<info-background title="Current Fault">
+  <div style="width: 100%; padding-right: 5px; padding-left: 0px" class="fault-text-body">
+    @for (node of nodes; track node.name) {
+      <li>{{ node.name }}</li>
+    } @empty {
+      <li>There are no items.</li>
+    }
+  </div>
+</info-background>

angular-client/src/pages/fault-page/components/fault-display/fault-box.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { NodeWithData } from 'src/utils/types.utils';
+
+@Component({
+  selector: 'fault-box',
+  templateUrl: './fault-box.component.html',
+  styleUrls: ['./fault-box.component.css']
+})
+export default class FaultBox {
+  @Input() nodes: NodeWithData[] = [];
+  constructor(private storage: Storage) {}
+
+  ngOnInit() {}
+}

angular-client/src/pages/fault-page/components/fault-log/fault-log.component.css

@@ -0,0 +1,7 @@
+.fault-text-body {
+  height: 95%;
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,34 @@
+<info-background title="Fault Log" svgIcon="warning" [button]="resetButton">
+  <div style="width: 100%; padding-right: 5px; padding-left: 0px" class="fault-text-body">
+    <vstack style="width: 100%">
+      <div style="height: 10px"></div>
+      @for (fault of faults; track fault; let i = $index) {
+        <div
+          [style]="
+            (i % 2 == 0) === faultsShifted
+              ? 'background-color: #d4760b	; width: 100%; border-radius: 2px'
+              : 'background-color: #4d453c; width: 100%; border-radius: 2px'
+          "
+          (click)="setSelectedFault(fault)"
+        >
+          <div style="display: flex; flex-direction: row; justify-content: space-between; height: 45px; padding: 10px">
+            <typography variant="info-subtitle" [content]="fault.format().type" style="align-self: center"></typography>
+            <typography
+              variant="info-subtitle"
+              [content]="fault.format().name"
+              additionalStyles="font-weight: bold;"
+              style="align-self: center; padding-left: 5px"
+            ></typography>
+            <typography variant="info-subtitle" [content]="fault.format().time" style="align-self: center"></typography>
+          </div>
+        </div>
+      } @empty {
+        <li>There are no items.</li>
+      }
+      <ng-container *ngFor="let fault of faults; index as i">
+        <div style="height: 2px"></div>
+      </ng-container>
+      <div style="height: 50px"></div>
+    </vstack>
+  </div>
+</info-background>

angular-client/src/pages/fault-page/components/fault-log/fault-log.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+import Storage from 'src/services/storage.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { Fault } from '../../shared/fault.model';
+import { CHARGER_FAULT_NAMES, ChargerFault } from '../../shared/indiv-fault/charger-fault.model';
+import APIService from 'src/services/api.service';
+import { BMSFault } from '../../shared/indiv-fault/bms-fault.model';
+
+@Component({
+  selector: 'fault-log',
+  templateUrl: './fault-log.component.html',
+  styleUrls: ['./fault-log.component.css']
+})
+export default class FaultLog {
+  @Input() setSelectedFault!: (fault: Fault) => void;
+  faults: Fault[] = [];
+  faultsShifted: boolean = false;
+  resetButton = {
+    onClick: () => {
+      this.faults = [];
+    },
+    icon: 'restart_alt'
+  };
+  constructor(
+    private serverService: APIService,
+    private storage: Storage
+  ) {}
+
+  ngOnInit() {
+    this.storage.get(IdentifierDataType.COMM_TIMEOUT_FAULT).subscribe((value) => {
+      this.faults.unshift(new ChargerFault(this.serverService, CHARGER_FAULT_NAMES.COMM_TIMEOUT_FAULT, value.time));
+    });
+
+    this.storage.get(IdentifierDataType.HARDWARE_FAILURE_FAULT).subscribe((value) => {
+      this.faults.unshift(new ChargerFault(this.serverService, CHARGER_FAULT_NAMES.HARDWARE_FAILURE_FAULT, value.time));
+    });
+
+    this.storage.get(IdentifierDataType.OVER_TEMP_FAULT).subscribe((value) => {
+      this.faults.unshift(new ChargerFault(this.serverService, CHARGER_FAULT_NAMES.OVER_TEMP_FAULT, value.time));
+    });
+
+    this.storage.get(IdentifierDataType.VOLTAGE_WRONG_FAULT).subscribe((value) => {
+      this.faults.unshift(new ChargerFault(this.serverService, CHARGER_FAULT_NAMES.VOLTAGE_WRONG_FAULT, value.time));
+    });
+
+    this.storage.get(IdentifierDataType.WRONG_BAT_CONNECT_FAULT).subscribe((value) => {
+      this.faults.unshift(new ChargerFault(this.serverService, CHARGER_FAULT_NAMES.WRONG_BAT_CONNECT_FAULT, value.time));
+    });
+
+    this.storage.get(IdentifierDataType.BMS_FAULTS).subscribe((value) => {
+      const bmsFaultID = parseInt(value.values[0]);
+      try {
+        this.faults.unshift(new BMSFault(this.serverService, bmsFaultID, value.time));
+      } catch (error) {
+        // do nothing (the value input was not a valid BMS fault, most likely 0)
+      }
+    });
+  }
+}

angular-client/src/pages/fault-page/fault-page.component.css

@@ -0,0 +1,6 @@
+.image-container {
+  /* background-image: url(../../assets/images/NERO.jpeg); */
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+}

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

@@ -0,0 +1,29 @@
+<div class="image-container" style="margin-right: 16px; margin-left: 16px">
+  <sidebar-toggle style="position: absolute; margin-top: 16px; margin-left: 16px" />
+
+  <div *ngIf="isMobile; else isDesktop">
+    <typography style="margin-bottom: -30px; margin-top: -10px" variant="large-header" content="Fault Page Mobile View" />
+  </div>
+  <ng-template #isDesktop>
+    <vstack style="width: 100%" spacing="15px">
+      <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
+        <typography
+          style="margin-bottom: -30px; margin-top: -10px"
+          variant="large-header"
+          [content]="time | date: 'HH:mm:ss'"
+        />
+        <typography
+          style="margin-bottom: -30px; margin-top: -10px"
+          variant="large-header"
+          content="{{ time | date: 'MM/dd/yyyy' }} | {{ location }} "
+        />
+        <latency-display style="margin-bottom: -30px; margin-top: -10px" />
+      </div>
+      <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
+        <fault-log style="width: 30%" [setSelectedFault]="setSelectedFault" />
+        <fault-box style="width: 35%" />
+        <graph-sidebar-desktop style="width: 30%" [nodes]="[]" [selectDataType]="onSelectDataType" />
+      </div>
+    </vstack>
+  </ng-template>
+</div>

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

@@ -0,0 +1,58 @@
+import { Component, HostListener, OnInit } from '@angular/core';
+import { getDataByDatetime } from 'src/api/data.api';
+import APIService from 'src/services/api.service';
+import Storage from 'src/services/storage.service';
+import { IdentifierDataType } from 'src/utils/enumerations/identifier-data-type';
+import { DataValue } from 'src/utils/socket.utils';
+import { BMSFault } from './shared/indiv-fault/bms-fault.model';
+import { Fault } from './shared/fault.model';
+
+/**
+ * Container for the Fault page, obtains data from the storage service.
+ */
+@Component({
+  selector: 'fault-page',
+  styleUrls: ['./fault-page.component.css'],
+  templateUrl: './fault-page.component.html'
+})
+export default class FaultPage implements OnInit {
+  time = new Date();
+  location: string = 'No Location Set';
+  constructor(
+    private storage: Storage,
+    private serverService: APIService
+  ) {}
+  mobileThreshold = 1070;
+  isMobile = window.innerWidth < this.mobileThreshold;
+  selectedFaultDataValuesIsLoading = false;
+  selectedFaultDataValuesIsError = false;
+  selectedFaultDataValuesError?: Error;
+  currentData!: DataValue[];
+
+  ngOnInit() {
+    this.currentData = [];
+
+    setInterval(() => {
+      this.time = new Date();
+    }, 1000);
+
+    this.setSelectedFault = (fault: Fault) => {};
+
+    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;
+  }
+
+  onSelectDataType() {}
+
+  /**
+   * Sets the selected data type.
+   * @param dataType The data type to set.
+   */
+  setSelectedFault!: (fault: Fault) => void;
+}

angular-client/src/pages/fault-page/shared/fault.model.ts

@@ -0,0 +1,15 @@
+import { NodeWithData } from 'src/utils/types.utils';
+import { BMS_FAULT_NAMES } from './indiv-fault/bms-fault.model';
+import { DTI_FAULTS_NAMES } from './indiv-fault/dti-fault.model';
+import { MPU_FAULT_NAMES } from './indiv-fault/mpu-fault.model';
+import { CHARGER_FAULT_NAMES } from './indiv-fault/charger-fault.model';
+
+export interface Fault {
+  name: AllFaultNames;
+  timeTriggered: number; // number in Unix, epoch time in ms since 1970
+  relvantNodesWithData: NodeWithData[]; // should be made on construction
+  format(): { type: string; name: string; time: string };
+  updateRelvantNodes(timeTriggered: number): NodeWithData[];
+}
+
+export type AllFaultNames = BMS_FAULT_NAMES | CHARGER_FAULT_NAMES | DTI_FAULTS_NAMES | MPU_FAULT_NAMES;