Add movie search and schedule header components

Introduces MovieSearchComponent, ScheduleHeaderComponent, and MovieScheduleNoSearchResultComponent for improved movie search and schedule display. Updates schedule and navbar to support search functionality and UI enhancements. Adds movie fetching to HttpService and refines layout and styles for better user experience.

src/app/app-module.ts

@@ -1,9 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } 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';
 
@@ -12,7 +13,11 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconButton } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -34,8 +39,10 @@ import { Header2Component } from './header-2/header-2.component';
 import { TheaterOverlayComponent } from './theater-overlay/theater-overlay.component';
 import { SeatComponent } from './seat/seat.component';
 import { SeatRowComponent } from './seat-row/seat-row.component';
-import {MatIconButton} from '@angular/material/button';
 import { TheaterLayoutComponent } from './theater-layout/theater-layout.component';
+import { MovieSearchComponent } from './movie-search/movie-search.component';
+import { ScheduleHeaderComponent } from './schedule-header/schedule-header.component';
+import { MovieScheduleNoSearchResultComponent } from './movie-schedule-no-search-result/movie-schedule-no-search-result.component';
 
 
 @NgModule({
@@ -60,11 +67,15 @@ import { TheaterLayoutComponent } from './theater-layout/theater-layout.componen
     TheaterOverlayComponent,
     SeatComponent,
     SeatRowComponent,
-    TheaterLayoutComponent
+    TheaterLayoutComponent,
+    MovieSearchComponent,
+    ScheduleHeaderComponent,
+    MovieScheduleNoSearchResultComponent
   ],
   imports: [
     AppRoutingModule,
     BrowserModule,
+    ReactiveFormsModule,
     CommonModule,
     FormsModule,
     MatIconModule,
@@ -72,7 +83,11 @@ import { TheaterLayoutComponent } from './theater-layout/theater-layout.componen
     MatToolbarModule,
     MatProgressBarModule,
     MatSnackBarModule,
-    MatIconButton
+    MatAutocompleteModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconButton,
+    MatDividerModule
   ],
   providers: [
     provideBrowserGlobalErrorListeners(),

src/app/header-2/header-2.component.html

@@ -6,7 +6,7 @@
     </a>
 
     <div class="absolute left-1/2 transform -translate-x-1/2 text-center">
-      <h2 class="text-3xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+      <h2 class="text-3xl font-bold bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
         Absolut war gestern, Bewegung ist heute!
       </h2>
     </div>

src/app/http.service.ts

@@ -1,4 +1,4 @@
-import {Kinosaal, Sitzplatz, Vorstellung} from '@infinimotion/model-frontend';
+import { Kinosaal, Sitzplatz, Vorstellung, Film } from '@infinimotion/model-frontend';
 import { HttpClient } from "@angular/common/http";
 import { inject, Injectable } from "@angular/core";
 import { Observable } from "rxjs";
@@ -67,6 +67,13 @@ export class HttpService {
   }
 
 
+  /* Vorstellung APIs */
+
+  /* GET /api/film */
+  getMovies(): Observable<Film[]> {
+    return this.http.get<Film[]>(`${this.baseUrl}film`);
+  }
+
 
   /* Show-Seats APIs*/
 

src/app/movie-schedule-no-search-result/movie-schedule-no-search-result.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;">search_off</mat-icon>
+  <p class="text-lg">Keine Vorstellungen gefunden</p>
+  <p class="text-sm">Für '{{ search() }}' finden am {{ date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric'} )}} kein Vorstellunge statt.</p>
+</div>

src/app/movie-schedule-no-search-result/movie-schedule-no-search-result.component.ts

@@ -0,0 +1,12 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-schedule-no-search-result',
+  standalone: false,
+  templateUrl: './movie-schedule-no-search-result.component.html',
+  styleUrl: './movie-schedule-no-search-result.component.css'
+})
+export class MovieScheduleNoSearchResultComponent {
+ search = input.required<string>();
+ date = input.required<Date>();
+}

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

@@ -0,0 +1,16 @@
+<form class="movie-search-form w-88">
+  <mat-form-field class="w-full" subscriptSizing="dynamic">
+    <mat-label>Film suchen</mat-label>
+    <input class="w-full" type="text" matInput [formControl]="searchControl" [matAutocomplete]="auto" (click)="searchControl.setValue('')">
+
+    <!-- @if (searchControl.hasError('filmNotFound')) { -->
+      <!-- <mat-error>Film existiert nicht</mat-error> -->
+    <!-- } -->
+
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+      @for (option of filteredOptions | async; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

src/app/movie-search/movie-search.component.ts

@@ -0,0 +1,62 @@
+import { Component, inject, OnInit, output, ViewEncapsulation  } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { catchError, map, startWith, tap } from 'rxjs/operators';
+import { HttpService } from '../http.service';
+
+@Component({
+  selector: 'app-movie-search',
+  standalone: false,
+  templateUrl: './movie-search.component.html',
+  styleUrl: './movie-search.component.css',
+  encapsulation: ViewEncapsulation.None
+})
+export class MovieSearchComponent implements OnInit {
+
+  movieSearchResult = output<string>();
+
+  options: string[] = [];
+  filteredOptions: Observable<string[]> = new Observable();
+
+  searchControl = new FormControl('', (control) => {
+    if (!control.value) return null;
+
+    const value = control.value.toLowerCase();
+    const found = this.options.some(option =>
+      option.toLowerCase().includes(value)
+    );
+    return found ? null : { filmNotFound: true };
+  });
+
+  private http = inject(HttpService)
+
+  ngOnInit() {
+    this.loadMovies();
+    this.filteredOptions = this.searchControl.valueChanges.pipe(
+      startWith(''),
+      tap(value => this.movieSearchResult.emit(value || '')),
+      map(value => this._filter(value || ''))
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return this.options.filter(option =>
+      option.toLowerCase().includes(filterValue)
+    );
+  }
+
+  private loadMovies() {
+    this.http.getMovies().pipe(
+      tap(movies => {
+        this.options = movies
+          .map(movie => movie.title)
+          .sort();
+      }),
+      catchError(err => {
+        console.error('Fehler beim Laden der Filme', err);
+        return of([]);
+      })
+    ).subscribe();
+  }
+}

src/app/navbar/navbar.component.css

@@ -6,7 +6,7 @@ nav {
 }
 
 .navbar {
-  width: 200px;
+  width: 250px;
   background-color: white;
   padding: 5px;
   transition: color .2s;

src/app/navbar/navbar.component.html

@@ -7,7 +7,7 @@
             <a [routerLink]="[item.path]"
                routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }"
-               class="text-xl font-bold flex justify-center hover:bg-gray-200 gradient-text rounded-sm">
+               class="text-2xl pl-3 hover:bg-gray-200 gradient-text rounded-sm">
               {{ item.label }}
             </a>
           </div>

src/app/navbar/navbar.component.ts

@@ -12,7 +12,7 @@ export class NavbarComponent {
    */
 
   navItems:{label:string, path:string}[] = [
-    {label: 'Schedule', path: '/schedule'},
+    {label: 'Programm', path: '/schedule'},
     {label: 'Kinosaal-test', path: '/theater-overlay'},
   ]
 }

src/app/schedule-header/schedule-header.component.css

@@ -0,0 +1,6 @@
+.schedule-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/app/schedule-header/schedule-header.component.html

@@ -0,0 +1,10 @@
+<div class="schedule-header px-4 py-4 duration-1000">
+  <div class="flex items-center">
+    <mat-icon style="font-size: 35px; width: 35px; height: 35px; opacity: 50%;">event</mat-icon>
+    <p class="text-2xl font-medium pl-2 bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+      Programmübersicht
+    </p>
+  </div>
+  <app-movie-search (movieSearchResult)="movieSearchResult.emit($event)"></app-movie-search>
+</div>
+<mat-divider></mat-divider>

src/app/schedule-header/schedule-header.component.ts

@@ -0,0 +1,11 @@
+import { Component, output } from '@angular/core';
+
+@Component({
+  selector: 'app-schedule-header',
+  standalone: false,
+  templateUrl: './schedule-header.component.html',
+  styleUrl: './schedule-header.component.css'
+})
+export class ScheduleHeaderComponent {
+  movieSearchResult = output<string>();
+}

src/app/schedule/schedule.component.html

@@ -1,9 +1,17 @@
+<app-schedule-header (movieSearchResult)="movieSearchResult = $event"></app-schedule-header>
+
 <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 (group of dateInfo.performances; track group.movie.id) {
+        @if (hasSearchResults(i)) {
-          <app-movie-schedule-info [movieGroup]="group"></app-movie-schedule-info>
+          @for (group of dateInfo.performances; track group.movie.id) {
+            @if (group.movie.title.toLowerCase().includes(movieSearchResult.toLowerCase())) {
+              <app-movie-schedule-info [movieGroup]="group"></app-movie-schedule-info>
+            }
+          }
+        } @else {
+          <app-movie-schedule-no-search-result [search]="movieSearchResult" [date]="dates[i].date" ></app-movie-schedule-no-search-result>
         }
       } @else {
         <app-movie-schedule-empty></app-movie-schedule-empty>

src/app/schedule/schedule.component.ts

@@ -16,6 +16,8 @@ export class ScheduleComponent implements OnInit {
   dates: { label: string; date: Date; performances: MovieGroup[] }[] = [];
   performaces: Vorstellung[] = [];
 
+  movieSearchResult: string = '';
+
   private http = inject(HttpService);
   private loading = inject(LoadingService)
 
@@ -27,6 +29,14 @@ export class ScheduleComponent implements OnInit {
     this.loadPerformances();
   }
 
+  hasSearchResults(dateIndex: number): boolean {
+    if (!this.movieSearchResult) return true;
+
+    return this.dates[dateIndex].performances.some(group =>
+      group.movie.title.toLowerCase().includes(this.movieSearchResult.toLowerCase())
+    );
+  }
+
   generateDates() {
     const today = new Date();
     for (let i = 0; i < 14; i++) {