Enhancement: Multi-shift taxis, vehicle type, accessibility flag and filter label update

2026-03-03 10:40:04 -05:00
parent b50c2cc82b
commit 97ab6c1b9a
5 changed files with 103 additions and 23 deletions
--- a/frontend/src/views/AdminTaxis.vue
+++ b/frontend/src/views/AdminTaxis.vue
@ -42,8 +42,19 @@
              <span>{{ taxi.corregimiento }}</span>
            </div>
            <div class="info-row">
-              <span class="label">Horario:</span>
-              <span>{{ getShiftLabel(taxi.shift) }}</span>
+              <span class="label">Horarios:</span>
+              <span>{{ getShiftsLabel(taxi.shifts) }}</span>
+            </div>
+            <div class="info-row" v-if="taxi.vehicle_type">
+              <span class="label">Vehículo:</span>
+              <span>{{ taxi.vehicle_type }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">Accesible:</span>
+              <span class="flex items-center gap-1">
+                {{ taxi.is_accessible ? 'Sí' : 'No' }}
+                <span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm">accessible</span>
+              </span>
            </div>
            <div class="info-row" v-if="taxi.cooperative">
              <span class="label">Cooperativa:</span>
@ -109,14 +120,27 @@
                </select>
              </div>
              
-              <div class="form-group">
-                <label>Horario *</label>
-                <select v-model="taxiForm.shift" required>
-                  <option value="">Seleccionar...</option>
-                  <option value="dia">Día</option>
-                  <option value="tarde">Tarde</option>
-                  <option value="noche">Noche</option>
-                </select>
+              <div class="form-group full-width">
+                <label>Tipo de Vehículo</label>
+                <input v-model="taxiForm.vehicle_type" type="text" placeholder="Toyota Corolla / SUV / Van">
+              </div>
+
+              <div class="form-group full-width">
+                <label>Horarios de Servicio *</label>
+                <div class="checkbox-list">
+                  <label class="checkbox-item">
+                    <input type="checkbox" value="dia" v-model="taxiForm.shifts">
+                    <span>Día</span>
+                  </label>
+                  <label class="checkbox-item">
+                    <input type="checkbox" value="tarde" v-model="taxiForm.shifts">
+                    <span>Tarde</span>
+                  </label>
+                  <label class="checkbox-item">
+                    <input type="checkbox" value="noche" v-model="taxiForm.shifts">
+                    <span>Noche</span>
+                  </label>
+                </div>
              </div>
              
              <div class="form-group">
@ -135,6 +159,13 @@
                  <span>Habla Inglés</span>
                </label>
              </div>
+
+              <div class="form-group checkbox-group">
+                <label>
+                  <input v-model="taxiForm.is_accessible" type="checkbox">
+                  <span class="flex items-center gap-1">Accesible <span class="material-icons text-sm">accessible</span></span>
+                </label>
+              </div>
              
              <div class="form-group checkbox-group">
                <label>
@ -184,10 +215,12 @@ const taxiForm = reactive({
  phone_number: '',
  license_plate: '',
  corregimiento: '',
-  shift: '',
+  vehicle_type: '',
+  shifts: [] as string[],
  cooperative: '',
  rating: 5.0,
  english_speaking: false,
+  is_accessible: false,
  is_active: true
 })

@ -217,10 +250,12 @@ function openModal(taxi?: any) {
      phone_number: taxi.phone_number,
      license_plate: taxi.license_plate,
      corregimiento: taxi.corregimiento,
-      shift: taxi.shift,
+      vehicle_type: taxi.vehicle_type || '',
+      shifts: taxi.shifts || [],
      cooperative: taxi.cooperative || '',
      rating: taxi.rating || 5.0,
      english_speaking: taxi.english_speaking || false,
+      is_accessible: taxi.is_accessible || false,
      is_active: taxi.is_active
    })
  } else {
@ -230,10 +265,12 @@ function openModal(taxi?: any) {
      phone_number: '',
      license_plate: '',
      corregimiento: '',
-      shift: '',
+      vehicle_type: '',
+      shifts: [],
      cooperative: '',
      rating: 5.0,
      english_speaking: false,
+      is_accessible: false,
      is_active: true
    })
  }
@ -305,13 +342,14 @@ async function deleteTaxi(taxi: any) {
  }
 }

