Kaip suprojektuotumėte automobilių stovėjimo programėlę Vue.js?

Naudociau Vue.js komponentinį požiūrį.

Architektūra:

• App.vue: pagrindinis komponentas. Turi router ir pagrindinius maketus.
• Views: puslapio komponentai (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: pakartotinai naudojami komponentai (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia būsenos valdymui (parkavimo vietų sąrašas, užimtumas).
• Services: API sąsajos moduliai (duomenų gavimas apie parkavimą, registracija/laisvavimas).

Būsenos valdymas (Pinia):

• parkingLots: parkavimo vietų objektų masyvas.
• selectedParkingLot: pasirinktas parkavimas.
• loading: duomenų įkėlimo būsena.

// 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 užklausos imitacija
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkavimo vieta 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkavimo vieta 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Papildomi veiksmai vietų registracijai/laisvavimui
  },
});

Maršrutizacija (Vue Router):

• /parking-lots: parkavimo vietų sąrašas.
• /parking-lots/:id: konkretaus parkavimo detalės.

// 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, // perduoti maršruto parametrus kaip props
  },
];

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

export default router;

Komponentai:

• ParkingLotsPage.vue:
  • gauna parkavimo sąrašo duomenis iš Pinia.
  • rodo ParkingLotCard kiekvienam parkavimui.
• ParkingLotCard.vue:
  • priima parkavimo objektą kaip prop.
  • rodo pavadinimą, talpą ir užimtumą.
  • mygtukas, kuris nukreipia į detalės puslapį.
• ParkingLotDetailsPage.vue:
  • gauna id iš maršruto parametrų.
  • naudoja jį pasirinkti parkavimą iš Pinia arba įkelti detales.
  • rodo parkavimo schemą (galima įgyvendinti naudojant SlotStatus komponentus).
  • forma automobiliui registruoti/laisvinti (VehicleForm.vue).
• SlotStatus.vue:
  • priima slot statusą (laisvas/dengtas).
  • rodo atitinkamą spalvą/ikonkę.
• VehicleForm.vue:
  • forma įvesti automobilio numerį ir pasirinkti veiksmą (įvažiavimas/išvažiavimas).
  • siunčia duomenis į Pinia/Service.

Stilius:

• naudoti SCSS arba CSS modulius komponentų stiliui.
• naudoti flexbox arba grid sistemą elementų išdėstymui.

Papildomos galimybės:

• realus sąveika su backend API.
• naudotojų ir jų automobilių registracija.
• parkavimo istorija.
• pranešimų sistema.
• mokėjimo sistema.

Tai pagrindinė struktūra. Detalės priklauso nuo konkrečių reikalavimų ir applikacijos masto.