71 lines
2.5 KiB
Markdown
71 lines
2.5 KiB
Markdown
# Krok 06 - Kostra Wizardu (Frontend UI)
|
|
|
|
## Kontext projektu
|
|
Používateľské rozhranie WebWizardu je postavené na Vanilla JavaScript bez použitia frontend frameworkov. Celá interakcia prebieha v rámci jednej stránky (`index.html`).
|
|
|
|
## Pred implementáciou si preštuduj
|
|
- `docs/wizard.md` - Sekcia 1 (Prehľad wizardu).
|
|
- `docs/architecture.md` - Sekcia 8 (Identifikácia používateľa).
|
|
|
|
## Cieľ
|
|
Vytvoriť základnú HTML štruktúru, CSS štýly a JavaScriptovú logiku pre navigáciu v rámci wizardu a inicializáciu používateľskej relácie.
|
|
|
|
## Požadované zmeny
|
|
1. Vytvorenie `public/index.html` s:
|
|
- Kontajnerom pre jednotlivé kroky wizardu.
|
|
- Navigačnými prvkami (Späť / Pokračovať).
|
|
- Indikátorom progresu.
|
|
2. Vytvorenie `public/css/wizard.css` pre základný layout a vizuálnu stránku wizardu.
|
|
3. Vytvorenie `public/js/wizard.js` s logikou:
|
|
- Kontrola `localStorage.getItem('ww_user_id')`.
|
|
- Volanie `initSession` cez AJAX, ak ID chýba.
|
|
- Správa stavu (aktuálny krok).
|
|
- Funkcie `nextStep()` a `prevStep()`.
|
|
- Funkcia `showStep(n)` pre zobrazenie správneho kontajnera v DOM.
|
|
|
|
## Implementačné pravidlá
|
|
- Používaj moderný Vanilla JS (ES6+).
|
|
- AJAX volania realizuj pomocou `fetch`.
|
|
- Nepoužívaj žiadne externé knižnice (jQuery, Bootstrap, atď.).
|
|
- Layout musí byť responzívny.
|
|
|
|
## Súbory ktoré je potrebné vytvoriť
|
|
- `public/index.html`
|
|
- `public/css/wizard.css`
|
|
- `public/js/wizard.js`
|
|
|
|
## Súbory ktoré je potrebné upraviť
|
|
Žiadne.
|
|
|
|
## API a dátové štruktúry
|
|
Používa API akciu `initSession` z Kroku 04.
|
|
|
|
## Frontend požiadavky
|
|
- Čistý a moderný dizajn.
|
|
- Plynulé prechody medzi krokmi (môže byť jednoduchý show/hide).
|
|
- Ukladanie `ww_user_id` do `localStorage`.
|
|
|
|
## Backend požiadavky
|
|
- API musí byť dostupné na `ajax.php`.
|
|
|
|
## Testovací scenár
|
|
1. Otvor `public/index.html` v prehliadači.
|
|
2. Over v DevTools (Application -> Local Storage), či sa vygenerovalo `ww_user_id`.
|
|
3. Vyskúšaj klikanie na tlačidlá pre prechod medzi krokmi.
|
|
4. Over, či sa vizuálne mení obsah podľa aktuálneho kroku.
|
|
|
|
## Definition of Done
|
|
- Kostra wizardu je funkčná.
|
|
- Používateľ je identifikovaný a relácia je inicializovaná.
|
|
- Prepínanie krokov funguje správne.
|
|
|
|
## Obmedzenia
|
|
- Žiadny build proces (žiadne Webpack, Vite, atď.).
|
|
- Všetko v rámci priečinka `public/`.
|
|
|
|
## Výstup
|
|
- zoznam vytvorených súborov
|
|
- zoznam upravených súborov
|
|
- stručné zhrnutie vykonaných zmien
|
|
- prípadné otvorené problémy
|