fix: remove duplicate headers, fix i18n keys, unify theme colors in Discover and Schedules views
- 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:
@ -70,10 +70,18 @@
|
||||
"loadingRoutes": "Loading routes...",
|
||||
"noRoutesAvailable": "No routes available",
|
||||
"selectRoute": "Select a route",
|
||||
"placeholder": "Choose a route...",
|
||||
"upcoming": "Upcoming departures",
|
||||
"noSchedules": "No departures scheduled for today",
|
||||
"route": "Route",
|
||||
"schedules": "schedules",
|
||||
"schedule": "schedule",
|
||||
"departureTime": "Departure time"
|
||||
"departureTime": "Departure time",
|
||||
"types": {
|
||||
"weekday": "Weekday",
|
||||
"weekend": "Weekend",
|
||||
"holiday": "Holiday"
|
||||
}
|
||||
},
|
||||
"coupons": {
|
||||
"title": "Offers",
|
||||
@ -134,6 +142,7 @@
|
||||
"discover": {
|
||||
"title": "Discover",
|
||||
"subtitle": "Explore the best places in Chiriqui",
|
||||
"searchPlaceholder": "Explore the best places in Chiriqui",
|
||||
"filterLabel": "Filter by area:",
|
||||
"allAreas": "All",
|
||||
"loading": "Searching for treasures...",
|
||||
|
||||
@ -71,10 +71,18 @@
|
||||
"loadingRoutes": "Cargando rutas...",
|
||||
"noRoutesAvailable": "No hay rutas disponibles",
|
||||
"selectRoute": "Seleccionar una ruta",
|
||||
"placeholder": "Elige una ruta...",
|
||||
"upcoming": "Próximas salidas",
|
||||
"noSchedules": "No hay salidas programadas para hoy",
|
||||
"route": "Ruta",
|
||||
"schedules": "horarios",
|
||||
"schedule": "horario",
|
||||
"departureTime": "Hora de salida"
|
||||
"departureTime": "Hora de salida",
|
||||
"types": {
|
||||
"weekday": "Entre semana",
|
||||
"weekend": "Fin de semana",
|
||||
"holiday": "Festivo"
|
||||
}
|
||||
},
|
||||
"coupons": {
|
||||
"title": "Ofertas",
|
||||
@ -135,6 +143,7 @@
|
||||
"discover": {
|
||||
"title": "Descubrir",
|
||||
"subtitle": "Explora los mejores lugares de Chiriquí",
|
||||
"searchPlaceholder": "Explora los mejores lugares en Chiriquí",
|
||||
"filterLabel": "Filtrar por área:",
|
||||
"allAreas": "Todas",
|
||||
"loading": "Buscando tesoros...",
|
||||
|
||||
@ -89,94 +89,92 @@ function getCategoryIcon(category: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="discover-view bg-white dark:bg-zinc-950 text-slate-900 dark:text-gray-200 min-h-screen pb-32">
|
||||
<!-- Header Area -->
|
||||
<header class="bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md px-6 pt-12 pb-4 sticky top-0 z-50 border-b border-slate-100 dark:border-zinc-800">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<button @click="router.back()" class="material-icons text-3xl font-bold cursor-pointer dark:text-white">arrow_back</button>
|
||||
<h1 class="text-2xl font-extrabold tracking-tighter dark:text-white uppercase italic">SIBU</h1>
|
||||
<div class="w-8"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="discover-view">
|
||||
|
||||
<main class="px-5 pt-6">
|
||||
<!-- Search Bar -->
|
||||
<div class="mb-6">
|
||||
<div class="relative flex items-center bg-slate-50 dark:bg-zinc-900 rounded-2xl shadow-sm p-1 border border-slate-100 dark:border-zinc-800">
|
||||
<div class="p-3">
|
||||
<span class="material-icons text-slate-400 dark:text-gray-500">search</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="w-full bg-transparent border-none focus:ring-0 text-slate-900 dark:text-gray-200 font-medium placeholder:text-slate-400 dark:placeholder:text-gray-500 text-[15px]"
|
||||
:placeholder="t('discover.searchPlaceholder') || 'Explora los mejores lugares en Chiriquí'"
|
||||
type="text"
|
||||
/>
|
||||
<!-- Barra de búsqueda -->
|
||||
<div class="search-section">
|
||||
<div class="search-bar">
|
||||
<span class="material-icons search-icon-inner">search</span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
:placeholder="t('discover.searchPlaceholder')"
|
||||
type="text"
|
||||
/>
|
||||
<button v-if="searchQuery" class="clear-search-btn" @click="searchQuery = ''">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros de Región y Categoría -->
|
||||
<div class="filters-row">
|
||||
<div class="filter-card">
|
||||
<div class="filter-label-row">
|
||||
<span class="material-icons filter-icon">location_on</span>
|
||||
<span class="filter-label-text">REGIÓN</span>
|
||||
</div>
|
||||
<select v-model="selectedArea" class="filter-select">
|
||||
<option value="Todas">{{ t('discover.allAreas') }}</option>
|
||||
<option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Region & Category Selectors -->
|
||||
<div class="flex gap-3 mb-8">
|
||||
<div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons text-blue-500 text-[18px] font-bold">location_on</span>
|
||||
<span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Región</span>
|
||||
</div>
|
||||
<select v-model="selectedArea" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
|
||||
<option value="Todas">{{ t('discover.allAreas') }}</option>
|
||||
<option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-icons text-blue-500 text-[18px] font-bold">category</span>
|
||||
<span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Categoría</span>
|
||||
</div>
|
||||
<select v-model="selectedCategory" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
|
||||
<option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
|
||||
</select>
|
||||
<div class="filter-card">
|
||||
<div class="filter-label-row">
|
||||
<span class="material-icons filter-icon">category</span>
|
||||
<span class="filter-label-text">CATEGORÍA</span>
|
||||
</div>
|
||||
<select v-model="selectedCategory" class="filter-select">
|
||||
<option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="discover-main">
|
||||
<!-- Loading -->
|
||||
<div v-if="isLoading" class="state-container">
|
||||
<div class="spinner"></div>
|
||||
<p class="state-text">Sincronizando con SIBU...</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
|
||||
<div class="w-10 h-10 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin mb-4"></div>
|
||||
<p class="text-slate-500 dark:text-gray-400 font-bold tracking-widest uppercase text-xs">Sincronizando con SIBU...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="filteredBusinesses.length === 0" class="text-center py-20">
|
||||
<div class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] p-10 border border-dashed border-slate-200 dark:border-zinc-800">
|
||||
<span class="material-icons text-slate-300 dark:text-gray-600 text-5xl mb-4">search_off</span>
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">Sin resultados</h3>
|
||||
<p class="text-slate-500 dark:text-gray-400 mb-6">La búsqueda no devolvió datos en esta frecuencia.</p>
|
||||
<button @click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''" class="bg-blue-500 text-white px-8 py-3 rounded-xl font-black uppercase text-xs tracking-widest active:scale-95 transition-all">
|
||||
REINICIAR SENSORES
|
||||
<!-- Vacío -->
|
||||
<div v-else-if="filteredBusinesses.length === 0" class="state-container">
|
||||
<div class="empty-box">
|
||||
<span class="material-icons empty-icon">search_off</span>
|
||||
<h3 class="empty-title">Sin resultados</h3>
|
||||
<p class="empty-desc">La búsqueda no devolvió resultados.</p>
|
||||
<button
|
||||
@click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''"
|
||||
class="reset-btn"
|
||||
>
|
||||
REINICIAR FILTROS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Business Grid -->
|
||||
<!-- Grid de negocios -->
|
||||
<TransitionGroup
|
||||
v-else
|
||||
name="fade"
|
||||
tag="div"
|
||||
class="grid grid-cols-2 gap-4"
|
||||
class="business-grid"
|
||||
>
|
||||
<div v-for="biz in filteredBusinesses"
|
||||
:key="biz.id"
|
||||
class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] overflow-hidden shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col active:scale-95 transition-all cursor-pointer"
|
||||
@click="handleExplore(biz)"
|
||||
<div
|
||||
v-for="biz in filteredBusinesses"
|
||||
:key="biz.id"
|
||||
class="business-card"
|
||||
@click="handleExplore(biz)"
|
||||
>
|
||||
<div class="relative h-44">
|
||||
<img :src="getImageUrl(biz.image_url)" alt="" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/40 to-transparent"></div>
|
||||
<div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md p-1.5 rounded-xl border border-white/10">
|
||||
<span class="material-icons text-blue-400 text-[18px] flex items-center justify-center">
|
||||
<div class="card-image-wrapper">
|
||||
<img :src="getImageUrl(biz.image_url)" :alt="biz.name" class="card-img" />
|
||||
<div class="card-gradient"></div>
|
||||
<div class="card-category-badge">
|
||||
<span class="material-icons category-badge-icon">
|
||||
{{ getCategoryIcon(biz.category || '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute top-3 right-3">
|
||||
<div class="card-favorite-btn">
|
||||
<FavoriteButton
|
||||
item-type="business"
|
||||
:item-id="biz.id"
|
||||
@ -185,13 +183,11 @@ function getCategoryIcon(category: string) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex flex-col flex-grow">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-tight mb-2">{{ biz.name }}</h3>
|
||||
<div class="mt-auto flex items-center justify-between">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="material-icons text-blue-400 text-[14px]">near_me</span>
|
||||
<span class="text-xs font-semibold text-slate-500 dark:text-gray-500">{{ biz.area }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-name">{{ biz.name }}</h3>
|
||||
<div class="card-meta">
|
||||
<span class="material-icons card-meta-icon">near_me</span>
|
||||
<span class="card-area">{{ biz.area }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -202,19 +198,313 @@ function getCategoryIcon(category: string) {
|
||||
|
||||
<style scoped>
|
||||
.discover-view {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
/* ─── Búsqueda ─── */
|
||||
.search-section {
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.search-icon-inner {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.clear-search-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ─── Filtros ─── */
|
||||
.filters-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 1rem;
|
||||
padding: 0.875rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
.filter-label-text {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-select option {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ─── Estados ─── */
|
||||
.discover-main {
|
||||
flex: 1;
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rem 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 3px 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); } }
|
||||
|
||||
.state-text {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
background: var(--bg-secondary);
|
||||
border: 1.5px dashed var(--border-color);
|
||||
border-radius: 1.5rem;
|
||||
padding: 2.5rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.4;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
margin-top: 0.75rem;
|
||||
background: var(--active-color);
|
||||
color: #101820;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.625rem 1.5rem;
|
||||
font-weight: 900;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.1em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.reset-btn:active { transform: scale(0.97); }
|
||||
|
||||
/* ─── Grid ─── */
|
||||
.business-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.875rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.business-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 1.25rem;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.business-card:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.card-image-wrapper {
|
||||
position: relative;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.card-category-badge {
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
left: 0.625rem;
|
||||
background: rgba(0,0,0,0.55);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 0.625rem;
|
||||
padding: 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-badge-icon {
|
||||
font-size: 1rem;
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
.card-favorite-btn {
|
||||
position: absolute;
|
||||
top: 0.625rem;
|
||||
right: 0.625rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.card-meta-icon {
|
||||
font-size: 0.875rem;
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
.card-area {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ─── Transiciones ─── */
|
||||
.fade-move,
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(16px);
|
||||
}
|
||||
|
||||
.fade-leave-active {
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user