Hogyan terveznéd meg egy autóparkoló alkalmazást Vue.js-ben?

A Vue.js komponens-alapú megközelítést alkalmaznám.

Architektúra:

• App.vue: Gyökérkomponens. Tartalmazza a routert és az alap elrendezéseket.
• Views: Oldalak (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: Újra felhasználható komponensek (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia az állapotkezeléshez (parkolási listák, helyfoglaltság).
• Services: API-val való kommunikációs modulok (parkolási adatok lekérése, regisztráció/felszabadítás).

Állapot (Pinia):

• parkingLots: Parkoló objektumok tömbje.
• selectedParkingLot: Kiválasztott parkoló.
• loading: Betöltési állapot.

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

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // API kérés szimulációja
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkoló 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkoló 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // További műveletek helyfoglalás/kiürítés
  },
});

Routing (Vue Router):

• /parking-lots: Parkolók listája.
• /parking-lots/:id: Egy adott parkoló részletei.

// 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, // útvonal paraméterek props-ként való átadása
  },
];

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

export default router;

Komponensek:

• ParkingLotsPage.vue:
  • Lekéri a parkolók listáját a Pinia-ból.
  • Minden parkolóhoz megjeleníti a ParkingLotCard-ot.
• ParkingLotCard.vue:
  • Fogad egy parkoló objektumot prop-ként.
  • Megjeleníti a nevét, kapacitását és foglaltságát.
  • Gomb a parkoló részleteire való navigáláshoz.
• ParkingLotDetailsPage.vue:
  • A route paraméterből kapja a id-t.
  • Ezzel kiválasztja a parkolót a Pinia-ból vagy betölti a részleteket.
  • Megjeleníti a parkoló térképét (SlotStatus komponensekkel).
  • Regisztráció/felszabadítás űrlap (VehicleForm.vue).
• SlotStatus.vue:
  • Fogadja a slot státuszát (szabad/foglalt).
  • Megjeleníti a megfelelő színt/ikont.
• VehicleForm.vue:
  • Űrlap az autószám és az akció (be/ki) megadására.
  • Az adatokat a Pinia/Service felé küldi.

Stílus:

• SCSS vagy CSS-modulok használata a komponens-alapú stílushoz.
• Flexbox vagy grid alkalmazása az elemek elrendezéséhez.

További lehetőségek:

• Valós API kommunikáció backenddel.
• Felhasználói és autós regisztráció.
• Parkolási előzmények.
• Értesítési rendszer.
• Fizetési rendszer.

Ez az alapstruktúra. A részletes megvalósítás a konkrét igényektől és az alkalmazás méretétől függ.