18 KiB

Raw Blame History

Pregled komponent v aplikaciji Rezervacije

Ta dokument vsebuje kratek pregled vseh komponent v aplikaciji za rezervacije restavracij, njihovo lokacijo in namen uporabe.

Osnovne komponente

1. NavigationBar

Lokacija: /src/components/NavigationBar.tsx
Namen: Glavna navigacijska vrstica za domačo stran aplikacije z gumbi za priljubljene, profil in meni.
Uporaba: Uporabite na vrhu domače strani za osnovno navigacijo po aplikaciji.

2. Footer

Lokacija: /src/components/Footer.tsx
Namen: Spodnja navigacijska vrstica z gumbi za domov, iskanje, rezervacije in profil.
Uporaba: Uporabite na dnu domače strani in strani z zgodovino rezervacij za osnovno navigacijo med glavnimi sekcijami aplikacije. Ne uporabljajte na straneh, ki imajo lastne noge (ReservationFooter, CancellationFooter) ali spodnje pripete elemente (ReservationWidget).

3. RestaurantCard

Lokacija: /src/components/RestaurantCard.tsx
Namen: Kartica za prikaz osnovnih podatkov o restavraciji na seznamu.
Uporaba: Uporabite za prikazovanje restavracij na seznamih in straneh za iskanje.

4. CategoryItem

Lokacija: /src/components/CategoryItem.tsx
Namen: Prikaz kategorije restavracije/kuhinje z ikono in besedilom.
Uporaba: Uporabite za prikaz kategorij kuhinj v horizontalnem seznamu.

5. QuickFilterButton

Lokacija: /src/components/QuickFilterButton.tsx
Namen: Gumb za hitro filtriranje restavracij po različnih kriterijih.
Uporaba: Uporabite za omogočanje hitrih filtrov na straneh s seznami restavracij.

6. SearchBar

Lokacija: /src/components/SearchBar.tsx
Namen: Vnosno polje za iskanje restavracij, lokacij ali vrst kuhinj.
Uporaba: Uporabite na domači strani ali strani za iskanje.

7. QuickFilterList

Lokacija: /src/components/QuickFilterList.tsx
Namen: Horizontalni seznam hitrih filtrov za restavracije.
Uporaba: Uporabite pod iskalno vrstico na domači strani.

8. MapButton

Lokacija: /src/components/MapButton.tsx
Namen: Gumb za prikaz restavracij na zemljevidu.
Uporaba: Uporabite na domači strani za preklapljanje na pogled zemljevida.

Lokacija: /src/components/CategoriesList.tsx
Namen: Horizontalni seznam kategorij kuhinj.
Uporaba: Uporabite na domači strani za filtriranje po vrstah kuhinj.

10. RestaurantList

Lokacija: /src/components/RestaurantList.tsx
Namen: Seznam restavracij z naslovom in možnostjo prikaza vseh.
Uporaba: Uporabite na domači strani za prikaz priporočenih restavracij.

Komponente za podrobnosti restavracije

11. RestaurantNavBar

Lokacija: /src/components/RestaurantNavBar.tsx
Namen: Navigacijska vrstica za stran s podrobnostmi restavracije z gumbi za nazaj, deljenje in priljubljene.
Uporaba: Uporabite na vrhu strani s podrobnostmi restavracije.

12. RestaurantGallery

Lokacija: /src/components/RestaurantGallery.tsx
Namen: Prikaz slike restavracije z gumbi za ogled galerije in 360° pogleda.
Uporaba: Uporabite na vrhu strani s podrobnostmi restavracije za prikaz glavne slike in dostop do več slik.

13. RestaurantInfo

Lokacija: /src/components/RestaurantInfo.tsx
Namen: Prikaz osnovnih informacij o restavraciji - ime, lokacija, ocena in značilnosti.
Uporaba: Uporabite pod galerijo na strani s podrobnostmi restavracije.

14. ActionButtons

Lokacija: /src/components/ActionButtons.tsx
Namen: Trije gumbi za klic, navigacijo in obisk spletne strani restavracije.
Uporaba: Uporabite pod osnovnimi informacijami na strani s podrobnostmi restavracije.

