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 index 8eb8edb5..2d4be19a 100644 --- 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 @@

Add New Week

-
+



-
+

General

-
+

Resistance

-
+

Running


@@ -22,5 +22,6 @@

Running

- + + 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 index e69de29b..181fc4ed 100644 --- 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 index 7682bc08..3bb1b2b1 100644 --- 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 = 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 index 93bfeac6..150af20a 100644 --- a/src/app/structure/fit-track/fit-track.component.html +++ b/src/app/structure/fit-track/fit-track.component.html @@ -14,7 +14,7 @@ - + diff --git a/src/app/structure/fit-track/fit-track.component.ts b/src/app/structure/fit-track/fit-track.component.ts index 34b0a41f..574fd18d 100644 --- 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 = 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 index 1faef641..e285b2ed 100644 --- a/src/app/structure/fit-track/running/running.component.html +++ b/src/app/structure/fit-track/running/running.component.html @@ -20,64 +20,64 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+

Weekly Volume

+ + + + + + + + + + + @for (wk of weeks() | orderWeeks; track wk) { + + + + + @switch (wk.activity) { + @case ('squash') { + + } + @case ('footie') { + + } + @default { + + } + } + + } @empty { + + + + } + +
BlockWeekVolumeActivity
{{ wk.block }}{{ wk.week }}{{ wk.running.volume }}{{ wk.activity }} {{ wk.activity }} {{ wk.activity }}
Weekly volume data will show here
+ @if (lastWeek() >= 14) { +

You are overdue a light week

+ } @else if (lastWeek() >= 12) { +

You should consider a light week in the next 1-2 weeks

+ } @else if (lastWeek() >= 6) { +

You're over half way through this training block

+ } @else { +

Light weeks should be taken every 12 weeks or so

+ } +
+
+
+ +
+ @defer (on hover) { + + } @placeholder (minimum 1000ms) { +

Hover for historical data

+ } @loading (after 100ms; minimum 1s) { + loading... + } @error { +

Failed to load the calendar

+ } + + diff --git a/src/app/structure/fit-track/running/running.component.ts b/src/app/structure/fit-track/running/running.component.ts index 73321d26..c2b5967e 100644 --- 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 = signal([]); + @Input() weeks: Signal = 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 index 6c3d98f6..6b4dc6f9 100644 --- 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 = 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(); }