Make movie schedule components functional

Introduces MovieGroup and Performance models for better type safety and data handling. Refactors movie-related components to use Angular signals (input/computed) and updates templates to bind data dynamically. Updates HttpService to support Vorstellung API endpoints. The schedule component now loads and groups performances by date and movie, passing structured data to child components for rendering.

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

@@ -1,14 +1,14 @@
 <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>
+    <p>{{ hall() }}</p>
   </div>
 
   <h1 class="flex-1 flex items-center justify-center text-black font-bold text-3xl px-2 py-1">
-    15:30
+    {{ startTime() }}
   </h1>
 
-  <div class="bg-green-600 w-full text-center text-white font-medium rounded-b-md py-0.5">
+  <div [style.background-color]="utilisationBackground()" [class]="fullStyle()" class="w-full text-center text-white font-medium rounded-b-md py-0.5 ">
     <p>Tickets</p>
   </div>
 

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input, computed } from '@angular/core';
 
 @Component({
   selector: 'app-movie-performance',
@@ -7,5 +7,40 @@ import { Component } from '@angular/core';
   styleUrl: './movie-performance.component.css'
 })
 export class MoviePerformanceComponent {
+  id = input.required<number>();
+  hall = input.required<string>();
+  start = input.required<Date>();
+  utilisation = input<number | undefined>();
+
+  startTime = computed(() =>
+    this.start().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  );
+
+  utilisationBackground = computed(() => {
+    const u = this.utilisation() ?? -1;
+
+    const color_map = new Map<number, string>([
+      [100, '#da1414'],
+      [75, '#e76800'],
+      [50, '#efbe12'],
+      [25, '#8bbb00'],
+      [0, '#10a20b']
+    ]);
+
+    for (const [threshold, color] of color_map) {
+      if (u >= threshold) {
+        return color;
+      }
+    }
+
+    return '#424242';
+  });
+
+  fullStyle = computed(() => {
+    if (this.utilisation() === 100) {
+      return 'line-through';
+    }
+    return '';
+  });
 
 }