Show the next weekly class on the booking card
Angular · Angular · beginner · greenfield
Adds the booking-page class card. `nextSession` walks from the reference date to the coming Tuesday with modular weekday arithmetic, snaps the time to 18:00, and the template renders it through the date pipe. Checked the card on a few weekdays and the coming Tuesday shows up correctly.
Requirements
- Add the `ClassCardComponent` for the studio booking page: it shows when the next session of the weekly community class takes place.
- The class runs every Tuesday at 18:00, studio local time — all dates in this app are plain local `Date`s; no timezone conversion is involved.
- `nextSession(from)` returns the first class session strictly after `from`. In particular: if `from` is a Tuesday before 18:00, the next session is TODAY at 18:00; if `from` is a Tuesday at or after 18:00, it is next Tuesday.
- The returned `Date` has hours 18:00:00.000 exactly.
- The card renders the result as e.g. `Tuesday, Aug 11, 6:00 PM` via the date pipe.
Files touched
- src/app/booking/class-card.component.ts
--- src/app/booking/class-card.component.ts
+import { Component, signal } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+const CLASS_WEEKDAY = 2; // Tuesday
+const CLASS_HOUR = 18;
+
+@Component({
+ selector: 'app-class-card',
+ standalone: true,
+ imports: [DatePipe],
+ template: `
+ <div class="class-card">
+ <h3 class="class-card-title">Community class</h3>
+ <p class="class-card-next">
+ Next session: {{ next() | date: 'EEEE, MMM d, h:mm a' }}
+ </p>
+ </div>
+ `,
+})
+export class ClassCardComponent {
+ readonly next = signal(this.nextSession(new Date()));
+
+ nextSession(from: Date): Date {
+ let daysAhead = (CLASS_WEEKDAY - from.getDay() + 7) % 7;
+ if (daysAhead === 0) {
+ // Class day is today — the next session is next week's.
+ daysAhead = 7;
+ }
+ const next = new Date(from);