22 KiB

Raw Permalink 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, ki vsebuje naslov strani in gumbe za hitro ponastavitev filtrov in dostop do pomoči.
Uporaba: Uporabite kot glavno navigacijo na vrhu strani za iskanje in filtriranje.

51. AdvancedSearchBar

Lokacija: /src/components/AdvancedSearchBar.tsx
Namen: Iskalno polje s podporo za vnos in čiščenje poizvedbe, s poudarjeno vizualno podobo.
Uporaba: Uporabite kot glavni vnos za iskalno poizvedbo na strani za iskanje.

52. FilterHeader

Lokacija: /src/components/FilterHeader.tsx
Namen: Naslovni del filtrirne sekcije, ki prikazuje naslov "Filtri" in gumb za ponastavitev vseh filtrov.
Uporaba: Uporabite kot uvod v sklop filtrov na strani za iskanje.

53. LocationFilter

Lokacija: /src/components/LocationFilter.tsx
Namen: Kompleksna komponenta za filtriranje po lokaciji, ki združuje vnosno polje in hitre izbire priljubljenih lokacij.
Uporaba: Uporabite za omogočanje različnih načinov določanja lokacije pri iskanju restavracij.

54. CuisineFilterGrid

Lokacija: /src/components/CuisineFilterGrid.tsx
Namen: Vizualno privlačna mreža za izbiro vrst kuhinje z ikonami in besedilom, podpira večkratno izbiro.
Uporaba: Uporabite za filtriranje restavracij po vrstah kuhinje.

55. PriceRangeFilter

Lokacija: /src/components/PriceRangeFilter.tsx
Namen: Filter za izbiro enega ali več cenovnih razredov (€, €€, €€€, €€€€).
Uporaba: Uporabite za filtriranje restavracij po cenovnem razredu.

56. RatingSlider

Lokacija: /src/components/RatingSlider.tsx
Namen: Drsnik za izbiro minimalne ocene pri filtriranju, z natančnim prikazom trenutno izbrane vrednosti.
Uporaba: Uporabite za filtriranje restavracij glede na oceno (od 0 do 5).

57. AdditionalOptionsFilter

Lokacija: /src/components/AdditionalOptionsFilter.tsx
Namen: Zbirka potrditvenih polj za dodatne možnosti filtriranja, kot so trenutno odprto, parkirišče in podobno.
Uporaba: Uporabite za omogočanje filtriranja po dodatnih specifikacijah restavracij.

58. SearchResultsHeader

Lokacija: /src/components/SearchResultsHeader.tsx
Namen: Naslovni del rezultatov iskanja z naslovom in izbirnikom za razvrščanje rezultatov po različnih kriterijih.
Uporaba: Uporabite na začetku sekcije z rezultati iskanja.

59. ActiveFiltersDisplay

Lokacija: /src/components/ActiveFiltersDisplay.tsx
Namen: Prikaz trenutno aktivnih filtrov v obliki značk (chips) z možnostjo hitrega odstranjevanja posameznih filtrov.
Uporaba: Uporabite pod naslovom rezultatov iskanja za pregleden prikaz uporabljenih filtrov.

60. SearchRestaurantCard

Lokacija: /src/components/SearchRestaurantCard.tsx
Namen: Podrobna kartica posamezne restavracije v rezultatih iskanja, ki prikazuje sliko, osnovne podatke, oceno, kuhinje in gumb za rezervacijo.
Uporaba: Uporabite za vsako restavracijo v seznamu rezultatov iskanja.

61. LoadMoreButton

Lokacija: /src/components/LoadMoreButton.tsx
Namen: Gumb za nalaganje dodatnih rezultatov iskanja za implementacijo paginacije.
Uporaba: Uporabite na koncu seznama rezultatov iskanja, ko je na voljo več rezultatov kot je trenutno prikazano.

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'
};

Nove komponente za iskanje in filtriranje

V sklopu posodobitve strani za iskanje smo ustvarili naslednje nove komponente:

SearchNavBar

AdvancedSearchBar

FilterHeader

LocationFilter

CuisineFilterGrid

PriceRangeFilter

RatingSlider

AdditionalOptionsFilter

SearchResultsHeader

ActiveFiltersDisplay

SearchRestaurantCard

LoadMoreButton

Te komponente skupaj omogočajo moderno, prilagodljivo in uporabniku prijazno izkušnjo iskanja in filtriranja restavracij, ki sledi najboljšim praksam komponentno usmerjenega razvoja v Reactu.

22 KiB Raw Permalink Blame History