Basic multistep form

cardinal-app · Jan 4, 2024 · 7efe90a · 7efe90a
1 parent 1ca527e
commit 7efe90a
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 81 deletions.
diff --git a/src/app/structure/fit-track/admin/add-week/add-week.component.html b/src/app/structure/fit-track/admin/add-week/add-week.component.html
@@ -1,19 +1,19 @@
 <h2 mat-dialog-title>Add New Week</h2>
 <mat-dialog-content class="mat-typography">
   <form [formGroup]="weekForm">
-    <div class="form-group">
+    <div class="form-group" id="overview" [class.active]="activeFormSection == 0">
       <label for="block">Block</label><br>
       <input id="block" type="number" value="Block" formControlName="block"><br>
       <label for="week">Week</label><br>
       <input id="week" type="number" value="Week" formControlName="week">
     </div>
-    <div class="form-group">
+    <div class="form-group" id="general" [class.active]="activeFormSection == 1">
       <h3>General</h3>
     </div>
-    <div class="form-group">
+    <div class="form-group" id="resistance" [class.active]="activeFormSection == 2">
       <h3>Resistance</h3>
     </div>
-    <div class="form-group" formGroupName="running">
+    <div class="form-group" id="running" formGroupName="running" [class.active]="activeFormSection == 3">
       <h3>Running</h3>
       <label for="volume">Volume</label><br>
       <input id="volume" type="number" value="Volume (miles)" formControlName="volume">
@@ -22,5 +22,6 @@ <h3>Running</h3>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button [mat-dialog-close]="true" (click)="submitWeek()">Add</button>
+<!--  <button mat-button [mat-dialog-close]="true" (click)="activeFormSection == 3 ? submitWeek() : nextSection()">{{ activeFormSection == 3 ? 'Add' : 'Next' }}</button>-->
+  <button mat-button (click)="activeFormSection == 3 ? submitWeek() : nextSection()">{{ activeFormSection == 3 ? 'Add' : 'Next' }}</button>
 </mat-dialog-actions>
diff --git a/src/app/structure/fit-track/admin/add-week/add-week.component.scss b/src/app/structure/fit-track/admin/add-week/add-week.component.scss
@@ -0,0 +1,7 @@
+.form-group {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
diff --git a/src/app/structure/fit-track/admin/add-week/add-week.component.ts b/src/app/structure/fit-track/admin/add-week/add-week.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from "@angular/core";
+import {Component, EventEmitter, OnInit, Output, ViewChild} from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
 import { MatButtonModule } from "@angular/material/button";
@@ -13,10 +13,11 @@ import { FitTrackService } from "../../../../core/service/fit-track/fit-track.se
   templateUrl: './add-week.component.html',
   styleUrl: './add-week.component.scss'
 })