15. InfoAccordion

Lokacija: /src/components/InfoAccordion.tsx
Namen: Razširljiv/skrčljiv element za prikaz informacij v sekcijah.
Uporaba: Uporabite za različne sekcije podrobnosti, kot so opis, odpiralni čas in kontakt.

16. RestaurantDescription

Lokacija: /src/components/RestaurantDescription.tsx
Namen: Prikaz opisa restavracije v razširljivem elementu.
Uporaba: Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

17. OpeningHours

Lokacija: /src/components/OpeningHours.tsx
Namen: Prikaz odpiralnega časa restavracije v razširljivem elementu.
Uporaba: Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

18. ContactInfo

Lokacija: /src/components/ContactInfo.tsx
Namen: Prikaz kontaktnih podatkov restavracije v razširljivem elementu.
Uporaba: Uporabite v sekciji z informacijami na strani s podrobnostmi restavracije.

19. MenuSection

Lokacija: /src/components/MenuSection.tsx
Namen: Prikaz menija restavracije po kategorijah.
Uporaba: Uporabite na strani s podrobnostmi restavracije za prikaz ponudbe jedi.

20. Reviews

Lokacija: /src/components/Reviews.tsx
Namen: Prikaz ocen in mnenj uporabnikov o restavraciji.
Uporaba: Uporabite na strani s podrobnostmi restavracije za prikaz ocen in mnenj.

21. ReservationWidget

Lokacija: /src/components/ReservationWidget.tsx
Namen: Spodnji pritrjeni element za hitro izbiro termina in števila oseb za rezervacijo.
Uporaba: Uporabite na dnu strani s podrobnostmi restavracije za hiter začetek postopka rezervacije.

Komponente za rezervacijo

22. ReservationNavBar

Lokacija: /src/components/ReservationNavBar.tsx
Namen: Navigacijska vrstica za stran z rezervacijo z gumboma za nazaj in pomoč.
Uporaba: Uporabite na vrhu strani za rezervacijo.

23. ReservationRestaurantInfo

Lokacija: /src/components/ReservationRestaurantInfo.tsx
Namen: Prikaz osnovnih podatkov o restavraciji na strani za rezervacijo.
Uporaba: Uporabite na vrhu strani za rezervacijo, da uporabnik ve, katero restavracijo rezervira.

24. DateSelector

Lokacija: /src/components/DateSelector.tsx
Namen: Izbira datuma rezervacije z vnosnim poljem in gumbi za hitre izbire.
Uporaba: Uporabite na obrazcu za rezervacijo za izbiro datuma.

25. TimeSelector

Lokacija: /src/components/TimeSelector.tsx
Namen: Izbira ure rezervacije, razdeljena po delih dneva (kosilo, večerja).
Uporaba: Uporabite na obrazcu za rezervacijo za izbiro ure.

26. GuestCounter

Lokacija: /src/components/GuestCounter.tsx
Namen: Izbira števila oseb za rezervacijo z gumbi za povečanje in zmanjšanje.
Uporaba: Uporabite na obrazcu za rezervacijo za določitev števila gostov.

27. SpecialRequests

Lokacija: /src/components/SpecialRequests.tsx
Namen: Besedilno polje za vnos posebnih zahtev ob rezervaciji.
Uporaba: Uporabite na obrazcu za rezervacijo za vnos posebnih diet, alergij ali želja.

28. ContactForm

Lokacija: /src/components/ContactForm.tsx
Namen: Obrazec za vnos kontaktnih podatkov za rezervacijo.
Uporaba: Uporabite na obrazcu za rezervacijo za vnos imena, telefona in e-pošte.

29. ReservationSummary

Lokacija: /src/components/ReservationSummary.tsx
Namen: Povzetek podatkov o rezervaciji pred potrditvijo.
Uporaba: Uporabite na obrazcu za rezervacijo za pregled izbranih nastavitev.

30. CancellationPolicy

Lokacija: /src/components/CancellationPolicy.tsx
Namen: Prikaz pravil o odpovedi rezervacije.
Uporaba: Uporabite na obrazcu za rezervacijo za seznanitev uporabnika s pogoji odpovedi.

