Initial commit: SIBU 2.0 MISSION

frontend/src/views/BusStopDetailsView.vue

@@ -0,0 +1,93 @@
+<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>
+