Como você projetaria um aplicativo de estacionamento de carros em Vue.js?

Eu utilizaria uma abordagem baseada em componentes no Vue.js.

Arquitetura:

• App.vue: Componente raiz. Contém o roteador e os layouts principais.
• Vistas: Componentes de página (ParkingLotsPage.vue, ParkingLotDetailsPage.vue).
• Componentes: Componentes reutilizáveis (ParkingLotCard.vue, SlotStatus.vue, VehicleForm.vue).
• Stores: Pinia para gerenciar o estado (lista de estacionamentos, ocupação de lugares).
• Serviços: Módulos para trabalhar com API (obter dados de estacionamentos, registrar/liberar lugares).

Estado (Pinia):

• parkingLots: Array de objetos de estacionamentos.
• selectedParkingLot: Estacionamento selecionado atual.
• loading: Estado de carregamento de dados.

// stores/parking.js
import { defineStore } from 'pinia';

export const useParkingStore = defineStore('parking', {
  state: () => ({
    parkingLots: [],
    selectedParkingLot: null,
    loading: false,
  }),
  actions: {
    async fetchParkingLots() {
      this.loading = true;
      // Simulação de requisição API
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.parkingLots = [
        { id: 1, name: 'Estacionamento 1', capacity: 100, occupied: 50 },
        { id: 2, name: 'Estacionamento 2', capacity: 200, occupied: 120 },
      ];
      this.loading = false;
    },
    selectParkingLot(lotId) {
      this.selectedParkingLot = this.parkingLots.find(lot => lot.id === lotId);
    },
    // Ações adicionais para registrar/liberar lugares
  },
});

Roteamento (Vue Router):

• /parking-lots: Lista de estacionamentos.
• /parking-lots/:id: Detalhes de um estacionamento específico.

// 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, // Passar parâmetros de rota como props
  },
];

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

export default router;

Componentes:

• ParkingLotsPage.vue:
  • Obtém a lista de estacionamentos do Pinia.
  • Exibe ParkingLotCard para cada estacionamento.
• ParkingLotCard.vue:
  • Recebe um objeto de estacionamento como prop.
  • Exibe o nome, capacidade e ocupação.
  • Botão para navegar para detalhes do estacionamento.
• ParkingLotDetailsPage.vue:
  • Obtém o id do estacionamento dos parâmetros de rota.
  • Usa-o para selecionar o estacionamento do Pinia (ou carregar detalhes se não houver).
  • Exibe o esquema do estacionamento (pode ser implementado com múltiplos componentes SlotStatus).
  • Formulário para registrar/liberar veículo (VehicleForm.vue).
• SlotStatus.vue:
  • Recebe o status do slot (livre/ocupado).
  • Exibe a cor/ícone correspondente.
• VehicleForm.vue:
  • Formulário para inserir o número do veículo e escolher a ação (entrada/saída).
  • Envia os dados para Pinia/Service.

Estilização:

• Usar SCSS ou módulos CSS para estilização baseada em componentes.
• Aplicar Flexbox ou Grid para disposição dos elementos.

Funcionalidades adicionais:

• Interação real com backend via API.
• Registro de usuários e seus veículos.
• Histórico de estacionamento.
• Sistema de notificações.
• Sistema de pagamentos.

Esta é a estrutura básica. Os detalhes de implementação dependem de requisitos específicos e escala da aplicação.