P4 — Seat Map (adresné sezení)
Účel obrazovky
Interaktivní plán sálu, kde si uživatel vybírá konkrétní sedadla. Klíčová obrazovka pro adresné akce — musí být přehledná, rychle reagovat na gesta a jasně komunikovat cenové kategorie a dostupnost.
Content Priority
- Event info header — název akce, datum, čas, venue + sál (kompaktní, 1–2 řádky) App Bar / Top Navigation
- Countdown timer — vizuální progress bar s odpočtem (typicky 15–20 min), start při prvním výběru sedadla Countdown Timer
- SVG/Canvas viewport — vykreslený plán sálu s jednotlivými sedadly, scéna nahoře, vchody označené Seat Map Viewport
- Barevné kódování cenových kategorií — min. 4 barvy + šedá pro vyprodáno, jasná vizuální hierarchie Category Seat Legend
- Sekce sálu — přízemí, balkón, lóže vizuálně oddělené čárami a labely Seat Map Viewport
- Legenda — cenové kategorie s barvami a cenami, toggle viditelnost per kategorie Category Seat Legend
- Selected seats chips — horizontální strip pod header s vybranými sedadly jako chips (řada + sedadlo + cena), tap → deselect Chip / Filter Button
- Bottom bar — počet vybraných sedadel, celková cena, CTA „Pokračovat do košíku" CTA Sticky BarPrimary Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na volné sedadlo | Bottom sheet s detailem sedadla | Detail: řada, číslo, kategorie, cena, CTA „Přidat" |
| Tap na „Přidat" v bottom sheet | Přidání do výběru | Sedadlo změní barvu na „selected", chip se přidá do stripu, celková cena se aktualizuje |
| Tap na selected chip | Deselect sedadla | Sedadlo se vrátí do původní barvy, chip zmizí, cena se přepočítá |
| Pinch-to-zoom | Zoom in/out sálu | Plynulý zoom s min/max limity |
| Double tap | Zoom in na danou oblast | Animovaný zoom 2× |
| Pan (tah jedním prstem) | Posun viewport | Přesouvání po sálu |
| „Pokračovat do košíku" | Přechod na košík | P5 — Košík |
| Timer warning < 2 min | Inline warning | X5 — Warning timer |
| Timer expiry (0:00) | Timeout error | X4 — Chyba timeout |
| Tap na legendu kategorii | Toggle viditelnost | Sedadla dané kategorie se ztlumí/zobrazí |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading | Načítání plánu sálu | Centered spinner + „Načítáme plán sálu…" |
| Loaded — žádný výběr | Sál zobrazen, 0 vybraných sedadel | CTA „Pokračovat" disabled, timer neběží |
| Loaded — výběr | 1+ sedadel vybráno | Timer běží, CTA „Pokračovat do košíku (X Kč)" active |
| Timer warning | Zbývá < 2 min | Timer pulsuje červeně, warning banner |
| Timer expired | Čas vypršel | Redirect na X4, sedadla uvolněna |
| Max limit reached | Dosažen max. počet vstupenek | Toast „Maximum X vstupenek per objednávku", další tapping ignorován |
| Error | Sál se nepodařilo načíst | Retry CTA |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Sedadlo obsazeno během výběru jiným uživatelem | Toast „Sedadlo X bylo právě obsazeno", automatický deselect + vizuální refresh daného sedadla |
| Velmi velký sál (2000+ sedadel) | Výchozí zoom = celý sál, progressive rendering, lazy load sedadel při zoom |
| Sál má nestandardní tvar (L-tvar, kruhovitý) | SVG musí být flexibilní, ne grid-based |
| Uživatel vybere sedadla ve dvou různých sekcích (přízemí + balkón) | Povoleno — chips zobrazují sekci u každého sedadla |
| Countdown timer běží i na pozadí (app minimize) | Timer pokračuje server-side, při návratu sync s API |
| Ztráta připojení během výběru | Offline banner, vybraná sedadla v lokálním stavu, retry při obnovení |
| Sedadlo pro vozíčkáře | Speciální ikona (♿), bottom sheet ukazuje info o bezbariérovosti |
| Lóže (skupina sedadel prodávaných jako celek) | Tap na lóži vybere všechna sedadla v ní, zobrazit „Lóže pro X osob" |
Mobilní patterny a odlišení od webu
Co děláme zásadně jinak
- Grafický SVG sál — web Colosseum používá textový grid (řady písmen a čísel), MA bude mít vizuální plán sálu s reálným rozmístěním sedadel (jako CineStar)
- Pinch-to-zoom — nativní gesto pro zoom, web nemá (jen +/- buttony)
- Bottom sheet pro detail sedadla — na webu tooltip, na mobilu nativní bottom sheet s více prostorem pro info
- Chips pro vybraná sedadla — horizontální scroll strip, na webu toto chybí
Co přebíráme z webu
- Barevné kódování cenových kategorií
- Legenda s cenami
Aplikované patterny
- iOS:
UIScrollViewsminimumZoomScale/maximumZoomScale,UIPanGestureRecognizer,.sheet()modifier pro bottom sheet - Android:
TransformableStatev Compose pro zoom/pan,BottomSheetScaffold(Material 3),SnackbarHostpro toasty
API Data
GET/cashdesk/event/{eventId}GET/cashdesk/event/matrix/{eventId}GET/cashdesk/event/state/{eventId}POST/cart/ticket/add/eventGET/cart| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Seat map data | GET /cashdesk/event/{eventId} | Otevření seat mapy | Vrací HallSeatOnline[] s x1,y1,x2,y2 koordináty, barvou (#AARRGGBB), rotací |
| Maticové rozložení | GET /cashdesk/event/matrix/{eventId} | Alternativní view | Maticový layout sálu |
| Refresh stavů | GET /cashdesk/event/state/{eventId} | Polling (5–10s) | Jen stavy sedadel (ItemState enum), ne celý layout |
| Přidání do košíku | POST /cart/ticket/add/event | Tap „Pokračovat" | Odešle pole ticket_id selected sedadel |
| Aktuální košík | GET /cart | Po přidání | Vrací aktualizovaný košík s validity (countdown) |
CoreAPI poznatek — Seat map formát
Sedadla jsou JSON obdélníky s x1, y1, x2, y2 (souřadnice rohů), color (#AARRGGBB), rotation (stupně clockwise). Sály mají sekce (HallSection) s tvary: Rectangle, Triangle, Quadrilateral, Ellipse. Multi-seats: seat_group_id kladná = dvojsedadlo (vybírat společně), záporná = single. Klient renderuje Canvas/SVG z těchto JSON dat.
Reference — Aktuální web
SCR-WEB-29Textový grid sálu — přízemí + balkón, barevná legenda, zoom buttony
SCR-WEB-303 vybraná sedadla na balkónu, celková cena v bottom barReference — CineStar benchmark
SCR-CS-03Grafický plán sálu s barevným kódováním, stepper, bottom sheet
SCR-CS-06Legenda sedaček — standardní, VIP, vozíčkáře, lehátko, vybrané, obsazené
SCR-CS-083 vybraná sedadla jako chips, CTA 'Pokračovat' active
SCR-CS-09Warning toast — maximální počet sedadel je 6Inspirace z CineStar
CineStar má nejlepší referenci pro seat map v českém kontextu: grafický SVG sál, stepper progress, chips pro výběr, bottom sheet s detailem sedadla a jasná legenda. Přebíráme většinu UX patternů, ale přidáváme countdown timer (CineStar ho nemá viditelně).