From 2efd78a29c513a7debb316f014b9c8e4213a9da8 Mon Sep 17 00:00:00 2001 From: Kevin Szarafin Date: Thu, 20 Nov 2025 14:13:50 +0100 Subject: [PATCH] Loading seat prices from api, layout changes not final --- src/app/http.service.ts | 11 +- src/app/pricelist/pricelist.component.css | 42 ++++++ src/app/pricelist/pricelist.component.html | 146 +++++++-------------- src/app/pricelist/pricelist.component.ts | 34 ++++- 4 files changed, 133 insertions(+), 100 deletions(-) diff --git a/src/app/http.service.ts b/src/app/http.service.ts index 57c3684..b0ad392 100644 --- a/src/app/http.service.ts +++ b/src/app/http.service.ts @@ -6,7 +6,8 @@ import { OmdbSearch, Bestellung, Eintrittskarte, - StatisticsFilm, StatisticsVorstellung + StatisticsFilm, StatisticsVorstellung, + Sitzkategorie } from '@infinimotion/model-frontend'; import { HttpClient } from "@angular/common/http"; import { inject, Injectable } from "@angular/core"; @@ -204,4 +205,12 @@ export class HttpService { getShowStatistics(): Observable { return this.http.get(`${this.baseUrl}statistics/shows`) } + + + /* Sitzkategorie APIs */ + + /* GET /api/sitzkategorie */ + getSeatCategories(): Observable { + return this.http.get(`${this.baseUrl}sitzkategorie`) + } } diff --git a/src/app/pricelist/pricelist.component.css b/src/app/pricelist/pricelist.component.css index e69de29..4b85d6c 100644 --- a/src/app/pricelist/pricelist.component.css +++ b/src/app/pricelist/pricelist.component.css @@ -0,0 +1,42 @@ +h1 { + text-align: center; + margin-bottom: 40px; + letter-spacing: 2px; +} + +.menu-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + max-width: 1000px; + margin-left: auto; + margin-right: auto; +} + +.card { + background: #faf8ff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.card h2 { + margin-top: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.5); + padding-bottom: 10px; + margin-bottom: 15px; +} + +.item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + font-size: 1rem; +} + +.item:last-child { + border-bottom: none; +} diff --git a/src/app/pricelist/pricelist.component.html b/src/app/pricelist/pricelist.component.html index 71b129d..05ffe1c 100644 --- a/src/app/pricelist/pricelist.component.html +++ b/src/app/pricelist/pricelist.component.html @@ -1,99 +1,51 @@ - - - - - - Kino Preisliste - - - -

Kino Preisliste

- -
- -
-

🍿 Popcorn

-
Klein3,50 €
-
Mittel5,00 €
-
Groß6,50 €
-
Extra Butter1,00 €
-
- - -
-

🧀 Nachos

-
Portion4,50 €
-
Käse-Dip1,00 €
-
Salsa-Dip1,00 €
-
Guacamole1,50 €
-
- - -
-

🥤 Getränke

-
Softdrink Klein2,80 €
-
Softdrink Mittel3,50 €
-
Softdrink Groß4,20 €
-
Wasser2,50 €
-
- - -
-

🍬 Süßigkeiten

-
Schokoladentafel2,50 €
-
Gummibärchen2,20 €
-
Kindertüte3,00 €
-
+
+ +
+

🍿 Popcorn

+
Klein3,50 €
+
Mittel5,00 €
+
Groß6,50 €
+
Extra Butter1,00 €
- - + + +
+

🧀 Nachos

+
Portion4,50 €
+
Käse-Dip1,00 €
+
Salsa-Dip1,00 €
+
Guacamole1,50 €
+
+ + +
+

🥤 Getränke

+
Softdrink Klein2,80 €
+
Softdrink Mittel3,50 €
+
Softdrink Groß4,20 €
+
Wasser2,50 €
+
+ + +
+

🍬 Süßigkeiten

+
Schokoladentafel2,50 €
+
Gummibärchen2,20 €
+
Kindertüte3,00 €
+
+ + + @if (seatCategories.length > 0) { + +
+

🪑 Sitzplätze

+ @for (seatCategory of seatCategories; track seatCategory.id) { +
+ {{ seatCategory.icon }} + {{seatCategory.name}}{{getPriceDisplay(seatCategory.price)}}
+ } +
+ } +
diff --git a/src/app/pricelist/pricelist.component.ts b/src/app/pricelist/pricelist.component.ts index d359a0c..db87fef 100644 --- a/src/app/pricelist/pricelist.component.ts +++ b/src/app/pricelist/pricelist.component.ts @@ -1,4 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; +import { Sitzkategorie } from '@infinimotion/model-frontend'; +import { HttpService } from '../http.service'; +import { LoadingService } from '../loading.service'; +import { catchError, of, tap } from 'rxjs'; @Component({ selector: 'app-pricelist', @@ -6,6 +10,32 @@ import { Component } from '@angular/core'; templateUrl: './pricelist.component.html', styleUrl: './pricelist.component.css' }) -export class PricelistComponent { +export class PricelistComponent implements OnInit{ + seatCategories: Sitzkategorie[] = []; + private http=inject(HttpService); + private loading=inject(LoadingService); + + ngOnInit(): void { + this.loadSeatCategories(); + } + + private loadSeatCategories() : void { + this.loading.show(); + this.http.getSeatCategories().pipe( + tap(seatCategories => { + this.seatCategories = seatCategories.sort((a, b) => a.id - b.id); + this.loading.hide(); + }), + catchError(err => { + this.loading.showError(err); + console.error('Fehler beim Laden der Sitzkategorien', err); + return of([]); + }) + ).subscribe(); + } + + getPriceDisplay(price: number): string { + return `${(price / 100).toFixed(2)} €`; + } }