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

fix: remove duplicate headers, fix i18n keys, unify theme colors in Discover and Schedules views

Browse Source 
- DiscoverView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables (--bg-primary, --active-color, etc.)
- SchedulesView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables
- es.json: add missing keys discover.searchPlaceholder, schedules.placeholder, schedules.upcoming, schedules.noSchedules, schedules.types
- en.json: same missing keys added for English
This commit is contained in:
Johan Samudio
2026-02-22 17:41:50 -05:00
parent c20733afc3
commit a1ba74cd49
4 changed files with 760 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

448
frontend/src/views/SchedulesView.vue
View File

@ -54,7 +54,6 @@ function selectRouteAndClose(routeId: string, routeName: string) {
item_id: routeName,
properties: { route_id: routeId }
})
routeStore.selectRoute(routeId, routeName)
scheduleStore.loadRouteSchedules(routeId)
}
@ -70,23 +69,20 @@ function goToMap() {
</script>
<template>
<div class="schedules-view-redesign bg-slate-50 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 min-h-screen">
<!-- Header Sticky con Blur -->
<header class="sticky top-0 z-50 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md px-6 pt-10 pb-4 border-b border-slate-200 dark:border-zinc-800">
<div class="flex items-center justify-between mb-6">
<button @click="router.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-slate-100 dark:active:bg-zinc-800 transition-colors">
<span class="material-icons text-2xl">arrow_back</span>
</button>
<h1 class="text-xl font-bold tracking-tight">{{ t('schedules.title') }}</h1>
<div class="w-10"></div>
<div class="schedules-view">
<!-- Selector de Línea -->
<div class="route-selector-section">
<div v-if="routeStore.isLoadingRoutes" class="state-row">
<div class="spinner-sm"></div>
<span class="state-label">{{ t('schedules.loadingRoutes') }}</span>
</div>
<!-- Selector de Línea -->
<div class="relative group" v-if="!routeStore.isLoadingRoutes && routeStore.allRoutes.length > 0">
<label class="block text-[10px] font-bold text-slate-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5 ml-1">{{ t('schedules.selectRoute') || 'Seleccionar Línea' }}</label>
<div class="relative">
<div v-else-if="routeStore.allRoutes.length > 0" class="selector-wrapper">
<label class="selector-label">{{ t('schedules.selectRoute') || 'Seleccionar Línea' }}</label>
<div class="select-container">
<select
class="w-full pl-4 pr-12 py-4 bg-slate-50 dark:bg-zinc-800 border-2 border-transparent focus:border-primary focus:ring-0 rounded-2xl text-lg font-bold transition-all cursor-pointer appearance-none"
class="route-select"
id="route-select"
:value="routeStore.selectedRouteId"
@change="e => {
@ -98,67 +94,66 @@ function goToMap() {
}"
>
<option value="" disabled>{{ t('schedules.placeholder') || 'Elige una ruta...' }}</option>
<option v-for="route in routeStore.allRoutes" :key="route.id" :value="route.id">
{{ route.name }}
<option v-for="r in routeStore.allRoutes" :key="r.id" :value="r.id">
{{ r.name }}
</option>
</select>
<span class="material-icons absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
<span class="material-icons select-chevron">expand_more</span>
</div>
</div>
</header>
</div>
<main class="flex-1 px-6 pt-6 pb-32">
<div v-if="routeStore.isLoadingRoutes" class="flex flex-col items-center justify-center py-20">
<div class="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4"></div>
<p class="text-slate-500 dark:text-zinc-400 font-medium">{{ t('schedules.loadingRoutes') }}</p>
<!-- Contenido principal -->
<main class="schedules-main">
<!-- Sin ruta seleccionada -->
<div v-if="!routeStore.selectedRouteId && !routeStore.isLoadingRoutes" class="empty-state">
<span class="material-icons empty-icon">route</span>
<p class="empty-text">Selecciona una ruta para ver sus horarios</p>
</div>
<div v-else-if="!routeStore.selectedRouteId" class="flex flex-col items-center justify-center py-20 text-center">
<span class="material-icons text-6xl text-slate-200 dark:text-zinc-800 mb-4">route</span>
<p class="text-slate-500 dark:text-zinc-400 font-medium italic">Selecciona una ruta para ver sus horarios</p>
</div>
<template v-else>
<!-- Estado Próximas Salidas -->
<div class="flex items-center justify-between mb-6">
<h2 class="text-sm font-semibold text-slate-500 dark:text-zinc-400">{{ t('schedules.upcoming') || 'Próximas salidas' }}</h2>
<div class="flex items-center gap-1.5 px-2.5 py-1 bg-[#fee715]/10 rounded-full">
<span class="w-1.5 h-1.5 rounded-full bg-[#fee715] animate-pulse"></span>
<span class="text-[10px] font-bold text-slate-700 dark:text-[#fee715] tracking-wide">EN VIVO</span>
<template v-else-if="routeStore.selectedRouteId">
<!-- Encabezado de sección -->
<div class="section-header">
<h2 class="section-title">{{ t('schedules.upcoming') || 'Próximas salidas' }}</h2>
<div class="live-badge">
<span class="live-dot"></span>
<span class="live-text">EN VIVO</span>
</div>
</div>
<!-- Listado de Horarios -->
<div v-if="scheduleStore.isLoading" class="flex justify-center py-10">
<div class="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin"></div>
<!-- Cargando horarios -->
<div v-if="scheduleStore.isLoading" class="state-row center">
<div class="spinner-sm"></div>
</div>
<div v-else-if="scheduleStore.schedules.length === 0" class="bg-white dark:bg-zinc-800/50 p-8 rounded-2xl border border-slate-100 dark:border-zinc-800 text-center">
<span class="material-icons text-slate-300 dark:text-zinc-700 text-4xl mb-2">event_busy</span>
<p class="text-slate-500 dark:text-zinc-400">{{ t('schedules.noSchedules') || 'No hay salidas programadas para hoy' }}</p>
<!-- Sin horarios -->
<div v-else-if="scheduleStore.schedules.length === 0" class="no-schedules-card">
<span class="material-icons no-schedule-icon">event_busy</span>
<p class="no-schedule-text">{{ t('schedules.noSchedules') || 'No hay salidas programadas para hoy' }}</p>
</div>
<div v-else class="space-y-4">
<!-- Lista de horarios -->
<div v-else class="schedules-list">
<div
v-for="schedule in scheduleStore.schedules"
:key="schedule.id"
class="p-4 bg-white dark:bg-zinc-800/50 border border-slate-100 dark:border-zinc-800 rounded-2xl flex items-center justify-between hover:border-primary/50 transition-all shadow-sm"
class="schedule-card"
>
<div class="flex items-center gap-4">
<div class="text-3xl font-extrabold tracking-tighter text-slate-900 dark:text-white">
<div class="schedule-left">
<div class="departure-time">
{{ formatTo12Hour(schedule.departure_time) }}
</div>
<div class="h-8 w-px bg-slate-200 dark:bg-zinc-700"></div>
<div>
<p class="text-[10px] font-medium text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Línea</p>
<p class="font-bold text-slate-900 dark:text-white leading-tight">
{{ routeStore.selectedRouteName }}
</p>
<div class="divider-v"></div>
<div class="schedule-info">
<p class="schedule-label">Línea</p>
<p class="schedule-route-name">{{ routeStore.selectedRouteName }}</p>
</div>
</div>
<span
class="px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-full"
:class="schedule.schedule_type === 'weekday' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-slate-100 dark:bg-zinc-700 text-slate-500 dark:text-zinc-400'"
class="schedule-type-badge"
:class="schedule.schedule_type === 'weekday' ? 'badge-weekday' : 'badge-other'"
>
{{ t(`schedules.types.${schedule.schedule_type}`) || schedule.schedule_type }}
</span>
@ -167,48 +162,349 @@ function goToMap() {
</template>
</main>
<!-- Botón Flotante para ir al Mapa -->
<Transition name="fade">
<!-- Botón flotante: ir al mapa -->
<Transition name="fab">
<button
v-if="routeStore.selectedRouteId"
@click="goToMap"
class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-slate-900 rounded-full shadow-2xl flex items-center justify-center active:scale-95 transition-all z-40"
class="fab-map"
title="Ver en el mapa"
>
<span class="material-icons text-3xl">map</span>
<span class="material-icons">map</span>
</button>
</Transition>
</div>
</template>
<style scoped>
.schedules-view-redesign {
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
.schedules-view {
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--bg-primary);
color: var(--text-primary);
padding-bottom: 6rem;
position: relative;
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.25rem;
/* ─── Selector de ruta ─── */
.route-selector-section {
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--border-color);
background: var(--bg-primary);
position: sticky;
top: 0;
z-index: 10;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease, transform 0.3s ease;
.state-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateY(20px);
.state-row.center {
justify-content: center;
padding: 2.5rem 0;
}
/* Transiciones para la lista */
.space-y-4 > * {
animation: slideUp 0.4s ease-out forwards;
.state-label {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 600;
}
.selector-wrapper {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.selector-label {
font-size: 0.625rem;
font-weight: 800;
color: var(--text-secondary);
letter-spacing: 0.1em;
text-transform: uppercase;
padding-left: 0.25rem;
}
.select-container {
position: relative;
}
.route-select {
width: 100%;
padding: 0.875rem 3rem 0.875rem 1rem;
background: var(--bg-secondary);
border: 1.5px solid var(--border-color);
border-radius: 1rem;
color: var(--text-primary);
font-size: 1rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
appearance: none;
transition: border-color 0.2s;
outline: none;
}
.route-select:focus {
border-color: var(--active-color);
}
.route-select option {
background: var(--bg-secondary);
color: var(--text-primary);
}
.select-chevron {
position: absolute;
right: 0.875rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
pointer-events: none;
}
/* ─── Contenido ─── */
.schedules-main {
flex: 1;
padding: 1rem 1.25rem;
}
/* ─── Estado vacío ─── */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 1rem;
gap: 0.75rem;
text-align: center;
}
.empty-icon {
font-size: 4rem;
color: var(--border-color);
}
.empty-text {
color: var(--text-secondary);
font-size: 0.9375rem;
font-style: italic;
margin: 0;
}
/* ─── Encabezado sección ─── */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.section-title {
font-size: 0.8125rem;
font-weight: 700;
color: var(--text-secondary);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.live-badge {
display: flex;
align-items: center;
gap: 0.375rem;
background: rgba(254, 231, 21, 0.1);
border-radius: 999px;
padding: 0.25rem 0.625rem;
}
.live-dot {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: var(--active-color);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.live-text {
font-size: 0.625rem;
font-weight: 900;
color: var(--active-color);
letter-spacing: 0.08em;
}
/* ─── Sin horarios ─── */
.no-schedules-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.no-schedule-icon {
font-size: 2.5rem;
color: var(--border-color);
}
.no-schedule-text {
color: var(--text-secondary);
font-size: 0.875rem;
margin: 0;
}
/* ─── Lista de horarios ─── */
.schedules-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.schedule-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color 0.2s;
animation: slideUp 0.35s ease-out both;
}
.schedule-card:hover {
border-color: var(--active-color);
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.schedule-left {
display: flex;
align-items: center;
gap: 0.875rem;
}
.departure-time {
font-size: 1.75rem;
font-weight: 900;
color: var(--text-primary);
letter-spacing: -0.04em;
line-height: 1;
}
.divider-v {
width: 1px;
height: 2rem;
background: var(--border-color);
}
.schedule-info {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.schedule-label {
font-size: 0.625rem;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.schedule-route-name {
font-size: 0.9375rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
line-height: 1.2;
}
/* ─── Badge tipo de horario ─── */
.schedule-type-badge {
padding: 0.25rem 0.625rem;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.badge-weekday {
background: rgba(74, 222, 128, 0.12);
color: #4ade80;
}
.badge-other {
background: var(--border-color);
color: var(--text-secondary);
}
/* ─── Spinner ─── */
.spinner-sm {
width: 2rem;
height: 2rem;
border: 2.5px solid var(--border-color);
border-top-color: var(--active-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ─── FAB mapa ─── */
.fab-map {
position: fixed;
bottom: 5.5rem;
right: 1.25rem;
width: 3.5rem;
height: 3.5rem;
background: var(--active-color);
color: #101820;
border: none;
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 40;
transition: transform 0.15s;
}
.fab-map:active {
transform: scale(0.94);
}
.fab-map .material-icons {
font-size: 1.5rem;
}
/* ─── Transición FAB ─── */
.fab-enter-active, .fab-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
}
.fab-enter-from, .fab-leave-to {
opacity: 0;
transform: translateY(1rem) scale(0.9);
}
</style>