wbaumbach/runningPlans
1
0
Fork 0
Code Issues Pull Requests Activity

adding angular material and ability to hide completed weeks

Browse Source
This commit is contained in:
Will Baumbach
2026-04-22 12:51:01 -05:00
parent 99008d98f5
commit 5c5b30e84e
8 changed files with 922 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/app.config.ts
View File

@@ -2,7 +2,8 @@ import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
providers: [provideRouter(routes), provideAnimationsAsync()]
};

11
src/app/calendar/calendar.component.html
View File

@@ -1,8 +1,12 @@
<div class="container">
<div>
<mat-checkbox [checked]="hideCompletedWeeks" (click)="toggleHideCompletedWeeks()">Hide completed
weeks</mat-checkbox>
</div>
<table class="noselect">
<tr>
<th>Week</th>
<th>Total Milage</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
@@ -12,11 +16,12 @@
<th>Sunday</th>
</tr>
@for (planWeek of examplePlan.planDetials; track planWeek.week; let i = $index) {
@if (!hideCompletedWeeks || (hideCompletedWeeks && planWeek.status != status.Complete)) {
<tr>
<td [ngClass]="{'completedWeek': planWeek.status === status.Complete}">
<div>Week {{planWeek.week}}</div>
<div>Total Milage: {{planWeek.totalMilage}}</div>
</td>
<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)">
@@ -25,8 +30,8 @@
<div>{{workout.description}}</div>
</td>
}
</tr>
}
}
</table>
</div>

8
src/app/calendar/calendar.component.ts
View File

@@ -3,17 +3,19 @@ import { examplePlan } from '../testData/examplePlan';
import { Plan } from '../models/plan.model';
import { CommonModule } from "@angular/common";
import { Status } from '../models/workout.model';
import {MatCheckboxModule} from '@angular/material/checkbox';
@Component({
selector: 'calendar',
standalone: true,
imports: [CommonModule],
imports: [CommonModule, MatCheckboxModule],
templateUrl: './calendar.component.html',
styleUrl: './calendar.component.scss'
})
export class CalendarComponent {
examplePlan: Plan = examplePlan;
status = Status;
hideCompletedWeeks = true
ngOnInit(): void {
@@ -42,4 +44,8 @@ export class CalendarComponent {
examplePlan.planDetials[weekNum].status = Status.Incomplete
}
}
toggleHideCompletedWeeks() {
this.hideCompletedWeeks = !this.hideCompletedWeeks
}
}

4
src/index.html
View File

@@ -6,8 +6,10 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

3
src/styles.scss
View File

@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }