infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make movie schedule components functional

Browse Source 
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.
This commit is contained in:
Piet Ostendorp
2025-10-30 01:38:43 +01:00
parent 6ebde0b5f5
commit 98626d11ed
19 changed files with 213 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/movie-schedule-info/movie-schedule-info.component.html
View File

@@ -1,13 +1,13 @@
<div class="w-3/5 mx-auto flex flex-col md:flex-row gap-4">
<app-movie-poster></app-movie-poster>
<div class="w-2/3 mx-auto flex flex-col md:flex-row gap-4">
<app-movie-poster [movie]="movie"></app-movie-poster>
<div>
<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
<h1 class="text-4xl font-bold mb-2">{{ movie.title }}</h1>
<p class="text-base">
{{ movie.description }}
</p>
</div>
<app-movie-schedule-times></app-movie-schedule-times>
<app-movie-schedule-times [performances]="performances"></app-movie-schedule-times>
</div>
</div>

11
src/app/movie-schedule-info/movie-schedule-info.component.ts
View File

@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { Component, input } from '@angular/core';
import { MovieGroup } from '../model/movie-group.model';
@Component({
selector: 'app-movie-schedule-info',
@@ -7,5 +8,13 @@ import { Component } from '@angular/core';
styleUrl: './movie-schedule-info.component.css'
})
export class MovieScheduleInfoComponent {
readonly movieGroup = input.required<MovieGroup>();
get movie() {
return this.movieGroup().movie;
}
get performances() {
return this.movieGroup().performances;
}
}