New programming screen

src/app/schedule/schedule.component.ts

@@ -1,55 +1,32 @@
 import { Component, inject } from '@angular/core';
-import { AsyncPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { map, Observable, startWith } from 'rxjs';
 
-import { ProgramService } from '../services/program.service';
-import { Program } from '../interfaces/program';
+import { ShowService } from '../services/show.service';
+import { Show } from '../interfaces/show';
 import { StationConfigService } from '../services/station-config.service';
-
-interface DayGroup {
-  day_label: string;
-  day_of_week: number;
-  programs: Program[];
-}
+import { SortSchedulesPipe } from '../pipes/sort-schedules.pipe';
 
 interface ScheduleState {
   loading: boolean;
-  dayGroups: DayGroup[];
-}
-
-function groupByDay(programs: Program[]): DayGroup[] {
-  const map = new Map<string, DayGroup>();
-
-  for (const p of programs) {
-    if (!map.has(p.day_label)) {
-      map.set(p.day_label, {
-        day_label: p.day_label,
-        day_of_week: p.day_of_week,
-        programs: [],
-      });
-    }
-    map.get(p.day_label)!.programs.push(p);
-  }
-
-  return Array.from(map.values()).sort((a, b) => a.day_of_week - b.day_of_week);
+  shows: Show[];
 }
 
 @Component({
   selector: 'app-schedule',
   standalone: true,
-  imports: [AsyncPipe],
+  imports: [AsyncPipe, SortSchedulesPipe],
   templateUrl: './schedule.component.html',
   styleUrl: './schedule.component.scss',
 })
 export class ScheduleComponent {
-  private programService = inject(ProgramService);
+  private showService = inject(ShowService);
   readonly config = inject(StationConfigService).config;
 
   /** Async pipe drives the template — guarantees change detection on every emission. */
   readonly schedule$: Observable<ScheduleState> =
-    this.programService.getPrograms().pipe(
-      map((programs) => groupByDay(programs)),
-      map((dayGroups) => ({ loading: false, dayGroups })),
-      startWith({ loading: true, dayGroups: [] }),
+    this.showService.getShows().pipe(
+      map((shows) => ({ loading: false, shows })),
+      startWith({ loading: true, shows: [] }),
     );
 }