Schedule component (still no logic)

Introduces new components for movie rating, duration, category, and empty schedule states. Updates the schedule view to use Angular Material tabs for date selection, dynamically showing movie info or an empty state. Also refines layout and styling for movie details and poster display.
This commit is contained in:
2025-10-29 01:01:19 +01:00
parent 0cd7c9156f
commit efc5e505e9
21 changed files with 141 additions and 24 deletions

View File

@@ -1,3 +1,7 @@
:host {
min-height: 100%;
}
::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline {
border-color: #6366f1 !important; /* indigo-500 */
}

View File

@@ -1,4 +1,13 @@
@for (i of [].constructor(10); track i) {
<app-movie-schedule-info></app-movie-schedule-info>
}
<mat-tab-group mat-stretch-tabs>
@for (dateInfo of dates; track dateInfo.date; let i = $index) {
<mat-tab [label]="dateInfo.label">
@if (getMovieCount(i)> 0) {
@for (movie of [].constructor(getMovieCount(i)); track movie) {
<app-movie-schedule-info></app-movie-schedule-info>
}
} @else {
<app-movie-schedule-empty></app-movie-schedule-empty>
}
</mat-tab>
}
</mat-tab-group>

View File

@@ -7,5 +7,33 @@ import { Component } from '@angular/core';
styleUrl: './schedule.component.css'
})
export class ScheduleComponent {
dates: { label: string; date: Date }[] = [];
constructor() {
this.generateDates();
}
generateDates() {
const today = new Date();
for (let i = 0; i < 31; i++) {
const date = new Date(today);
date.setDate(today.getDate() + i);
let label = '';
if (i === 0) {
label = 'Heute';
} else if (i === 1) {
label = 'Morgen';
} else {
label = date.toLocaleDateString('de-DE', { weekday: 'short' }) + '. ' + date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit'});
}
this.dates.push({ label, date });
}
}
getMovieCount(index: number): number {
// Hier kannst du später die echten Filmzahlen zurückgeben
return index === 0 ? 10 : index === 1 ? 0 : 4;
}
}