Cum ai proiecta o aplicație pentru parcare auto pe Vue.js?

Aș folosi o abordare bazată pe componente în Vue.js.

Arhitectură:

• App.vue: Component rădăcină. Conține router-ul și layout-urile principale.
• Vederi: Componente de pagină (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Componente: Componente reutilizabile (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia pentru gestionarea stării (lista parcărilor, ocuparea locurilor).
• Servicii: Module pentru lucrul cu API (obținerea datelor despre parcări, înregistrarea/eliberarea locurilor).

Stare (Pinia):

• parkingLots: Array de obiecte de parcări.
• selectedParkingLot: Parcarea selectată curent.
• loading: Starea de încărcare a datelor.

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

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // Simulare solicitare API
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parcare 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parcare 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Acțiuni suplimentare pentru înregistrarea/eliberarea locurilor
  },
});

Routing (Vue Router):

• /parking-lots: Lista parcărilor.
• /parking-lots/:id: Detalii despre un parcaj specific.

// 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, // Transmite parametrii de rută ca props
  },
];

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

export default router;

Componente:

• ParkingLotsPage.vue:
  • Obține lista de parcări din Pinia.
  • Afișează ParkingLotCard pentru fiecare parcare.
• ParkingLotCard.vue:
  • Primește un obiect de parcare ca prop.
  • Afișează numele, capacitatea și ocuparea.
  • Buton pentru navigare la detaliile parcării.
• ParkingLotDetailsPage.vue:
  • Obține id din parametrii rutei.
  • Îl folosește pentru a selecta parcarea din Pinia (sau pentru a încărca detalii dacă nu există).
  • Afișează schema parcării (poate fi realizată cu mai multe componente SlotStatus).
  • Formular pentru înregistrarea/eliberarea vehiculului (VehicleForm.vue).
• SlotStatus.vue:
  • Primește statusul slotului (liber/ocupat).
  • Afișează culoarea/icoana corespunzătoare.
• VehicleForm.vue:
  • Formular pentru introducerea numărului de înmatriculare și alegerea acțiunii (intrare/ieșire).
  • Trimite datele către Pinia/Serviciu.

Stilizare:

• Folosiți SCSS sau module CSS pentru stilizarea bazată pe componente.
• Aplicați Flexbox sau Grid pentru aranjarea elementelor.

Funcții suplimentare:

• Interacțiune reală cu backend-ul prin API.
• Înregistrarea utilizatorilor și a vehiculelor lor.
• Istoricul parcării.
• Sistem de notificări.
• Sistem de plăți.

Aceasta este structura de bază. Detaliile de implementare depind de cerințele specifice și de amploarea aplicației.