როგორ დაგეგმავდით ავტომანქანების პარკირების აპლიკაციას Vue.js-ით?

მე გამოვიყენებდი Vue.js-ის კომპონენტურ მიდგომას.

არქიტექტურა:

• App.vue: ძირითადი კომპონენტი. შეიცავს როუტერს და ძირითად ლეაუტებს.
• Views: გვერდის კომპონენტები (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Components: განმეორებადი კომპონენტები (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia მდგომარეობის მართვისთვის (პარკინგების სია, ადგილების დაკავებულობა).
• Services: API-თან მუშაობის მოდულები (პარკინგების მონაცემების მიღება, რეგისტრაცია/განთავისუფლება).

მდგომარეობა (Pinia):

• parkingLots: პარკინგების ობიექტების მასივი.
• selectedParkingLot: მიმდინარე არჩეული პარკინგი.
• loading: მონაცემების ჩატვირთვის მდგომარეობა.

// 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-ის მოთხოვნის იმიტაცია
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'პარკინგი 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'პარკინგი 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // დამატებითი მოქმედებები ადგილების რეგისტრაციის/განთავისუფლებისთვის
  },
});

მარშრუტიზაცია (Vue Router):

• /parking-lots: პარკინგების სია.
• /parking-lots/:id: კონკრეტული პარკინგის დეტალები.

// 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, // მარშრუტის პარამეტრების გადაცემა props-ის სახით
  },
];

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

export default router;

კომპონენტები:

• ParkingLotsPage.vue:
  • იღებს პარკინგების სიის მონაცემებს Pinia-დან.
  • აჩვენებს ParkingLotCard თითოეულ პარკინგზე.
• ParkingLotCard.vue:
  • იღებს პარკინგის ობიექტს prop-ის სახით.
  • აჩვენებს სახელწოდებას, მოცულობას და დაკავებულობას.
  • ბლოკი დეტალებზე გადასასვლელად.
• ParkingLotDetailsPage.vue:
  • იღებს id-ს მარშრუტის პარამეტრებიდან.
  • იყენებს მას პარკინგის არჩევისთვის ან დეტალების ჩატვირთვისთვის, თუ არ არის.
  • აჩვენებს პარკინგის სქემას (SlotStatus კომპონენტების გამოყენებით).
  • ფორმა მანქანის რეგისტრაციის/განთავისუფლებისთვის (VehicleForm.vue).
• SlotStatus.vue:
  • იღებს სლოტის სტატუსს (თავისუფალი/დაკავებული).
  • აჩვენებს შესაბამის ფერს/სურათს.
• VehicleForm.vue:
  • ფორმა მანქანის ნომრის და მოქმედების (შესვლა/გამოსვლა) შესაყვანად.
  • აგზავნის მონაცემებს Pinia-ს ან სერვისს.

სტილიზაცია:

• გამოიყენოს SCSS ან CSS-მოდულები კომპონენტური სტილიზაციისთვის.
• გამოიყენოს ფლექსბოქსი ან გრიდები ელემენტების განლაგებისთვის.

დამატებითი შესაძლებლობები:

• რეალური ინტეგრაცია ბექენდთან API-ის მეშვეობით.
• მომხმარებლების და მათი მანქანების რეგისტრაცია.
• პარკირების ისტორია.
• შეტყობინებების სისტემა.
• გადახდის სისტემა.

ეს არის ძირითადი სტრუქტურა. დეტალები დამოკიდებულია კონკრეტულ მოთხოვნებზე და აპლიკაციის მასშტაბზე.