76 lines
2.6 KiB
Markdown
76 lines
2.6 KiB
Markdown
# Krok 10 - Wizard - Vizuál a Assety (Krok 4)
|
|
|
|
## Kontext projektu
|
|
V tomto kroku si používateľ vyberá vizuálny štýl webu a nahráva svoje assety (logo, obrázky). MVP podporuje asynchrónny upload súborov.
|
|
|
|
## Pred implementáciou si preštuduj
|
|
- `docs/wizard.md` - Sekcia 5 (Krok 4 - Vizualny styl a assety).
|
|
- `docs/architecture.md` - Sekcia 13 (Bezpečnostné minimum).
|
|
|
|
## Cieľ
|
|
Implementovať výber vizuálneho štýlu a bezpečný asynchrónny upload obrázkov.
|
|
|
|
## Požadované zmeny
|
|
1. Na frontende (`index.html` + `wizard.js`):
|
|
- Výber štýlu (Minimal, Modern, Premium, atď.).
|
|
- Výber farebnej schémy (preddefinované palety).
|
|
- UI pre nahrávanie loga a obrázkov (file input).
|
|
- Asynchrónne odoslanie súboru na API akciu `uploadAsset`.
|
|
- Zobrazenie náhľadu nahraného obrázka.
|
|
2. Na backende (`ajax.php`):
|
|
- Implementácia akcie `uploadAsset`.
|
|
- Striktná validácia:
|
|
- MIME typ (JPG, PNG, WEBP, SVG).
|
|
- Prípona súboru.
|
|
- Maximálna veľkosť (napr. 2MB).
|
|
- Ochrana proti path traversal.
|
|
- Ukladanie do `exports/<project_id>/assets/images/`.
|
|
- Vrátenie cesty k súboru.
|
|
3. Uloženie vizuálnych nastavení cez `saveStep`.
|
|
|
|
## Implementačné pravidlá
|
|
- Nahrané súbory nesmú byť spustiteľné.
|
|
- Každý projekt má vlastný podadresár v `exports/`.
|
|
- Používaj `FileStorage` pre správu ciest.
|
|
|
|
## Súbory ktoré je potrebné vytvoriť
|
|
Žiadne.
|
|
|
|
## Súbory ktoré je potrebné upraviť
|
|
- `public/index.html` (DOM pre Krok 4)
|
|
- `public/js/wizard.js` (logika pre Krok 4 + upload)
|
|
- `public/ajax.php` (akcia `uploadAsset` + validácia kroku 4)
|
|
|
|
## API a dátové štruktúry
|
|
Akcia `uploadAsset`:
|
|
- Request: `FormData` (file, project_id).
|
|
- Response: `{"success": true, "data": {"path": "..."}}`.
|
|
|
|
## Frontend požiadavky
|
|
- Progress bar alebo spinner počas uploadu.
|
|
- Možnosť zadať alt text k obrázku.
|
|
|
|
## Backend požiadavky
|
|
- Bezpečné ukladanie súborov (unikátne názvy alebo bezpečné sanitizovanie).
|
|
- Kontrola `GD` alebo `finfo` pre MIME typ.
|
|
|
|
## Testovací scenár
|
|
1. Vyber vizuálny štýl.
|
|
2. Nahraj JPG súbor ako logo. Over, či sa zobrazí náhľad.
|
|
3. Skús nahrať `.php` alebo `.exe` súbor a over, či ho backend odmietne.
|
|
4. Over, či sa súbor fyzicky nachádza v `exports/<project_id>/assets/images/`.
|
|
|
|
## Definition of Done
|
|
- Vizuálne nastavenia sú uložené.
|
|
- Assety sú bezpečne nahrané a priradené k projektu.
|
|
- Validácia súborov funguje správne.
|
|
|
|
## Obmedzenia
|
|
- Nepoužívaj externé knižnice na upload (napr. Dropzone.js).
|
|
|
|
## Výstup
|
|
- zoznam vytvorených súborov
|
|
- zoznam upravených súborov
|
|
- stručné zhrnutie vykonaných zmien
|
|
- prípadné otvorené problémy
|