31. TermsAgreement

Lokacija: /src/components/TermsAgreement.tsx
Namen: Potrditveno polje za strinjanje s pogoji uporabe in pravili o zasebnosti.
Uporaba: Uporabite na obrazcu za rezervacijo pred potrditvijo.

32. ReservationFooter

Lokacija: /src/components/ReservationFooter.tsx
Namen: Spodnji pritrjeni element s povzetkom rezervacije in gumbom za potrditev.
Uporaba: Uporabite na dnu strani za rezervacijo za dokončanje postopka.

Komponente za potrditev rezervacije

37. ConfirmationNavBar

Lokacija: /src/components/ConfirmationNavBar.tsx
Namen: Navigacijska vrstica za stran s potrditvijo rezervacije z gumboma za zapiranje in deljenje.
Uporaba: Uporabite na vrhu strani za potrditev rezervacije.

38. ConfirmationSuccess

Lokacija: /src/components/ConfirmationSuccess.tsx
Namen: Komponenta za prikaz sporočila o uspešni rezervaciji z ikono in besedilom.
Uporaba: Uporabite na vrhu strani za potrditev rezervacije za jasen prikaz uspeha.

39. ReservationCard

Lokacija: /src/components/ReservationCard.tsx
Namen: Kartica za prikaz podrobnosti o potrjeni rezervaciji (restavracija, datum, čas, številka rezervacije, QR koda).
Uporaba: Uporabite na strani za potrditev rezervacije za celovit pregled rezervacije.

40. QuickActions

Lokacija: /src/components/QuickActions.tsx
Namen: Gumbi za hitre akcije (dodaj v koledar, navigacija, uredi) povezane z rezervacijo.
Uporaba: Uporabite na strani za potrditev rezervacije za hitro izvedbo pogostih akcij.

41. CancellationInfo

Lokacija: /src/components/CancellationInfo.tsx
Namen: Prikaz informacij o pravilih in pogojih za odpoved rezervacije z rokom odpovedi.
Uporaba: Uporabite na strani za potrditev rezervacije za informiranje uporabnika o pravilih odpovedi.

42. ReservationDetails

Lokacija: /src/components/ReservationDetails.tsx
Namen: Podrobnejši prikaz podatkov o rezervaciji, vključno s kontaktnimi podatki restavracije in posebnimi zahtevami.
Uporaba: Uporabite na strani za potrditev rezervacije za prikaz dodatnih informacij o rezervaciji.

43. CancellationFooter

Lokacija: /src/components/CancellationFooter.tsx
Namen: Noga s gumbom za odpoved rezervacije.
Uporaba: Uporabite na dnu strani za potrditev rezervacije za omogočanje odpovedi.

Komponente za zgodovino rezervacij

45. ReservationsNavBar

Lokacija: /src/components/ReservationsNavBar.tsx
Namen: Navigacijska vrstica za stran z zgodovino rezervacij z naslovom in gumbi za filtriranje in pomoč.
Uporaba: Uporabite na vrhu strani z zgodovino rezervacij.

46. ReservationsTabs

Lokacija: /src/components/ReservationsTabs.tsx
Namen: Zavihki za preklapljanje med prihajajočimi in preteklimi rezervacijami.
Uporaba: Uporabite pod navigacijsko vrstico na strani z zgodovino rezervacij.

47. ReservationHistoryCard

Lokacija: /src/components/ReservationHistoryCard.tsx
Namen: Kartica za prikaz podatkov o posamezni rezervaciji z možnostmi za upravljanje.
Uporaba: Uporabite za prikaz posamezne rezervacije v seznamu rezervacij.

48. ReservationsList

Lokacija: /src/components/ReservationsList.tsx
Namen: Seznam rezervacij, ki prikazuje prihajajoče ali pretekle rezervacije po skupinah.
Uporaba: Uporabite na strani z zgodovino rezervacij za prikaz rezervacij.

49. EmptyReservations

