Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refine 'no buses available' flow and fix decimal bug

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 22:06:42 -05:00
parent e0284f7518
commit fa8551b19d
3 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/ETACard.vue
View File

@ -27,8 +27,8 @@
Desliza hacia abajo para cerrar
</p>
<!-- Cabecera de la parada -->
<div class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
<!-- Cabecera de la parada (Ocultar si no hay buses para modo minimalista) -->
<div v-if="buses.length > 0" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
<div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0">
<span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span>
</div>
@ -54,11 +54,17 @@
<span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">Calculando satélites...</span>
</div>
<!-- Sin servicio -->
<div v-else-if="buses.length === 0" class="bg-gray-50 dark:bg-gray-800/50 rounded-2xl p-6 text-center border dashed border-gray-200 dark:border-gray-700">
<span class="material-icons text-4xl text-gray-400 mb-2">directions_bus</span>
<h4 class="text-gray-700 dark:text-gray-300 font-bold mb-1">Sin servicio programado</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">No hay buses en ruta para hoy en esta línea.</p>
<!-- Sin servicio (Actualizado según petición) -->
<div v-else-if="buses.length === 0" class="bg-gray-50 dark:bg-gray-800/50 rounded-2xl p-8 text-center border-2 border-dashed border-gray-300 dark:border-gray-700 my-4">
<div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-icons text-4xl text-gray-400">no_bus</span>
</div>
<h4 class="text-gray-900 dark:text-white font-black text-lg mb-2">
{{ t('map.noBusesAvailable') }}
</h4>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{ t('schedules.noSchedules') }}
</p>
</div>
<!-- Lista de llegadas (Max 2) -->
@ -125,8 +131,8 @@
</template>
</div>
<!-- Legal Disclaimer Intocable -->
<div class="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl flex items-start gap-3 border border-yellow-100 dark:border-yellow-900/50">
<!-- Legal Disclaimer Intocable (Solo si hay buses) -->
<div v-if="buses.length > 0" class="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl flex items-start gap-3 border border-yellow-100 dark:border-yellow-900/50">
<span class="material-icons text-yellow-600 dark:text-yellow-500 text-lg mt-0.5 shrink-0">info</span>
<p class="text-[11px] leading-snug text-yellow-800 dark:text-yellow-600/90 font-medium">
<strong>Aviso:</strong> Este es un tiempo estimado basado en la velocidad promedio de las unidades en la ciudad. No existe rastreo GPS en tiempo real.
@ -140,8 +146,11 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import type { BusETA } from '@/composables/useETA';
const { t } = useI18n();
defineProps<{
isOpen: boolean;
stopName: string;