From 1eb77cd6b6769419eab454722f05f85f88113ef4 Mon Sep 17 00:00:00 2001
From: Will Baumbach <wbaumbach1024@gmail.com>
Date: Fri, 17 Apr 2026 12:09:32 -0500
Subject: [PATCH] adding complete and undo-complete on click

---
 src/app/calendar/calendar.component.html |  4 ++--
 src/app/calendar/calendar.component.scss | 10 ++++++++--
 src/app/calendar/calendar.component.ts   |  9 +++++++++
 src/app/models/plan.model.ts             |  1 +
 src/app/testData/examplePlan.ts          | 18 ++++++++++++++++++
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html
index 8986a78..4f9c5f9 100644
--- a/src/app/calendar/calendar.component.html
+++ b/src/app/calendar/calendar.component.html
@@ -17,13 +17,13 @@
                 <div>Week {{planWeek.week}}</div>
             </td>
             @for (workout of planWeek.workouts; track $index) {
-            <td class="hoverOverWorkout">
+            <td class="incompleteWorkout" (click)="onCellClick($event)">
                 <div>{{workout.type}}</div>
                 <div>{{workout.totalDistance == 0 ? '' : workout.totalDistance + ' miles'}}</div>
                 <div>{{workout.description}}</div>
             </td>
             }
-            <td>43</td>
+            <td>{{planWeek.totalMilage}}</td>
         </tr>
         }
     </table>
diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss
index 436e9d3..fb1566a 100644
--- a/src/app/calendar/calendar.component.scss
+++ b/src/app/calendar/calendar.component.scss
@@ -33,7 +33,13 @@ td {
                                 supported by Chrome, Edge, Opera and Firefox */
 }
 
-.hoverOverWorkout:hover {
-    background-color: rgb(211, 211, 211);
+.incompleteWorkout:hover {
+    background-color: rgb(235, 235, 235);
 }
 
+.completedWorkout {
+    background-color: rgb(107, 194, 107);
+}
+.completedWorkout:hover {
+    background-color: rgb(89, 161, 89);
+}
\ No newline at end of file
diff --git a/src/app/calendar/calendar.component.ts b/src/app/calendar/calendar.component.ts
index 38ee5cb..924e894 100644
--- a/src/app/calendar/calendar.component.ts
+++ b/src/app/calendar/calendar.component.ts
@@ -15,4 +15,13 @@ export class CalendarComponent {
     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')
+        }
+    }
 }
diff --git a/src/app/models/plan.model.ts b/src/app/models/plan.model.ts
index b083185..73743d8 100644
--- a/src/app/models/plan.model.ts
+++ b/src/app/models/plan.model.ts
@@ -11,5 +11,6 @@ export interface Plan {
 
 export interface Week {
     week: number,
+    totalMilage: number,
     workouts: Workout[]
 }
\ No newline at end of file
diff --git a/src/app/testData/examplePlan.ts b/src/app/testData/examplePlan.ts
index fc45010..2428740 100644
--- a/src/app/testData/examplePlan.ts
+++ b/src/app/testData/examplePlan.ts
@@ -10,6 +10,7 @@ export const examplePlan: Plan = {
     planDetials: [
         {
             week: 1,
+            totalMilage: 31,
             workouts: [
                 {
                     day: 0,
@@ -57,6 +58,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 2,
+            totalMilage: 33,
             workouts: [
                 {
                     day: 0,
@@ -104,6 +106,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 3,
+            totalMilage: 39,
             workouts: [
                 {
                     day: 0,
@@ -151,6 +154,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 4,
+            totalMilage: 40,
             workouts: [
                 {
                     day: 0,
@@ -198,6 +202,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 5,
+            totalMilage: 42,
             workouts: [
                 {
                     day: 0,
@@ -245,6 +250,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 6,
+            totalMilage: 33,
             workouts: [
                 {
                     day: 0,
@@ -292,6 +298,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 7,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -339,6 +346,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 8,
+            totalMilage: 51,
             workouts: [
                 {
                     day: 0,
@@ -386,6 +394,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 9,
+            totalMilage: 46,
             workouts: [
                 {
                     day: 0,
@@ -433,6 +442,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 10,
+            totalMilage: 40,
             workouts: [
                 {
                     day: 0,
@@ -480,6 +490,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 11,
+            totalMilage: 52,
             workouts: [
                 {
                     day: 0,
@@ -527,6 +538,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 12,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -574,6 +586,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 13,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -621,6 +634,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 14,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -668,6 +682,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 15,
+            totalMilage: 49,
             workouts: [
                 {
                     day: 0,
@@ -715,6 +730,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 16,
+            totalMilage: 41,
             workouts: [
                 {
                     day: 0,
@@ -762,6 +778,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 17,
+            totalMilage: 31,
             workouts: [
                 {
                     day: 0,
@@ -809,6 +826,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 18,
+            totalMilage: 16,
             workouts: [
                 {
                     day: 0,