Lokacija: /src/components/EmptyReservations.tsx
Namen: Prikaz praznega stanja, ko uporabnik nima nobenih rezervacij.
Uporaba: Uporabite na strani z zgodovino rezervacij, ko ni rezervacij.

Komponente za iskanje in filtriranje

50. SearchNavBar

Lokacija: /src/components/SearchNavBar.tsx
Namen: Navigacijska vrstica za stran z iskanjem, z naslovom in gumbi za ponastavitev filtrov in pomoč.
Uporaba: Uporabite na vrhu strani za iskanje in filtriranje restavracij.

51. AdvancedSearchBar

Lokacija: /src/components/AdvancedSearchBar.tsx
Namen: Napredno iskalno polje z možnostjo čiščenja vnosa.
Uporaba: Uporabite na vrhu strani za iskanje, ko želite omogočiti iskanje po imenih restavracij ali jedi.

52. FilterHeader

Lokacija: /src/components/FilterHeader.tsx
Namen: Glava sekcije filtrov z naslovom in gumbom za ponastavitev.
Uporaba: Uporabite kot uvod v sekcijo filtrov na strani za iskanje.

53. LocationFilter

Lokacija: /src/components/LocationFilter.tsx
Namen: Filter za izbiro lokacije z vnosnim poljem in hitro izbiro priljubljenih lokacij.
Uporaba: Uporabite v sekciji filtrov za filtriranje restavracij po lokaciji.

54. CuisineFilterGrid

Lokacija: /src/components/CuisineFilterGrid.tsx
Namen: Mreža izbirnih polj za filtriranje po vrstah kuhinje.
Uporaba: Uporabite v sekciji filtrov za izbiro željenih vrst kuhinj.

55. PriceRangeFilter

Lokacija: /src/components/PriceRangeFilter.tsx
Namen: Filter za izbiro cenovnih razredov restavracij (od € do €€€€).
Uporaba: Uporabite v sekciji filtrov za filtriranje po cenovnem razredu.

56. RatingSlider

Lokacija: /src/components/RatingSlider.tsx
Namen: Drsnik za filtriranje restavracij po minimalni oceni.
Uporaba: Uporabite v sekciji filtrov za filtriranje restavracij po minimalni oceni.

57. AdditionalOptionsFilter

Lokacija: /src/components/AdditionalOptionsFilter.tsx
Namen: Skupina potrditvenih polj za dodatne možnosti filtriranja (odprto zdaj, parkirišče, ipd.).
Uporaba: Uporabite v sekciji filtrov za bolj natančno filtriranje restavracij.

58. SearchResultsHeader

Lokacija: /src/components/SearchResultsHeader.tsx
Namen: Glava sekcije rezultatov iskanja z naslovom in izbirnikom za razvrščanje.
Uporaba: Uporabite kot uvod v sekcijo rezultatov iskanja.

59. ActiveFiltersDisplay

Lokacija: /src/components/ActiveFiltersDisplay.tsx
Namen: Prikaz aktivnih filtrov in možnost njihove odstranitve.
Uporaba: Uporabite nad rezultati iskanja za prikaz in hitro odstranjevanje aplikaciranih filtrov.

60. SearchRestaurantCard

Lokacija: /src/components/SearchRestaurantCard.tsx
Namen: Razširjena kartica restavracije s podrobnostmi za prikaz v rezultatih iskanja.
Uporaba: Uporabite za prikaz posamezne restavracije v rezultatih iskanja.

61. LoadMoreButton

Lokacija: /src/components/LoadMoreButton.tsx
Namen: Gumb za nalaganje dodatnih rezultatov iskanja.
Uporaba: Uporabite na koncu seznama rezultatov iskanja za prikaz več restavracij.

Strani aplikacije

33. HomePage

Lokacija: /src/pages/HomePage.tsx
Namen: Glavna stran aplikacije s seznamom priporočenih restavracij, hitrimi filtri in kategorijami.
Uporaba: Uporabite kot začetno stran aplikacije.

34. RestaurantDetailPage

Lokacija: /src/pages/RestaurantDetailPage.tsx
Namen: Stran s podrobnimi informacijami o izbrani restavraciji.
Uporaba: Uporabite za prikaz vseh podatkov o posamezni restavraciji in za začetek rezervacije.