-function getShiftLabel(shift: string) {
+function getShiftsLabel(shifts: string[]) {
+  if (!shifts || shifts.length === 0) return 'No definido'
  const labels: Record<string, string> = {
    'dia': 'Día',
    'tarde': 'Tarde',
    'noche': 'Noche'
  }
-  return labels[shift] || shift
+  return shifts.map(s => labels[s] || s).join(', ')
 }

 function getImageUrl(path: string) {
@ -674,6 +712,24 @@ h1 {
  font-size: 0.85rem;
 }

+.checkbox-list {
+  display: flex;
+  gap: 20px;
+  background: var(--bg-secondary);
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
 .error-text {
  color: #f44;
  margin: 16px 0;
--- a/frontend/src/views/transporte/TaxisLocales.vue
+++ b/frontend/src/views/transporte/TaxisLocales.vue
@ -27,12 +27,23 @@ onMounted(async () => {
 const filteredTaxis = computed(() => {
  return taxiStore.taxis.filter(taxi => {
    const matchesZone = selectedZone.value === 'all' || taxi.corregimiento === selectedZone.value
-    const matchesShift = selectedShift.value === 'all' || taxi.shift === selectedShift.value
+    // Ahora comprueba si el turno seleccionado está en el array de turnos del taxi
+    const matchesShift = selectedShift.value === 'all' || (taxi.shifts && taxi.shifts.includes(selectedShift.value))
    const matchesEnglish = !onlyEnglish.value || taxi.english_speaking
    return matchesZone && matchesShift && matchesEnglish
  })
 })

+const isOnline = (taxi: Taxi) => {
+  if (!taxi.shifts) return false
+  return taxi.shifts.includes('dia') || taxi.shifts.includes('tarde')
+}
+
+const getShiftsDisplay = (taxi: Taxi) => {
+  if (!taxi.shifts || taxi.shifts.length === 0) return ''
+  return taxi.shifts.map(s => getShiftLabel(s)).join(' · ')
+}
+
 const handleCall = (taxi: Taxi) => {
  analyticsService.logEvent({ 
    event_name: 'taxi_click', 
@ -119,17 +130,20 @@ function getShiftLabel(shift: string) {
                  @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'taxi')"
                >
              </div>
-              <div class="driver-status" :class="{ 'status-online': taxi.shift === 'dia' || taxi.shift === 'tarde' }"></div>
+              <div class="driver-status" :class="{ 'status-online': isOnline(taxi) }"></div>
            </div>
            <div class="driver-info">
-              <h3 class="driver-name">{{ taxi.owner_name }}</h3>
+              <div class="flex items-center gap-2 mb-0.5">
+                <h3 class="driver-name">{{ taxi.owner_name }}</h3>
+                <span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm" title="Accesible para personas con discapacidad">accessible</span>
+              </div>
              <div class="driver-meta">
                <div class="rating-stars">
                  <span class="material-icons star-filled">star</span>
                  <span class="rating-value">{{ (taxi.rating || 5).toFixed(1) }}</span>
                </div>
                <span class="meta-dot">·</span>
-                <span class="shift-badge">{{ getShiftLabel(taxi.shift || '') }}</span>
+                <span class="shift-badge">{{ getShiftsDisplay(taxi) }}</span>
              </div>
            </div>
            <div class="fav-icon-wrapper">
@ -147,6 +161,10 @@ function getShiftLabel(shift: string) {
              <span class="material-icons detail-icon">location_on</span>
              <span class="detail-text">{{ taxi.corregimiento }}</span>
            </div>
+            <div class="detail-item" v-if="taxi.vehicle_type">
+              <span class="material-icons detail-icon">local_taxi</span>
+              <span class="detail-text">{{ taxi.vehicle_type }}</span>
+            </div>
            <div class="detail-item" v-if="taxi.english_speaking">
              <span class="material-icons detail-icon">g_translate</span>
              <span class="detail-text">{{ t('taxi.englishLabel') }}</span>
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@ -50,7 +50,7 @@ onMounted(async () => {
            <div class="group-content">
              <label>{{ t('shuttle.category') || 'Categoría' }}</label>
              <select v-model="shuttleCategoryFilter">
-                <option value="all">{{ t('shuttle.allRoutes') || 'Todas las rutas' }}</option>
+                <option value="all">{{ t('shuttle.allAreas') || 'Todas las áreas' }}</option>
                <option value="local">Local</option>
                <option value="interprovincial">Interprovincial</option>
              </select>