-export class AddWeekComponent {
+export class AddWeekComponent implements OnInit {
 
   @Output() newWeek: EventEmitter<Week> = new EventEmitter();
   weekForm: FormGroup;
+  activeFormSection: number = 0;
 
   constructor(private formBuilder: FormBuilder,
               private fitTrackService: FitTrackService,
@@ -31,6 +32,10 @@ export class AddWeekComponent {
     });
   }
 
+  ngOnInit(): void {
+
+  }
+
   submitWeek(): void {
     console.log(this.weekForm.value); // TODO :: impl logging
 
@@ -43,4 +48,7 @@ export class AddWeekComponent {
     this.dialogRef.close(week);
   }
 
+  nextSection(): void {
+    this.activeFormSection += 1;
+  }
 }
diff --git a/src/app/structure/fit-track/fit-track.component.html b/src/app/structure/fit-track/fit-track.component.html
@@ -14,7 +14,7 @@
   </container>
   <container>
     <accordion title="Running">
-      <running [historicalRunning]="historicalRunning"></running>
+      <running [weeks]="weeks"></running>
     </accordion>
   </container>
 </main>
diff --git a/src/app/structure/fit-track/fit-track.component.ts b/src/app/structure/fit-track/fit-track.component.ts
@@ -25,9 +25,6 @@ export class FitTrackComponent implements OnInit {
   // Signals :: Writable
   weeks: WritableSignal<Week[]> = signal([new Week()]);
 
-  // Signals :: Computed
-  historicalRunning = computed(() => this.weeks().map(week => week.running));
-
   protected content: [string, string][];
 
   constructor(private fitTrackService: FitTrackService) {

diff --git a/src/app/structure/fit-track/running/running.component.html b/src/app/structure/fit-track/running/running.component.html
@@ -20,64 +20,64 @@
 <!--  <add-week (weekAdded)="onWeekAdded($event)"/>-->
 <!--  <br>-->
 <!--  <br>-->
-<!--  <section>-->
-<!--    <h4>Weekly Volume</h4>-->
-<!--    <table class="table" id="week-volume-table">-->
-<!--      <thead>-->
-<!--      <tr>-->
-<!--        <th scope="col">Block</th>-->
-<!--        <th scope="col">Week</th>-->
-<!--        <th scope="col">Volume</th>-->
-<!--        <th scope="col">Activity</th>-->
-<!--      </tr>-->
-<!--      </thead>-->
-<!--      <tbody>-->
-<!--        @for (wk of weeks() | orderWeeks; track wk) {-->
-<!--          <tr>-->
-<!--            <td>{{ wk.block }}</td>-->
-<!--            <td>{{ wk.week }}</td>-->
-<!--            <td>{{ wk.volume }}</td>-->
-<!--            @switch (wk.activity) {-->
-<!--              @case ('squash') {-->
-<!--                <td>{{ wk.activity }} <fa-icon class="text-success" [icon]="faHeartbeat"></fa-icon></td>-->
-<!--              }-->
-<!--              @case ('footie') {-->
-<!--                <td>{{ wk.activity }} <fa-icon class="text-danger" [icon]="faFutbol"></fa-icon></td>-->
-<!--              }-->
-<!--              @default {-->
-<!--                <td>{{ wk.activity }}</td>-->
-<!--              }-->
-<!--            }-->
-<!--          </tr>-->
-<!--        } @empty {-->
-<!--          <tr>-->
-<!--            <td>Weekly volume data will show here</td>-->
-<!--          </tr>-->
-<!--        }-->
-<!--      </tbody>-->
-<!--    </table>-->
-<!--    @if (lastWeek() >= 14) {-->
-<!--      <p>You are overdue a light week</p>-->
-<!--    } @else if (lastWeek() >= 12) {-->
-<!--      <p>You should consider a light week in the next 1-2 weeks</p>-->
-<!--    } @else if (lastWeek() >= 6) {-->
-<!--      <p>You're over half way through this training block</p>-->
-<!--    } @else {-->
-<!--      <p>Light weeks should be taken every 12 weeks or so</p>-->
-<!--    }-->
-<!--  </section>-->
-<!--  <br>-->
-<!--  <br>-->
-<!--  &lt;!&ndash; Deferrable Views &ndash;&gt;-->
-<!--  <section class="historical-data">-->
-<!--    @defer (on hover) {-->
-<!--      <visualisation [weeks]="weeks()" />-->
-<!--    } @placeholder (minimum 1000ms) {-->
-<!--      <p><fa-icon [icon]="faHandPointer"></fa-icon> Hover for historical data</p>-->
-<!--    } @loading (after 100ms; minimum 1s) {-->
-<!--      <img alt="loading..." src="loading.gif" />-->
-<!--    } @error {-->
-<!--      <p>Failed to load the calendar</p>-->
-<!--    }-->
-<!--    &lt;!&ndash; FixMe :: icon flicker &ndash;&gt;-->
-<!--    &lt;!&ndash; TODO :: play with test support for @defer &ndash;&gt;-->
+  <section>
+    <h4>Weekly Volume</h4>
+    <table class="table" id="week-volume-table">
+      <thead>
+      <tr>
+        <th scope="col">Block</th>
+        <th scope="col">Week</th>
+        <th scope="col">Volume</th>
+        <th scope="col">Activity</th>
+      </tr>
+      </thead>
+      <tbody>
+        @for (wk of weeks() | orderWeeks; track wk) {
+          <tr>
+            <td>{{ wk.block }}</td>
+            <td>{{ wk.week }}</td>
+            <td>{{ wk.running.volume }}</td>
+            @switch (wk.activity) {
+              @case ('squash') {
+                <td>{{ wk.activity }} <fa-icon class="text-success" [icon]="faHeartbeat"></fa-icon></td>
+              }
+              @case ('footie') {
+                <td>{{ wk.activity }} <fa-icon class="text-danger" [icon]="faFutbol"></fa-icon></td>
+              }
+              @default {
+                <td>{{ wk.activity }}</td>
+              }
+            }
+          </tr>
+        } @empty {
+          <tr>
+            <td>Weekly volume data will show here</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+    @if (lastWeek() >= 14) {
+      <p>You are overdue a light week</p>
+    } @else if (lastWeek() >= 12) {
+      <p>You should consider a light week in the next 1-2 weeks</p>
+    } @else if (lastWeek() >= 6) {
+      <p>You're over half way through this training block</p>
+    } @else {
+      <p>Light weeks should be taken every 12 weeks or so</p>
+    }
+  </section>
+  <br>
+  <br>
+  <!-- Deferrable Views -->
+  <section class="historical-data">
+    @defer (on hover) {
+      <visualisation [weeks]="weeks" />
+    } @placeholder (minimum 1000ms) {
+      <p><fa-icon [icon]="faHandPointer"></fa-icon> Hover for historical data</p>
+    } @loading (after 100ms; minimum 1s) {
+      <img alt="loading..." src="loading.gif" />
+    } @error {
+      <p>Failed to load the calendar</p>
+    }
+    <!-- FixMe :: icon flicker -->
+    <!-- TODO :: play with test support for @defer -->
diff --git a/src/app/structure/fit-track/running/running.component.ts b/src/app/structure/fit-track/running/running.component.ts
@@ -1,12 +1,16 @@
-import {Component, computed, effect, Input, signal, Signal} from '@angular/core';
+import {Component, computed, effect, Input, signal, Signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Running } from "../../../core/model/fit-track/paradigm/running/running";
 import { faHandPointer, faFutbol, faHeartbeat } from "@fortawesome/free-solid-svg-icons";
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { OrderWeeksPipe } from "../../../core/pipe/order-weeks.pipe";
+import { VisualisationComponent } from "./visualisation/visualisation.component";
+import { Week } from "../../../core/model/fit-track/week";
 
 @Component({
   selector: 'running',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, FaIconComponent, OrderWeeksPipe, VisualisationComponent],
   templateUrl: './running.component.html',
   styleUrl: './running.component.scss'
 })
@@ -15,7 +19,9 @@ export class RunningComponent {
   protected readonly faFutbol = faFutbol;
   protected readonly faHeartbeat = faHeartbeat;
 
-  @Input() historicalRunning: Signal<Running[]> = signal([]);
+  @Input() weeks: Signal<Week[]> = signal([]);
+  // Signals :: Computed
+  historicalRunning = computed(() => this.weeks().map(week => week.running));
 
   totalMiles = computed(() => this.calculateTotalMiles());
   totalKilometres = computed(() => 1.60934 * this.totalMiles());

diff --git a/src/app/structure/fit-track/running/visualisation/visualisation.component.ts b/src/app/structure/fit-track/running/visualisation/visualisation.component.ts
@@ -1,7 +1,7 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Signal, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Chart } from 'chart.js/auto';
-import {Week} from "../../../core/model/fit-track/week";
+import { Week } from "../../../../core/model/fit-track/week";
 
 @Component({
   selector: 'visualisation',
@@ -12,7 +12,7 @@ import {Week} from "../../../core/model/fit-track/week";
 })
 export class VisualisationComponent implements OnInit {
 
-  @Input() weeks: Week[] = [new Week()];
+  @Input() weeks: Signal<Week[]> = signal([new Week()]);
 
   public chart: any;
 
@@ -21,9 +21,9 @@ export class VisualisationComponent implements OnInit {
   private weekVolumes: number[] = [];
 
   ngOnInit(): void {
-    this.weekBlocks = this.weeks.map(week => `B${week.block}:W${week.week}`);
-    this.weekVolumes = this.weeks.map(week => week.running.volume.miles);
-    this.averageVolume = this.weekVolumes.reduce((a, b) => { return a + b; }) / (this.weeks.length);
+    this.weekBlocks = this.weeks().map(week => `B${week.block}:W${week.week}`);
+    this.weekVolumes = this.weeks().map(week => week.running.volume);
+    this.averageVolume = this.weekVolumes.reduce((a, b) => { return a + b; }) / (this.weeks().length);
 
     this.createChart();
   }