-
+
@for (dateInfo of dates; track dateInfo.date; let i = $index) {
+
+
+ {{ dateInfo.label }}
+
+
@if (getMovieCount(i) > 0) {
- @if (hasSearchResults(i)) {
- @for (group of dateInfo.performances; track group.movie.id) {
- @if (group.movie.title.toLowerCase().includes(movieSearchResult.toLowerCase())) {
-
}
diff --git a/src/app/schedule/schedule.component.ts b/src/app/schedule/schedule.component.ts
index 5d88ada..cd58a67 100644
--- a/src/app/schedule/schedule.component.ts
+++ b/src/app/schedule/schedule.component.ts
@@ -31,15 +31,7 @@ export class ScheduleComponent implements OnInit {
this.loadPerformances(this.bookableDays);
}
- 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(bookableDays: number) {
+ private generateDates(bookableDays: number) {
const today = new Date();
for (let i = 0; i < bookableDays; i++) {
const date = new Date(today);
@@ -58,7 +50,7 @@ export class ScheduleComponent implements OnInit {
}
}
- loadPerformances(bookableDays: number) {
+ private loadPerformances(bookableDays: number) {
this.loading.show();
const filter = this.generateDateFilter(bookableDays);
this.http.getPerformacesByFilter(filter).pipe(
@@ -75,22 +67,21 @@ export class ScheduleComponent implements OnInit {
).subscribe();
}
-private generateDateFilter(bookableDays: number): string[] {
- const startDate = new Date();
- const endDate = new Date();
- endDate.setDate(startDate.getDate() + bookableDays - 1);
+ private generateDateFilter(bookableDays: number): string[] {
+ const startDate = new Date();
+ const endDate = new Date();
+ endDate.setDate(startDate.getDate() + bookableDays - 1);
- const startStr = startDate.toISOString().split('T')[0] + 'T00:00:00';
- const endStr = endDate.toISOString().split('T')[0] + 'T23:59:59';
+ const startStr = startDate.toISOString().split('T')[0] + 'T00:00:00';
+ const endStr = endDate.toISOString().split('T')[0] + 'T23:59:59';
- return [
- `ge;start;date;${startStr}`,
- `le;start;date;${endStr}`,
- ];
-}
+ return [
+ `ge;start;date;${startStr}`,
+ `le;start;date;${endStr}`,
+ ];
+ }
-
- assignPerformancesToDates() {
+ private assignPerformancesToDates() {
// Gruppieren nach Datum
const groupedByDate: { [key: string]: Vorstellung[] } = {};
@@ -133,6 +124,22 @@ private generateDateFilter(bookableDays: number): string[] {
}
getMovieCount(index: number): number {
- return this.dates[index].performances.length;
+ if (!this.dates[index]?.performances) {
+ return 0;
+ }
+
+ const performances = this.dates[index].performances;
+
+ if (!this.isSearch()) {
+ return performances.length;
+ }
+
+ return performances.filter(group =>
+ group.movie.title.toLowerCase().includes(this.movieSearchResult.toLowerCase())
+ ).length;
+ }
+
+ isSearch(): boolean {
+ return !!this.movieSearchResult && this.movieSearchResult.trim() !== '';
}
}
diff --git a/src/app/seat-row/seat-row.component.css b/src/app/seat-row/seat-row.component.css
index 8b13789..4cf8c8e 100644
--- a/src/app/seat-row/seat-row.component.css
+++ b/src/app/seat-row/seat-row.component.css
@@ -1 +1,6 @@
-
+.empty-seat-space {
+ width: 30px;
+ /* Keine Ahnung, wo die zusätzlichen 6.5px herkommen müssen. Wir sonst dünner angezeigt */
+ height: 36.5px;
+ /* height: 30px; */
+}
diff --git a/src/app/seat-row/seat-row.component.html b/src/app/seat-row/seat-row.component.html
index 869b536..5ef657e 100644
--- a/src/app/seat-row/seat-row.component.html
+++ b/src/app/seat-row/seat-row.component.html
@@ -1,3 +1,8 @@
@for (entry of rowSeatList(); track $index) {
-
-
+
{{ icon() }}
}
-
@if ( searchBar() ) {
diff --git a/src/app/menu-header/menu-header.component.ts b/src/app/menu-header/menu-header.component.ts
index 4dd4ec2..ea79579 100644
--- a/src/app/menu-header/menu-header.component.ts
+++ b/src/app/menu-header/menu-header.component.ts
@@ -7,7 +7,7 @@ import { Component, input, output } from '@angular/core';
styleUrl: './menu-header.component.css'
})
export class MenuHeaderComponent {
- title = input.required();
+ label = input.required();
icon = input();
searchBar = input(false);
diff --git a/src/app/movie-importer/movie-importer.component.html b/src/app/movie-importer/movie-importer.component.html
index 42b2ea2..6f614b8 100644
--- a/src/app/movie-importer/movie-importer.component.html
+++ b/src/app/movie-importer/movie-importer.component.html
@@ -1,4 +1,4 @@
-
diff --git a/src/app/reservation-failed/reservation-failed.component.html b/src/app/reservation-failed/reservation-failed.component.html
index a8913c0..abd1532 100644
--- a/src/app/reservation-failed/reservation-failed.component.html
+++ b/src/app/reservation-failed/reservation-failed.component.html
@@ -6,6 +6,6 @@
diff --git a/src/app/reservation-success/reservation-success.component.html b/src/app/reservation-success/reservation-success.component.html
index 0a463a0..8d28e59 100644
--- a/src/app/reservation-success/reservation-success.component.html
+++ b/src/app/reservation-success/reservation-success.component.html
@@ -1,17 +1,15 @@
Willkommen bei
-
+
-
InfiniMotion
! 🎬
@@ -41,7 +41,7 @@ Wir haben uns bei Gestaltung und Stil bewusst an bestehenden Kinowebsites orientiert. Dabei handelt es sich um eine rein stilistische Anlehnung; diese Seite verfolgt keinerlei kommerzielle Zwecke und dient ausschließlich universitären Zwecken. Marken, Designs oder Funktionalitäten, die bekannten Anbietern ähneln, sind nicht als Kopie zum Wettbewerb gedacht, sondern als pragmatische Inspirationsquelle im Rahmen der Praxisarbeit. - + https://infinimotion.de wird zum Projektende offline genommen. @@ -52,57 +52,57 @@
-
+
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 706cf1a..8bfe389 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
styleUrl: './main.component.css'
})
export class MainComponent {
- currentSprint = 3;
+ currentSprint = 4;
isCompleted(index: number): boolean {
return index <= this.currentSprint;
diff --git a/src/app/menu-header/menu-header.component.html b/src/app/menu-header/menu-header.component.html
index beb2792..a571725 100644
--- a/src/app/menu-header/menu-header.component.html
+++ b/src/app/menu-header/menu-header.component.html
@@ -3,8 +3,8 @@
@if ( icon() ) {
+
-
-
- Sprint #0: Planung, Installation und Vorbereitung
-
-
+
+
+ Sprint #0: Planung, Installation und Vorbereitung
+
+
-
-
- Sprint #1: Programmübersicht
-
-
+
+
+ Sprint #1: Programmübersicht
+
+
-
-
- Sprint #2: Kinosäle anzeigen
-
-
+
+
+ Sprint #2: Kinosäle anzeigen
+
+
-
-
- Sprint #3: Vorstellungstickets reservieren und buchen
-
-
+
+
+ Sprint #3: Vorstellungstickets reservieren und buchen
+
+
-
-
- Sprint #4: Statistiken auswerten und anzeigen
-
-
+
+
+ Sprint #4: Statistiken auswerten und anzeigen
+
+
-
-
- Sprint #5: Aufbereitung und Optimierung
-
-
-
-
+
+
+ Sprint #5: Aufbereitung und Optimierung
+
+
+
+
- {{ title() }} +
+ {{ label() }}
Vielen Dank für Ihren Einkauf!
Ihre Sitzplätze wurden erfolgreich gebucht.
-Leider konnten Ihre Sitzplätze nicht reserviert werden. Dies kann passieren, wenn andere Nutzer gleichzeitig versucht haben, dieselben Sitzplätze zu reservieren.
- +Reservierung erfolgreich!
-Ihre Sitzplätze wurden erfolgreich reserviert. Bitte nennen sie den folgenden Code an der Kasse, um Ihre Reservierung in eine Buchung umzuwandeln.
{{ order().code }}
-
-
-
+
+
+
-
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css
index e80c311..239f2e2 100644
--- a/src/app/schedule/schedule.component.css
+++ b/src/app/schedule/schedule.component.css
@@ -5,3 +5,7 @@
::ng-deep .mat-mdc-tab .mdc-tab-indicator__content--underline {
border-color: #6366f1 !important; /* indigo-500 */
}
+
+.mat-badge-content {
+ background: #dd2979;
+}
diff --git a/src/app/schedule/schedule.component.html b/src/app/schedule/schedule.component.html
index 902dab4..84b6683 100644
--- a/src/app/schedule/schedule.component.html
+++ b/src/app/schedule/schedule.component.html
@@ -1,20 +1,25 @@
-
Reservierung stornieren
+
+
+
+
+
+
+ | ID | +{{row.movieId}} | +Titel | +{{row.movieTitle}} | ++ Umsatz + | +{{(row.earnings/100).toFixed(2)}} € | ++ Gebuchte Tickets + | +{{row.tickets}} | +
|---|
+
+
+
+
+
+
+| ID | +{{row.showId}} | +Kinosaal | +{{row.showHallName}} | +Film Name | +{{row.movieTitle}} | +Datum | +{{formatDate(row.showStart)}} | ++ Umsatz + | +{{(row.earnings/100).toFixed(2)}} € | ++ Gebuchte Tickets + | +{{row.tickets}} | +
|---|
+
@for (row of seatsPerRow(); track $index) {
-
+
@if ($index % 4 === 0) {
speaker
@@ -25,7 +25,7 @@
+
@if ($index % 4 === 0) {
speaker
diff --git a/src/app/theater-layout/theater-layout.component.ts b/src/app/theater-layout/theater-layout.component.ts
index d05fbce..1478459 100644
--- a/src/app/theater-layout/theater-layout.component.ts
+++ b/src/app/theater-layout/theater-layout.component.ts
@@ -10,7 +10,7 @@ import {TheaterSeatState} from '../model/theater-seat-state.model';
styleUrl: './theater-layout.component.css'
})
export class TheaterLayoutComponent {
- seatsPerRow = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[][]>();
+ seatsPerRow = input.required<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>();
protected selectedSeatsService = inject(SelectedSeatsService);
}
diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
index f2d7a36..78bd5b8 100644
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -1,8 +1,8 @@
-
+
-
+
();
+ // Sitzplätze sammeln
resp.seats.forEach(seat => {
if (!rows[seat.row.position]) {
rows[seat.row.position] = [];
@@ -114,9 +117,50 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy {
this.seatCategories = Array.from(categoryMap.values()).sort((a, b) => a.id - b.id);
- rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position);
- rows.forEach(row => row.sort((a, b) => a.seat.position - b.seat.position));
- return rows;
+ rows = rows.filter(row => row && row.length > 0).sort((a, b) => a[0].seat!.row.position - b[0].seat!.row.position);
+
+ if (rows.length === 0) {
+ return [];
+ }
+
+ // Leere Plätze auffüllen
+ const filledSeats: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = [];
+
+ rows.forEach(row => {
+ row.sort((a, b) => a.seat!.position - b.seat!.position)
+
+ const minPos = row[0].seat!.position;
+ const maxPos = row[row.length - 1].seat!.position;
+ const filledRow: { seat: Sitzplatz | null, state: TheaterSeatState | null }[] = [];
+
+ for (let pos = minPos; pos <= maxPos; pos++) {
+ const existingSeat = row.find(s => s.seat!.position === pos);
+ if (existingSeat) {
+ filledRow.push(existingSeat);
+ } else {
+ filledRow.push({ seat: null, state: null });
+ }
+ }
+
+ filledSeats.push(filledRow);
+ });
+
+ // Leere Reihen auffüllen
+ const minRowPos = rows[0][0].seat!.row.position;
+ const maxRowPos = rows[rows.length - 1][0].seat!.row.position;
+ const filledRows: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = [];
+
+ let processedIndex = 0;
+ for (let rowPos = minRowPos; rowPos <= maxRowPos; rowPos++) {
+ if (processedIndex < filledSeats.length && filledSeats[processedIndex][0].seat!.row.position === rowPos) {
+ filledRows.push(filledSeats[processedIndex]);
+ processedIndex++;
+ } else {
+ filledRows.push([{ seat: null, state: null }]);
+ }
+ }
+
+ return filledRows;
}
refreshSeats(): void {
diff --git a/src/app/zoom-detection.service.ts b/src/app/zoom-detection.service.ts
new file mode 100644
index 0000000..d9e3311
--- /dev/null
+++ b/src/app/zoom-detection.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ZoomDetectionService {
+ private zoomLevel$ = new BehaviorSubject(this.getZoomLevel());
+
+ constructor() {
+ // Zoom-Änderungen überwachen
+ fromEvent(window, 'resize')
+ .pipe(debounceTime(200))
+ .subscribe(() => {
+ this.zoomLevel$.next(this.getZoomLevel());
+ });
+ }
+
+ getZoomLevel(): number {
+ const devicePixelRatio = window.devicePixelRatio || 1;
+ return devicePixelRatio;
+ }
+
+ getZoomLevel$() {
+ return this.zoomLevel$.asObservable();
+ }
+
+ isZoomOutOfRange(minZoom: number = 0.95, maxZoom: number = 1.05): boolean {
+ const currentZoom = this.getZoomLevel();
+ return currentZoom < minZoom || currentZoom > maxZoom;
+ }
+}
diff --git a/src/app/zoom-warning/zoom-warning.component.css b/src/app/zoom-warning/zoom-warning.component.css
new file mode 100644
index 0000000..21fcb9c
--- /dev/null
+++ b/src/app/zoom-warning/zoom-warning.component.css
@@ -0,0 +1,14 @@
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px) scale(0.9);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+.zoom-info-box {
+ animation: slideIn 0.3s ease-out;
+}
diff --git a/src/app/zoom-warning/zoom-warning.component.html b/src/app/zoom-warning/zoom-warning.component.html
new file mode 100644
index 0000000..ea79125
--- /dev/null
+++ b/src/app/zoom-warning/zoom-warning.component.html
@@ -0,0 +1,81 @@
+@if (isOutOfRange && !isDismissed && !isMobile) {
+ ();
+ private currentZoomLevel = 1;
+ private lastZoomLevel = 0;
+
+ zoomDetectionService = inject(ZoomDetectionService);
+ deviceDetectionService = inject(DeviceDetectionService)
+
+ constructor(private router: Router) {
+ this.isMobile = this.deviceDetectionService.isMobile();
+ this.currentUrl = window.location.href;
+ this.checkIfShouldShowMobileWarning();
+ }
+
+ ngOnInit() {
+ this.router.events
+ .pipe(
+ filter(event => event instanceof NavigationEnd),
+ takeUntil(this.destroy$)
+ )
+ .subscribe(() => {
+ this.checkIfShouldShowMobileWarning();
+ });
+
+ if (!this.isMobile) {
+ this.updateZoomInfo();
+
+ this.zoomDetectionService.getZoomLevel$()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe((newZoomLevel) => {
+ if (Math.abs(newZoomLevel - this.lastZoomLevel) > 0.01) {
+ this.lastZoomLevel = newZoomLevel;
+ this.isDismissed = false;
+ this.updateZoomInfo();
+ }
+ });
+ }
+ }
+
+ private checkIfShouldShowMobileWarning() {
+ if (!this.isMobile) {
+ this.showMobileWarning = false;
+ return;
+ }
+
+ const currentRoute = this.router.routerState.root;
+ const allowMobile = this.getRouteData(currentRoute, 'allowMobile');
+
+ this.showMobileWarning = !allowMobile;
+ }
+
+ private getRouteData(route: any, key: string): any {
+ while (route) {
+ if (route.snapshot?.data?.[key] !== undefined) {
+ return route.snapshot.data[key];
+ }
+ route = route.firstChild;
+ }
+ return false;
+ }
+
+ private updateZoomInfo() {
+ this.currentZoomLevel = this.zoomDetectionService.getZoomLevel();
+ this.currentZoomPercentage = Math.round(this.currentZoomLevel * 100);
+ this.isOutOfRange = this.zoomDetectionService.isZoomOutOfRange();
+ }
+
+ getCompensationTransform(): string {
+ const scale = 1 / this.currentZoomLevel;
+ return `scale(${scale})`;
+ }
+
+ dismissWarning() {
+ this.isDismissed = true;
+ }
+
+ ngOnDestroy() {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+}
@if (!performance && (loading.loading$ | async)){
-
@@ -18,6 +18,6 @@
+
+
+
+}
+
+@if (showMobileWarning) {
+
+
+ screenshot_monitor
+
+
+ warning
+
+
+
+ Browser-Zoom nicht optimal!
+Ihr Browser-Zoom ist auf {{ currentZoomPercentage }}% eingestellt.
Für die beste Darstellung empfehlen wir 100%.
+
+
+
+
+ Browser-Zoom zurücksetzen:
+
+
+ + Strg + / + ⌘ + + + 0 + (Windows, Linux / Mac) +
+
+
+ Windows-Skalierung prüfen:
+-
+
- Öffnen Sie die Windows-Einstellungen +
- Navigieren Sie zu System → Bildschirm +
- Setzen Sie unter "Skalierung" den Wert auf 100% +
+
+
+ 
+
+
+ InfiniMotion
+
+
+}
diff --git a/src/app/zoom-warning/zoom-warning.component.ts b/src/app/zoom-warning/zoom-warning.component.ts
new file mode 100644
index 0000000..8802167
--- /dev/null
+++ b/src/app/zoom-warning/zoom-warning.component.ts
@@ -0,0 +1,100 @@
+import { DeviceDetectionService } from './../device-detection.service';
+import { Component, HostListener, inject, OnDestroy, OnInit } from '@angular/core';
+import { filter, Subject, takeUntil } from 'rxjs';
+import { ZoomDetectionService } from '../zoom-detection.service';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Component({
+ selector: 'app-zoom-warning',
+ standalone: false,
+ templateUrl: './zoom-warning.component.html',
+ styleUrl: './zoom-warning.component.css',
+})
+export class ZoomWarningComponent implements OnInit, OnDestroy {
+ currentZoomPercentage = 100;
+ isOutOfRange = false;
+ isDismissed = false;
+ isMobile = false;
+ showMobileWarning = false;
+ currentUrl = '';
+
+ private destroy$ = new Subject
+
+
+
+ screenshot_monitor
+
+
+ warning
+
+
+
+ Nur am PC verfügbar
+ ++ Diese Anwendung ist für die Nutzung am Desktop-PC optimiert und kann auf mobilen Geräten nicht verwendet werden. +
+ +
+
+ Deine derzeitige URL:
++ {{ currentUrl }} +
+