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:
@ -10,8 +10,8 @@
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div v-if="authStore.isAdmin" class="admin-badge">ADMIN</div>
|
||||
<div v-if="authStore.isDriver" class="driver-badge">CONDUCTOR</div>
|
||||
<div v-if="authStore.isAdmin" class="admin-badge">{{ t('menu.admin') }}</div>
|
||||
<div v-if="authStore.isDriver" class="driver-badge">{{ t('menu.driver') }}</div>
|
||||
|
||||
<ReportModal :is-open="showReportModal" @close="showReportModal = false" />
|
||||
|
||||
@ -29,57 +29,57 @@
|
||||
<div v-if="authStore.isAuthenticated" class="status-dot-active"></div>
|
||||
</div>
|
||||
<div class="user-info-text">
|
||||
<span class="welcome-label">HOLA,</span>
|
||||
<span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : 'INVITADO' }}</span>
|
||||
<span class="welcome-label">{{ t('menu.welcome') }}</span>
|
||||
<span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : t('menu.guest') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-scroll-area">
|
||||
<div v-if="authStore.isAdmin || authStore.isDriver || authStore.isPromoter" class="sidebar-group">
|
||||
<div class="group-label">GESTIÓN</div>
|
||||
<div class="group-label">{{ t('menu.management') }}</div>
|
||||
<div v-if="authStore.isAdmin" class="sidebar-link" @click="navigateTo('/admin')">
|
||||
<span class="material-icons">shield_person</span>
|
||||
<span class="link-text">Panel Control</span>
|
||||
<span class="link-text">{{ t('menu.adminPanel') }}</span>
|
||||
</div>
|
||||
<div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
|
||||
<span class="material-icons">minor_crash</span>
|
||||
<span class="link-text">Taxi Panel</span>
|
||||
<span class="link-text">{{ t('menu.driverPanel') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!authStore.isAdmin" class="sidebar-group">
|
||||
<div class="group-label">OPERACIONES</div>
|
||||
<div class="group-label">{{ t('menu.operations') }}</div>
|
||||
<div class="sidebar-link" @click="navigateTo('/favorites')">
|
||||
<span class="material-icons">favorite</span>
|
||||
<span class="link-text">Favoritos</span>
|
||||
<span class="link-text">{{ t('menu.favorites') }}</span>
|
||||
</div>
|
||||
<div class="sidebar-link" @click="toggleLanguage">
|
||||
<span class="material-icons">translate</span>
|
||||
<span class="link-text">{{ locale === 'es' ? 'English (EN)' : 'Español (ES)' }}</span>
|
||||
<span class="link-text">{{ t('menu.translate') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-link theme-toggle-row" @click="themeStore.toggleDarkMode">
|
||||
<span class="material-icons">{{ themeStore.isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
|
||||
<span class="link-text">{{ themeStore.isDarkMode ? 'Modo Claro' : 'Modo Oscuro' }}</span>
|
||||
<span class="link-text">{{ themeStore.isDarkMode ? t('menu.lightMode') : t('menu.darkMode') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!authStore.isAdmin" class="sidebar-group">
|
||||
<div class="group-label">SOPORTE</div>
|
||||
<div class="group-label">{{ t('menu.support') }}</div>
|
||||
<div class="sidebar-link report-link-solid" @click="openReportModal">
|
||||
<span class="material-icons">report_problem</span>
|
||||
<span class="link-text">Enviar Reporte</span>
|
||||
<span class="link-text">{{ t('menu.sendReport') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer-fixed">
|
||||
<button v-if="!authStore.isAuthenticated" class="session-btn login-solid" @click="navigateTo('/login')">
|
||||
<span class="material-icons">login</span> INICIAR SESIÓN
|
||||
<span class="material-icons">login</span> {{ t('menu.login') }}
|
||||
</button>
|
||||
<button v-else class="session-btn logout-solid" @click="handleLogout">
|
||||
<span class="material-icons">logout</span> CERRAR SESIÓN
|
||||
<span class="material-icons">logout</span> {{ t('menu.logout') }}
|
||||
</button>
|
||||
<div class="sibu-tag-footer">SIBU SYSTEM v1.2.0</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="modal-header">
|
||||
<div class="title-with-icon">
|
||||
<span class="material-icons report-icon">report_problem</span>
|
||||
<h2>Enviar Reporte</h2>
|
||||
<h2>{{ t('report.title') }}</h2>
|
||||
</div>
|
||||
<button class="close-btn" @click="close">
|
||||
<span class="material-icons">close</span>
|
||||
@ -13,11 +13,11 @@
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="instruction">Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.</p>
|
||||
<p class="instruction">{{ t('report.instruction') }}</p>
|
||||
|
||||
<textarea
|
||||
v-model="message"
|
||||
placeholder="Escribe tu mensaje aquí..."
|
||||
:placeholder="t('report.placeholder')"
|
||||
class="report-textarea"
|
||||
:disabled="isSending"
|
||||
></textarea>
|
||||
@ -27,19 +27,19 @@
|
||||
</div>
|
||||
|
||||
<div v-if="success" class="success-message">
|
||||
¡Reporte enviado con éxito! Gracias por tu colaboración.
|
||||
{{ t('report.success') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="cancel-btn" @click="close" :disabled="isSending">Cancelar</button>
|
||||
<button class="cancel-btn" @click="close" :disabled="isSending">{{ t('report.cancel') }}</button>
|
||||
<button
|
||||
class="send-btn"
|
||||
@click="handleSend"
|
||||
:disabled="isSending || !message.trim() || success"
|
||||
>
|
||||
<span v-if="isSending" class="spinner-small"></span>
|
||||
<span v-else>Enviar Reporte</span>
|
||||
<span v-else>{{ t('report.send') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,6 +50,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { reportsService } from '@/services/reportsService'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
defineProps<{
|
||||
isOpen: boolean
|
||||
@ -86,7 +89,7 @@ async function handleSend() {
|
||||
close()
|
||||
}, 2000)
|
||||
} catch (e) {
|
||||
error.value = 'Hubo un error al enviar el reporte. Por favor, intenta de nuevo.'
|
||||
error.value = t('report.error')
|
||||
} finally {
|
||||
isSending.value = false
|
||||
}
|
||||
|
||||
@ -3,8 +3,10 @@ import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { supabase } from '@/supabase'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const emit = defineEmits(['toggle'])
|
||||
const { t } = useI18n()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
@ -14,6 +16,7 @@ const errorMessage = ref('')
|
||||
const showPassword = ref(false)
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const handleLogin = async () => {
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
@ -26,9 +29,9 @@ const handleLogin = async () => {
|
||||
} catch (error: any) {
|
||||
console.error('Error Login:', error)
|
||||
if (error.message?.includes('Invalid login credentials')) {
|
||||
errorMessage.value = 'Correo o contraseña incorrectos.'
|
||||
errorMessage.value = t('auth.invalidCreds')
|
||||
} else {
|
||||
errorMessage.value = `Error: ${error.message || 'Error desconocido.'}`
|
||||
errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
@ -59,7 +62,7 @@ const handleGoogleLogin = async () => {
|
||||
// Se redirige automáticamente
|
||||
} catch (error: any) {
|
||||
console.error('Error Google Login:', error)
|
||||
errorMessage.value = `Error con Google: ${error.message || 'Error desconocido'}`
|
||||
errorMessage.value = `Error Google: ${error.message || t('common.error')}`
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@ -76,12 +79,12 @@ const handleGoogleLogin = async () => {
|
||||
@click="handleGoogleLogin"
|
||||
>
|
||||
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
|
||||
<span>Continuar con Google</span>
|
||||
<span>{{ t('auth.googleLogin') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-text">o con correo</span>
|
||||
<span class="divider-text">{{ t('auth.orEmail') }}</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
|
||||
@ -89,14 +92,14 @@ const handleGoogleLogin = async () => {
|
||||
<form @submit.prevent="handleLogin">
|
||||
<!-- Email -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="login-email">Correo electrónico</label>
|
||||
<label class="field-label" for="login-email">{{ t('auth.emailLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">alternate_email</span>
|
||||
<input
|
||||
id="login-email"
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="tu@correo.com"
|
||||
:placeholder="t('auth.emailPlaceholder')"
|
||||
required
|
||||
autocomplete="email"
|
||||
class="field-input"
|
||||
@ -106,7 +109,7 @@ const handleGoogleLogin = async () => {
|
||||
|
||||
<!-- Contraseña -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="login-password">Contraseña</label>
|
||||
<label class="field-label" for="login-password">{{ t('auth.passLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">lock</span>
|
||||
<input
|
||||
@ -135,7 +138,7 @@ const handleGoogleLogin = async () => {
|
||||
<span class="keep-box" :class="{ 'keep-box--on': keepSession }">
|
||||
<span v-if="keepSession" class="material-icons keep-check">check</span>
|
||||
</span>
|
||||
<span class="keep-label">Mantener sesión iniciada</span>
|
||||
<span class="keep-label">{{ t('auth.keepSession') }}</span>
|
||||
</label>
|
||||
|
||||
<!-- Error -->
|
||||
@ -147,14 +150,14 @@ const handleGoogleLogin = async () => {
|
||||
<!-- Botón enviar -->
|
||||
<button type="submit" class="submit-btn" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="btn-spinner"></span>
|
||||
<span>{{ isLoading ? 'Ingresando...' : 'Iniciar Sesión' }}</span>
|
||||
<span>{{ isLoading ? t('auth.loggingIn') : t('auth.loginTab') }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Switch a registro -->
|
||||
<p class="switch-text">
|
||||
¿No tienes cuenta?
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">Regístrate aquí</button>
|
||||
{{ t('auth.noAccount') }}
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.registerHere') }}</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
|
||||
import { supabase } from '@/supabase'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { analyticsService } from '@/services/analyticsService'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const emit = defineEmits(['toggle', 'success'])
|
||||
const { t } = useI18n()
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
@ -13,6 +15,7 @@ const authStore = useAuthStore()
|
||||
const fullName = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const autoLocation = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const successMessage = ref('')
|
||||
@ -26,14 +29,14 @@ const handleRegister = async () => {
|
||||
const cleanEmail = email.value.trim().toLowerCase()
|
||||
const cleanPass = password.value
|
||||
|
||||
await authStore.register(cleanEmail, cleanPass, fullName.value.trim())
|
||||
await authStore.register(cleanEmail, cleanPass, fullName.value.trim(), autoLocation.value)
|
||||
|
||||
analyticsService.logEvent({
|
||||
event_name: 'sign_up',
|
||||
properties: { method: 'email' }
|
||||
})
|
||||
|
||||
successMessage.value = '¡Cuenta creada con éxito!'
|
||||
successMessage.value = t('auth.successTitle')
|
||||
|
||||
// Delay navigation so user can see the success card
|
||||
setTimeout(() => {
|
||||
@ -43,9 +46,9 @@ const handleRegister = async () => {
|
||||
} catch (error: any) {
|
||||
console.error('Error detallado de registro:', error)
|
||||
if (error.message?.includes('User already registered') || error.message?.includes('already exists')) {
|
||||
errorMessage.value = 'El correo ya está registrado.'
|
||||
errorMessage.value = t('auth.emailRegistered')
|
||||
} else {
|
||||
errorMessage.value = `Error: ${error.message || 'Error desconocido'}`
|
||||
errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
@ -75,7 +78,7 @@ const handleGoogleRegister = async () => {
|
||||
// Redirect happens automatically
|
||||
} catch (error: any) {
|
||||
console.error('Error Google Register:', error)
|
||||
errorMessage.value = `Error con Google: ${error.message || 'Intenta de nuevo'}`
|
||||
errorMessage.value = `Error Google: ${error.message || t('common.error')}`
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
@ -88,7 +91,7 @@ const handleGoogleRegister = async () => {
|
||||
<!-- Éxito -->
|
||||
<div v-if="successMessage" class="success-card">
|
||||
<span class="material-icons success-icon">check_circle</span>
|
||||
<h3 class="success-title">¡Registro exitoso!</h3>
|
||||
<h3 class="success-title">{{ t('auth.successTitle') }}</h3>
|
||||
<p class="success-desc">{{ successMessage }}</p>
|
||||
</div>
|
||||
|
||||
@ -103,12 +106,12 @@ const handleGoogleRegister = async () => {
|
||||
@click="handleGoogleRegister"
|
||||
>
|
||||
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
|
||||
<span>Registrarse con Google</span>
|
||||
<span>{{ t('auth.googleRegister') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-text">o con correo</span>
|
||||
<span class="divider-text">{{ t('auth.orEmail') }}</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
|
||||
@ -116,14 +119,14 @@ const handleGoogleRegister = async () => {
|
||||
|
||||
<!-- Nombre -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-name">Nombre completo</label>
|
||||
<label class="field-label" for="reg-name">{{ t('auth.fullNameLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">person</span>
|
||||
<input
|
||||
id="reg-name"
|
||||
type="text"
|
||||
v-model="fullName"
|
||||
placeholder="Tu nombre"
|
||||
:placeholder="t('auth.fullNamePlaceholder')"
|
||||
required
|
||||
autocomplete="name"
|
||||
class="field-input"
|
||||
@ -133,14 +136,14 @@ const handleGoogleRegister = async () => {
|
||||
|
||||
<!-- Email -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-email">Correo electrónico</label>
|
||||
<label class="field-label" for="reg-email">{{ t('auth.emailLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">alternate_email</span>
|
||||
<input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
v-model="email"
|
||||
placeholder="tu@correo.com"
|
||||
:placeholder="t('auth.emailPlaceholder')"
|
||||
required
|
||||
autocomplete="email"
|
||||
class="field-input"
|
||||
@ -150,14 +153,14 @@ const handleGoogleRegister = async () => {
|
||||
|
||||
<!-- Contraseña -->
|
||||
<div class="field">
|
||||
<label class="field-label" for="reg-password">Contraseña</label>
|
||||
<label class="field-label" for="reg-password">{{ t('auth.passLabel') }}</label>
|
||||
<div class="input-wrap">
|
||||
<span class="material-icons input-icon">lock</span>
|
||||
<input
|
||||
id="reg-password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
v-model="password"
|
||||
placeholder="Mínimo 8 caracteres"
|
||||
:placeholder="t('auth.passMin8')"
|
||||
required
|
||||
minlength="8"
|
||||
autocomplete="new-password"
|
||||
@ -174,6 +177,15 @@ const handleGoogleRegister = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ubicación Inteligente -->
|
||||
<label class="keep-session">
|
||||
<input type="checkbox" v-model="autoLocation" class="keep-checkbox" />
|
||||
<span class="keep-box" :class="{ 'keep-box--on': autoLocation }">
|
||||
<span v-if="autoLocation" class="material-icons keep-check">check</span>
|
||||
</span>
|
||||
<span class="keep-label">{{ t('auth.smartLocation') }}</span>
|
||||
</label>
|
||||
|
||||
<!-- Error -->
|
||||
<p v-if="errorMessage" class="error-msg">
|
||||
<span class="material-icons error-icon">error_outline</span>
|
||||
@ -183,14 +195,14 @@ const handleGoogleRegister = async () => {
|
||||
<!-- Botón enviar -->
|
||||
<button type="submit" class="submit-btn" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="btn-spinner"></span>
|
||||
<span>{{ isLoading ? 'Creando cuenta...' : 'Crear Cuenta' }}</span>
|
||||
<span>{{ isLoading ? t('auth.creatingAccount') : t('auth.registerTab') }}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Switch a login -->
|
||||
<p class="switch-text">
|
||||
¿Ya tienes cuenta?
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
|
||||
{{ t('auth.hasAccount') }}
|
||||
<button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.loginHere') }}</button>
|
||||
</p>
|
||||
|
||||
</template>
|
||||
@ -441,4 +453,45 @@ const handleGoogleRegister = async () => {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Mantener sesión (reutilizado para Smart Location) */
|
||||
.keep-session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.keep-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.keep-box {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: 0.375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.keep-box--on {
|
||||
background: var(--active-color);
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.keep-check {
|
||||
font-size: 0.875rem;
|
||||
color: #101820;
|
||||
}
|
||||
|
||||
.keep-label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
"noData": "No data available",
|
||||
"select": "Select",
|
||||
"clear": "Clear",
|
||||
"clearSelection": "Clear selection"
|
||||
"clearSelection": "Clear selection",
|
||||
"notAvailable": "Not available",
|
||||
"back": "Back",
|
||||
"all": "All",
|
||||
"retry": "Retry"
|
||||
},
|
||||
"navigation": {
|
||||
"map": "Map",
|
||||
@ -17,6 +21,24 @@
|
||||
"discover": "Discover",
|
||||
"profile": "Profile"
|
||||
},
|
||||
"menu": {
|
||||
"management": "MANAGEMENT",
|
||||
"adminPanel": "Admin Panel",
|
||||
"driverPanel": "Driver Panel",
|
||||
"operations": "OPERATIONS",
|
||||
"favorites": "Favorites",
|
||||
"support": "SUPPORT",
|
||||
"sendReport": "Send Report",
|
||||
"login": "LOGIN",
|
||||
"logout": "LOGOUT",
|
||||
"welcome": "HELLO,",
|
||||
"guest": "GUEST",
|
||||
"lightMode": "Light Mode",
|
||||
"darkMode": "Dark Mode",
|
||||
"translate": "Español (ES)",
|
||||
"admin": "ADMIN",
|
||||
"driver": "DRIVER"
|
||||
},
|
||||
"favorites": {
|
||||
"title": "My Favorites",
|
||||
"subtitle": "Save your favorite routes, taxis, and businesses for quick access.",
|
||||
@ -27,22 +49,31 @@
|
||||
"viewSchedules": "Tap to view schedules",
|
||||
"tabs": {
|
||||
"routes": "Routes",
|
||||
"taxis": "Taxis",
|
||||
"taxis": "Transport",
|
||||
"businesses": "Businesses",
|
||||
"coupons": "Offers"
|
||||
"coupons": "Events"
|
||||
},
|
||||
"empty": {
|
||||
"title": "Nothing saved yet",
|
||||
"subtitle": "You don't have any favorites yet",
|
||||
"description": "Explore routes, taxis, and businesses to save your favorites here",
|
||||
"routes": "You don't have any saved favorite routes.",
|
||||
"taxis": "You don't have any saved favorite taxis.",
|
||||
"businesses": "You don't have any saved favorite businesses.",
|
||||
"coupons": "You don't have any saved favorite offers."
|
||||
"coupons": "You don't have any saved favorite events.",
|
||||
"noResultsCategory": "You don't have favorites in this category"
|
||||
},
|
||||
"cta": {
|
||||
"exploreNow": "Explore now",
|
||||
"routes": "Explore Routes",
|
||||
"taxis": "View Directory",
|
||||
"businesses": "Discover Businesses",
|
||||
"coupons": "View Offers"
|
||||
}
|
||||
"coupons": "View Events"
|
||||
},
|
||||
"count": "{count} saved | {count} saved",
|
||||
"removeTitle": "Remove from favorites",
|
||||
"availability": "Check availability",
|
||||
"details": "View details →"
|
||||
},
|
||||
"header": {
|
||||
"title": "SIBU",
|
||||
@ -63,7 +94,15 @@
|
||||
"selectRoute": "Select a route",
|
||||
"route": "Route",
|
||||
"stops": "stops",
|
||||
"stop": "stop"
|
||||
"stop": "stop",
|
||||
"calculatingRoute": "Calculating real route...",
|
||||
"viewRoutes": "view routes",
|
||||
"arrivalTime": "Arrival time",
|
||||
"availableRoutes": "Available Routes",
|
||||
"busRoute": "Bus Route",
|
||||
"showMyLocation": "Show my location",
|
||||
"promo": "PROMO",
|
||||
"search": "Search"
|
||||
},
|
||||
"schedules": {
|
||||
"title": "Schedules",
|
||||
@ -77,6 +116,12 @@
|
||||
"schedules": "schedules",
|
||||
"schedule": "schedule",
|
||||
"departureTime": "Departure time",
|
||||
"today": "Today",
|
||||
"tomorrow": "Tomorrow",
|
||||
"loading": "Loading schedules...",
|
||||
"viewAll": "View all schedules",
|
||||
"departing": "DEPARTING",
|
||||
"daily": "Daily",
|
||||
"types": {
|
||||
"weekday": "Weekday",
|
||||
"weekend": "Weekend",
|
||||
@ -87,19 +132,23 @@
|
||||
"title": "Offers",
|
||||
"loadingCoupons": "Loading offers...",
|
||||
"noCouponsAvailable": "No offers available",
|
||||
"noResults": "No results found for your search.",
|
||||
"off": "OFF",
|
||||
"searchPlaceholder": "Search offers...",
|
||||
"filterByCategory": "Filter by category",
|
||||
"apply": "Apply",
|
||||
"offerDetails": "Offer Details",
|
||||
"description": "Description",
|
||||
"noDescription": "No additional description.",
|
||||
"validity": "Validity",
|
||||
"category": "Category",
|
||||
"viewLocation": "View location",
|
||||
"validUntil": "Valid until",
|
||||
"tomorrow": "Tomorrow",
|
||||
"active": "Active",
|
||||
"offersCount": "{count} offer | {count} offers"
|
||||
"offersCount": "{count} offer | {count} offers",
|
||||
"viewDetails": "View details",
|
||||
"restaurant": "Restaurant"
|
||||
},
|
||||
"taxi": {
|
||||
"title": "Transport Hub",
|
||||
@ -115,7 +164,8 @@
|
||||
"allZones": "All zones",
|
||||
"dayShift": "Day",
|
||||
"afternoonShift": "Afternoon",
|
||||
"nightShift": "Night"
|
||||
"nightShift": "Night",
|
||||
"errorLoading": "Error loading transport section"
|
||||
},
|
||||
"shuttle": {
|
||||
"title": "Tourist Trips & Shuttles",
|
||||
@ -128,9 +178,21 @@
|
||||
"filterRoute": "Filter by route",
|
||||
"allRoutes": "All routes",
|
||||
"tripType": "Trip type",
|
||||
"oneWay": "Outbound",
|
||||
"roundTrip": "Return",
|
||||
"both": "Both"
|
||||
"oneWay": "One way",
|
||||
"roundTrip": "Round trip",
|
||||
"both": "Both",
|
||||
"detailTitle": "Trip Detail",
|
||||
"origin": "Origin",
|
||||
"destination": "Destination",
|
||||
"departureTimes": "Departure Times",
|
||||
"languages": "Languages",
|
||||
"pricePerPerson": "Price per passenger",
|
||||
"private": "Private",
|
||||
"bookingInfo": "Booking & Information",
|
||||
"contactOperator": "Contact the operator directly to confirm availability.",
|
||||
"bookWhatsapp": "Book via WhatsApp",
|
||||
"callOperator": "Call Operator",
|
||||
"errorLoading": "Could not load trip information"
|
||||
},
|
||||
"busStop": {
|
||||
"loadingDetails": "Loading bus stop details...",
|
||||
@ -140,14 +202,149 @@
|
||||
"accessible": "Accessible"
|
||||
},
|
||||
"discover": {
|
||||
"title": "Discover",
|
||||
"subtitle": "Explore the best places in Chiriqui",
|
||||
"searchPlaceholder": "Explore the best places in Chiriqui",
|
||||
"title": "Explore Chiriquí! 🌿",
|
||||
"subtitle": "Discover the best places near you",
|
||||
"searchPlaceholder": "Search restaurants, hotels...",
|
||||
"filterLabel": "Filter by area:",
|
||||
"allAreas": "All",
|
||||
"loading": "Searching for treasures...",
|
||||
"empty": "No places found in this area yet.",
|
||||
"loading": "Loading places...",
|
||||
"error": "Could not load places. Check your connection.",
|
||||
"empty": "No places yet",
|
||||
"emptyDesc": "Business and tourist places will be available here soon.",
|
||||
"noResults": "No results",
|
||||
"noResultsDesc": "We couldn't find any places matching that filter.",
|
||||
"viewAll": "View all places",
|
||||
"exploreMore": "Explore Place",
|
||||
"tourism": "Tourism"
|
||||
"tourism": "Tourism",
|
||||
"results": "{count} place | {count} places",
|
||||
"in": "in",
|
||||
"lookingMore": "Looking for something else?",
|
||||
"exploreWithoutFilters": "Explore without filters to discover everything",
|
||||
"sections": {
|
||||
"byArea": "🗺️ By Area",
|
||||
"featured": "✨ Featured",
|
||||
"allPlaces": "🏙️ All places"
|
||||
},
|
||||
"categories": {
|
||||
"all": "All",
|
||||
"restaurant": "Restaurant",
|
||||
"hotel": "Hotel",
|
||||
"cafe": "Cafe",
|
||||
"commerce": "Commerce",
|
||||
"tourism": "Tourism",
|
||||
"drinks": "Drinks"
|
||||
}
|
||||
},
|
||||
"business": {
|
||||
"detailsTitle": "Explore Our History For Refined Cuisine And A Timeless Atmosphere",
|
||||
"detailsDescription": "Our story is one of growth, exploration, and unforgettable culinary memories, where each chapter is served with elegance.",
|
||||
"timelessHeritage": "Timeless Heritage",
|
||||
"timelessHeritageDesc": "Signature dishes that evolve with local inspiration and culture.",
|
||||
"worldClassDishes": "World Class Dishes",
|
||||
"worldClassDishesDesc": "Gastronomic experience designed to delight the most demanding senses.",
|
||||
"emotionElegance": "Emotion and Elegance",
|
||||
"emotionEleganceDesc": "Evenings enhanced by the timeless charm of an exclusive atmosphere.",
|
||||
"unmatchedExperience": "Unmatched Experience",
|
||||
"unmatchedExperienceDesc": "Personalized service from a dedicated host for your comfort.",
|
||||
"address": "Address",
|
||||
"contact": "Contact",
|
||||
"socialMedia": "Social Media",
|
||||
"availableOffers": "Available Offers",
|
||||
"viewBusiness": "View Business",
|
||||
"loadingPremium": "Loading premium experience..."
|
||||
},
|
||||
"profile": {
|
||||
"title": "Profile",
|
||||
"myCoupons": "My Coupons",
|
||||
"emptyCoupons": "You don't have any coupons",
|
||||
"exploreOffers": "Explore the benefits we have for you for using SIBU.",
|
||||
"viewOffers": "View Offers",
|
||||
"viewCode": "View Code",
|
||||
"usedAt": "Used on:",
|
||||
"claimedAt": "Claimed on:",
|
||||
"editProfile": "Edit Profile",
|
||||
"photoOptional": "Optional photo",
|
||||
"nameLabel": "Full Name",
|
||||
"namePlaceholder": "Your name",
|
||||
"passwordOptional": "New Password (Optional)",
|
||||
"passwordPlaceholder": "Minimum 6 characters",
|
||||
"passwordHint": "Leave blank if you don't want to change it.",
|
||||
"cancel": "Cancel",
|
||||
"save": "Save Changes",
|
||||
"saving": "Saving...",
|
||||
"qrTitle": "Discount Coupon",
|
||||
"qrCode": "REDEMPTION CODE",
|
||||
"qrInstructions": "Show this code to the establishment manager to validate your promotion.",
|
||||
"understood": "Understood",
|
||||
"pending": "Pending",
|
||||
"redeemed": "Redeemed",
|
||||
"expired": "Expired",
|
||||
"updateSuccess": "Profile updated successfully",
|
||||
"updateError": "Update error:",
|
||||
"user": "User",
|
||||
"logoutTitle": "Logout"
|
||||
},
|
||||
"auth": {
|
||||
"back": "Back",
|
||||
"brandingSubtitle": "Public Transport System",
|
||||
"loginTab": "Login",
|
||||
"registerTab": "Create Account",
|
||||
"sessionExpired": "Your session has expired. Please log in again.",
|
||||
"footer": "SIBU © 2026 • Chiriquí Transport System",
|
||||
"googleLogin": "Continue with Google",
|
||||
"googleRegister": "Sign up with Google",
|
||||
"orEmail": "or with email",
|
||||
"emailLabel": "Email address",
|
||||
"emailPlaceholder": "you@email.com",
|
||||
"passLabel": "Password",
|
||||
"keepSession": "Keep me logged in",
|
||||
"loggingIn": "Logging in...",
|
||||
"creatingAccount": "Creating account...",
|
||||
"noAccount": "Don't have an account?",
|
||||
"registerHere": "Register here",
|
||||
"hasAccount": "Already have an account?",
|
||||
"loginHere": "Login",
|
||||
"successTitle": "Successful registration!",
|
||||
"fullNameLabel": "Full name",
|
||||
"fullNamePlaceholder": "Your name",
|
||||
"passMin8": "Minimum 8 characters",
|
||||
"smartLocation": "Allow to detect my location automatically (Smart Location)",
|
||||
"emailRegistered": "Email is already registered.",
|
||||
"invalidCreds": "Incorrect email or password."
|
||||
},
|
||||
"routesView": {
|
||||
"title": "Transport",
|
||||
"busTab": "Bus Routes",
|
||||
"taxiTab": "Local Taxis",
|
||||
"originPlaceholder": "Origin City",
|
||||
"destPlaceholder": "Destination City",
|
||||
"searchBtn": "Search Routes",
|
||||
"allCorregimientos": "All corregimientos",
|
||||
"english": "English",
|
||||
"availableRoutes": "Available Routes",
|
||||
"recommendedDrivers": "Recommended Drivers",
|
||||
"active": "ACTIVE",
|
||||
"minutes": "min",
|
||||
"km": "km",
|
||||
"findSchedules": "View Schedules",
|
||||
"contact": "Contact",
|
||||
"noTaxis": "No taxis available in this area.",
|
||||
"noRoutes": "No routes found for your search."
|
||||
},
|
||||
"splash": {
|
||||
"subtitle": "Boquete Public Transport",
|
||||
"starting": "Starting SIBU...",
|
||||
"offline": "Starting offline mode...",
|
||||
"verifying": "Verifying data...",
|
||||
"ready": "Ready to use"
|
||||
},
|
||||
"report": {
|
||||
"title": "Send Report",
|
||||
"instruction": "Tell us what's happening or send us a suggestion. The administrative team will review your message.",
|
||||
"placeholder": "Write your message here...",
|
||||
"success": "Report sent successfully! Thanks for your collaboration.",
|
||||
"error": "There was an error sending the report. Please try again.",
|
||||
"cancel": "Cancel",
|
||||
"send": "Send Report"
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,11 @@
|
||||
"noData": "No hay datos disponibles",
|
||||
"select": "Seleccionar",
|
||||
"clear": "Limpiar",
|
||||
"clearSelection": "Limpiar selección"
|
||||
"clearSelection": "Limpiar selección",
|
||||
"notAvailable": "No disponible",
|
||||
"back": "Volver",
|
||||
"all": "Todos",
|
||||
"retry": "Reintentar"
|
||||
},
|
||||
"navigation": {
|
||||
"map": "Mapa",
|
||||
@ -17,6 +21,24 @@
|
||||
"discover": "Descubrir",
|
||||
"profile": "Perfil"
|
||||
},
|
||||
"menu": {
|
||||
"management": "GESTIÓN",
|
||||
"adminPanel": "Panel Administración",
|
||||
"driverPanel": "Panel de Conductores",
|
||||
"operations": "OPERACIONES",
|
||||
"favorites": "Favoritos",
|
||||
"support": "SOPORTE",
|
||||
"sendReport": "Enviar Reporte",
|
||||
"login": "INICIAR SESIÓN",
|
||||
"logout": "CERRAR SESIÓN",
|
||||
"welcome": "HOLA,",
|
||||
"guest": "INVITADO",
|
||||
"lightMode": "Modo Claro",
|
||||
"darkMode": "Modo Oscuro",
|
||||
"translate": "Translate (EN)",
|
||||
"admin": "ADMIN",
|
||||
"driver": "CONDUCTOR"
|
||||
},
|
||||
"favorites": {
|
||||
"title": "Mis Favoritos",
|
||||
"subtitle": "Guarda tus rutas, taxis y negocios preferidos para acceder rápido.",
|
||||
@ -32,18 +54,26 @@
|
||||
"coupons": "Eventos"
|
||||
},
|
||||
"empty": {
|
||||
"title": "Nada guardado aún",
|
||||
"subtitle": "Aún no tienes favoritos",
|
||||
"description": "Explora rutas, taxis y negocios para guardar tus favoritos aquí",
|
||||
"routes": "No tienes rutas favoritas guardadas.",
|
||||
"taxis": "No tienes taxis favoritos guardados.",
|
||||
"businesses": "No tienes negocios favoritos guardados.",
|
||||
"coupons": "No tienes eventos favoritos guardados."
|
||||
"coupons": "No tienes eventos favoritos guardados.",
|
||||
"noResultsCategory": "No tienes favoritos en esta categoría"
|
||||
},
|
||||
"cta": {
|
||||
"exploreNow": "Explorar ahora",
|
||||
"routes": "Explorar Rutas",
|
||||
"taxis": "Ver Directorio",
|
||||
"businesses": "Descubrir Negocios",
|
||||
"coupons": "Ver Eventos"
|
||||
}
|
||||
},
|
||||
"count": "{count} guardado | {count} guardados",
|
||||
"removeTitle": "Quitar de favoritos",
|
||||
"availability": "Ver disponibilidad",
|
||||
"details": "Ver detalles →"
|
||||
},
|
||||
"header": {
|
||||
"title": "SIBU",
|
||||
@ -64,7 +94,15 @@
|
||||
"selectRoute": "Seleccionar una ruta",
|
||||
"route": "Ruta",
|
||||
"stops": "paradas",
|
||||
"stop": "parada"
|
||||
"stop": "parada",
|
||||
"calculatingRoute": "Calculando ruta real...",
|
||||
"viewRoutes": "ver rutas",
|
||||
"arrivalTime": "Tiempo de llegada",
|
||||
"availableRoutes": "Rutas Disponibles",
|
||||
"busRoute": "Ruta de Autobús",
|
||||
"showMyLocation": "Mostrar mi ubicación",
|
||||
"promo": "PROMO",
|
||||
"search": "Buscar"
|
||||
},
|
||||
"schedules": {
|
||||
"title": "Horarios",
|
||||
@ -78,6 +116,12 @@
|
||||
"schedules": "horarios",
|
||||
"schedule": "horario",
|
||||
"departureTime": "Hora de salida",
|
||||
"today": "Hoy",
|
||||
"tomorrow": "Mañana",
|
||||
"loading": "Cargando horarios...",
|
||||
"viewAll": "Ver todos los horarios",
|
||||
"departing": "SALIENDO",
|
||||
"daily": "Diario",
|
||||
"types": {
|
||||
"weekday": "Entre semana",
|
||||
"weekend": "Fin de semana",
|
||||
@ -88,19 +132,23 @@
|
||||
"title": "Ofertas",
|
||||
"loadingCoupons": "Cargando ofertas...",
|
||||
"noCouponsAvailable": "No hay ofertas disponibles",
|
||||
"noResults": "No se encontraron resultados para tu búsqueda.",
|
||||
"off": "DESCUENTO",
|
||||
"searchPlaceholder": "Buscar ofertas...",
|
||||
"filterByCategory": "Filtrar por categoría",
|
||||
"apply": "Aplicar",
|
||||
"offerDetails": "Detalles de la Oferta",
|
||||
"description": "Descripción",
|
||||
"noDescription": "Sin descripción adicional.",
|
||||
"validity": "Validez",
|
||||
"category": "Categoría",
|
||||
"viewLocation": "Ver ubicación",
|
||||
"validUntil": "Válido hasta",
|
||||
"tomorrow": "Mañana",
|
||||
"active": "Activo",
|
||||
"offersCount": "{count} oferta | {count} ofertas"
|
||||
"offersCount": "{count} oferta | {count} ofertas",
|
||||
"viewDetails": "Ver detalles",
|
||||
"restaurant": "Restaurante"
|
||||
},
|
||||
"taxi": {
|
||||
"title": "Centro de Transporte",
|
||||
@ -116,7 +164,8 @@
|
||||
"allZones": "Todas las zonas",
|
||||
"dayShift": "Día",
|
||||
"afternoonShift": "Tarde",
|
||||
"nightShift": "Noche"
|
||||
"nightShift": "Noche",
|
||||
"errorLoading": "Error al cargar la sección de transporte"
|
||||
},
|
||||
"shuttle": {
|
||||
"title": "Viajes Turísticos & Shuttles",
|
||||
@ -131,7 +180,19 @@
|
||||
"tripType": "Tipo de viaje",
|
||||
"oneWay": "Ida",
|
||||
"roundTrip": "Vuelta",
|
||||
"both": "Ambos"
|
||||
"both": "Ambos",
|
||||
"detailTitle": "Detalle del viaje",
|
||||
"origin": "Origen",
|
||||
"destination": "Destino",
|
||||
"departureTimes": "Horas de salida",
|
||||
"languages": "Idiomas",
|
||||
"pricePerPerson": "Precio por pasajero",
|
||||
"private": "Privado",
|
||||
"bookingInfo": "Reserva e Información",
|
||||
"contactOperator": "Contacta directamente al operador para confirmar disponibilidad.",
|
||||
"bookWhatsapp": "Reservar por WhatsApp",
|
||||
"callOperator": "Llamar al Operador",
|
||||
"errorLoading": "No se pudo cargar la información del viaje"
|
||||
},
|
||||
"busStop": {
|
||||
"loadingDetails": "Cargando detalles de la parada...",
|
||||
@ -141,14 +202,149 @@
|
||||
"accessible": "Accesible"
|
||||
},
|
||||
"discover": {
|
||||
"title": "Descubrir",
|
||||
"subtitle": "Explora los mejores lugares de Chiriquí",
|
||||
"searchPlaceholder": "Explora los mejores lugares en Chiriquí",
|
||||
"title": "¡Explora Chiriquí! 🌿",
|
||||
"subtitle": "Descubre los mejores lugares cerca de ti",
|
||||
"searchPlaceholder": "Buscar restaurantes, hoteles...",
|
||||
"filterLabel": "Filtrar por área:",
|
||||
"allAreas": "Todas",
|
||||
"loading": "Buscando tesoros...",
|
||||
"empty": "No se encontraron lugares en esta área todavía.",
|
||||
"loading": "Cargando lugares...",
|
||||
"error": "No se pudieron cargar los lugares. Revisa tu conexión.",
|
||||
"empty": "No hay lugares aún",
|
||||
"emptyDesc": "Pronto habrá negocios y lugares turísticos disponibles aquí.",
|
||||
"noResults": "Sin resultados",
|
||||
"noResultsDesc": "No encontramos lugares con ese filtro.",
|
||||
"viewAll": "Ver todos los lugares",
|
||||
"exploreMore": "Explorar Lugar",
|
||||
"tourism": "Turismo"
|
||||
"tourism": "Turismo",
|
||||
"results": "{count} lugar | {count} lugares",
|
||||
"in": "en",
|
||||
"lookingMore": "¿Buscas algo más?",
|
||||
"exploreWithoutFilters": "Explora sin filtros para descubrir todo",
|
||||
"sections": {
|
||||
"byArea": "🗺️ Por Área",
|
||||
"featured": "✨ Destacados",
|
||||
"allPlaces": "🏙️ Todos los lugares"
|
||||
},
|
||||
"categories": {
|
||||
"all": "Todas",
|
||||
"restaurant": "Restaurante",
|
||||
"hotel": "Hotel",
|
||||
"cafe": "Café",
|
||||
"commerce": "Comercio",
|
||||
"tourism": "Turismo",
|
||||
"drinks": "Bebidas"
|
||||
}
|
||||
},
|
||||
"business": {
|
||||
"detailsTitle": "Explora Nuestra Historia Para Una Cocina Refinada Y Un Ambiente Atemporal",
|
||||
"detailsDescription": "Nuestra historia es una de crecimiento, exploración y recuerdos culinarios inflamables, donde cada capítulo se sirve con elegancia.",
|
||||
"timelessHeritage": "Herencia Atemporal",
|
||||
"timelessHeritageDesc": "Platos de autor que evolucionan con inspiración y cultura local.",
|
||||
"worldClassDishes": "Platos de Clase Mundial",
|
||||
"worldClassDishesDesc": "Experiencia gastronómica diseñada para deleitar los sentidos más exigentes.",
|
||||
"emotionElegance": "Emoción y Elegancia",
|
||||
"emotionEleganceDesc": "Veladas realzadas por el encanto atemporal de un ambiente exclusivo.",
|
||||
"unmatchedExperience": "Experiencia Inigualable",
|
||||
"unmatchedExperienceDesc": "Servicio personalizado desde un anfitrión dedicado para tu comodidad.",
|
||||
"address": "Dirección",
|
||||
"contact": "Contacto",
|
||||
"socialMedia": "Redes Sociales",
|
||||
"availableOffers": "Ofertas Disponibles",
|
||||
"viewBusiness": "Ver Negocio",
|
||||
"loadingPremium": "Cargando experiencia premium..."
|
||||
},
|
||||
"profile": {
|
||||
"title": "Perfil",
|
||||
"myCoupons": "Mis Cupones",
|
||||
"emptyCoupons": "No tienes cupones",
|
||||
"exploreOffers": "Explora los beneficios que tenemos para ti por usar SIBU.",
|
||||
"viewOffers": "Ver Ofertas",
|
||||
"viewCode": "Ver Código",
|
||||
"usedAt": "Usado el:",
|
||||
"claimedAt": "Reclamado el:",
|
||||
"editProfile": "Editar Perfil",
|
||||
"photoOptional": "Foto opcional",
|
||||
"nameLabel": "Nombre Completo",
|
||||
"namePlaceholder": "Tu nombre",
|
||||
"passwordOptional": "Nueva Contraseña (Opcional)",
|
||||
"passwordPlaceholder": "Mínimo 6 caracteres",
|
||||
"passwordHint": "Déjalo en blanco si no quieres cambiarla.",
|
||||
"cancel": "Cancelar",
|
||||
"save": "Guardar Cambios",
|
||||
"saving": "Guardando...",
|
||||
"qrTitle": "Cupón de Descuento",
|
||||
"qrCode": "CÓDIGO DE REDENCIÓN",
|
||||
"qrInstructions": "Muestra este código al encargado del establecimiento para validar tu promoción.",
|
||||
"understood": "Entendido",
|
||||
"pending": "Pendiente",
|
||||
"redeemed": "Canjeado",
|
||||
"expired": "Vencido",
|
||||
"updateSuccess": "Perfil actualizado correctamente",
|
||||
"updateError": "Error al actualizar:",
|
||||
"user": "Usuario",
|
||||
"logoutTitle": "Cerrar Sesión"
|
||||
},
|
||||
"auth": {
|
||||
"back": "Volver",
|
||||
"brandingSubtitle": "Sistema de Transporte Público",
|
||||
"loginTab": "Iniciar Sesión",
|
||||
"registerTab": "Crear Cuenta",
|
||||
"sessionExpired": "Tu sesión ha expirado. Por favor, inicia sesión nuevamente.",
|
||||
"footer": "SIBU © 2026 • Sistema de Transporte de Chiriquí",
|
||||
"googleLogin": "Continuar con Google",
|
||||
"googleRegister": "Registrarse con Google",
|
||||
"orEmail": "o con correo",
|
||||
"emailLabel": "Correo electrónico",
|
||||
"emailPlaceholder": "tu@correo.com",
|
||||
"passLabel": "Contraseña",
|
||||
"keepSession": "Mantener sesión iniciada",
|
||||
"loggingIn": "Ingresando...",
|
||||
"creatingAccount": "Creando cuenta...",
|
||||
"noAccount": "¿No tienes cuenta?",
|
||||
"registerHere": "Regístrate aquí",
|
||||
"hasAccount": "¿Ya tienes cuenta?",
|
||||
"loginHere": "Inicia sesión",
|
||||
"successTitle": "¡Registro exitoso!",
|
||||
"fullNameLabel": "Nombre completo",
|
||||
"fullNamePlaceholder": "Tu nombre",
|
||||
"passMin8": "Mínimo 8 caracteres",
|
||||
"smartLocation": "Permitir detectar mi ubicación automáticamente (Smart Location)",
|
||||
"emailRegistered": "El correo ya está registrado.",
|
||||
"invalidCreds": "Correo o contraseña incorrectos."
|
||||
},
|
||||
"routesView": {
|
||||
"title": "Transporte",
|
||||
"busTab": "Rutas de Bus",
|
||||
"taxiTab": "Taxis Locales",
|
||||
"originPlaceholder": "Ciudad de Origen",
|
||||
"destPlaceholder": "Ciudad de Destino",
|
||||
"searchBtn": "Buscar Rutas",
|
||||
"allCorregimientos": "Todos los corregimientos",
|
||||
"english": "Inglés",
|
||||
"availableRoutes": "Rutas Disponibles",
|
||||
"recommendedDrivers": "Conductores Recomendados",
|
||||
"active": "ACTIVA",
|
||||
"minutes": "min",
|
||||
"km": "km",
|
||||
"findSchedules": "Ver Horarios",
|
||||
"contact": "Contactar",
|
||||
"noTaxis": "No hay taxis disponibles en esta zona.",
|
||||
"noRoutes": "No se encontraron rutas para tu búsqueda."
|
||||
},
|
||||
"splash": {
|
||||
"subtitle": "Transporte Público Boquete",
|
||||
"starting": "Iniciando SIBU...",
|
||||
"offline": "Iniciando modo sin conexión...",
|
||||
"verifying": "Verificando datos...",
|
||||
"ready": "Listo para usar"
|
||||
},
|
||||
"report": {
|
||||
"title": "Enviar Reporte",
|
||||
"instruction": "Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.",
|
||||
"placeholder": "Escribe tu mensaje aquí...",
|
||||
"success": "¡Reporte enviado con éxito! Gracias por tu colaboración.",
|
||||
"error": "Hubo un error al enviar el reporte. Por favor, intenta de nuevo.",
|
||||
"cancel": "Cancelar",
|
||||
"send": "Enviar Reporte"
|
||||
}
|
||||
}
|
||||
@ -51,7 +51,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function register(email: string, pass: string, fullName: string) {
|
||||
async function register(email: string, pass: string, fullName: string, autoLocation: boolean = false) {
|
||||
console.log('Realizando signUp en Supabase...')
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email,
|
||||
@ -59,7 +59,8 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
options: {
|
||||
data: {
|
||||
full_name: fullName,
|
||||
role: 'PASSENGER'
|
||||
role: 'PASSENGER',
|
||||
auto_location: autoLocation
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -100,6 +101,21 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
window.location.replace('/login')
|
||||
}
|
||||
|
||||
async function updateProfile(updates: any) {
|
||||
if (!userSession.value?.user?.id) return
|
||||
|
||||
const { error } = await supabase
|
||||
.from('users')
|
||||
.update(updates)
|
||||
.eq('id', userSession.value.user.id)
|
||||
|
||||
if (!error) {
|
||||
userProfile.value = { ...userProfile.value, ...updates }
|
||||
} else {
|
||||
console.error('SIBU | Error al actualizar perfil:', error)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
userSession,
|
||||
userProfile,
|
||||
@ -112,6 +128,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
isPassenger,
|
||||
login,
|
||||
register,
|
||||
logout
|
||||
logout,
|
||||
updateProfile
|
||||
}
|
||||
})
|
||||
|
||||
@ -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