updating data models to have status for both week and day and updated calendar to complete based on status

src/app/app.component.ts

@@ -11,4 +11,9 @@ import { CalendarComponent } from "./calendar/calendar.component";
 })
 export class AppComponent {
   title = 'runningPlans';
+
+  ngOnInit(): void {
+    
+    
+  }
 }

src/app/calendar/calendar.component.html

@@ -2,6 +2,7 @@
     <table class="noselect">
         <tr>
             <th>Week</th>
+            <th>Total Milage</th>
             <th>Monday</th>
             <th>Tuesday</th>
             <th>Wednesday</th>
@@ -9,21 +10,22 @@
             <th>Friday</th>
             <th>Saturday</th>
             <th>Sunday</th>
-            <th>Total Milage</th>
         </tr>
-        @for (planWeek of examplePlan.planDetials; track $index) {
+        @for (planWeek of examplePlan.planDetials; track planWeek.week; let i = $index) {
         <tr>
-            <td>
+            <td [ngClass]="{'completedWeek': planWeek.status === status.Complete}">
                 <div>Week {{planWeek.week}}</div>
             </td>
-            @for (workout of planWeek.workouts; track $index) {
-            <td class="incompleteWorkout" (click)="onCellClick($event)">
+            <td [ngClass]="{'completedWeek': planWeek.status === status.Complete}">{{planWeek.totalMilage}}</td>
+            @for (workout of planWeek.workouts; track workout.day; let j = $index) {
+            <td [ngClass]="{'incompleteWorkout': workout.status === status.Incomplete, 'completedWorkout': workout.status === status.Complete}"
+                (click)="onCellClick(i, j)">
                 <div>{{workout.type}}</div>
                 <div>{{workout.totalDistance == 0 ? '' : workout.totalDistance + ' miles'}}</div>
                 <div>{{workout.description}}</div>
             </td>
             }
-            <td>{{planWeek.totalMilage}}</td>
+
         </tr>
         }
     </table>

src/app/calendar/calendar.component.scss

@@ -42,4 +42,8 @@ td {
 }
 .completedWorkout:hover {
     background-color: rgb(89, 161, 89);
+}
+
+.completedWeek {
+    background-color: rgb(107, 194, 107);
 }

src/app/calendar/calendar.component.ts

@@ -1,27 +1,45 @@
 import { Component } from '@angular/core';
 import { examplePlan } from '../testData/examplePlan';
 import { Plan } from '../models/plan.model';
+import { CommonModule } from "@angular/common";
+import { Status } from '../models/workout.model';
 
 @Component({
   selector: 'calendar',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './calendar.component.html',
   styleUrl: './calendar.component.scss'
 })
 export class CalendarComponent {
     examplePlan: Plan = examplePlan;
+    status = Status;
 
     ngOnInit(): void {
         
     }
 
-    onCellClick(event: Event) {
-        const target = event.currentTarget as HTMLElement;
-        if (target.classList.contains('incompleteWorkout')) {
-            target.classList.replace('incompleteWorkout', 'completedWorkout')
-        } else if (target.classList.contains('completedWorkout')) {
-            target.classList.replace('completedWorkout', 'incompleteWorkout')
+    onCellClick(weekNum: number, dayNum: number) {
+        let status = examplePlan.planDetials[weekNum].workouts[dayNum].status
+        if (status === Status.Incomplete) {
+            examplePlan.planDetials[weekNum].workouts[dayNum].status = Status.Complete
+        } else if (status === Status.Complete) {
+            examplePlan.planDetials[weekNum].workouts[dayNum].status = Status.Incomplete
+        }
+        this.checkCompletedWeek(weekNum)
+    }
+
+    checkCompletedWeek(weekNum: number) {
+        let completeCount = 0;
+        examplePlan.planDetials[weekNum].workouts.forEach(workout => {
+            if (workout.status === Status.Complete) {
+                completeCount++
+            }
+        })
+        if (completeCount === 7) {
+            examplePlan.planDetials[weekNum].status = Status.Complete
+        } else {
+            examplePlan.planDetials[weekNum].status = Status.Incomplete
         }
     }
 }

src/app/models/plan.model.ts

@@ -12,5 +12,12 @@ export interface Plan {
 export interface Week {
     week: number,
     totalMilage: number,
+    status: Status,
     workouts: Workout[]
+}
+
+export enum Status {
+    Complete = 'complete',
+    Incomplete = 'incomplete',
+    Skipped = 'skipped'
 }

src/app/models/workout.model.ts

@@ -2,7 +2,8 @@ export interface Workout {
     day: number,
     type: WorkoutType,
     totalDistance: number,
-    description: string
+    description: string,
+    status: Status
 }
 
 export enum WorkoutType {
@@ -16,4 +17,10 @@ export enum WorkoutType {
     GeneralAerobic = "General Aerobic",
     Recovery = "Recovery", 
     Rest = "Rest or Crosstrain"
+}
+
+export enum Status {
+    Complete = 'complete',
+    Incomplete = 'incomplete',
+    Skipped = 'skipped'
 }