Kuidas te kujundaksite Vue.js-s autoparklamise rakenduse?

Ma kasutaksin Vue.js komponendipõhist lähenemist.

Arhitektuur:

• App.vue: põhikomponent. Sisaldab routerit ja põhiplaane.
• Views: lehekülje komponendid (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: korduvkasutatavad komponendid (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia oleku haldamiseks (parklate nimekiri, hõivatus).
• Services: API-liidese moodulid (andmete saamine parklast, registreerimine/vabastamine).

Oleku haldamine (Pinia):

• parkingLots: parkimiskohtade objektide massiiv.
• selectedParkingLot: valitud parkimine.
• loading: andmete laadimise olek.

// 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 päringu imiteerimine
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkla 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkla 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Täiendavad tegevused kohtade registreerimiseks/vabastamiseks
  },
});

Marsruutimine (Vue Router):

• /parking-lots: parkla nimekiri.
• /parking-lots/:id: konkreetse parkla detailid.

// 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, // marsruudi parameetrite edastamine propsina
  },
];

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

export default router;

Komponendid:

• ParkingLotsPage.vue:
  • saab Pinia-st parkla nimekirja andmed.
  • kuvab iga parkla jaoks ParkingLotCard.
• ParkingLotCard.vue:
  • võtab parklainfo prop-ina.
  • kuvab nime, mahutavuse ja hõivatusesumma.
  • nupp, mis suunab detailvaatesse.
• ParkingLotDetailsPage.vue:
  • saab id URL-i parameetrist.
  • kasutab seda parklate valimiseks või detailide laadimiseks.
  • kuvab parkla skeemi (SlotStatus komponentide kasutamine).
  • vorm auto registreerimiseks/vabastamiseks (VehicleForm.vue).
• SlotStatus.vue:
  • võtab sloti staatuse (vaba/ära võetud).
  • kuvab vastavat värvi/ikooni.
• VehicleForm.vue:
  • vorm sisestada auto number ja valida tegevus (sisenemine/väljumine).
  • saadab andmed Pinia või teenuse kaudu.

Stiil:

• kasutada SCSS või CSS mooduleid komponentide stiilimiseks.
• kasutada flexboxi või grid süsteemi elementide paigutamiseks.

Täiendavad võimalused:

• reaalne ühendus backend API-ga.
• kasutajate ja nende autode registreerimine.
• parkimise ajalugu.
• teavitussüsteem.
• maksesüsteem.

See on põhistruktuur. Detailid sõltuvad konkreetsetest nõuetest ja rakenduse mahust.