From efc5e505e91b2056a470b28b5386f22f85ae8566 Mon Sep 17 00:00:00 2001 From: Piet Ostendorp Date: Wed, 29 Oct 2025 01:01:19 +0100 Subject: [PATCH] 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. --- src/app/app-module.ts | 42 +++++++++++++------ .../movie-category.component.css | 0 .../movie-category.component.html | 1 + .../movie-category.component.ts | 11 +++++ .../movie-duration.component.css | 0 .../movie-duration.component.html | 4 ++ .../movie-duration.component.ts | 11 +++++ .../movie-performance.component.html | 2 +- .../movie-poster/movie-poster.component.html | 7 +++- .../movie-rating/movie-rating.component.css | 0 .../movie-rating/movie-rating.component.html | 1 + .../movie-rating/movie-rating.component.ts | 11 +++++ .../movie-schedule-empty.component.css | 0 .../movie-schedule-empty.component.html | 5 +++ .../movie-schedule-empty.component.ts | 11 +++++ .../movie-schedule-info.component.css | 2 +- .../movie-schedule-info.component.html | 6 +-- .../movie-schedule-times.component.html | 2 +- src/app/schedule/schedule.component.css | 4 ++ src/app/schedule/schedule.component.html | 17 ++++++-- src/app/schedule/schedule.component.ts | 28 +++++++++++++ 21 files changed, 141 insertions(+), 24 deletions(-) create mode 100644 src/app/movie-category/movie-category.component.css create mode 100644 src/app/movie-category/movie-category.component.html create mode 100644 src/app/movie-category/movie-category.component.ts create mode 100644 src/app/movie-duration/movie-duration.component.css create mode 100644 src/app/movie-duration/movie-duration.component.html create mode 100644 src/app/movie-duration/movie-duration.component.ts create mode 100644 src/app/movie-rating/movie-rating.component.css create mode 100644 src/app/movie-rating/movie-rating.component.html create mode 100644 src/app/movie-rating/movie-rating.component.ts create mode 100644 src/app/movie-schedule-empty/movie-schedule-empty.component.css create mode 100644 src/app/movie-schedule-empty/movie-schedule-empty.component.html create mode 100644 src/app/movie-schedule-empty/movie-schedule-empty.component.ts diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 158cd05..bc24b0c 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -1,22 +1,32 @@ +import { CommonModule } from '@angular/common'; import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; +import { provideHttpClient, withFetch } from '@angular/common/http'; import { AppRoutingModule } from './app-routing-module'; import { App } from './app'; -import { PocModelComponent } from './poc-model-component/poc-model-component'; -import { HomeComponent } from './home/home.component'; -import { provideHttpClient, withFetch } from '@angular/common/http'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { MainLayoutComponent } from './layouts/main-layout/main-layout.component'; + +import { MatIconModule } from '@angular/material/icon'; +import { MatTabsModule } from '@angular/material/tabs'; + import { HeaderComponent } from './header/header.component'; -import { NavbarComponent } from './navbar/navbar.component'; -import { ScheduleComponent } from './schedule/schedule.component'; +import { HomeComponent } from './home/home.component'; import { MainComponent } from './main/main.component'; -import { MovieScheduleInfoComponent } from './movie-schedule-info/movie-schedule-info.component'; -import { MoviePosterComponent } from './movie-poster/movie-poster.component'; -import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedule-times.component'; +import { MainLayoutComponent } from './layouts/main-layout/main-layout.component'; +import { NavbarComponent } from './navbar/navbar.component'; +import { PocModelComponent } from './poc-model-component/poc-model-component'; +import { ScheduleComponent } from './schedule/schedule.component'; + +import { MovieDurationComponent } from './movie-duration/movie-duration.component'; import { MoviePerformanceComponent } from './movie-performance/movie-performance.component'; +import { MoviePosterComponent } from './movie-poster/movie-poster.component'; +import { MovieRatingComponent } from './movie-rating/movie-rating.component'; +import { MovieScheduleInfoComponent } from './movie-schedule-info/movie-schedule-info.component'; +import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedule-times.component'; +import { MovieCategoryComponent } from './movie-category/movie-category.component'; +import { MovieScheduleEmptyComponent } from './movie-schedule-empty/movie-schedule-empty.component'; + @NgModule({ declarations: [ @@ -31,13 +41,19 @@ import { MoviePerformanceComponent } from './movie-performance/movie-performance MovieScheduleInfoComponent, MoviePosterComponent, MovieScheduleTimesComponent, - MoviePerformanceComponent + MoviePerformanceComponent, + MovieRatingComponent, + MovieDurationComponent, + MovieCategoryComponent, + MovieScheduleEmptyComponent ], imports: [ AppRoutingModule, BrowserModule, CommonModule, - FormsModule + FormsModule, + MatIconModule, + MatTabsModule ], providers: [ provideBrowserGlobalErrorListeners(), diff --git a/src/app/movie-category/movie-category.component.css b/src/app/movie-category/movie-category.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/movie-category/movie-category.component.html b/src/app/movie-category/movie-category.component.html new file mode 100644 index 0000000..98fd707 --- /dev/null +++ b/src/app/movie-category/movie-category.component.html @@ -0,0 +1 @@ +Aktion diff --git a/src/app/movie-category/movie-category.component.ts b/src/app/movie-category/movie-category.component.ts new file mode 100644 index 0000000..2aec72d --- /dev/null +++ b/src/app/movie-category/movie-category.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-movie-category', + standalone: false, + templateUrl: './movie-category.component.html', + styleUrl: './movie-category.component.css' +}) +export class MovieCategoryComponent { + +} diff --git a/src/app/movie-duration/movie-duration.component.css b/src/app/movie-duration/movie-duration.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/movie-duration/movie-duration.component.html b/src/app/movie-duration/movie-duration.component.html new file mode 100644 index 0000000..b1b61da --- /dev/null +++ b/src/app/movie-duration/movie-duration.component.html @@ -0,0 +1,4 @@ + + + 181 Min. + diff --git a/src/app/movie-duration/movie-duration.component.ts b/src/app/movie-duration/movie-duration.component.ts new file mode 100644 index 0000000..9bad0cb --- /dev/null +++ b/src/app/movie-duration/movie-duration.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-movie-duration', + standalone: false, + templateUrl: './movie-duration.component.html', + styleUrl: './movie-duration.component.css' +}) +export class MovieDurationComponent { + +} diff --git a/src/app/movie-performance/movie-performance.component.html b/src/app/movie-performance/movie-performance.component.html index 4930bfd..82dcac3 100644 --- a/src/app/movie-performance/movie-performance.component.html +++ b/src/app/movie-performance/movie-performance.component.html @@ -1,4 +1,4 @@ - +

Kino 1

diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html index 33bd6da..0656628 100644 --- a/src/app/movie-poster/movie-poster.component.html +++ b/src/app/movie-poster/movie-poster.component.html @@ -1,3 +1,8 @@ -
+
Movie Poster
+
+ + + +
diff --git a/src/app/movie-rating/movie-rating.component.css b/src/app/movie-rating/movie-rating.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/movie-rating/movie-rating.component.html b/src/app/movie-rating/movie-rating.component.html new file mode 100644 index 0000000..1b155aa --- /dev/null +++ b/src/app/movie-rating/movie-rating.component.html @@ -0,0 +1 @@ +FSK 12 diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts new file mode 100644 index 0000000..ce30aaa --- /dev/null +++ b/src/app/movie-rating/movie-rating.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-movie-rating', + standalone: false, + templateUrl: './movie-rating.component.html', + styleUrl: './movie-rating.component.css' +}) +export class MovieRatingComponent { + +} diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.css b/src/app/movie-schedule-empty/movie-schedule-empty.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.html b/src/app/movie-schedule-empty/movie-schedule-empty.component.html new file mode 100644 index 0000000..01656b3 --- /dev/null +++ b/src/app/movie-schedule-empty/movie-schedule-empty.component.html @@ -0,0 +1,5 @@ +
+ event_busy +

Keine Vorstellungen verfügbar

+

An diesem Tag finden keine Filmvorführungen statt.

+
diff --git a/src/app/movie-schedule-empty/movie-schedule-empty.component.ts b/src/app/movie-schedule-empty/movie-schedule-empty.component.ts new file mode 100644 index 0000000..e5d4a12 --- /dev/null +++ b/src/app/movie-schedule-empty/movie-schedule-empty.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-movie-schedule-empty', + standalone: false, + templateUrl: './movie-schedule-empty.component.html', + styleUrl: './movie-schedule-empty.component.css' +}) +export class MovieScheduleEmptyComponent { + +} diff --git a/src/app/movie-schedule-info/movie-schedule-info.component.css b/src/app/movie-schedule-info/movie-schedule-info.component.css index 06c5cb0..0426c40 100644 --- a/src/app/movie-schedule-info/movie-schedule-info.component.css +++ b/src/app/movie-schedule-info/movie-schedule-info.component.css @@ -1,4 +1,4 @@ :host { display: block; - margin: 100px 0; + margin: 60px 0; } diff --git a/src/app/movie-schedule-info/movie-schedule-info.component.html b/src/app/movie-schedule-info/movie-schedule-info.component.html index 1f51b69..d8ac521 100644 --- a/src/app/movie-schedule-info/movie-schedule-info.component.html +++ b/src/app/movie-schedule-info/movie-schedule-info.component.html @@ -1,8 +1,8 @@ -
+
-
-

Movie Title

+
+

Avengers: Endgame

Long Movie description Long Movie description Long Movie description Long Movie description Long Movie description Long Movie descriptionLong Movie description Long Movie description Long Movie description

diff --git a/src/app/movie-schedule-times/movie-schedule-times.component.html b/src/app/movie-schedule-times/movie-schedule-times.component.html index c1617f6..b46a6bb 100644 --- a/src/app/movie-schedule-times/movie-schedule-times.component.html +++ b/src/app/movie-schedule-times/movie-schedule-times.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css index dd48b70..e80c311 100644 --- a/src/app/schedule/schedule.component.css +++ b/src/app/schedule/schedule.component.css @@ -1,3 +1,7 @@ :host { min-height: 100%; } + +::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline { + border-color: #6366f1 !important; /* indigo-500 */ +} diff --git a/src/app/schedule/schedule.component.html b/src/app/schedule/schedule.component.html index d677346..0dfee55 100644 --- a/src/app/schedule/schedule.component.html +++ b/src/app/schedule/schedule.component.html @@ -1,4 +1,13 @@ -@for (i of [].constructor(10); track i) { - -} - + + @for (dateInfo of dates; track dateInfo.date; let i = $index) { + + @if (getMovieCount(i)> 0) { + @for (movie of [].constructor(getMovieCount(i)); track movie) { + + } + } @else { + + } + + } + diff --git a/src/app/schedule/schedule.component.ts b/src/app/schedule/schedule.component.ts index 631b3ca..a69c67a 100644 --- a/src/app/schedule/schedule.component.ts +++ b/src/app/schedule/schedule.component.ts @@ -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; + } }