feat: add line-through for non departure train

ludchieng · May 21, 2023 · 3a52915 · 3a52915
1 parent f4a3d9d
commit 3a52915
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -10,10 +10,15 @@
       :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
     />
     <div>
-      <div v-if="visit.platform" class="way-label">
+      <div
+        v-if="visit.platform"
+        class="way-label"
+      >
         Voie
       </div>
-      <div class="way-value">{{ visit.platform }}</div>
+      <div class="way-value">
+        {{ visit.platform }}
+      </div>
     </div>
     <UiSchedulesDetailsTimeWrapped
       v-if="visit.departureTime"

diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -10,10 +10,15 @@
       />
     </div>
     <div>
-      <div v-if="visit.platform" class="way-label">
+      <div
+        v-if="visit.platform"
+        class="way-label"
+      >
         Voie
       </div>
-      <div class="way-value">{{ visit.platform }}</div>
+      <div class="way-value">
+        {{ visit.platform }}
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/Stop/StopSchedulesVisit.vue b/src/components/Stop/StopSchedulesVisit.vue
@@ -1,6 +1,6 @@
 <template>
   <details
-    class="row"
+    :class="`row row-${variant}`"
   >
     <summary class="visit-summary">
       <div class="visit-code">
@@ -9,6 +9,7 @@
       <StopSchedulesVisitTime
         :key="updateCounter"
         :visit="visit"
+        :variant="variant"
       />
       <div class="visit-destination">
         {{ visit.destination }}
@@ -75,6 +76,8 @@ import StopSchedulesDetailsTimes from '@/components/Stop/StopSchedulesDetailsTim
 import StopSchedulesDetailsTimesNonStopPassage from '@/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue'
 import StopSchedulesVisitTime from '@/components/Stop/StopSchedulesVisitTime.vue'
 import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsRow.vue'
+import { PropType } from 'vue'
+import { VisitType } from '@/utils/fetcher'
 
 export default {
   name: 'StopSchedulesVisit',
@@ -85,8 +88,26 @@ export default {
     UiSchedulesDetailsRow,
   },
   props: {
-    updateCounter: {},
-    visit: {},
+    updateCounter: Number,
+    visit: {
+      type: Object as PropType<VisitType>,
+      required: true,
+    },
+  },
+  computed: {
+    variant () {
+      if (!this.visit) {
+        return 'normal'
+      }
+      if (this.visit.departureStatus === 'cancelled' || this.visit.arrivalStatus === 'cancelled') {
+        return 'alert'
+      }
+      if (this.visit.nonStopPassage || !this.visit.departureTime) {
+        return 'shaded'
+      } else {
+        return 'normal'
+      }
+    },
   },
 }
 </script>
@@ -97,6 +118,17 @@ export default {
     border-bottom: 1px solid #E6E6E6;
 }
 
+.row-alert .visit-destination,
+.row-shaded .visit-destination {
+  text-decoration: line-through;
+  color: #AAAAAA;
+}
+
+.row-alert .visit-code,
+.row-shaded .visit-code {
+  color: #AAAAAA;
+}
+
 .visit-summary {
     display: flex;
     margin-bottom: 0.25rem;

diff --git a/src/components/Stop/StopSchedulesVisitTime.vue b/src/components/Stop/StopSchedulesVisitTime.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { VisitType } from '@/utils/fetcher'
-import UiSchedulesTime from '@/components/ui/Schedules/UiSchedulesTime.vue'
+import UiSchedulesTime, { UiSchedulesTimeVariant } from '@/components/ui/Schedules/UiSchedulesTime.vue'
 
 export default Vue.extend({
   name: 'StopSchedulesVisitTime',
@@ -17,6 +17,7 @@ export default Vue.extend({
       type: Object as PropType<VisitType>,
       required: true,
     },
+    variant: String as PropType<UiSchedulesTimeVariant>,
   },
   computed: {
     time () {
@@ -25,19 +26,6 @@ export default Vue.extend({
         : this.visit?.time
       return ((visitTime - Date.now()) / 1000 / 60).toFixed(0)
     },
-    variant () {
-      if (!this.visit) {
-        return 'normal'
-      }
-      if (this.visit.departureStatus === 'cancelled' || this.visit.arrivalStatus === 'cancelled') {
-        return 'alert'
-      }
-      if (this.visit.nonStopPassage || !this.visit.departureTime) {
-        return 'shaded'
-      } else {
-        return 'normal'
-      }
-    },
   },
 })
 </script>