refactor: stop schedules

ludchieng · Jan 24, 2023 · 1890bbb · 1890bbb
1 parent e3e6114
commit 1890bbb
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 113 deletions.
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="clock">
       <div>
-        <DesignTime :datetime="datetime" />
+        <DesignTime :time="time" />
       </div>
     </div>
   </header>
@@ -38,12 +38,12 @@ export default Vue.extend({
   },
   data: () => ({
     clockInterval: 0,
-    datetime: {} as Time,
+    time: {} as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {
       const t = new Date()
-      this.datetime = {
+      this.time = {
         hh: t.getHours().toString(),
         mm: t.getMinutes().toString().padStart(2, '0'),
         ss: t.getSeconds().toString().padStart(2, '0'),

diff --git a/src/components/Stop/StopSchedules.vue b/src/components/Stop/StopSchedules.vue
@@ -16,23 +16,23 @@
             Synchroniser
           </button>
         </div>
-        <TrainVisits :visits="visits" />
+        <StopSchedulesVisits :visits="visits" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import TrainVisits from '@/components/Stop/StopSchedulesVisits.vue'
+import StopSchedulesVisits from '@/components/Stop/StopSchedulesVisits.vue'
 import { StopType } from '@/utils/parser'
 import { fetchTimetables, VisitType } from '@/utils/fetcher'
 import { getLinesByRef } from '@/utils/localstore/lines'
 
 export default Vue.extend({
   name: 'StopSchedules',
   components: {
-    TrainVisits,
+    StopSchedulesVisits,
   },
   props: {
     stop: {} as PropType<StopType>,

diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-if="!isInline"
+    class="schedules-details-time"
+  >
+    <UiSchedulesDetailsTimeWrapped
+      v-if="visit.arrivalTime"
+      label="Arrivée"
+      :time="toTime(visit.arrivalTime)"
+      :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
+    />
+    <div>
+      <div v-if="visit.platform">Voie</div>
+      <div>{{ visit.platform }}</div>
+    </div>
+    <UiSchedulesDetailsTimeWrapped
+      v-if="visit.departureTime"
+      label="Départ"
+      :time="toTime(visit.departureTime)"
+      :sublabel="visit.departureStatus !== 'onTime' ? visit.departureStatus : null"
+    />
+  </div>
+  <div
+    v-else
+    class="schedules-details-time"
+  >
+    <UiSchedulesDetailsTimeInline
+      v-if="visit.departureTime"
+      label="Départ"
+      :time="toTime(visit.departureTime)"
+    />
+    <UiSchedulesDetailsTimeInline
+      v-else
+      label="Arrivée"
+      :time="toTime(visit.arrivalTime)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiSchedulesDetailsTimeWrapped from '@/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue'
+import UiSchedulesDetailsTimeInline from '@/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue'
+import { VisitType } from '@/utils/fetcher'
+import { toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'StopSchedulesDetailsTimes',
+  components: {
+    UiSchedulesDetailsTimeWrapped,
+    UiSchedulesDetailsTimeInline,
+  },
+  props: {
+    visit: {} as PropType<VisitType>,
+    isInline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time {
+  display: flex;
+  max-width: 20rem;
+  margin-right: 1rem;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="schedules-details-time">
+    <div class="text-gray">
+      <UiSchedulesDetailsTimeWrapped
+        v-if="visit.departureTime"
+        label="Passage sans arrêt"
+        :time="toTime(visit.departureTime)"
+        :sublabel="visit.departureStatus !== 'onTime' ? visit.departureStatus : null"
+        isTimeTextGray
+      />
+    </div>
+    <div>
+      <div v-if="visit.platform">Voie</div>
+      <div>{{ visit.platform }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiSchedulesDetailsTimeWrapped from '@/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue'
+import { VisitType } from '@/utils/fetcher'
+import { toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'StopSchedulesDetailsTimesNonStopPassage',
+  components: {
+    UiSchedulesDetailsTimeWrapped,
+  },
+  props: {
+    visit: {} as PropType<VisitType>,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time {
+  display: flex;
+  max-width: 20rem;
+  margin: 0 1rem 0.5rem 0;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable no-irregular-whitespace -->
 <template>
   <div>
     <details v-for="visit in visits" :key="visit.id" class="row">
@@ -26,104 +25,66 @@
       </summary>
 
       <div v-if="visit.operator === 'SNCF' && !visit.nonStopPassage" class="visit-details">
-        <div class="visit-details-times">
-          <div v-if="visit.arrivalTime">
-            <div class="visit-details-label">Arrivée</div>
-            <UiTime :datetime="toDateTime(visit.arrivalTime)" />
-            <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
-          </div>
-          <div>
-            <div v-if="visit.platform" class="visit-details-label">Voie</div>
-            <div>{{ visit.platform }}</div>
-          </div>
-          <div v-if="visit.departureTime">
-            <div class="visit-details-label">Départ</div>
-            <UiTime :datetime="toDateTime(visit.departureTime)" />
-            <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
-          </div>
-        </div>
-        <div class="visit-details-train">
-          <UiSchedulesDetailsRow
-            v-if="visit.journeyCode"
-            label="Mission"
-            :value="visit.journeyCode"
-          />
-          <UiSchedulesDetailsRow
-            v-if="visit.trainNumber"
-            label="Train no."
-            :value="visit.trainNumber"
-          />
-        </div>
+        <StopSchedulesDetailsTimes :visit="visit" />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
       </div>
 
       <div v-else-if="visit.operator === 'SNCF' && visit.nonStopPassage" class="visit-details">
-        <div class="visit-details-times">
-          <div>
-            <div class="visit-details-label">Passage sans arrêt</div>
-            <UiTime v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
-            <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
-          </div>
-          <div>
-            <div v-if="visit.platform" class="visit-details-label">Voie</div>
-            <div>{{ visit.platform }}</div>
-          </div>
-        </div>
-        <div class="visit-details-train">
-          <UiSchedulesDetailsRow
-            v-if="visit.journeyCode"
-            label="Mission"
-            :value="visit.journeyCode"
-          />
-          <UiSchedulesDetailsRow
-            v-if="visit.trainNumber"
-            label="Train no."
-            :value="visit.trainNumber"
-          />
-        </div>
+        <StopSchedulesDetailsTimesNonStopPassage :visit="visit" />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
       </div>
 
       <div v-else class="visit-details">
-        <div class="visit-details-train">
-          <div v-if="visit.departureTime" class="visit-details-label">
-            Départ
-            <span class="visit-details-train-value">
-              <UiTime :datetime="toDateTime(visit.departureTime)" />
-            </span>
-          </div>
-          <div v-else class="visit-details-label">
-            Arrivée
-            <span class="visit-details-train-value">
-              <UiTime :datetime="toDateTime(visit.arrivalTime)" />
-            </span>
-          </div>
-          <UiSchedulesDetailsRow
-            v-if="visit.journeyCode"
-            label="Mission"
-            :value="visit.journeyCode"
-          />
-          <UiSchedulesDetailsRow
-            v-if="visit.trainNumber"
-            label="Train no."
-            :value="visit.trainNumber"
-          />
-        </div>
+        <StopSchedulesDetailsTimes
+          :visit="visit"
+          isInline
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.journeyCode"
+          label="Mission"
+          :value="visit.journeyCode"
+        />
+        <UiSchedulesDetailsRow
+          v-if="visit.trainNumber"
+          label="Train no."
+          :value="visit.trainNumber"
+        />
       </div>
     </details>
   </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { VisitType } from '@/utils/fetcher'
-import { toTime } from '@/utils/time'
-import UiTime from '@/components/ui/UiTime.vue'
 import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsRow.vue'
+import StopSchedulesDetailsTimes from '@/components/Stop/StopSchedulesDetailsTimes.vue'
+import StopSchedulesDetailsTimesNonStopPassage from '@/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue'
+import { VisitType } from '@/utils/fetcher'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
   components: {
-    UiTime,
     UiSchedulesDetailsRow,
+    StopSchedulesDetailsTimes,
+    StopSchedulesDetailsTimesNonStopPassage,
   },
   props: {
     visits: {} as PropType<VisitType[]>,
@@ -140,11 +101,6 @@ export default Vue.extend({
   destroyed () {
     clearInterval(this.updateInterval)
   },
-  methods: {
-    toDateTime (date: Date) {
-      return toTime(date)
-    },
-  },
 })
 </script>
 
@@ -213,21 +169,4 @@ export default Vue.extend({
   color: #3f3f3f;
 }
 
-.visit-details-times {
-  display: flex;
-  max-width: 20rem;
-  margin: 0 1rem 0.5rem 0;
-  justify-content: space-between;
-}
-
-.visit-details-status {
-  font-style: italic;
-  color: #515151;
-  font-size: 0.9rem;
-}
-
-.visit-details-train {
-  line-height: 1.5;
-}
-
 </style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsRow.vue b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
@@ -24,6 +24,7 @@ export default Vue.extend({
 <style scoped>
 .schedules-details-row {
   font-size: 0.9rem;
+  line-height: 1.5;
 }
 
 .label {