Vue.js kullanarak bir otomobil park yeri uygulamasını nasıl tasarlardınız?

Vue.js ile bileşen tabanlı bir yaklaşım kullanırdım.

Mimari:

• App.vue: Kök bileşen. Yönlendirici ve ana düzenleri içerir.
• Görünümler: Sayfa bileşenleri (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Bileşenler: Yeniden kullanılabilir bileşenler (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Durum yönetimi için Pinia (park yeri listesi, yer doluluk durumu).
• Servisler: API ile çalışma modülleri (park yeri verilerini almak, yerleri kaydetmek/boşaltmak).

Durum (Pinia):

• parkingLots: Park yeri nesneleri dizisi.
• selectedParkingLot: Seçilen mevcut park yeri.
• loading: Veri yükleme durumu.

// 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 isteği simülasyonu
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Park Yeri 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Park Yeri 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Ekstra yer kaydetme/boşaltma eylemleri
  },
});

Yönlendirme (Vue Router):

• /parking-lots: Park yeri listesi.
• /parking-lots/:id: Belirli bir park yeri detayları.

// 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, // Parametreleri props olarak ilet
  },
];

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

export default router;

Bileşenler:

• ParkingLotsPage.vue:
  • Pinia'dan park yeri listesini alır.
  • Her park yeri için ParkingLotCard gösterir.
• ParkingLotCard.vue:
  • Bir park yeri nesnesini prop olarak alır.
  • İsim, kapasite ve doluluk oranını gösterir.
  • Park yeri detaylarına gitmek için buton.
• ParkingLotDetailsPage.vue:
  • Rota parametrelerinden id alır.
  • Bunu kullanarak Pinia'dan park yeri seçer veya detayları yükler.
  • Park yeri şemasını gösterir (SlotStatus bileşenleriyle).
  • Araç kaydı/boşaltma formu (VehicleForm.vue).
• SlotStatus.vue:
  • Slot durumunu (boş/dolu) alır.
  • Uygun renk/ikonu gösterir.
• VehicleForm.vue:
  • Araç numarası girişi ve işlem seçimi (giriş/çıkış) formu.
  • Verileri Pinia/Servis'e gönderir.

Stil:

• Bileşen tabanlı stil için SCSS veya CSS modülleri kullanın.
• Flexbox veya Grid kullanarak düzenleyin.

Ekstra özellikler:

• API üzerinden gerçek backend ile etkileşim.
• Kullanıcı ve araç kaydı.
• Park etme geçmişi.
• Bildirim sistemi.
• Ödeme sistemi.

Bu temel yapıdır. Uygulamanın gereksinimlerine ve ölçeğine göre detaylar değişebilir.