- Added Google Maps LocationPicker with autocomplete - Added location, locationName, latitude, longitude to Activity model - Extended Activity model with gender, minAge, maxAge, price fields - Updated activity creation form with custom styled inputs - Added map view on activity detail page - Added 'Open in Maps' button with deep linking - Custom styled autocomplete dropdown - Updated USER_STORIES.md with completed tasks
2.9 KiB
2.9 KiB
Zmeny v systéme lokácií aktivít
Prehľad zmien
Namiesto výberu športoviska zo zoznamu teraz používatelia zadávajú adresu pomocou Google Maps.
Implementované zmeny
1. Databázová schéma (Prisma)
- Pridané polia do
Activitymodelu:location(String) - plná adresa z Google MapslocationName(String?) - voliteľný vlastný názov miestalatitude(Float?) - GPS súradnicalongitude(Float?) - GPS súradnica
venueIdje teraz voliteľné (pre spätnú kompatibilitu)
2. Backend API
- Aktualizovaná validácia v
/api/activities:locationje povinné polelocationName,latitude,longitudesú voliteľnévenueIdje teraz voliteľné
3. Frontend komponenty
LocationPicker komponent (components/LocationPicker.tsx)
- Google Maps Places Autocomplete pre vyhľadávanie adries
- Automatické získanie GPS súradníc
- Podpora pre Slovensko (country: "sk")
- Fallback na manuálny vstup ak Google Maps API nie je dostupné
Formulár na vytvorenie aktivity (activities/create/page.tsx)
- Odstránený výber športoviska
- Pridaný LocationPicker komponent
- Validácia adresy pred odoslaním
Detail aktivity (activities/[id]/page.tsx)
- Zobrazenie adresy namiesto športoviska
- Zobrazenie vlastného názvu miesta (ak je zadaný)
- Mapa s GPS súradnicami (ak sú dostupné)
Zoznam aktivít (activities/page.tsx)
- Zobrazenie adresy alebo názvu miesta v karte aktivity
Nastavenie Google Maps API
Pre plnú funkcionalitu je potrebný Google Maps API kľúč:
- Postupujte podľa návodu v súbore
GOOGLE_MAPS_SETUP.md - Pridajte kľúč do
.env:NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="váš-api-kľúč" - Reštartujte aplikáciu
Bez Google Maps API
Aplikácia funguje aj bez API kľúča:
- Používateľ zadá adresu manuálne do textového poľa
- GPS súradnice nebudú dostupné
- Mapa sa nezobrazí v detaile aktivity
Migrácia existujúcich dát
Existujúce aktivity v databáze majú stále nastavené venueId, ktoré zostáva zachované pre spätnú kompatibilitu. Pri zobrazení aktivít sa preferuje location pred venue.
Pre migráciu starých dát by bolo potrebné:
- Načítať všetky aktivity s
venueId - Skopírovať adresu z
venuedolocation - Voliteľne použiť Geocoding API na získanie GPS súradníc
Technické detaily
TypeScript typy
google-maps.d.ts- definície pre Google Maps API- Aktualizované interface pre
Activityvo všetkých komponentoch
Závislosti
- Žiadne nové NPM balíčky
- Google Maps sa načítava priamo cez script tag
- Používa sa natívny Places Autocomplete API
Testovanie
- Vytvorte novú aktivitu
- Začnite písať adresu (napr. "Bratislava")
- Vyberte adresu zo zoznamu návrhov
- Overte že sa zobrazuje náhľad vybranej lokácie
- Odošlite formulár
- V detaile aktivity skontrolujte zobrazenie adresy a mapy