Add refresh button to journey view

Travigo · Jun 24, 2024 · 91bd658 · 91bd658
1 parent d4c350d
commit 91bd658
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 14 deletions.
diff --git a/.github/workflows/build-and-deploy.yaml b/.github/workflows/build-and-deploy.yaml
@@ -89,4 +89,4 @@ jobs:
 
     - name: Helm upgrade
       run: |-
-        helm upgrade -i travigo-web-ui ./charts/travigo-web-ui --set image.tag=sha-${{ github.sha }}
+        helm upgrade -i travigo-web-ui ./charts/travigo-web-ui --set image.tag=sha-${{ github.sha }}
diff --git a/src/components/RefreshLoadingButton.vue b/src/components/RefreshLoadingButton.vue
@@ -0,0 +1,13 @@
+<template>
+  <a class="material-symbols-outlined text-base bg-gray-200 text-gray-400 dark:bg-gray-700 dark:text-gray-500 px-2 py-1 rounded-lg inline-block align-middle mr-1">
+    <span v-if="this.loading">cloud_sync</span><span v-else>sync</span>
+  </a>
+</template>
+
+<script>
+export default {
+ props: {
+   loading: {}
+ }
+}
+</script>
diff --git a/src/views/Journeys/View.vue b/src/views/Journeys/View.vue
@@ -1,6 +1,6 @@
 <template>
-  <Alert type="error" class="mt-4" v-if="error !== undefined">{{ error }}</Alert>
-  <div v-if="loading">Loading...</div>
+  <Alert type="error" class="mt-4" v-if="errorJourney !== undefined">{{ errorJourney }}</Alert>
+  <div v-if="loadingJourney">Loading...</div>
   <div v-else class="h-full">
     <h1 class="py-2 text-xl font-medium leading-tight text-gray-900 dark:text-gray-200">
       <DepartureTypeIcon :journey="journey"/> {{ journey.DestinationDisplay }}
@@ -30,6 +30,11 @@
       <ServiceAlert :alert="serviceAlert" v-for="(serviceAlert, id) in this.serviceAlerts" v-bind:key="id" />
     </div>
 
+    <RefreshLoadingButton 
+      :loading="this.loadingRealtime"
+      @click="this.getRealtimeJourney()"
+    ></RefreshLoadingButton>
+
     <div class="md:hidden">
       <NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />
     </div>
@@ -319,6 +324,7 @@ import Alert from "@/components/Alert.vue"
 import ServiceAlert from '@/components/ServiceAlert.vue'
 import DetailedInformationRail from '@/components/DetailedInformationRail.vue'
 import DepartureTypeIcon from '@/components/DepartureTypeIcon.vue'
+import RefreshLoadingButton from "@/components/RefreshLoadingButton.vue"
 import axios from "axios"
 import API from "@/API"
 import Pretty from "@/pretty"
@@ -331,8 +337,11 @@ export default {
 
       serviceAlerts: [],
 
-      loading: true,
-      error: undefined,
+      loadingJourney: true,
+      errorJourney: undefined,
+
+      loadingRealtime: false,
+      errorRealtime: undefined,
 
       pretty: Pretty,
 
@@ -373,7 +382,8 @@ export default {
     ServiceIcon,
     ServiceAlert,
     DetailedInformationRail,
-    DepartureTypeIcon
+    DepartureTypeIcon,
+    RefreshLoadingButton
   },
   methods: {
     mapLoaded(map) {
@@ -434,15 +444,21 @@ export default {
         })
         .catch((error) => {
           console.log(error)
-          this.error = error
+          this.errorJourney = error
         })
-        .finally(() => (this.loading = false))
+        .finally(() => (this.loadingJourney = false))
     },
     getRealtimeJourney() {
       if (this.journey == null) {
         return
       }
 
+      if (this.loadingRealtime) {
+        return
+      }
+
+      this.loadingRealtime = true
+
       axios
         .get(`${API.URL}/core/journeys/${this.$route.params.id}?realtime_only=true`)
         .then((response) => {
@@ -456,9 +472,9 @@ export default {
         })
         .catch((error) => {
           console.log(error)
-          this.error = error
+          this.errorRealtime = error
         })
-        .finally(() => (this.loading = false))
+        .finally(() => (this.loadingRealtime = false))
     },
     convertTrackToFeatureCollection(track) {
       return {

diff --git a/src/views/Stops/View.vue b/src/views/Stops/View.vue
@@ -47,9 +47,10 @@
           <VueDatePicker @update:model-value="updateDatetimePicker" ref="datetimepicker" time-picker-inline teleport-center :teleport="true" hidden />
           calendar_clock
         </a>
-        <a class="material-symbols-outlined text-base bg-gray-200 text-gray-400 dark:bg-gray-700 dark:text-gray-500 px-2 py-1 rounded-lg inline-block align-middle mr-1" @click="this.refreshView()">
-          <span v-if="this.loadingDepartures">cloud_sync</span><span v-else>sync</span>
-        </a>
+        <RefreshLoadingButton 
+          :loading="this.loadingDepartures"
+          @click="this.refreshView()"
+        ></RefreshLoadingButton>
         <div class="inline-block">
           <NavTabBar :tabs="tabs" :currentTab="currentTab" :changeTab="changeTab" />
         </div>
@@ -119,6 +120,7 @@ import DeparturesList from '@/components/DeparturesList.vue'
 import ServiceAlert from '@/components/ServiceAlert.vue'
 import Alert from '@/components/Alert.vue'
 import NavTabBar from "@/components/NavTabBar.vue"
+import RefreshLoadingButton from "@/components/RefreshLoadingButton.vue"
 import VueDatePicker from '@vuepic/vue-datepicker'
 import axios from 'axios'
 import API from '@/API'
@@ -178,7 +180,8 @@ export default {
     Alert,
     DeparturesList,
     NavTabBar,
-    VueDatePicker
+    VueDatePicker,
+    RefreshLoadingButton
   },
   methods: {
     openDatetimePicker() {