35. ReservationPage

Lokacija: /src/pages/ReservationPage.tsx
Namen: Stran za vnos vseh podatkov, potrebnih za rezervacijo.
Uporaba: Uporabite za dokončanje rezervacije po izbiri restavracije.

36. ConfirmationPage

Lokacija: /src/pages/ConfirmationPage.tsx
Namen: Stran za prikaz potrditve uspešno opravljene rezervacije s podrobnostmi in možnostmi za upravljanje.
Uporaba: Prikaže se po uspešni potrditvi rezervacije in omogoča upravljanje z rezervacijo.

37. ReservationsHistoryPage

Lokacija: /src/pages/ReservationsHistoryPage.tsx
Namen: Stran za prikaz zgodovine rezervacij s funkcijami za upravljanje z rezervacijami.
Uporaba: Omogoča pregled vseh prihajajočih in preteklih rezervacij ter njihovo upravljanje.

50. SearchPage

Lokacija: /src/pages/SearchPage.tsx
Namen: Stran za podrobno iskanje in filtriranje restavracij po različnih kriterijih.
Uporaba: Omogoča uporabnikom naprednejše iskanje restavracij po imenu, lokaciji, vrsti kuhinje, cenovnem razredu, oceni in drugih lastnostih.

Glavna aplikacija

44. App

Lokacija: /src/App.tsx
Namen: Glavna komponenta aplikacije, ki upravlja navigacijo med stranmi.
Uporaba: Služi kot vstopna točka in vsebuje navigacijski sistem celotne aplikacije.

Uporaba tipov

Aplikacija uporablja tipsko varne komponente z uporabo TypeScript. Vsi tipi so definirani v datoteki /src/types/index.ts in vključujejo:

Restaurant: Osnovni podatki o restavraciji
RestaurantDetail: Razširjeni podatki o restavraciji
OpeningHour: Odpiralni čas
Feature: Značilnost restavracije
MenuSection: Sekcija menija
Dish: Jed na meniju
Review: Mnenje uporabnika
Category: Kategorija kuhinje
NavItem: Element navigacije
TimeSlot: Termin za rezervacijo

Smernice za uporabo

Konsistentnost v dizajnu: Vse komponente so oblikovane v skladu z enotnim dizajnom, uporabite jih takšne, kot so, za ohranitev konsistentnosti.
Dostopnost: Komponente vsebujejo ustrezne ARIA atribute za boljšo dostopnost. Pri uporabi jih ohranite.
Odzivnost: Komponente so prilagojene za mobilne naprave, vendar se prikažejo v fiksni velikosti na večjih zaslonih.
Material ikone: Komponente uporabljajo Material Icons knjižnico, poskrbite, da je vključena v projekt.
TailwindCSS: Stiliziranje temelji na TailwindCSS, poskrbite, da je pravilno konfiguriran v projektu.

Navigacija med stranmi

Aplikacija vsebuje naslednje navigacijske poti:

Domov → Podrobnosti restavracije: Ob kliku na kartico restavracije
Podrobnosti restavracije → Rezervacija: Ob kliku na gumb "Rezerviraj" v ReservationWidget komponenti
Rezervacija → Potrditev rezervacije: Po uspešno izpolnjenem rezervacijskem obrazcu
Potrditev rezervacije → Domov: Ob kliku na gumb za zapiranje
Domov → Zgodovina rezervacij: Z navigacijo preko Footer komponente
Zgodovina rezervacij → Podrobnosti rezervacije: Ob kliku na "Uredi" pri posamezni rezervaciji
Podrobnosti rezervacije → Domov: Z navigacijo preko gumba za nazaj

Koda za implementacijo navigacije je del NavigationContext in se uporablja preko navigateTo funkcije v App.tsx. Na primer:

const { navigateTo } = useContext(NavigationContext);

const handleButtonClick = () => {
  navigateTo('pageName'); // kjer je pageName ena izmed: 'home', 'detail', 'reservation', 'confirmation', 'reservations'
};

18 KiB Raw Blame History