Vue.js-də avtomobil park etmə tətbiqini necə dizayn edərdin?

Vue.js komponent yanaşmasını istifadə edərdim.

Memarlıq:

• App.vue: Əsas komponent. Router və əsas şablonları ehtiva edir.
• Views: Səhifə komponentləri (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: Yenidən istifadə olunan komponentlər (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia vəziyyət idarəetməsi üçün (parkovka siyahısı, yerlərin tutumu).
• Services: API ilə işləmək üçün modullar (parkovka məlumatlarının alınması, qeydiyyat/boşaltma).

Vəziyyət (Pinia):

• parkingLots: Parkovka obyektlərinin massivi.
• selectedParkingLot: Seçilmiş parkovka.
• loading: Yükləmə vəziyyəti.

// 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 sorğusunun imitasyonu
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Parkovka 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Parkovka 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Yerlərin qeydiyyatı/boşaldılması üçün əlavə əməliyyatlar
  },
});

Marşrutlaşdırma (Vue Router):

• /parking-lots: Parkovka siyahısı.
• /parking-lots/:id: Konkret parkovkanın detalları.

// 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, // marşrut parametrlərini props kimi ötürür
  },
];

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

export default router;

Komponentlər:

• ParkingLotsPage.vue:
  • Pinia-dan parkovka siyahısını alır.
  • Hər parkovka üçün ParkingLotCard göstərir.
• ParkingLotCard.vue:
  • Parkovka obyektini prop kimi qəbul edir.
  • Adı, tutumu və doluluğu göstərir.
  • Parkovka detalları üçün keçid düyməsi.
• ParkingLotDetailsPage.vue:
  • Parkovka id-sini marşrut parametrlərindən alır.
  • Onu Pinia-dan seçir və ya detalları yükləyir.
  • Parkovka sxemini göstərir (bir çox SlotStatus komponenti ilə həyata keçirilə bilər).
  • Avtomobil qeydiyyatı/boşaldılması üçün VehicleForm.vue.
• SlotStatus.vue:
  • Slot statusunu qəbul edir (boş/işğaldadır).
  • Müvafiq rəng/ikonu göstərir.
• VehicleForm.vue:
  • Avtomobil nömrəsi və hərəkət növü (giriş/çıxış) üçün forma.
  • Məlumatları Pinia/Service-ə göndərir.

Stil:

• Komponent əsaslı stil üçün SCSS və ya CSS-modullardan istifadə edin.
• Elementlərin yerləşdirilməsi üçün flexbox və ya grid istifadə edin.

Əlavə imkanlar:

• Backend ilə real inteqrasiya API vasitəsilə.
• İstifadəçi və avtomobil qeydiyyatı.
• Parkovka tarixi.
• Bildiriş sistemi.
• Ödəniş sistemi.

Bu əsas strukturadır. Ətraflı həyata keçirmə tələblər və tətbiqin miqyasına görə dəyişə bilər.