Jak bys navrhl aplikaci pro parkování aut ve Vue.js?

Použil bych komponentový přístup ve Vue.js.

Architektura:

• App.vue: Kořenová komponenta. Obsahuje router a hlavní rozvržení.
• Views: Stránky (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: Opakovaně použitelné komponenty (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia pro správu stavu (seznam parkovišť, obsazenost míst).
• Services: Moduly pro práci s API (získání dat o parkovištích, registrace/uvolnění míst).

Stav (Pinia):

• parkingLots: Pole objektů parkovišť.
• selectedParkingLot: Aktuálně vybrané parkoviště.
• loading: Stav načítání dat.

// stores/parking.js
import { defineStore } from 'pinia';

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // Simulace API požadavku
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkoviště 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkoviště 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Další akce pro registraci/uvolnění míst
  },
});

Routing (Vue Router):

• /parking-lots: Seznam parkovišť.
• /parking-lots/:id: Detaily konkrétního parkoviště.

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import ParkingLotsPage from '@/views/ParkingLotsPage.vue';
import ParkingLotDetailsPage from '@/views/ParkingLotDetailsPage.vue';

const routes = [
  {
    path: '/parking-lots',
    name: 'ParkingLots',
    component: ParkingLotsPage,
  },
  {
    path: '/parking-lots/:id',
    name: 'ParkingLotDetails',
    component: ParkingLotDetailsPage,
    props: true, // předává parametry trasy jako props
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Komponenty:

• ParkingLotsPage.vue:
  • Získává seznam parkovišť z Pinia.
  • Zobrazuje ParkingLotCard pro každé parkoviště.
• ParkingLotCard.vue:
  • Přijímá objekt parkoviště jako prop.
  • Zobrazuje název, kapacitu a obsazenost.
  • Tlačítko pro přechod na detaily parkoviště.
• ParkingLotDetailsPage.vue:
  • Získává id parkoviště z parametrů trasy.
  • Používá ho k výběru parkoviště z Pinia (nebo načtení detailů, pokud nejsou načteny).
  • Zobrazuje plán parkoviště (lze realizovat pomocí více komponent SlotStatus).
  • Formulář pro registraci/uvolnění auta (VehicleForm.vue).
• SlotStatus.vue:
  • Přijímá stav slotu (volný/zabraný).
  • Zobrazuje odpovídající barvu/ikonu.
• VehicleForm.vue:
  • Formulář pro zadání SPZ a volbu akce (vjezd/výjezd).
  • Odesílá data do Pinia/Service.

Styling:

• Použijte SCSS nebo CSS moduly pro komponentní stylování.
• Použijte flexbox nebo grid pro rozložení prvků.

Další funkce:

• Reálná komunikace s backendem přes API.
• Registrace uživatelů a jejich aut.
• Historie parkování.
• Systém upozornění.
• Platební systém.

Toto je základní struktura. Detaily implementace závisí na konkrétních požadavcích a rozsahu aplikace.