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

Integrated AuthGuard in Discover and Shuttles, updated Business types and translations

Browse Source
This commit is contained in:
Johan Samudio
2026-03-03 11:45:36 -05:00
parent 20910e367e
commit b098c23291
9 changed files with 458 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/views/transporte/ViajesTuristicos.vue
View File

@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
import { useShuttleStore } from '@/stores/shuttle'
import { analyticsService } from '@/services/analyticsService'
import { getImageUrl } from '@/utils/imageUrl'
import AuthGuard from '@/components/common/AuthGuard.vue'
const { t } = useI18n()
const shuttleStore = useShuttleStore()
@ -91,68 +92,74 @@ onMounted(async () => {
</button>
</div>
<!-- GRID PREMIUM -->
<div v-else class="shuttles-grid">
<div
v-for="shuttle in filteredShuttles"
:key="shuttle.id"
v-memo="[shuttle.id]"
class="shuttle-card-premium glass-effect"
@click="verDetalle(shuttle.id)"
>
<div class="card-image-wrap">
<img
:src="getImageUrl(shuttle.image_url, 'shuttle')"
loading="lazy"
decoding="async"
class="shuttle-img"
alt="Shuttle"
@error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
/>
<div class="company-tag" v-if="shuttle.company_name">
<span class="material-icons">business</span>
{{ shuttle.company_name }}
<!-- GRID PREMIUM CON AUTHGUARD -->
<AuthGuard
v-else
:title="t('shuttle.auth.title') || 'Viajes Exclusivos'"
:message="t('shuttle.auth.message') || 'Regístrate para reservar tus viajes, ver horarios detallados y tarifas de grupo.'"
>
<div class="shuttles-grid">
<div
v-for="shuttle in filteredShuttles"
:key="shuttle.id"
v-memo="[shuttle.id]"
class="shuttle-card-premium glass-effect"
@click="verDetalle(shuttle.id)"
>
<div class="card-image-wrap">
<img
:src="getImageUrl(shuttle.image_url, 'shuttle')"
loading="lazy"
decoding="async"
class="shuttle-img"
alt="Shuttle"
@error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
/>
<div class="company-tag" v-if="shuttle.company_name">
<span class="material-icons">business</span>
{{ shuttle.company_name }}
</div>
</div>
<div class="card-body-premium">
<div class="route-header">
<div class="route-main">
<span class="location-name">{{ shuttle.origin }}</span>
<span class="material-icons separator-icon">east</span>
<span class="location-name">{{ shuttle.destination }}</span>
</div>
</div>
<div class="card-meta">
<div class="meta-tag">
<span class="material-icons">directions_bus</span>
<span>{{ shuttle.vehicle_type }}</span>
</div>
<div class="meta-tag" v-if="shuttle.estimated_duration">
<span class="material-icons">schedule</span>
<span>{{ shuttle.estimated_duration }}</span>
</div>
</div>
<div class="card-footer-premium">
<div class="price-container">
<span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
<span class="price-val">${{ shuttle.price_per_person }}</span>
</div>
<button class="view-details-btn">
<span class="material-icons">chevron_right</span>
</button>
</div>
</div>
</div>
<div class="card-body-premium">
<div class="route-header">
<div class="route-main">
<span class="location-name">{{ shuttle.origin }}</span>
<span class="material-icons separator-icon">east</span>
<span class="location-name">{{ shuttle.destination }}</span>
</div>
</div>
<div class="card-meta">
<div class="meta-tag">
<span class="material-icons">directions_bus</span>
<span>{{ shuttle.vehicle_type }}</span>
</div>
<div class="meta-tag" v-if="shuttle.estimated_duration">
<span class="material-icons">schedule</span>
<span>{{ shuttle.estimated_duration }}</span>
</div>
</div>
<div class="card-footer-premium">
<div class="price-container">
<span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
<span class="price-val">${{ shuttle.price_per_person }}</span>
</div>
<button class="view-details-btn">
<span class="material-icons">chevron_right</span>
</button>
</div>
<!-- EMPTY STATE -->
<div v-if="filteredShuttles.length === 0" class="empty-state">
<span class="material-icons">directions_bus_filled</span>
<p>{{ t('shuttle.noShuttles') }}</p>
</div>
</div>
<!-- EMPTY STATE -->
<div v-if="filteredShuttles.length === 0" class="empty-state">
<span class="material-icons">directions_bus_filled</span>
<p>{{ t('shuttle.noShuttles') }}</p>
</div>
</div>
</AuthGuard>
</div>
</template>