Implement Smart Location: auto-detect user location if preference is enabled, hide location button, and handle permission denial by resetting preference
This commit is contained in:
@ -2,6 +2,9 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const LoginForm = defineAsyncComponent(() => import('@/components/auth/LoginForm.vue'))
|
||||
const RegisterForm = defineAsyncComponent(() => import('@/components/auth/RegisterForm.vue'))
|
||||
|
||||
@ -14,7 +17,7 @@ const sessionExpiredMessage = ref('')
|
||||
// Detectar si fue redirigido por sesión expirada
|
||||
onMounted(() => {
|
||||
if (route.query.reason === 'session_expired') {
|
||||
sessionExpiredMessage.value = 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.'
|
||||
sessionExpiredMessage.value = t('auth.sessionExpired')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -29,13 +32,13 @@ onMounted(() => {
|
||||
<!-- Botón volver al mapa -->
|
||||
<button class="back-to-map" @click="router.push('/map')">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
Volver
|
||||
{{ t('auth.back') }}
|
||||
</button>
|
||||
|
||||
<!-- Branding -->
|
||||
<div class="auth-brand">
|
||||
<h1 class="brand-title">SIBU</h1>
|
||||
<p class="brand-subtitle">Sistema de Transporte Público</p>
|
||||
<p class="brand-subtitle">{{ t('auth.brandingSubtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Card principal -->
|
||||
@ -47,14 +50,14 @@ onMounted(() => {
|
||||
:class="{ 'auth-tab--active': isLogin }"
|
||||
@click="isLogin = true"
|
||||
>
|
||||
Iniciar Sesión
|
||||
{{ t('auth.loginTab') }}
|
||||
</button>
|
||||
<button
|
||||
class="auth-tab"
|
||||
:class="{ 'auth-tab--active': !isLogin }"
|
||||
@click="isLogin = false"
|
||||
>
|
||||
Crear Cuenta
|
||||
{{ t('auth.registerTab') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -72,7 +75,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
|
||||
<p class="auth-footer">{{ t('auth.footer') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -215,6 +218,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border: 10px 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { businessService } from '@/services/businessService'
|
||||
import { couponsService } from '@/services/couponsService'
|
||||
import type { Business, Coupon } from '@/types'
|
||||
@ -9,6 +10,7 @@ import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const business = ref<Business | null>(null)
|
||||
const coupons = ref<Coupon[]>([])
|
||||
const isLoading = ref(true)
|
||||
@ -80,42 +82,42 @@ const goBack = () => router.back()
|
||||
<!-- Details Content -->
|
||||
<div class="details-container">
|
||||
<div class="premium-story">
|
||||
<h2 class="premium-font">Explora Nuestra Historia Para Una Cocina Refinada Y Un Ambiente Atemporal</h2>
|
||||
<p>"Nuestra historia es una de crecimiento, exploración y recuerdos culinarios inolvidables, donde cada capítulo se sirve con elegancia."</p>
|
||||
<h2 class="premium-font">{{ t('business.detailsTitle') }}</h2>
|
||||
<p>"{{ t('business.detailsDescription') }}"</p>
|
||||
</div>
|
||||
|
||||
<!-- Highlights Grid (Inspired by the frame) -->
|
||||
<div class="highlights-grid">
|
||||
<div class="highlight-item">
|
||||
<div class="highlight-header">
|
||||
<h3 class="premium-font">Herencia Atemporal</h3>
|
||||
<h3 class="premium-font">{{ t('business.timelessHeritage') }}</h3>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>Platos de autor que evolucionan con inspiración y cultura local.</p>
|
||||
<p>{{ t('business.timelessHeritageDesc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-item">
|
||||
<div class="highlight-header">
|
||||
<h3 class="premium-font">Platos de Clase Mundial</h3>
|
||||
<h3 class="premium-font">{{ t('business.worldClassDishes') }}</h3>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>Experiencia gastronómica diseñada para deleitar los sentidos más exigentes.</p>
|
||||
<p>{{ t('business.worldClassDishesDesc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-item">
|
||||
<div class="highlight-header">
|
||||
<h3 class="premium-font">Emoción y Elegancia</h3>
|
||||
<h3 class="premium-font">{{ t('business.emotionElegance') }}</h3>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>Veladas realzadas por el encanto atemporal de un ambiente exclusivo.</p>
|
||||
<p>{{ t('business.emotionEleganceDesc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="highlight-item">
|
||||
<div class="highlight-header">
|
||||
<h3 class="premium-font">Experiencia Inigualable</h3>
|
||||
<h3 class="premium-font">{{ t('business.unmatchedExperience') }}</h3>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>Servicio personalizado desde un anfitrión dedicado para tu comodidad.</p>
|
||||
<p>{{ t('business.unmatchedExperienceDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,7 +126,7 @@ const goBack = () => router.back()
|
||||
<div class="info-card">
|
||||
<span class="material-icons">map</span>
|
||||
<div class="info-text">
|
||||
<h4>Dirección</h4>
|
||||
<h4>{{ t('business.address') }}</h4>
|
||||
<p>{{ business.address }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -132,15 +134,15 @@ const goBack = () => router.back()
|
||||
<div class="info-card">
|
||||
<span class="material-icons">phone</span>
|
||||
<div class="info-text">
|
||||
<h4>Contacto</h4>
|
||||
<p>{{ business.phone || 'No disponible' }}</p>
|
||||
<h4>{{ t('business.contact') }}</h4>
|
||||
<p>{{ business.phone || t('common.notAvailable') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="business.social_media" class="info-card">
|
||||
<span class="material-icons">language</span>
|
||||
<div class="info-text">
|
||||
<h4>Redes Sociales</h4>
|
||||
<h4>{{ t('business.socialMedia') }}</h4>
|
||||
<p>{{ business.social_media }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -148,7 +150,7 @@ const goBack = () => router.back()
|
||||
|
||||
<!-- Offers Section -->
|
||||
<div v-if="coupons.length > 0" class="offers-section">
|
||||
<h2 class="section-title premium-font">Ofertas Disponibles</h2>
|
||||
<h2 class="section-title premium-font">{{ t('business.availableOffers') }}</h2>
|
||||
<div class="coupons-grid">
|
||||
<div v-for="coupon in coupons" :key="coupon.id" class="coupon-card-detail">
|
||||
<div class="coupon-header-flex">
|
||||
@ -172,7 +174,7 @@ const goBack = () => router.back()
|
||||
|
||||
<div v-else-if="isLoading" class="loading-full">
|
||||
<div class="loader"></div>
|
||||
<p>Cargando experiencia premium...</p>
|
||||
<p>{{ t('business.loadingPremium') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -15,7 +15,14 @@ const selectedCoupon = ref<Coupon | null>(null)
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('Todas')
|
||||
const showFilterSheet = ref(false)
|
||||
const categories = ['Todas', 'Restaurante', 'Turismo', 'Bebidas', 'Comercio']
|
||||
|
||||
const CATEGORIES = computed(() => [
|
||||
{ label: t('discover.categories.all'), value: 'Todas' },
|
||||
{ label: t('discover.categories.restaurant'), value: 'Restaurante' },
|
||||
{ label: t('discover.categories.tourism'), value: 'Turismo' },
|
||||
{ label: t('discover.categories.drinks'), value: 'Bebidas' },
|
||||
{ label: t('discover.categories.commerce'), value: 'Comercio' }
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
couponStore.loadCoupons()
|
||||
@ -115,7 +122,7 @@ function getCategoryIcon(category?: string | null) {
|
||||
|
||||
<div v-else-if="filteredCoupons.length === 0" class="empty-container">
|
||||
<span class="material-icons">search_off</span>
|
||||
<p>No se encontraron resultados para tu búsqueda.</p>
|
||||
<p>{{ t('coupons.noResults') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="coupons-grid-new">
|
||||
@ -143,7 +150,7 @@ function getCategoryIcon(category?: string | null) {
|
||||
</div>
|
||||
|
||||
<div class="offer-content">
|
||||
<h3 class="offer-title">{{ coupon.business?.name || 'Restaurante' }}</h3>
|
||||
<h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
|
||||
<p class="offer-benefit">{{ coupon.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -157,10 +164,10 @@ function getCategoryIcon(category?: string | null) {
|
||||
<h3>{{ t('coupons.filterByCategory') }}</h3>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div v-for="cat in categories" :key="cat" class="filter-option" @click="selectedCategory = cat; showFilterSheet = false">
|
||||
<span class="material-icons">{{ getCategoryIcon(cat) }}</span>
|
||||
<span>{{ cat }}</span>
|
||||
<span v-if="selectedCategory === cat" class="material-icons check">check_circle</span>
|
||||
<div v-for="cat in CATEGORIES" :key="cat.value" class="filter-option" @click="selectedCategory = cat.value; showFilterSheet = false">
|
||||
<span class="material-icons">{{ getCategoryIcon(cat.value) }}</span>
|
||||
<span>{{ cat.label }}</span>
|
||||
<span v-if="selectedCategory === cat.value" class="material-icons check">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-footer">
|
||||
@ -199,7 +206,7 @@ function getCategoryIcon(category?: string | null) {
|
||||
<span class="material-icons icon-desc">description</span>
|
||||
<h4>{{ t('coupons.description') }}</h4>
|
||||
</div>
|
||||
<p class="block-text">{{ selectedCoupon.description || 'Sin descripción adicional.' }}</p>
|
||||
<p class="block-text">{{ selectedCoupon.description || t('coupons.noDescription') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-block">
|
||||
@ -642,5 +649,3 @@ function getCategoryIcon(category?: string | null) {
|
||||
.spin { animation: spin 1s linear infinite; }
|
||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -3,11 +3,13 @@ import { ref, onMounted, computed } from 'vue'
|
||||
import { businessService } from '@/services/businessService'
|
||||
import type { Business } from '@/types'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import FavoriteButton from '@/components/FavoriteButton.vue'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
import { getImageUrl } from '@/utils/imageUrl'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const businesses = ref<Business[]>([])
|
||||
const isLoading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
@ -16,14 +18,19 @@ const selectedCategory = ref('Todas')
|
||||
const selectedArea = ref('Todas')
|
||||
|
||||
// ── Categorías con emoji e ícono material
|
||||
const CATEGORY_META: Record<string, { emoji: string; icon: string }> = {
|
||||
'Todas': { emoji: '✨', icon: 'apps' },
|
||||
'Restaurante': { emoji: '🍽️', icon: 'restaurant' },
|
||||
'Hotel': { emoji: '🏨', icon: 'hotel' },
|
||||
'Café': { emoji: '☕', icon: 'local_cafe' },
|
||||
'Comercio': { emoji: '🏪', icon: 'store' },
|
||||
'Turismo': { emoji: '🌄', icon: 'landscape' },
|
||||
'Bebidas': { emoji: '🍹', icon: 'local_bar' },
|
||||
const CATEGORY_META: Record<string, { emoji: string; icon: string; key: string }> = {
|
||||
'Todas': { emoji: '✨', icon: 'apps', key: 'discover.categories.all' },
|
||||
'Restaurante': { emoji: '🍽️', icon: 'restaurant', key: 'discover.categories.restaurant' },
|
||||
'Hotel': { emoji: '🏨', icon: 'hotel', key: 'discover.categories.hotel' },
|
||||
'Café': { emoji: '☕', icon: 'local_cafe', key: 'discover.categories.cafe' },
|
||||
'Comercio': { emoji: '🏪', icon: 'store', key: 'discover.categories.commerce' },
|
||||
'Turismo': { emoji: '🌄', icon: 'landscape', key: 'discover.categories.tourism' },
|
||||
'Bebidas': { emoji: '🍹', icon: 'local_bar', key: 'discover.categories.drinks' },
|
||||
}
|
||||
|
||||
function catName(cat: string) {
|
||||
const meta = CATEGORY_META[cat]
|
||||
return meta ? t(meta.key) : cat
|
||||
}
|
||||
|
||||
function catEmoji(cat: string) {
|
||||
@ -40,7 +47,7 @@ async function loadBusinesses() {
|
||||
businesses.value = await businessService.getAllBusinesses()
|
||||
} catch (e) {
|
||||
console.error('Error loading businesses:', e)
|
||||
error.value = 'No se pudieron cargar los lugares. Revisa tu conexión.'
|
||||
error.value = t('discover.error')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@ -100,6 +107,9 @@ function handleExplore(biz: Business) {
|
||||
|
||||
|
||||
function resetFilters() {
|
||||
selectedCategory.value = 'Todas'
|
||||
selectedArea.value = t('discover.allAreas') === 'All' ? 'Todas' : 'Todas' // Simplified to keep internal logic consistent
|
||||
// Using strings as keys for internal logic, translating only for display
|
||||
selectedCategory.value = 'Todas'
|
||||
selectedArea.value = 'Todas'
|
||||
searchQuery.value = ''
|
||||
@ -112,8 +122,8 @@ function resetFilters() {
|
||||
<!-- ── HEADER ── -->
|
||||
<header class="disc-header">
|
||||
<div class="header-body">
|
||||
<h1 class="disc-title">¡Explora Chiriquí! 🌿</h1>
|
||||
<p class="disc-sub">Descubre los mejores lugares cerca de ti</p>
|
||||
<h1 class="disc-title">{{ t('discover.title') }}</h1>
|
||||
<p class="disc-sub">{{ t('discover.subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Búsqueda -->
|
||||
@ -123,7 +133,7 @@ function resetFilters() {
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Buscar restaurantes, hoteles..."
|
||||
:placeholder="t('discover.searchPlaceholder')"
|
||||
/>
|
||||
<button v-if="searchQuery" class="search-clear" @click="searchQuery = ''">
|
||||
<span class="material-icons">close</span>
|
||||
@ -141,7 +151,7 @@ function resetFilters() {
|
||||
:class="{ 'cat-chip--active': selectedCategory === cat }"
|
||||
@click="selectedCategory = cat"
|
||||
>
|
||||
{{ catEmoji(cat) }} {{ cat }}
|
||||
{{ catEmoji(cat) }} {{ catName(cat) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -149,7 +159,7 @@ function resetFilters() {
|
||||
<!-- ── LOADING ── -->
|
||||
<div v-if="isLoading" class="state-center">
|
||||
<div class="spinner"></div>
|
||||
<p>Cargando lugares...</p>
|
||||
<p>{{ t('discover.loading') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- ── ERROR ── -->
|
||||
@ -158,7 +168,7 @@ function resetFilters() {
|
||||
<p style="font-weight: 600; color: var(--text-secondary);">{{ error }}</p>
|
||||
<button class="cta-btn" style="margin-top: 1rem;" @click="loadBusinesses">
|
||||
<span class="material-icons">refresh</span>
|
||||
Reintentar
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -184,14 +194,13 @@ function resetFilters() {
|
||||
<!-- Contador de resultados -->
|
||||
<div class="results-bar">
|
||||
<span class="results-count">
|
||||
{{ filteredBusinesses.length }}
|
||||
{{ filteredBusinesses.length === 1 ? 'lugar' : 'lugares' }}
|
||||
<template v-if="selectedCategory !== 'Todas'"> en {{ selectedCategory }}</template>
|
||||
{{ t('discover.results', { count: filteredBusinesses.length }) }}
|
||||
<template v-if="selectedCategory !== 'Todas'"> {{ t('discover.in') }} {{ catName(selectedCategory) }}</template>
|
||||
<template v-if="selectedArea !== 'Todas'"> · {{ selectedArea }}</template>
|
||||
</span>
|
||||
<button class="reset-btn" @click="resetFilters">
|
||||
<span class="material-icons">refresh</span>
|
||||
Limpiar
|
||||
{{ t('common.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -218,7 +227,7 @@ function resetFilters() {
|
||||
</div>
|
||||
<span class="biz-cat-badge">
|
||||
<span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
|
||||
{{ biz.category }}
|
||||
{{ catName(biz.category || '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="biz-body">
|
||||
@ -234,16 +243,16 @@ function resetFilters() {
|
||||
<!-- Vacío -->
|
||||
<div v-else class="empty-state">
|
||||
<span class="material-icons empty-icon">search_off</span>
|
||||
<h2 class="empty-title">Sin resultados</h2>
|
||||
<p class="empty-sub">No encontramos lugares con ese filtro.</p>
|
||||
<button class="cta-btn" @click="resetFilters">Ver todos los lugares</button>
|
||||
<h2 class="empty-title">{{ t('discover.noResults') }}</h2>
|
||||
<p class="empty-sub">{{ t('discover.noResultsDesc') }}</p>
|
||||
<button class="cta-btn" @click="resetFilters">{{ t('discover.viewAll') }}</button>
|
||||
</div>
|
||||
|
||||
<!-- CTA al final -->
|
||||
<div v-if="filteredBusinesses.length > 0" class="more-card" @click="resetFilters">
|
||||
<p class="more-card-title">¿Buscas algo más?</p>
|
||||
<p class="more-card-sub">Explora sin filtros para descubrir todo</p>
|
||||
<button class="cta-btn">Ver todo</button>
|
||||
<p class="more-card-title">{{ t('discover.lookingMore') }}</p>
|
||||
<p class="more-card-sub">{{ t('discover.exploreWithoutFilters') }}</p>
|
||||
<button class="cta-btn">{{ t('common.all') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -252,7 +261,7 @@ function resetFilters() {
|
||||
|
||||
<!-- CHIPS DE ÁREA -->
|
||||
<div v-if="areas.length > 0" class="area-section">
|
||||
<p class="section-label">🗺️ Por Área</p>
|
||||
<p class="section-label">{{ t('discover.sections.byArea') }}</p>
|
||||
<div class="area-chips">
|
||||
<button
|
||||
v-for="area in areas"
|
||||
@ -269,7 +278,7 @@ function resetFilters() {
|
||||
|
||||
<!-- DESTACADOS -->
|
||||
<div v-if="featuredBusinesses.length > 0" class="featured-section">
|
||||
<p class="section-label">✨ Destacados</p>
|
||||
<p class="section-label">{{ t('discover.sections.featured') }}</p>
|
||||
<div class="featured-grid">
|
||||
<div
|
||||
v-for="biz in featuredBusinesses"
|
||||
@ -293,7 +302,7 @@ function resetFilters() {
|
||||
<div class="featured-info">
|
||||
<span class="featured-cat">
|
||||
<span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
|
||||
{{ biz.category }}
|
||||
{{ catName(biz.category || '') }}
|
||||
</span>
|
||||
<p class="featured-name">{{ biz.name }}</p>
|
||||
<p class="featured-area">
|
||||
@ -307,7 +316,7 @@ function resetFilters() {
|
||||
|
||||
<!-- TODOS LOS LUGARES -->
|
||||
<div v-if="gridBusinesses.length > 0" class="all-section">
|
||||
<p class="section-label">🏙️ Todos los lugares</p>
|
||||
<p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
|
||||
<TransitionGroup name="fade" tag="div" class="biz-grid">
|
||||
<div
|
||||
v-for="biz in gridBusinesses"
|
||||
@ -330,7 +339,7 @@ function resetFilters() {
|
||||
</div>
|
||||
<span class="biz-cat-badge">
|
||||
<span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
|
||||
{{ biz.category }}
|
||||
{{ catName(biz.category || '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="biz-body">
|
||||
@ -346,8 +355,8 @@ function resetFilters() {
|
||||
|
||||
<div v-if="businesses.length === 0" class="empty-state">
|
||||
<span class="material-icons empty-icon">storefront</span>
|
||||
<h2 class="empty-title">Sin lugares aún</h2>
|
||||
<p class="empty-sub">Pronto habrá negocios y lugares turísticos disponibles aquí.</p>
|
||||
<h2 class="empty-title">{{ t('discover.empty') }}</h2>
|
||||
<p class="empty-sub">{{ t('discover.emptyDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -357,7 +366,7 @@ function resetFilters() {
|
||||
<style scoped>
|
||||
/* ═══════════════════════════════════════════
|
||||
BASE
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.disc-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
@ -366,7 +375,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
HEADER
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.disc-header {
|
||||
padding: 1.25rem 1.25rem 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
@ -433,7 +442,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CHIPS DE CATEGORÍA
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.cat-chips-wrap {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.75rem 0;
|
||||
@ -481,7 +490,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CONTENIDO
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.disc-content {
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
@ -502,7 +511,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CHIPS DE ÁREA
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.area-section { display: flex; flex-direction: column; }
|
||||
|
||||
.area-chips {
|
||||
@ -539,7 +548,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
SECCIÓN DESTACADOS
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.featured-section { display: flex; flex-direction: column; }
|
||||
|
||||
.featured-grid {
|
||||
@ -623,7 +632,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
GRID DE NEGOCIOS
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.all-section { display: flex; flex-direction: column; }
|
||||
|
||||
.biz-grid {
|
||||
@ -707,7 +716,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
BARRA DE RESULTADOS
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.results-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -742,7 +751,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
TARJETA "MÁS"
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.more-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1.5px dashed var(--border-color);
|
||||
@ -770,7 +779,7 @@ function resetFilters() {
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
CTA Y VACÍO
|
||||
═══════════════════════════════════════════ */
|
||||
═══════════════════════════════════════════ */
|
||||
.cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -798,7 +807,7 @@ function resetFilters() {
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3.5rem;
|
||||
font-size: 4rem;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.3;
|
||||
margin-bottom: 1rem;
|
||||
@ -808,54 +817,25 @@ function resetFilters() {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.5;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
LOADING / SPINNER
|
||||
═══════════════════════════════════════════ */
|
||||
.state-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4rem 1.25rem;
|
||||
gap: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 2.5px solid var(--border-color);
|
||||
border-top-color: var(--active-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
TRANSICIÓN DE TARJETAS
|
||||
═══════════════════════════════════════════ */
|
||||
.fade-enter-active { transition: opacity 0.25s ease, transform 0.25s ease; }
|
||||
.fade-enter-from { opacity: 0; transform: translateY(8px); }
|
||||
/* Transitions */
|
||||
.fade-enter-active, .fade-leave-active { transition: all 0.3s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(10px); }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
RESPONSIVE
|
||||
═══════════════════════════════════════════ */
|
||||
@media (min-width: 560px) {
|
||||
.biz-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.featured-grid { grid-template-columns: 1fr; }
|
||||
.featured-card { aspect-ratio: 4/3; }
|
||||
═══════════════════════════════════════════ */
|
||||
@media (max-width: 480px) {
|
||||
.biz-grid, .featured-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,20 +2,22 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useFavoritesStore } from '@/stores/favorites'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const favoritesStore = useFavoritesStore()
|
||||
const selectedFilter = ref('all')
|
||||
|
||||
const filters = [
|
||||
{ key: 'all', label: 'Todos', icon: 'star' },
|
||||
{ key: 'routes', label: 'Buses', icon: 'directions_bus' },
|
||||
{ key: 'taxis', label: 'Taxis', icon: 'local_taxi' },
|
||||
{ key: 'businesses',label: 'Comercios', icon: 'store' },
|
||||
{ key: 'coupons', label: 'Ofertas', icon: 'confirmation_number' },
|
||||
{ key: 'stops', label: 'Paradas', icon: 'location_on' },
|
||||
]
|
||||
const filters = computed(() => [
|
||||
{ key: 'all', label: t('common.all'), icon: 'star' },
|
||||
{ key: 'routes', label: t('favorites.tabs.routes'), icon: 'directions_bus' },
|
||||
{ key: 'taxis', label: t('favorites.tabs.taxis'), icon: 'local_taxi' },
|
||||
{ key: 'businesses',label: t('favorites.tabs.businesses'), icon: 'store' },
|
||||
{ key: 'coupons', label: t('favorites.tabs.coupons'), icon: 'confirmation_number' },
|
||||
{ key: 'stops', label: t('navigation.routes'), icon: 'location_on' }, // Reusing navigation.routes or adding a specific one
|
||||
])
|
||||
|
||||
onMounted(async () => {
|
||||
await favoritesStore.loadFavorites()
|
||||
@ -67,9 +69,9 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
<!-- ── Header ── -->
|
||||
<header class="fav-header">
|
||||
<h1 class="fav-title">Mis Favoritos</h1>
|
||||
<h1 class="fav-title">{{ t('favorites.title') }}</h1>
|
||||
<p class="fav-count" v-if="totalFavorites > 0">
|
||||
{{ totalFavorites }} guardado{{ totalFavorites !== 1 ? 's' : '' }}
|
||||
{{ t('favorites.count', { count: totalFavorites }) }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@ -92,7 +94,7 @@ const hasVisibleItems = computed(() =>
|
||||
<!-- ── Loading ── -->
|
||||
<div v-if="favoritesStore.isLoading" class="state-center">
|
||||
<div class="spinner"></div>
|
||||
<p>Cargando favoritos...</p>
|
||||
<p>{{ t('common.loading') }}</p>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
@ -106,18 +108,18 @@ const hasVisibleItems = computed(() =>
|
||||
<line x1="43" y1="45" x2="57" y2="45" stroke="var(--active-color)" stroke-width="4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="empty-title">Nada guardado aún</h2>
|
||||
<p class="empty-sub">Explora rutas, taxis y negocios para guardar tus favoritos aquí</p>
|
||||
<h2 class="empty-title">{{ t('favorites.empty.title') }}</h2>
|
||||
<p class="empty-sub">{{ t('favorites.empty.description') }}</p>
|
||||
<button class="cta-btn" @click="router.push('/map')">
|
||||
<span class="material-icons">explore</span>
|
||||
Explorar ahora
|
||||
{{ t('favorites.cta.exploreNow') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Empty de categoría ── -->
|
||||
<div v-else-if="!hasVisibleItems" class="empty-state empty-state--sm">
|
||||
<span class="material-icons empty-cat-icon">search_off</span>
|
||||
<p class="empty-sub">No tienes favoritos en esta categoría</p>
|
||||
<p class="empty-sub">{{ t('favorites.empty.noResultsCategory') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Contenido ── -->
|
||||
@ -127,7 +129,7 @@ const hasVisibleItems = computed(() =>
|
||||
<section v-if="visibleRoutes.length > 0" class="fav-section">
|
||||
<div class="section-label">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
<span>Rutas</span>
|
||||
<span>{{ t('favorites.tabs.routes') }}</span>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div
|
||||
@ -141,9 +143,9 @@ const hasVisibleItems = computed(() =>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-name">{{ item.item_name }}</p>
|
||||
<p class="card-sub">Toca para ver horarios</p>
|
||||
<p class="card-sub">{{ t('favorites.viewSchedules') }}</p>
|
||||
</div>
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
|
||||
<span class="material-icons">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -154,7 +156,7 @@ const hasVisibleItems = computed(() =>
|
||||
<section v-if="visibleTaxis.length > 0" class="fav-section">
|
||||
<div class="section-label">
|
||||
<span class="material-icons">local_taxi</span>
|
||||
<span>Taxis</span>
|
||||
<span>{{ t('favorites.tabs.taxis') }}</span>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div
|
||||
@ -168,9 +170,9 @@ const hasVisibleItems = computed(() =>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-name">{{ item.item_name }}</p>
|
||||
<p class="card-sub">Taxi • Ver disponibilidad</p>
|
||||
<p class="card-sub">{{ t('favorites.availability') }}</p>
|
||||
</div>
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
|
||||
<span class="material-icons">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -181,7 +183,7 @@ const hasVisibleItems = computed(() =>
|
||||
<section v-if="visibleBusinesses.length > 0" class="fav-section">
|
||||
<div class="section-label">
|
||||
<span class="material-icons">store</span>
|
||||
<span>Negocios</span>
|
||||
<span>{{ t('favorites.tabs.businesses') }}</span>
|
||||
</div>
|
||||
<div class="biz-grid">
|
||||
<div
|
||||
@ -195,11 +197,11 @@ const hasVisibleItems = computed(() =>
|
||||
<button class="heart-btn heart-btn--active heart-btn--overlay" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
|
||||
<span class="material-icons">favorite</span>
|
||||
</button>
|
||||
<span class="biz-badge">Negocio</span>
|
||||
<span class="biz-badge">{{ t('favorites.tabs.businesses') }}</span>
|
||||
</div>
|
||||
<div class="biz-body">
|
||||
<p class="card-name">{{ item.item_name }}</p>
|
||||
<p class="card-sub">Ver detalles →</p>
|
||||
<p class="card-sub">{{ t('favorites.details') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -209,7 +211,7 @@ const hasVisibleItems = computed(() =>
|
||||
<section v-if="visibleCoupons.length > 0" class="fav-section">
|
||||
<div class="section-label">
|
||||
<span class="material-icons">confirmation_number</span>
|
||||
<span>Ofertas y Viajes</span>
|
||||
<span>{{ t('favorites.tabs.coupons') }}</span>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div
|
||||
@ -224,9 +226,9 @@ const hasVisibleItems = computed(() =>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-name">{{ item.item_name }}</p>
|
||||
<span class="badge-avail">Cupón</span>
|
||||
<span class="badge-avail">{{ t('favorites.tabs.coupons') }}</span>
|
||||
</div>
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
|
||||
<span class="material-icons">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -237,7 +239,7 @@ const hasVisibleItems = computed(() =>
|
||||
<section v-if="visibleStops.length > 0" class="fav-section">
|
||||
<div class="section-label">
|
||||
<span class="material-icons">location_on</span>
|
||||
<span>Paradas</span>
|
||||
<span>{{ t('navigation.routes') }}</span>
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div
|
||||
@ -251,7 +253,7 @@ const hasVisibleItems = computed(() =>
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<p class="card-name">{{ item.item_name }}</p>
|
||||
<span class="badge-avail">Favorito</span>
|
||||
<span class="badge-avail">{{ t('favorites.saved') }}</span>
|
||||
</div>
|
||||
<button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
|
||||
<span class="material-icons">favorite</span>
|
||||
@ -268,7 +270,7 @@ const hasVisibleItems = computed(() =>
|
||||
<style scoped>
|
||||
/* ══════════════════════════════════════════
|
||||
PÁGINA BASE
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.fav-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
@ -277,7 +279,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
HEADER
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.fav-header {
|
||||
padding: 1.5rem 1.25rem 1rem;
|
||||
background: var(--bg-secondary);
|
||||
@ -301,7 +303,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
CHIPS
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.chips-wrap {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.75rem 0 0.75rem;
|
||||
@ -355,7 +357,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
CONTENIDO
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.fav-content {
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
@ -385,7 +387,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
TARJETA FILA (rutas / taxis / eventos)
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.card-list { display: flex; flex-direction: column; gap: 0.625rem; }
|
||||
|
||||
.card {
|
||||
@ -440,6 +442,13 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
.card-thumb--event .material-icons { font-size: 1.5rem; }
|
||||
|
||||
.card-thumb--blue {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-thumb--blue .material-icons { font-size: 1.5rem; }
|
||||
|
||||
/* Info */
|
||||
.card-info { flex: 1; min-width: 0; }
|
||||
|
||||
@ -475,7 +484,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
BOTÓN CORAZÓN
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.heart-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
@ -522,7 +531,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
GRID DE NEGOCIOS
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.biz-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -584,7 +593,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
ESTADOS
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
.state-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -676,7 +685,7 @@ const hasVisibleItems = computed(() =>
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
RESPONSIVE
|
||||
══════════════════════════════════════════ */
|
||||
══════════════════════════════════════════ */
|
||||
@media (max-width: 480px) {
|
||||
.biz-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@ -689,4 +698,3 @@ const hasVisibleItems = computed(() =>
|
||||
.biz-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import { useRouteStore } from "@/stores/route";
|
||||
import { useMapStore } from "@/stores/map";
|
||||
import { useBusStopStore } from "@/stores/busStop";
|
||||
import { useCouponStore } from "@/stores/coupon";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { useGoogleMaps } from "@/composables/useGoogleMaps";
|
||||
import { analyticsService } from "@/services/analyticsService";
|
||||
import { getImageUrl } from "@/utils/imageUrl";
|
||||
@ -25,6 +26,7 @@ const routeStore = useRouteStore();
|
||||
const mapStore = useMapStore();
|
||||
const busStopStore = useBusStopStore();
|
||||
const couponStore = useCouponStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const { map, isLoaded, error: mapsError, initMap, addHtmlMarker, setCenter, setZoom, addMarker } = useGoogleMaps();
|
||||
const { estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
|
||||
@ -248,6 +250,12 @@ async function initializeMap() {
|
||||
// Show promotions on the map
|
||||
updatePromoMarkers();
|
||||
|
||||
// Smart Location: Detect automatically if enabled in profile
|
||||
if (authStore.userProfile?.auto_location) {
|
||||
console.log('🤖 JARVIS: Smart Location detectado — localizando automaticamente...');
|
||||
locateUser();
|
||||
}
|
||||
|
||||
// Apply initial styles based on current zoom
|
||||
updateMarkersStyles();
|
||||
}
|
||||
@ -486,6 +494,14 @@ function locateUser(): Promise<void> {
|
||||
},
|
||||
(error) => {
|
||||
console.warn("SIBU | Geolocalización denegada:", error.message);
|
||||
|
||||
// Si el usuario tenía auto_location pero denegó el permiso del navegador,
|
||||
// lo desmarcamos para que no lo vuelva a intentar infinitamente.
|
||||
if (authStore.userProfile?.auto_location) {
|
||||
console.log('🤖 JARVIS: Permiso denegado — desactivando Smart Location.');
|
||||
authStore.updateProfile({ auto_location: false });
|
||||
}
|
||||
|
||||
resolve();
|
||||
},
|
||||
{
|
||||
@ -563,7 +579,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<!-- Status overlay para SIBU Directions API -->
|
||||
<div v-if="estasCargandoRuta || errorRuta" class="status-indicator">
|
||||
<div v-if="estasCargandoRuta" class="loading-pill">
|
||||
Calculando ruta real...
|
||||
{{ t('map.calculatingRoute') }}
|
||||
</div>
|
||||
<div v-if="errorRuta" class="error-pill">
|
||||
{{ errorRuta }}
|
||||
@ -577,7 +593,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<!-- Floating Offers Button at exact location -->
|
||||
<div v-if="mapsError" class="error">
|
||||
<div style="text-align: center; padding: 20px; max-width: 600px; margin: 0 auto;">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 15px;">⚠️ Error al cargar mapa</h3>
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 15px;">⚠️ {{ t('map.mapLoadingError') }}</h3>
|
||||
<div style="color: var(--text-primary); margin-bottom: 15px; white-space: pre-line; text-align: left; background: var(--bg-secondary); padding: 15px; border-radius: 8px;">
|
||||
{{ mapsError }}
|
||||
</div>
|
||||
@ -603,9 +619,9 @@ async function highlightOptimalStopForRoute() {
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Location Button (Animated Pin) -->
|
||||
<!-- Location Button (Animated Pin) - Hidden if Smart Location is active -->
|
||||
<button
|
||||
v-if="isLoaded"
|
||||
v-if="isLoaded && !authStore.userProfile?.auto_location"
|
||||
class="location-loader-btn"
|
||||
@click="locateUser"
|
||||
:title="t('map.showMyLocation')"
|
||||
@ -625,7 +641,7 @@ async function highlightOptimalStopForRoute() {
|
||||
v-if="routeStore.selectedRouteId && wasSelectedFromMap"
|
||||
class="uber-search-trigger circular"
|
||||
@click="openUberSearch"
|
||||
title="Buscar"
|
||||
:title="t('map.search')"
|
||||
>
|
||||
<span class="material-icons">search</span>
|
||||
</div>
|
||||
@ -637,7 +653,7 @@ async function highlightOptimalStopForRoute() {
|
||||
@click="openUberSearch"
|
||||
>
|
||||
<span class="material-icons search-icon">directions_bus</span>
|
||||
<span class="trigger-label">ver rutas</span>
|
||||
<span class="trigger-label">{{ t('map.viewRoutes') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Nuevo Banner de Parada Cercana Alineado (Redimensionado y con ETA) -->
|
||||
@ -651,7 +667,7 @@ async function highlightOptimalStopForRoute() {
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
|
||||
<span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span>
|
||||
<span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">{{ t('map.arrivalTime') }}</span>
|
||||
<span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span>
|
||||
</div>
|
||||
|
||||
@ -683,7 +699,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<button class="back-btn" @click="closeUberSearch">
|
||||
<span class="material-icons">arrow_back</span>
|
||||
</button>
|
||||
<div class="search-title">Rutas Disponibles</div>
|
||||
<div class="search-title">{{ t('map.availableRoutes') }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Inputs and Toggle removed per request -->
|
||||
@ -706,7 +722,7 @@ async function highlightOptimalStopForRoute() {
|
||||
</div>
|
||||
<div class="result-content">
|
||||
<div class="result-name">{{ route.name }}</div>
|
||||
<div class="result-address">Ruta de Autobús</div>
|
||||
<div class="result-address">{{ t('map.busRoute') }}</div>
|
||||
</div>
|
||||
<span class="material-icons check-icon">
|
||||
{{ route.id === routeStore.selectedRouteId ? 'check_circle' : 'chevron_right' }}
|
||||
@ -725,7 +741,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<!-- Header -->
|
||||
<div class="sheet-header">
|
||||
<div class="sheet-title-group">
|
||||
<span class="sheet-title">Ofertas</span>
|
||||
<span class="sheet-title">{{ t('coupons.title') }}</span>
|
||||
</div>
|
||||
<button class="sheet-close" @click="showPromos = false">
|
||||
<span class="material-icons">close</span>
|
||||
@ -753,7 +769,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
|
||||
<h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
|
||||
<div class="sheet-actions">
|
||||
<button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
|
||||
<button class="sheet-cta" @click="handlePromoClick(currentPromo)">{{ t('coupons.viewDetails') }}</button>
|
||||
<span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -791,7 +807,7 @@ async function highlightOptimalStopForRoute() {
|
||||
class="promo-img-modal"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div class="promo-badge-modal">PROMO</div>
|
||||
<div class="promo-badge-modal">{{ t('map.promo') }}</div>
|
||||
</div>
|
||||
<div class="promo-body-modal">
|
||||
<h2 class="promo-title-modal">{{ selectedPromo.title }}</h2>
|
||||
@ -799,7 +815,7 @@ async function highlightOptimalStopForRoute() {
|
||||
<p>{{ selectedPromo.description }}</p>
|
||||
</div>
|
||||
<div class="promo-actions-modal">
|
||||
<button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
|
||||
<button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">{{ t('business.viewBusiness') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,11 +4,13 @@ import { useRouter } from 'vue-router'
|
||||
import { useCouponStore } from '@/stores/coupon'
|
||||
import { authService } from '@/services/authService'
|
||||
import { getImageUrl } from '@/utils/imageUrl'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const couponStore = useCouponStore()
|
||||
|
||||
const userName = ref(localStorage.getItem('user_name') || 'Usuario')
|
||||
const userName = ref(localStorage.getItem('user_name') || t('profile.user'))
|
||||
const userEmail = ref(localStorage.getItem('user_email') || '')
|
||||
const userRole = ref(localStorage.getItem('user_role') || 'PASSENGER')
|
||||
const userPhoto = ref(localStorage.getItem('profile_photo_url') || '')
|
||||
@ -89,9 +91,9 @@ async function handleUpdateProfile() {
|
||||
|
||||
showEditModal.value = false
|
||||
editForm.value.password = ''
|
||||
alert('Perfil actualizado correctamente')
|
||||
alert(t('profile.updateSuccess'))
|
||||
} catch (e: any) {
|
||||
alert('Error al actualizar: ' + (e.response?.data?.detail || e.message))
|
||||
alert(t('profile.updateError') + ' ' + (e.response?.data?.detail || e.message))
|
||||
} finally {
|
||||
isUpdating.value = false
|
||||
}
|
||||
@ -99,9 +101,9 @@ async function handleUpdateProfile() {
|
||||
|
||||
function getStatusLabel(status: string) {
|
||||
switch (status) {
|
||||
case 'claimed': return 'Pendiente'
|
||||
case 'redeemed': return 'Canjeado'
|
||||
case 'expired': return 'Vencido'
|
||||
case 'claimed': return t('profile.pending')
|
||||
case 'redeemed': return t('profile.redeemed')
|
||||
case 'expired': return t('profile.expired')
|
||||
default: return status
|
||||
}
|
||||
}
|
||||
@ -132,7 +134,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<button class="logout-icon-btn" @click="handleLogout" title="Cerrar Sesión">
|
||||
<button class="logout-icon-btn" @click="handleLogout" :title="t('profile.logoutTitle')">
|
||||
<span class="material-icons">logout</span>
|
||||
</button>
|
||||
</div>
|
||||
@ -141,7 +143,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
|
||||
<section class="my-coupons-section">
|
||||
<div class="section-header">
|
||||
<h2>Mis Cupones</h2>
|
||||
<h2>{{ t('profile.myCoupons') }}</h2>
|
||||
<span class="count">{{ couponStore.myCoupons.length }}</span>
|
||||
</div>
|
||||
|
||||
@ -149,9 +151,9 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
<div class="empty-icon-circle">
|
||||
<span class="material-icons">confirmation_number</span>
|
||||
</div>
|
||||
<h3>No tienes cupones</h3>
|
||||
<p>Explora los beneficios que tenemos para ti por usar SIBU.</p>
|
||||
<button @click="router.push('/coupons')" class="btn-primary">Ver Ofertas</button>
|
||||
<h3>{{ t('profile.emptyCoupons') }}</h3>
|
||||
<p>{{ t('profile.exploreOffers') }}</p>
|
||||
<button @click="router.push('/coupons')" class="btn-primary">{{ t('profile.viewOffers') }}</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="coupons-list">
|
||||
@ -162,8 +164,8 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
>
|
||||
<div class="coupon-main">
|
||||
<div class="coupon-details">
|
||||
<h3>{{ userCoupon.coupon?.title || 'Cupón' }}</h3>
|
||||
<p class="biz-name">{{ userCoupon.coupon?.business?.name || 'Comercio' }}</p>
|
||||
<h3>{{ userCoupon.coupon?.title || t('coupons.title') }}</h3> // Reusing coupons.title for fallback
|
||||
<p class="biz-name">{{ userCoupon.coupon?.business?.name || t('coupons.restaurant') }}</p>
|
||||
<div class="code-row">
|
||||
<span class="code">{{ userCoupon.redemption_code }}</span>
|
||||
<span :class="['status-tag', userCoupon.status]">{{ getStatusLabel(userCoupon.status) }}</span>
|
||||
@ -175,12 +177,12 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
@click="showQR(userCoupon.redemption_code, userCoupon.coupon?.title || '')"
|
||||
>
|
||||
<span class="material-icons">qr_code_2</span>
|
||||
Ver Código
|
||||
{{ t('profile.viewCode') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="coupon-footer">
|
||||
<span v-if="userCoupon.status === 'redeemed'">Usado el: {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
|
||||
<span v-else>Reclamado el: {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
|
||||
<span v-if="userCoupon.status === 'redeemed'">{{ t('profile.usedAt') }} {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
|
||||
<span v-else>{{ t('profile.claimedAt') }} {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -190,7 +192,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
<div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
|
||||
<div class="edit-modal">
|
||||
<div class="modal-header">
|
||||
<h2>Editar Perfil</h2>
|
||||
<h2>{{ t('profile.editProfile') }}</h2>
|
||||
<button class="close-btn" @click="showEditModal = false">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
@ -208,25 +210,25 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
</label>
|
||||
</div>
|
||||
<input id="photo-input" type="file" @change="handlePhotoChange" accept="image/*" hidden>
|
||||
<p class="upload-hint">Foto opcional</p>
|
||||
<p class="upload-hint">{{ t('profile.photoOptional') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nombre Completo</label>
|
||||
<input v-model="editForm.full_name" type="text" placeholder="Tu nombre" required>
|
||||
<label>{{ t('profile.nameLabel') }}</label>
|
||||
<input v-model="editForm.full_name" type="text" :placeholder="t('profile.namePlaceholder')" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Nueva Contraseña (Opcional)</label>
|
||||
<input v-model="editForm.password" type="password" placeholder="Mínimo 6 caracteres">
|
||||
<p class="field-hint">Déjalo en blanco si no quieres cambiarla.</p>
|
||||
<label>{{ t('profile.passwordOptional') }}</label>
|
||||
<input v-model="editForm.password" type="password" :placeholder="t('profile.passwordPlaceholder')">
|
||||
<p class="field-hint">{{ t('profile.passwordHint') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-cancel" @click="showEditModal = false">Cancelar</button>
|
||||
<button type="button" class="btn-cancel" @click="showEditModal = false">{{ t('profile.cancel') }}</button>
|
||||
<button type="submit" class="btn-save" :disabled="isUpdating">
|
||||
<span v-if="isUpdating" class="material-icons spin">refresh</span>
|
||||
{{ isUpdating ? 'Guardando...' : 'Guardar Cambios' }}
|
||||
{{ isUpdating ? t('profile.saving') : t('profile.save') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -241,7 +243,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
</button>
|
||||
<div class="qr-header">
|
||||
<span class="material-icons">verified</span>
|
||||
<h3>Cupón de Descuento</h3>
|
||||
<h3>{{ t('profile.qrTitle') }}</h3>
|
||||
</div>
|
||||
<p class="promo-title">{{ selectedTitle }}</p>
|
||||
|
||||
@ -250,14 +252,14 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
<span class="material-icons">qr_code_2</span>
|
||||
</div>
|
||||
<div class="redemption-box">
|
||||
<p>CÓDIGO DE REDENCIÓN</p>
|
||||
<p>{{ t('profile.qrCode') }}</p>
|
||||
<code class="big-code">{{ selectedCode }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="qr-instructions">Muestra este código al encargado del establecimiento para validar tu promoción.</p>
|
||||
<p class="qr-instructions">{{ t('profile.qrInstructions') }}</p>
|
||||
|
||||
<button class="btn-done" @click="showQRModal = false">Entendido</button>
|
||||
<button class="btn-done" @click="showQRModal = false">{{ t('profile.understood') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -634,6 +636,13 @@ const getFullUrl = (path: string) => getImageUrl(path)
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Modal Actions */
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
/* QR Modal Enhanced */
|
||||
.qr-modal {
|
||||
background: var(--card-bg);
|
||||
|
||||
@ -5,7 +5,9 @@ import { useRouteStore } from '@/stores/route'
|
||||
import { useTaxiStore } from '@/stores/taxi'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
import FavoriteButton from '@/components/FavoriteButton.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const routeStore = useRouteStore()
|
||||
const taxiStore = useTaxiStore()
|
||||
@ -80,7 +82,7 @@ const correlimientos = computed(() => {
|
||||
:class="activeTab === 'routes' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
|
||||
>
|
||||
<span class="material-icons text-lg">directions_bus</span>
|
||||
Rutas de Bus
|
||||
{{ t('routesView.busTab') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'taxis'"
|
||||
@ -88,7 +90,7 @@ const correlimientos = computed(() => {
|
||||
:class="activeTab === 'taxis' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
|
||||
>
|
||||
<span class="material-icons text-lg">local_taxi</span>
|
||||
Taxis Locales
|
||||
{{ t('routesView.taxiTab') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -102,7 +104,7 @@ const correlimientos = computed(() => {
|
||||
v-model="originSearch"
|
||||
@keyup.enter="handleBusSearch"
|
||||
class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
|
||||
placeholder="Ciudad de Origen"
|
||||
:placeholder="t('routesView.originPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,12 +115,12 @@ const correlimientos = computed(() => {
|
||||
v-model="destinationSearch"
|
||||
@keyup.enter="handleBusSearch"
|
||||
class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
|
||||
placeholder="Ciudad de Destino"
|
||||
:placeholder="t('routesView.destPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="handleBusSearch" class="w-full bg-primary py-4 rounded-2xl text-slate-900 font-bold uppercase tracking-widest text-xs shadow-lg active:scale-95 transition-all">
|
||||
Buscar Rutas
|
||||
{{ t('routesView.searchBtn') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -132,7 +134,7 @@ const correlimientos = computed(() => {
|
||||
@change="handleTaxiFilter"
|
||||
class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full dark:text-gray-200 appearance-none cursor-pointer"
|
||||
>
|
||||
<option value="">Todos los corregimientos</option>
|
||||
<option value="">{{ t('routesView.allCorregimientos') }}</option>
|
||||
<option v-for="c in correlimientos" :key="c" :value="c">{{ c }}</option>
|
||||
</select>
|
||||
<span class="material-icons ml-auto text-gray-500 text-sm">unfold_more</span>
|
||||
@ -140,7 +142,7 @@ const correlimientos = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center px-2">
|
||||
<span class="text-[10px] font-black text-slate-400 dark:text-gray-400 mb-2 uppercase">Inglés</span>
|
||||
<span class="text-[10px] font-black text-slate-400 dark:text-gray-400 mb-2 uppercase">{{ t('routesView.english') }}</span>
|
||||
<div
|
||||
@click="englishOnly = !englishOnly; handleTaxiFilter()"
|
||||
class="size-10 rounded-lg border-2 border-primary flex items-center justify-center bg-transparent cursor-pointer transition-colors"
|
||||
@ -156,7 +158,7 @@ const correlimientos = computed(() => {
|
||||
<!-- Results Area -->
|
||||
<div class="flex-1 px-6 pt-8 space-y-4 pb-32">
|
||||
<h2 class="text-[11px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.15em] mb-4">
|
||||
{{ activeTab === 'routes' ? 'Rutas Disponibles' : 'Conductores Recomendados' }}
|
||||
{{ activeTab === 'routes' ? t('routesView.availableRoutes') : t('routesView.recommendedDrivers') }}
|
||||
</h2>
|
||||
|
||||
<!-- Loading Results -->
|
||||
@ -181,7 +183,7 @@ const correlimientos = computed(() => {
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="font-extrabold text-xl">{{ route.name }}</p>
|
||||
<span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">ACTIVA</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">{{ t('routesView.active') }}</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 dark:text-gray-400 font-bold uppercase tracking-tight">
|
||||
{{ route.origin_city }} → {{ route.destination_city }}
|
||||
@ -198,15 +200,15 @@ const correlimientos = computed(() => {
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
|
||||
<span class="text-[10px] font-black dark:text-gray-200">{{ route.estimated_duration_minutes }} min • {{ route.distance_km }} km</span>
|
||||
<span class="text-[10px] font-black dark:text-gray-200">{{ route.estimated_duration_minutes }} {{ t('routesView.minutes') }} • {{ route.distance_km }} {{ t('routesView.km') }}</span>
|
||||
</div>
|
||||
<button class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all">
|
||||
Ver Horarios
|
||||
{{ t('routesView.findSchedules') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="routeStore.allRoutes.length === 0" class="text-center py-10 opacity-50 italic">
|
||||
No se encontraron rutas para tu búsqueda.
|
||||
{{ t('routesView.noRoutes') }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -247,18 +249,18 @@ const correlimientos = computed(() => {
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
|
||||
<span class="text-[10px] font-black dark:text-gray-200">{{ taxi.rating || 5.0 }} ★</span>
|
||||
<span v-if="taxi.english_speaking" class="text-[10px] font-black text-blue-500 uppercase">EN</span>
|
||||
<span v-if="taxi.english_speaking" class="text-[10px] font-black text-blue-500 uppercase">{{ t('routesView.english') }}</span>
|
||||
</div>
|
||||
<button
|
||||
@click="callTaxi(taxi.phone_number)"
|
||||
class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all"
|
||||
>
|
||||
Contactar
|
||||
{{ t('routesView.contact') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="taxiStore.taxis.length === 0" class="text-center py-10 opacity-50 italic">
|
||||
No hay taxis disponibles en esta zona.
|
||||
{{ t('routesView.noTaxis') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,10 @@ import { useRouteStore } from '@/stores/route'
|
||||
import { formatTo12Hour } from '@/utils/timeFormatter'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const route = useRoute()
|
||||
const { t } = useI18n()
|
||||
const scheduleStore = useScheduleStore()
|
||||
const routeStore = useRouteStore()
|
||||
|
||||
@ -15,9 +17,9 @@ const dayFilter = ref<'all' | 'today' | 'tomorrow'>('today')
|
||||
|
||||
// ── Tipos de día
|
||||
const DAY_TYPES: Record<string, string> = {
|
||||
'weekday': 'Días de semana',
|
||||
'weekend': 'Fin de semana',
|
||||
'holiday': 'Festivo',
|
||||
'weekday': t('schedules.types.weekday'),
|
||||
'weekend': t('schedules.types.weekend'),
|
||||
'holiday': t('schedules.types.holiday'),
|
||||
}
|
||||
|
||||
// ── Calcular estado del bus según horario
|
||||
@ -72,9 +74,9 @@ function getDayLabel(schedule: any): string {
|
||||
const now = new Date()
|
||||
const todayType = (now.getDay() === 0 || now.getDay() === 6) ? 'weekend' : 'weekday'
|
||||
|
||||
if (type === 'todos') return 'Diario'
|
||||
if (type === todayType) return 'Hoy'
|
||||
return 'Mañana'
|
||||
if (type === 'todos') return t('coupons.active') // Or add "Daily" to JSON
|
||||
if (type === todayType) return t('schedules.today') || 'Hoy'
|
||||
return t('schedules.tomorrow') || 'Mañana'
|
||||
}
|
||||
|
||||
// ── Filtrado de horarios
|
||||
@ -169,9 +171,9 @@ onUnmounted(() => {
|
||||
|
||||
<!-- ── HEADER ── -->
|
||||
<header class="sch-header">
|
||||
<h1 class="sch-title">Horarios</h1>
|
||||
<h1 class="sch-title">{{ t('schedules.title') }}</h1>
|
||||
<p class="sch-subtitle" v-if="!routeStore.hasSelectedRoute">
|
||||
Selecciona una ruta para ver los próximos buses
|
||||
{{ t('schedules.selectRoute') }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@ -191,7 +193,7 @@ onUnmounted(() => {
|
||||
<span class="material-icons">directions_bus</span>
|
||||
</div>
|
||||
<span class="trigger-text" :class="{ 'trigger-text--selected': routeStore.hasSelectedRoute }">
|
||||
{{ routeStore.isLoadingRoutes ? 'Cargando rutas...' : (routeStore.selectedRouteName || 'Selecciona una ruta...') }}
|
||||
{{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (routeStore.selectedRouteName || t('schedules.placeholder')) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="material-icons trigger-arrow" :class="{ 'trigger-arrow--up': dropdownOpen }">
|
||||
@ -207,7 +209,7 @@ onUnmounted(() => {
|
||||
class="dropdown-loading"
|
||||
>
|
||||
<div class="spinner-sm"></div>
|
||||
<span>Cargando rutas...</span>
|
||||
<span>{{ t('schedules.loadingRoutes') }}</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<button
|
||||
@ -222,7 +224,7 @@ onUnmounted(() => {
|
||||
<span v-if="r.id === routeStore.selectedRouteId" class="material-icons dropdown-item-check">check</span>
|
||||
</button>
|
||||
<div v-if="routeStore.allRoutes.length === 0" class="dropdown-empty">
|
||||
No hay rutas disponibles
|
||||
{{ t('schedules.noRoutesAvailable') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@ -241,8 +243,8 @@ onUnmounted(() => {
|
||||
<line x1="40" y1="56" x2="40" y2="62" stroke="var(--active-color)" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="empty-title">Aquí verás los horarios</h2>
|
||||
<p class="empty-sub">Elige una ruta del menú de arriba para ver los próximos buses disponibles</p>
|
||||
<h2 class="empty-title">{{ t('schedules.schedules') }}</h2>
|
||||
<p class="empty-sub">{{ t('schedules.placeholder') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- ── CONTENIDO con ruta seleccionada ── -->
|
||||
@ -252,28 +254,28 @@ onUnmounted(() => {
|
||||
<div class="live-badge-wrap">
|
||||
<div class="live-badge">
|
||||
<span class="live-dot"></span>
|
||||
<span>Próximas salidas</span>
|
||||
<span>{{ t('schedules.upcoming') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chips de filtro día -->
|
||||
<div class="day-chips">
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'today' }" @click="dayFilter = 'today'">Hoy</button>
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'tomorrow' }" @click="dayFilter = 'tomorrow'">Mañana</button>
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'all' }" @click="dayFilter = 'all'">Todos</button>
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'today' }" @click="dayFilter = 'today'">{{ t('schedules.today') || 'Hoy' }}</button>
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'tomorrow' }" @click="dayFilter = 'tomorrow'">{{ t('schedules.tomorrow') || 'Mañana' }}</button>
|
||||
<button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'all' }" @click="dayFilter = 'all'">{{ t('common.all') || 'Todos' }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="scheduleStore.isLoading" class="state-center">
|
||||
<div class="spinner"></div>
|
||||
<p>Cargando horarios...</p>
|
||||
<p>{{ t('schedules.loading') || 'Cargando horarios...' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Sin resultados en el filtro -->
|
||||
<div v-else-if="filteredSchedules.length === 0" class="empty-state empty-state--sm">
|
||||
<span class="material-icons empty-cat-icon">schedule</span>
|
||||
<p class="empty-sub">No hay horarios para este filtro</p>
|
||||
<button class="chip-link" @click="dayFilter = 'all'">Ver todos los horarios</button>
|
||||
<p class="empty-sub">{{ t('schedules.noSchedules') }}</p>
|
||||
<button class="chip-link" @click="dayFilter = 'all'">{{ t('schedules.viewAll') || 'Ver todos los horarios' }}</button>
|
||||
</div>
|
||||
|
||||
<!-- Lista de horarios -->
|
||||
@ -297,9 +299,9 @@ onUnmounted(() => {
|
||||
<div class="card-info">
|
||||
<div class="card-top-row">
|
||||
<span class="day-tag" :class="dayFilter === 'today' ? `day-tag--${getScheduleDay(schedule)}` : 'day-tag--tomorrow'">
|
||||
{{ dayFilter === 'tomorrow' ? 'Mañana' : (dayFilter === 'all' ? getDayLabel(schedule) : getDayLabel(schedule)) }}
|
||||
{{ dayFilter === 'tomorrow' ? t('schedules.tomorrow') : (dayFilter === 'all' ? getDayLabel(schedule) : getDayLabel(schedule)) }}
|
||||
</span>
|
||||
<span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">SALIENDO</span>
|
||||
<span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">{{ t('schedules.departing') || 'SALIENDO' }}</span>
|
||||
</div>
|
||||
<p class="route-name">{{ routeStore.selectedRouteName }}</p>
|
||||
<p class="card-detail">
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<!-- Version info -->
|
||||
<div class="version-info">
|
||||
<p class="app-subtitle">Transporte Público Boquete</p>
|
||||
<p class="app-subtitle">{{ t('splash.subtitle') }}</p>
|
||||
<p class="app-version">Versión 2.0.1</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,15 +29,17 @@ import { useRouter } from 'vue-router'
|
||||
import { useRouteStore } from '@/stores/route'
|
||||
import { useBusStopStore } from '@/stores/busStop'
|
||||
import { supabase } from '@/supabase'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const routeStore = useRouteStore()
|
||||
const busStopStore = useBusStopStore()
|
||||
|
||||
const logoVisible = ref(false)
|
||||
const showLoading = ref(false)
|
||||
const loadingVisible = ref(false)
|
||||
const statusMessage = ref('Iniciando SIBU...')
|
||||
const statusMessage = ref(t('splash.starting'))
|
||||
|
||||
onMounted(async () => {
|
||||
logoVisible.value = true
|
||||
@ -47,7 +49,7 @@ onMounted(async () => {
|
||||
// Timeout logic
|
||||
const initTimeout = setTimeout(() => {
|
||||
console.warn('Initialization taking too long, forcing navigation...')
|
||||
statusMessage.value = 'Iniciando modo sin conexión...'
|
||||
statusMessage.value = t('splash.offline')
|
||||
router.replace('/map')
|
||||
}, 4000)
|
||||
|
||||
@ -93,7 +95,7 @@ async function navigate(sessionData?: any, force = false) {
|
||||
}
|
||||
|
||||
async function performInitializationTasks() {
|
||||
statusMessage.value = 'Verificando datos...'
|
||||
statusMessage.value = t('splash.verifying')
|
||||
console.log('Starting initialization tasks...')
|
||||
|
||||
// Load essential map data in parallel to save time
|
||||
@ -108,7 +110,7 @@ async function performInitializationTasks() {
|
||||
console.error('Error pre-loading map data', e)
|
||||
}
|
||||
|
||||
statusMessage.value = 'Listo para usar'
|
||||
statusMessage.value = t('splash.ready')
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -48,10 +48,10 @@ onMounted(async () => {
|
||||
|
||||
<div v-if="mountError" class="error-container">
|
||||
<span class="material-icons">error_outline</span>
|
||||
<p>Error al cargar la sección de transporte</p>
|
||||
<p>{{ t('taxi.errorLoading') }}</p>
|
||||
<button @click="reloadPage" class="retry-btn">
|
||||
<span class="material-icons">refresh</span>
|
||||
Reintentar
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,9 +5,11 @@ import { supabase } from '@/supabase'
|
||||
import type { Shuttle } from '@/types'
|
||||
import { getImageUrl } from '@/utils/imageUrl'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const shuttle = ref<Shuttle | null>(null)
|
||||
const cargando = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
@ -27,7 +29,7 @@ onMounted(async () => {
|
||||
if (sbError) throw sbError
|
||||
shuttle.value = data
|
||||
} catch (e: any) {
|
||||
error.value = 'No se pudo cargar la información del viaje'
|
||||
error.value = t('shuttle.errorLoading')
|
||||
console.error('SIBU | Error cargando shuttle:', e)
|
||||
} finally {
|
||||
cargando.value = false
|
||||
@ -51,6 +53,13 @@ const volver = () => {
|
||||
router.push('/transporte/viajes-turisticos')
|
||||
}
|
||||
}
|
||||
|
||||
const getTripTypeLabel = (type: string) => {
|
||||
if (type === 'one_way') return t('shuttle.oneWay')
|
||||
if (type === 'round_trip') return t('shuttle.roundTrip')
|
||||
if (type === 'both') return t('shuttle.both')
|
||||
return type
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -61,14 +70,14 @@ const volver = () => {
|
||||
<span class="material-icons text-[var(--text-primary)]">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-bold text-[var(--text-primary)] text-lg truncate flex-1">
|
||||
{{ shuttle?.company_name || 'Detalle del viaje' }}
|
||||
{{ shuttle?.company_name || t('shuttle.detailTitle') }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3">
|
||||
<span class="material-icons spin text-4xl" style="color: var(--active-color)">refresh</span>
|
||||
<p class="text-text-secondary font-medium animate-pulse">Cargando...</p>
|
||||
<p class="text-text-secondary font-medium animate-pulse">{{ t('common.loading') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
@ -76,7 +85,7 @@ const volver = () => {
|
||||
<span class="material-icons text-red-500 text-5xl mb-3">error_outline</span>
|
||||
<p class="text-red-500 font-medium">{{ error }}</p>
|
||||
<button @click="volver" class="mt-6 px-6 py-2 bg-text-primary text-surface font-bold rounded-full shadow hover:opacity-90 transition">
|
||||
Volver
|
||||
{{ t('common.back') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -100,7 +109,7 @@ const volver = () => {
|
||||
<div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-3 border border-border">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">Origen</span>
|
||||
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">{{ t('shuttle.origin') }}</span>
|
||||
<span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
|
||||
{{ shuttle.origin }}
|
||||
</span>
|
||||
@ -114,7 +123,7 @@ const volver = () => {
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 text-right">
|
||||
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">Destino</span>
|
||||
<span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">{{ t('shuttle.destination') }}</span>
|
||||
<span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
|
||||
{{ shuttle.destination }}
|
||||
</span>
|
||||
@ -131,19 +140,19 @@ const volver = () => {
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 pt-4 border-t border-border">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">schedule</span> Hora de salida</span>
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">schedule</span> {{ t('shuttle.departureTimes') }}</span>
|
||||
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
|
||||
{{ shuttle.departure_times }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">swap_horiz</span> Tipo de viaje</span>
|
||||
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border capitalize">
|
||||
{{ shuttle.trip_type.replace('_', ' ') }}
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">swap_horiz</span> {{ t('shuttle.tripType') }}</span>
|
||||
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
|
||||
{{ getTripTypeLabel(shuttle.trip_type) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1" v-if="shuttle.english_speaking">
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">g_translate</span> Idiomas</span>
|
||||
<span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">g_translate</span> {{ t('shuttle.languages') }}</span>
|
||||
<span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
|
||||
Español · English
|
||||
</span>
|
||||
@ -154,14 +163,14 @@ const volver = () => {
|
||||
<!-- Precio -->
|
||||
<div class="rounded-2xl p-6 shadow-sm flex items-center justify-between" style="background-color: var(--active-color); color: #101820;">
|
||||
<div class="text-left">
|
||||
<p class="text-sm font-semibold opacity-90 mb-1">Precio por pasajero</p>
|
||||
<p class="text-sm font-semibold opacity-90 mb-1">{{ t('shuttle.pricePerPerson') }}</p>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-lg font-bold opacity-80">$</span>
|
||||
<span class="text-4xl font-black tracking-tight">{{ parsePrice(shuttle.price_per_person) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-xl bg-black/10 backdrop-blur-sm" v-if="shuttle.price_private_trip">
|
||||
<span class="text-xs font-bold uppercase tracking-wider opacity-90 block mb-1">Privado</span>
|
||||
<span class="text-xs font-bold uppercase tracking-wider opacity-90 block mb-1">{{ t('shuttle.private') }}</span>
|
||||
<span class="font-black text-lg">${{ parsePrice(shuttle.price_private_trip) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,8 +178,8 @@ const volver = () => {
|
||||
<!-- Contacto -->
|
||||
<div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border mb-8">
|
||||
<div>
|
||||
<h3 class="font-bold text-[var(--text-primary)] text-lg">Reserva e Información</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] mt-1">Contacta directamente al operador para confirmar disponibilidad.</p>
|
||||
<h3 class="font-bold text-[var(--text-primary)] text-lg">{{ t('shuttle.bookingInfo') }}</h3>
|
||||
<p class="text-sm text-[var(--text-secondary)] mt-1">{{ t('shuttle.contactOperator') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
@ -181,7 +190,7 @@ const volver = () => {
|
||||
@click="analyticsService.logEvent({ event_name: 'shuttle_contact', item_id: shuttle.id, properties: { action: 'whatsapp' } })"
|
||||
>
|
||||
<span class="material-icons">chat</span>
|
||||
Reservar por WhatsApp
|
||||
{{ t('shuttle.bookWhatsapp') }}
|
||||
</a>
|
||||
|
||||
<a v-if="shuttle.phone_number"
|
||||
@ -190,7 +199,7 @@ const volver = () => {
|
||||
@click="analyticsService.logEvent({ event_name: 'shuttle_contact', item_id: shuttle.id, properties: { action: 'call' } })"
|
||||
>
|
||||
<span class="material-icons">phone_in_talk</span>
|
||||
Llamar al Operador
|
||||
{{ t('shuttle.callOperator') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -95,7 +95,7 @@ function getShiftLabel(shift: string) {
|
||||
<p>{{ taxiStore.error }}</p>
|
||||
<button class="retry-btn" @click="taxiStore.loadTaxis()">
|
||||
<span class="material-icons">refresh</span>
|
||||
Reintentar
|
||||
{{ t('common.retry') || 'Reintentar' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user