#272 - clean up and MVP

Author: bracyw

angular-client/src/app/app-nav-bar/app-nav-bar.component.css

@@ -53,3 +53,8 @@
   font-size: 20px;
   margin-right: 0.5rem;
 }
+
+:host {
+  --p-dialog-background: #2c2c2c;
+  --p-dialog-border-color: #2c2c2c;
+}

angular-client/src/app/app-nav-bar/app-nav-bar.component.html

@@ -30,15 +30,19 @@
     </div>
 
     <div style="display: flex; align-items: center">
-      <toast-button
-        [onClick]="this.onStartNewRun"
-        buttonLabel="Start New Run"
-        popUpSeverity="success"
-        popUpTitle="New Run Started"
-        popUpDetails="Your new run has started successfully."
-        additionalStyles="height: 35px"
-      />
-      <toast-button [onClick]="this.openRunForm" buttonLabel="Edit Currrent Run" />
+      <hstack>
+        <toast-button
+          [onClick]="this.onStartNewRun"
+          buttonLabel="Start New Run"
+          popUpSeverity="success"
+          popUpTitle="New Run Started"
+          popUpDetails="Your new run has started successfully."
+          additionalStyles="height: 35px"
+        />
+        <toast-button [onClick]="this.openRunForm" buttonLabel="Edit Currrent Run" additionalStyles="height: 35px" />
+        <current-run-display [navBarStyle]="true"></current-run-display>
+      </hstack>
+
       <typography variant="large-header" content="{{ time$ | async | date: 'HH:mm:ss' }}" style="margin-left: 20px" />
     </div>
   </nav>

angular-client/src/components/driver-component/driver-component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, inject } from '@angular/core';
+import { getLatestRun } from 'src/api/run.api';
+import APIService from 'src/services/api.service';
 import Storage from 'src/services/storage.service';
-import { DataTypeEnum } from 'src/data-type.enum';
+import { Run } from 'src/utils/types.utils';
 
 @Component({
   selector: 'driver-component',
@@ -10,11 +12,29 @@ import { DataTypeEnum } from 'src/data-type.enum';
 export class DriverComponent implements OnInit {
   private storage = inject(Storage);
   driver: string = 'No Driver';
+  apiService = inject(APIService);
 
   ngOnInit() {
-    this.storage.get(DataTypeEnum.DRIVER).subscribe((value) => {
-      [this.driver] = value.values || ['No Driver'];
-    });
+    setTimeout(() => {
+      const latestRunQuery = this.apiService.query<Run>(() => getLatestRun());
+      latestRunQuery.isLoading.subscribe((loading: boolean) => {
+        if (loading) {
+          // TODO
+        }
+      });
+      latestRunQuery.error.subscribe((error) => {
+        if (error) {
+          // TODO
+        }
+      });
+      latestRunQuery.data.subscribe((data) => {
+        const latestRun = data;
+        if (latestRun) {
+          this.driver =
+            latestRun.driverName !== undefined || latestRun.driverName === '' ? latestRun.driverName : 'No Driver';
+        }
+      });
+    }, 10000);
     console.log(this.driver);
   }
 }

angular-client/src/components/form-template/form-template.component.css

@@ -1,6 +1,5 @@
-
 .required:after {
-  content: "*";
+  content: '*';
   color: red;
   margin-left: 6px;
 }
@@ -11,4 +10,3 @@
   font-size: 12px;
   font-weight: 500;
 }
-

angular-client/src/components/form-template/form-template.component.html

@@ -1,26 +1,22 @@
 <!-- dynamic-form.component.html -->
-<form class="flex flex-column gap-4 dynamic-form" [formGroup]="form">
+<form class="form" [formGroup]="form">
   @for (field of fields(); track field) {
     <div class="flex flex-column gap-1">
       @if (field.label) {
         <label class="text-sm font-semibold mb-1 required">{{ field.label }}</label>
       }
-
-      <!-- Text Input -->
-      @if (true) {
-        <input
-          [attr.placeholder]="field.placeholder"
-          [formControlName]="field.name"
-          [type]="field.type"
-          [value]="'boston'"
-          pInputText
-          class="form-control w-full"
-          [ngClass]="{
-            'ng-invalid ng-dirty':
-              form.get(field.name)?.invalid && (form.get(field.name)?.dirty || form.get(field.name)?.touched)
-          }"
-        />
-      }
+      <input
+        [attr.placeholder]="field.placeholder"
+        [formControlName]="field.name"
+        [type]="field.type"
+        [value]="'boston'"
+        pInputText
+        class="form-control w-full"
+        [ngClass]="{
+          'ng-invalid ng-dirty':
+            form.get(field.name)?.invalid && (form.get(field.name)?.dirty || form.get(field.name)?.touched)
+        }"
+      />
 
       <!-- Error Message -->
       <div

