94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useBusStopStore } from '@/stores/busStop'
|
|
import { analyticsService } from '@/services/analyticsService'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const route = useRoute()
|
|
const busStopStore = useBusStopStore()
|
|
|
|
onMounted(async () => {
|
|
const stopId = route.params.id as string
|
|
if (stopId) {
|
|
await busStopStore.loadBusStopById(stopId)
|
|
if (busStopStore.selectedStop) {
|
|
analyticsService.logEvent({
|
|
event_name: 'stop_selected',
|
|
item_id: busStopStore.selectedStop.name,
|
|
properties: { stop_id: stopId }
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bus-stop-details-view">
|
|
<div v-if="busStopStore.isLoading">
|
|
<p>{{ t('busStop.loadingDetails') }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="busStopStore.error">
|
|
<p>{{ t('common.error') }}: {{ busStopStore.error }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="busStopStore.selectedStop">
|
|
<h1>{{ busStopStore.selectedStop.name }}</h1>
|
|
<p v-if="busStopStore.selectedStop.address">{{ busStopStore.selectedStop.address }}</p>
|
|
<p v-if="busStopStore.selectedStop.city">{{ busStopStore.selectedStop.city }}</p>
|
|
|
|
<div class="amenities">
|
|
<h3>{{ t('busStop.amenities') }}</h3>
|
|
<ul>
|
|
<li v-if="busStopStore.selectedStop.has_shelter">{{ t('busStop.shelter') }}</li>
|
|
<li v-if="busStopStore.selectedStop.has_seating">{{ t('busStop.seating') }}</li>
|
|
<li v-if="busStopStore.selectedStop.is_accessible">{{ t('busStop.accessible') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bus-stop-details-view {
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100%;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.bus-stop-details-view h1,
|
|
.bus-stop-details-view h3 {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.bus-stop-details-view p {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.amenities {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.amenities ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.amenities li {
|
|
padding: 0.5rem 0;
|
|
color: var(--text-primary);
|
|
}
|
|
</style>
|
|
|