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:
@@ -1,3 +1,7 @@
|
||||
:host {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline {
|
||||
border-color: #6366f1 !important; /* indigo-500 */
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user