angular-client/src/components/form-template/form-template.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventEmitter, inject, input, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, inject, input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
@@ -33,7 +33,7 @@ export class FormTemplateComponent implements OnInit, OnChanges {
 
   public ref = inject(DynamicDialogRef);
 
-  @Input() formData: Map<string, anyType> = new Map();
+  formData = input<Map<string, anyType>>(new Map());
   @Output() submitForm: EventEmitter<FormGroup> = new EventEmitter();
 
   form: FormGroup = this.fb.group({});
@@ -57,7 +57,7 @@ export class FormTemplateComponent implements OnInit, OnChanges {
 
     this.fields().forEach((field) => {
       const control = this.fb.control({
-        value: this.formData ? this.formData.get(field.name) : '',
+        value: this.formData() ? this.formData().get(field.name) : '',
         disabled: field.disabled
       });
 
@@ -69,6 +69,10 @@ export class FormTemplateComponent implements OnInit, OnChanges {
       if (field.minLength) validations.push(Validators.minLength(field.minLength));
 
       control.setValidators(validations);
+      if (field.optionValue !== undefined) {
+        control.setValue(field.optionValue);
+      }
+
       group[field.name] = control;
     });
 

angular-client/src/components/run-form/run-form.component.html

@@ -1 +1,7 @@
-<form-template [fields]="this.inputFields" />
+@if (!this.templateReady) {
+  <loading-page />
+} @else {
+  <info-background>
+    <form-template [fields]="this.inputFields" />
+  </info-background>
+}

angular-client/src/components/run-form/run-form.component.ts

@@ -3,7 +3,7 @@ import { DynamicFormField } from '../form-template/form-template.component';
 import { inject } from '@angular/core';
 import { Run } from 'src/utils/types.utils';
 import { getLatestRun } from 'src/api/run.api';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import APIService from 'src/services/api.service';
 import { MessageService } from 'primeng/api';
 import { FormGroup } from '@angular/forms';
@@ -15,27 +15,16 @@ import { updateRun } from 'src/api/run.api';
   styleUrl: './run-form.component.css'
 })
 export class RunFormComponent {
-  private dialogService = inject(DialogService);
-  public serverService = inject(APIService);
+  public apiService = inject(APIService);
   private messageService = inject(MessageService);
   private ref = inject(DynamicDialogRef);
-
-  runId: DynamicFormField = {
-    name: 'runId',
-    label: 'Run ID',
-    type: 'number',
-    placeholder: 'Run ID',
-    optionValue: 'Boston',
-    required: true,
-    disabled: false
-  };
-
+  templateReady = true;
+  selectRunId: number | undefined = undefined;
   locationName: DynamicFormField = {
     name: 'locationName',
     label: 'Location Name',
     type: 'text',
     placeholder: 'Enter Location Name',
-    optionValue: 'Boston',
     required: true,
     minLength: 3,
     maxLength: 50,
@@ -70,66 +59,45 @@ export class RunFormComponent {
     disabled: false
   };
 
-  inputFields: DynamicFormField[] = [
-    this.runId,
-    this.locationName,
-    this.driverName,
-    this.notes
-
-    // example field
-    // {
-    //   name: 'full name',
-    //   label: 'Full Name',
-    //   type: 'text',
-    //   placeholder: 'Enter Full Name',
-    //   required: true,
-    //   minLength: 3,
-    //   maxLength: 40,
-    //   disabled: false
-    // },
-  ];
+  inputFields: DynamicFormField[] = [this.locationName, this.driverName, this.notes];
 
   constructor() {
     this.renderTemplate();
 
     this.ref.onClose.subscribe((form: FormGroup) => {
-      console.log('form template closed');
-
+      if (this.selectRunId === undefined) {
+        this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No run selected' });
+        return;
+      }
       updateRun(
-        form.controls['runId'].value,
+        this.selectRunId,
         form.controls['driverName'].value,
         form.controls['locationName'].value,
-        form.controls['notes'].value,
+        form.controls['notes'].value
       );
-
-      console.log("driver:", form.controls['driverName'].value)
     });
   }
 
   renderTemplate = () => {
     // query for the most recent run to get the location name
-    const runsQueryResponse = this.serverService.query<Run>(() => getLatestRun());
-
+    const runsQueryResponse = this.apiService.query<Run>(() => getLatestRun());
     this.locationName.optionValue = 'data';
-
     runsQueryResponse.isLoading.subscribe((isLoading: boolean) => {
-      console.log('Is loading: ', isLoading);
+      this.templateReady = !isLoading;
     });
     runsQueryResponse.error.subscribe((error) => {
       error && this.messageService.add({ severity: 'error', summary: 'Error', detail: error.message });
       if (error) {
         console.log('loading error: ', error);
       }
     });
-
     runsQueryResponse.data.subscribe((data) => {
       const run = data;
       this.locationName.optionValue = run?.locationName;
       this.driverName.optionValue = run?.driverName;
       this.notes.optionValue = run?.notes;
-
-      console.log('run id: ', data?.id);
-      console.log('location: ', data?.locationName);
+      // we set the selected run id to default as the current run
+      this.selectRunId = run?.id;
     });
   };
 }

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

@@ -1,6 +1,13 @@
-<info-background>
-  <div class="current-run-display">
+@if (this.navBarStyle()) {
+  <hstack spacing="5px">
     <typography variant="header" content="Current Run" additionalStyles="margin: 0px" />
-    <typography variant="info-subtitle" content="#{{ currentRun }}" additionalStyles="margin: 0px" />
-  </div>
-</info-background>
+    <typography variant="header" content="#{{ currentRun }}" additionalStyles="margin: 0px" />
+  </hstack>
+} @else {
+  <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

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, input } from '@angular/core';
 import Storage from 'src/services/storage.service';
 
 @Component({
@@ -9,6 +9,7 @@ import Storage from 'src/services/storage.service';
 export class CurrentRunDisplayComponent implements OnInit {
   private storage = inject(Storage);
   currentRun: number = 0;
+  navBarStyle = input<boolean>(false);
 
   ngOnInit() {
     this.storage.getCurrentRunId().subscribe((runId) => {