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.
This commit is contained in:
@@ -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) {
|
||||
<app-movie-schedule-info [movieGroup]="group"></app-movie-schedule-info>
|
||||
@if (hasSearchResults(i)) {
|
||||
@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>
|
||||
|
||||
@@ -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++) {
|
||||
|
||||
Reference in New Issue
Block a user