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

@@ -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(),

src/app/movie-category/movie-category.component.html

@@ -0,0 +1 @@
+<span class="flex rounded-sm text-black text-sm px-2 py-1.5">Aktion</span>

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 {
+
+}

src/app/movie-duration/movie-duration.component.html

@@ -0,0 +1,4 @@
+<span class="flex items-center text-black text-sm rounded-sm px-2 py-1.5">
+  <mat-icon class="mr-1" style="font-size: 20px; width: 20px; height: 20px;" fontIcon="schedule"></mat-icon>
+  181 Min.
+</span>

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 {
+
+}

src/app/movie-performance/movie-performance.component.html

@@ -1,4 +1,4 @@
-<a routerLink="/zielseite" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
+<a routerLink="/schedule" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
 
   <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5">
     <p>Kino 1</p>

src/app/movie-poster/movie-poster.component.html

@@ -1,3 +1,8 @@
-<div class="w-64 mx-auto my-3">
+<div class="w-64 mx-auto my-2">
   <img src="assets/test-movie-poster.jpg" alt="Movie Poster" class="w-full h-auto shadow-md">
 </div>
+<div class="flex gap-1 justify-between">
+  <app-movie-rating></app-movie-rating>
+  <app-movie-duration></app-movie-duration>
+  <app-movie-category></app-movie-category>
+</div>

src/app/movie-rating/movie-rating.component.html

@@ -0,0 +1 @@
+<span class="flex bg-blue-800 rounded-sm shadow-md text-white text-sm px-2 py-1.5">FSK 12</span>

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 {
+
+}

src/app/movie-schedule-empty/movie-schedule-empty.component.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col items-center justify-center py-12 text-gray-500 h-100 m-auto">
+  <mat-icon class="text-6xl mb-4 opacity-50" style="font-size: 50px; width: 50px; height: 50px;">event_busy</mat-icon>
+  <p class="text-lg">Keine Vorstellungen verfügbar</p>
+  <p class="text-sm">An diesem Tag finden keine Filmvorführungen statt.</p>
+</div>

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 {
+
+}

src/app/movie-schedule-info/movie-schedule-info.component.css

@@ -1,4 +1,4 @@
 :host {
   display: block;
-  margin: 100px 0;
+  margin: 60px 0;
 }

src/app/movie-schedule-info/movie-schedule-info.component.html

@@ -1,8 +1,8 @@
-<div class="w-3/4 mx-auto my-4 flex flex-col md:flex-row gap-4">
+<div class="w-3/5 mx-auto flex flex-col md:flex-row gap-4">
   <app-movie-poster></app-movie-poster>
   <div>
-    <div class="m-2 mb-5">
-      <h1 class="text-4xl font-bold mb-1">Movie Title</h1>
+    <div class="m-2 mb-4">
+      <h1 class="text-4xl font-bold mb-2">Avengers: Endgame</h1>
       <p class="text-xl">
         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
       </p>

src/app/movie-schedule-times/movie-schedule-times.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-warp">
+<div class="flex flex-wrap">
   <app-movie-performance></app-movie-performance>
   <app-movie-performance></app-movie-performance>
   <app-movie-performance></app-movie-performance>

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 */
+}

src/app/schedule/schedule.component.html

@@ -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>

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;
+  }
 }