238 lines
9.4 KiB
Plaintext
238 lines
9.4 KiB
Plaintext
----- 2026-02-14 05:35:18 -----------------------------------------------------
|
||
Si senior Vue 3 + TypeScript architekt. Robím aplikáciu Nutrio (nutrition tracker).
|
||
Backend API v PHP je hotové. Frontend má zatiaľ iba login obrazovku, kde sa pri prihlásení automaticky zaregistruje používateľ.
|
||
Po prihlásení chcem vnútornú časť aplikácie (authenticated area) s jednoduchým, čistým SaaS dizajnom.
|
||
|
||
Ciele:
|
||
1) Navrhni routing štruktúru (Vue Router) pre verejnú časť (login) a privátnu časť (app), vrátane guards.
|
||
2) Navrhni layouty:
|
||
- AuthLayout (pre login) uz je spraveny v frontend\src\views\AuthView.vue
|
||
- AppLayout (sidebar na desktope, bottom tabs na mobile; aspoň navrhni komponentovú štruktúru)
|
||
3) Navrhni pages a komponenty pre minimálne:
|
||
- Today (diár pre konkrétny deň): raňajky/obed/večera; výber jedálnička pre čas dňa; zobrazenie súčtov (kcal, B/S/T)
|
||
- Meals (knižnica jedálničkov): list + filter podľa meal_type; detail/edit jedálnička s položkami (ingredient + grams)
|
||
- Ingredients (databáza surovín): list + create/edit
|
||
- Stats (základný prehľad; môže byť placeholder)
|
||
- Settings (logout)
|
||
4) Výpočty totals nerobím cez SQL VIEW – počítaj ich na FE pri zobrazení (alebo cez 1 jednoduchú helper funkciu).
|
||
Makrá sú uložené na 100g: protein_g_100, carbs_g_100, sugar_g_100, fat_g_100, fiber_g_100.
|
||
Pre položku s grams: macro = grams/100 * macro_100.
|
||
kcal = protein*4 + carbs*4 + fat*9. (Sugar je podmnožina carbs, neráta sa zvlášť do kcal.)
|
||
5) Navrhni štruktúru projektu:
|
||
- frontend/src/router
|
||
- frontend/src/views
|
||
- frontend/src/components
|
||
- frontend/src/stores (Pinia)
|
||
- frontend/src/utils (nutrition math)
|
||
6) Daj konkrétny návrh názvov súborov a exportov + ukážku kódu:
|
||
- router index.ts s routes + guard
|
||
- auth store (token/user)
|
||
- nutrition utils (computeMealTotals, computeDayTotals)
|
||
- typy (Ingredient, Meal, MealItem, DiaryEntry)
|
||
|
||
Preferencie:
|
||
- Vue 3 + Composition API + TypeScript
|
||
- Pinia
|
||
- Vue Router
|
||
- UI môže byť čisté bez knižnice, alebo minimalisticky (napr. jednoduché CSS – rozhodni a drž konzistentne a pokracuj v pouzivani suboru frontend/src/assets/css/style.css).
|
||
- Použi slovenské názvy v UI (Raňajky, Obed, Večera), ale kľúče v kóde nech sú anglické (breakfast/lunch/dinner).
|
||
Výstup: konkrétny návrh + ukážky kódu, nie všeobecné rady.
|
||
|
||
----- 2026-02-14 07:16:25 -----------------------------------------------------
|
||
dopln kluce pre UI texty pre preklad, pre kluce pouzivaj anglictinu, dopln potom aj vsetky preklady vo frontend/src/locales/*.json
|
||
|
||
----- 2026-02-14 08:05:38 -----------------------------------------------------
|
||
na zobrazeni app/ingredients sprav aby formular pre pridanie novej suroviny sa zobrazil az ked kliknem na tlacitko Nova surovina, a po uspesnom ulozeni ten formular pre pridanie novej suroviny skry, nezabudni vynulovat udaje vo formulari po ulozeni
|
||
|
||
----- 2026-02-14 08:08:33 -----------------------------------------------------
|
||
dopln jemnejší UX flow (toasty, confirm modaly pri delete, loading/error states per card)
|
||
|
||
----- 2026-02-14 12:44:33 -----------------------------------------------------
|
||
v zozname surovin app/ingredients sa zobrazuju len bielkoviny, sacharidy a tuky, pridaj tam aj vlakninu,
|
||
|
||
zaroven to chcem farebne rozlisit, urob to ako farebny stitok, ze bielkoviny budu modre, sacharidy oranzove, tuky cervene (mierne tlmena) a vlaknina tmavsia zelena
|
||
|
||
podobne farebne to rozlis aj na denndom prehlade app/today v sucte dna a tiez tam pridaj vlakninu
|
||
|
||
v zozname jedalnickov app/meals je pri kazdom len pocet kalorii, pridaj tam tiez sumar makrozivin (bielkoviny, sacharidy, tuky a vlaknina)
|
||
|
||
GPT upravil takto:
|
||
Rozšír UI aplikácie Nutrio nasledovne:
|
||
|
||
1) Ingredients list (route: /app/ingredients)
|
||
- Aktuálne sa zobrazujú len bielkoviny, sacharidy a tuky.
|
||
- Pridaj zobrazenie vlákniny (fiber_g_100).
|
||
- Makrá zobraz ako malé farebné štítky (badge), nie ako obyčajný text.
|
||
|
||
Farby štítkov:
|
||
- Bielkoviny (protein) → modrá #3B82F6
|
||
- Sacharidy (carbs) → oranžová #F59E0B
|
||
- Tuky (fat) → tlmená červená #EF4444
|
||
- Vláknina (fiber) → tmavšia zelená #10B981
|
||
|
||
Štýl badge:
|
||
- malé zaoblené pill tvary
|
||
- jemné svetlé pozadie (napr. 10–15% opacity farby)
|
||
- text farba plná farba
|
||
- formát: B 12g / S 24g / T 5g / V 6g
|
||
|
||
2) Today page (route: /app/today)
|
||
- V dennom súčte pridaj vlákninu.
|
||
- Makrá zobraz rovnakým farebným štýlom ako v ingredients.
|
||
- Kalórie nech ostanú neutrálne (tmavá šedá), vizuálne dominantné veľkosťou písma, nie farbou.
|
||
|
||
Layout:
|
||
- hore veľké číslo kcal
|
||
- pod tým horizontálne makrá ako farebné štítky
|
||
|
||
3) Meals list (route: /app/meals)
|
||
- Aktuálne sa zobrazuje len počet kalórií.
|
||
- Pridaj aj súhrn makier (protein, carbs, fat, fiber).
|
||
- Zobraz ich rovnakým badge systémom pre konzistentnosť.
|
||
- Kcal nech je oddelené (napr. nad makrami alebo výraznejšie písmo).
|
||
|
||
4) Konzistentnosť:
|
||
- Použi jeden spoločný komponent napr. <MacroBadge />
|
||
- Nepoužívaj sýte plné farebné pozadia.
|
||
- Použi minimalistický SaaS štýl.
|
||
- Farby makier musia byť identické naprieč celou aplikáciou.
|
||
- Nepridávaj nové knižnice.
|
||
|
||
Výsledok:
|
||
Čistý, konzistentný, moderný vzhľad bez prehnaných farieb.
|
||
|
||
|
||
----- 2026-02-14 13:35:31 -----------------------------------------------------
|
||
V koreňovom adresári projektu vytvor Windows batch skript build.bat.
|
||
|
||
Štruktúra projektu:
|
||
- frontend/ (Vue 3 + Vite) -> build do frontend/dist
|
||
- backend/ (PHP) -> web root je backend/public a PHP súbory v public používajú relatívne cesty typu ../src/Init.php
|
||
=> Musíme zachovať štruktúru, aby v dist platilo: dist/public/.. = dist/
|
||
|
||
Cieľ:
|
||
- v koreňi vytvoriť root/dist tak, aby som na serveri nastavil DocumentRoot na dist/public
|
||
- relatívne cesty v PHP z dist/public na dist/src musia fungovať (napr. dist/public/index.php -> ../src/Init.php)
|
||
- frontend (Vite) nasadiť ako statické súbory do dist/public/app (aby nekolidoval s backend/public/index.php)
|
||
|
||
Výsledná štruktúra dist:
|
||
- dist/public/ (WEB ROOT) = kópia backend/public
|
||
- dist/src/ = kópia backend/src
|
||
- dist/vendor/ = kópia backend/vendor (ak existuje)
|
||
- dist/config/ = kópia backend/config (ak existuje)
|
||
- dist/… = ostatné potrebné backend súbory/adresáre z backend/ (mimo public)
|
||
- dist/public/app/ = Vite build (obsah frontend/dist)
|
||
|
||
Požiadavky na build.bat:
|
||
|
||
1) Vyčistenie:
|
||
- ak existuje root/dist, zmaž ho celý
|
||
- vytvor root/dist
|
||
|
||
2) Frontend build (nepoužívaj npm ci):
|
||
- cd frontend
|
||
- spusti "npm install"
|
||
- spusti "npm run build"
|
||
- ak build zlyhá, ukonči skript s exit code 1
|
||
- vráť sa do root
|
||
|
||
3) Kopírovanie backend do dist:
|
||
- skopíruj backend/public -> dist/public
|
||
- skopíruj všetko potrebné z backend/ do dist/ TAK, aby platili relatívne cesty z dist/public na dist/src atď.
|
||
Konkrétne:
|
||
- kopíruj backend/src -> dist/src (ak existuje)
|
||
- kopíruj backend/vendor -> dist/vendor (ak existuje)
|
||
- kopíruj ďalšie bežné backend adresáre (napr. config, templates, storage…) do dist/ na rovnakú úroveň ako public
|
||
- NEkopíruj backend/public druhýkrát mimo dist/public
|
||
- NEkopíruj: .git, .vscode, tests, node_modules, frontend, dist
|
||
|
||
4) Skopírovanie Vite buildu do dist/public:
|
||
- vytvor dist/public
|
||
- skopíruj obsah frontend/dist -> dist/public
|
||
|
||
5) .env:
|
||
- ak existuje backend/.env.production, skopíruj ho do dist/.env
|
||
- inak nič
|
||
|
||
6) Robustnosť:
|
||
- použi robocopy na kopírovanie (rýchle a s exclude)
|
||
- kontroluj ERRORLEVEL po každom kritickom kroku a pri chybe ukonči skript s exit code 1
|
||
- používaj echo logy (kroky + DONE)
|
||
|
||
7) Výstup:
|
||
- na konci vypíš, že DocumentRoot má byť nastavený na dist/public a frontend je v dist/public
|
||
|
||
Dodaj kompletný obsah súboru build.bat.
|
||
|
||
----- 2026-02-15 17:05:23 -----------------------------------------------------
|
||
Úloha:
|
||
V projekte vytvor plne funkčnú konfiguráciu PWA.
|
||
|
||
1️⃣ Manifest
|
||
Vytvor súbor: frontend/public/manifest.json
|
||
Obsah musí:
|
||
- byť validný JSON
|
||
obsahovať:
|
||
- name
|
||
- short_name
|
||
- start_url
|
||
- display = "standalone"
|
||
- background_color
|
||
- theme_color
|
||
- icons pole
|
||
Použi tieto hodnoty:
|
||
{
|
||
"name": "Nutrio",
|
||
"short_name": "Nutrio",
|
||
"start_url": "/",
|
||
"display": "standalone",
|
||
"background_color": "#ffffff",
|
||
"theme_color": "#22c55e"
|
||
}
|
||
2️⃣ Ikony
|
||
Zdrojový obrázok:
|
||
frontend/public/Nutrio.600.png
|
||
Z neho vytvor PNG ikony do adresára:
|
||
frontend/public/icons/
|
||
Vygeneruj tieto veľkosti:
|
||
16x16
|
||
32x32
|
||
48x48
|
||
180x180 (apple touch icon)
|
||
192x192 (PWA required)
|
||
512x512 (PWA required)
|
||
Požiadavky:
|
||
zachovať pomer strán
|
||
zachovať priehľadnosť
|
||
nepoužívať žiadne orezávanie
|
||
výstupné názvy:
|
||
icon-16.png
|
||
icon-32.png
|
||
icon-48.png
|
||
icon-180.png
|
||
icon-192.png
|
||
icon-512.png
|
||
3️⃣ Manifest icons sekcia
|
||
Pole icons musí obsahovať iba:
|
||
[
|
||
{
|
||
"src": "/icons/icon-192.png",
|
||
"sizes": "192x192",
|
||
"type": "image/png"
|
||
},
|
||
"src": "/icons/icon-512.png",
|
||
"sizes": "512x512",
|
||
}
|
||
]
|
||
4️⃣ Úprava index.html
|
||
Do frontend/index.html pridaj do <head>:
|
||
<link rel="manifest" href="/manifest.json">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16.png">
|
||
<link rel="apple-touch-icon" href="/icons/icon-180.png">
|
||
<meta name="theme-color" content="#22c55e">
|
||
5️⃣ Výstup
|
||
nevysvetľuj
|
||
nevypisuj komentáre
|
||
vytvor alebo uprav iba potrebné súbory
|
||
ak adresár icons neexistuje, vytvor ho |