Ako by ste navrhli aplikáciu pre parkovanie áut vo Vue.js?

Použil by som komponentový prístup vo Vue.js.

Architektúra:

• App.vue: Koreňová komponenta. Obsahuje router a hlavné rozloženie.
• Views: Stránky (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: Opakovane použiteľné komponenty (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia na správu stavu (zoznam parkov, obsadenosť miest).
• Services: Moduly na prácu s API (získanie dát o parkoviskách, registrácia/uvoľnenie miest).

Stav (Pinia):

• parkingLots: Pole objektov parkovísk.
• selectedParkingLot: Aktuálne vybrané parkovisko.
• loading: Stav načítania.

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

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // Simulácia API požiadavky
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkovisko 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkovisko 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Ďalšie akcie na registráciu/uvoľnenie miest
  },
});

Routing (Vue Router):

• /parking-lots: Zoznam parkovísk.
• /parking-lots/:id: Detaily konkrétneho parkoviska.

// 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, // odovzdá parametre trasy ako props
  },
];

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

export default router;

Komponenty:

• ParkingLotsPage.vue:
  • Získa zoznam parkovísk z Pinia.
  • Zobrazuje ParkingLotCard pre každé parkovisko.
• ParkingLotCard.vue:
  • Prijíma objekt parkoviska ako prop.
  • Zobrazuje názov, kapacitu a obsadenosť.
  • Tlačidlo na prechod k detailom parkoviska.
• ParkingLotDetailsPage.vue:
  • Získa id z parametrov trasy.
  • Používa ho na výber parkoviska z Pinia alebo načítanie detailov.
  • Zobrazuje plán parkoviska (možno realizovať pomocou viacerých SlotStatus komponentov).
  • Formulár na registráciu/uvoľnenie auta (VehicleForm.vue).
• SlotStatus.vue:
  • Prijíma stav slotu (voľný/zaujatý).
  • Zobrazuje príslušnú farbu/ikonu.
• VehicleForm.vue:
  • Formulár na zadanie SPZ a výber akcie (vjazd/výjazd).
  • Odosiela údaje do Pinia/Service.

Štýlovanie:

• Použite SCSS alebo CSS moduly pre komponentové štýly.
• Použite flexbox alebo grid na rozloženie prvkov.

Ďalšie možnosti:

• Reálna komunikácia s backendom cez API.
• Registrácia používateľov a ich áut.
• História parkovania.
• Systém upozornení.
• Platobný systém.

Toto je základná štruktúra. Detaily implementácie závisia od konkrétnych požiadaviek a rozsahu aplikácie.