From 754abbc86756d06ae10bdfe39a9f053fcc201e1c Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 15:38:54 +0200
Subject: [PATCH 1/6] refactor: clean code

---
 src/components/AppHeader.vue                                  | 2 +-
 src/components/Stop/StopHeader.vue                            | 2 +-
 src/components/Stop/StopPrevNextStops.vue                     | 2 +-
 src/components/Stop/StopSchedules.vue                         | 4 ++--
 src/components/Stop/StopSchedulesDetailsTimes.vue             | 2 +-
 .../Stop/StopSchedulesDetailsTimesNonStopPassage.vue          | 2 +-
 src/components/Stop/StopSchedulesVisitTime.vue                | 2 +-
 src/components/Stop/StopSchedulesVisits.vue                   | 4 +++-
 src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue  | 2 +-
 src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue | 2 +-
 src/main.ts                                                   | 2 --
 src/pages/TimetablesStopPage.vue                              | 2 +-
 src/utils/localstore/lines.ts                                 | 2 +-
 13 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 01ea059..7521d6f 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
   },
   data: () => ({
     clockInterval: 0,
-    time: {} as Time,
+    time: Object as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index a76d216..8a8c90b 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
     DesignPageTitle,
   },
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
 })
 </script>
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
index aaf5279..b302f51 100644
--- a/src/components/Stop/StopPrevNextStops.vue
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -23,7 +23,7 @@ export default Vue.extend({
     DesignPrevNext,
   },
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
   methods: {
     getStop,
diff --git a/src/components/Stop/StopSchedules.vue b/src/components/Stop/StopSchedules.vue
index 25736af..e98d1ed 100644
--- a/src/components/Stop/StopSchedules.vue
+++ b/src/components/Stop/StopSchedules.vue
@@ -45,13 +45,13 @@ export default Vue.extend({
     StopSchedulesVisits,
   },
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
   data: () => ({
     fetchAbortController: new AbortController(),
     visitsByDirections: [] as [string, VisitType[]][],
     debugData: new Set(),
-    updatedAt: {} as Date,
+    updatedAt: Object as Date,
     updateCounter: 0,
     updateInterval: 0,
   }),
diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
index 36015a7..9da7cf1 100644
--- a/src/components/Stop/StopSchedulesDetailsTimes.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
     UiSchedulesDetailsTimeInline,
   },
   props: {
-    visit: {} as PropType<VisitType>,
+    visit: Object as PropType<VisitType>,
     isInline: {
       type: Boolean,
       default: false,
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
index c58d37f..11d417e 100644
--- a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -30,7 +30,7 @@ export default Vue.extend({
     UiSchedulesDetailsTimeWrapped,
   },
   props: {
-    visit: {} as PropType<VisitType>,
+    visit: Object as PropType<VisitType>,
   },
   methods: {
     toTime,
diff --git a/src/components/Stop/StopSchedulesVisitTime.vue b/src/components/Stop/StopSchedulesVisitTime.vue
index 62cb3f7..069b994 100644
--- a/src/components/Stop/StopSchedulesVisitTime.vue
+++ b/src/components/Stop/StopSchedulesVisitTime.vue
@@ -14,7 +14,7 @@ export default Vue.extend({
   components: { UiSchedulesTime },
   props: {
     visit: {
-      type: {} as PropType<VisitType>,
+      type: Object as PropType<VisitType>,
       required: true,
     },
   },
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 84d1ae7..0919574 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -92,7 +92,9 @@ export default Vue.extend({
     StopSchedulesDetailsTimesNonStopPassage,
   },
   props: {
-    visits: {} as PropType<VisitType[]>,
+    visits: {
+      type: Array as PropType<VisitType[]>,
+    },
   },
   data: () => ({
     updateCounter: 0,
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
index f5a990a..28b8faf 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
@@ -21,7 +21,7 @@ export default Vue.extend({
   },
   props: {
     label: String,
-    time: {} as PropType<Time>,
+    time: Object as PropType<Time>,
   },
   methods: {
     toTime,
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
index b49c1e9..dc18f40 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
   },
   props: {
     label: String,
-    time: {} as PropType<Time>,
+    time: Object as PropType<Time>,
     isTimeTextGray: {
       type: Boolean,
       default: false,
diff --git a/src/main.ts b/src/main.ts
index 2c2a37d..b04af5a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -64,5 +64,3 @@ new Vue({
   store,
   render: h => h(App),
 }).$mount('#app')
-
-console.log('VUE_APP_API_URL ', process.env.VUE_APP_API_URL)
diff --git a/src/pages/TimetablesStopPage.vue b/src/pages/TimetablesStopPage.vue
index e1cb0a1..48ba862 100644
--- a/src/pages/TimetablesStopPage.vue
+++ b/src/pages/TimetablesStopPage.vue
@@ -22,7 +22,7 @@ export default Vue.extend({
     StopPrevNextStops,
   },
   data: () => ({
-    stop: {} as StopType,
+    stop: Object as StopType,
   }),
   watch: {
     '$route.path': {
diff --git a/src/utils/localstore/lines.ts b/src/utils/localstore/lines.ts
index ea4a632..e782830 100644
--- a/src/utils/localstore/lines.ts
+++ b/src/utils/localstore/lines.ts
@@ -15,7 +15,7 @@ export const getLinesByRef = () => {
 }
 
 export const getLinesByCategory = () => {
-  const res = {} as { [x: string]: any }
+  const res = Object as { [x: string]: any }
   const lines = Object.entries(getLinesByRef())
     .filter(([k, v]) => k.trim() !== '')
     .map(([k, v]) => v) as any[]

From 81057358a86c2d21683ed4dbad5b648763476ffa Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 16:21:37 +0200
Subject: [PATCH 2/6] feat: move PrevNext stops at the bottom

---
 src/components/AppNav.vue                 | 14 ++---
 src/components/Stop/StopPrevNextStops.vue | 65 ++++++++++++++++++-----
 src/components/ui/UiHr.vue                | 20 +++++++
 src/components/ui/UiPrevNext.vue          |  5 +-
 src/pages/TimetablesStopPage.vue          |  2 +-
 5 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 src/components/ui/UiHr.vue

diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 931c4f7..7444d81 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <hr>
+    <UiHr />
     <div class="nav-content">
       <div
         v-if="showTabsList"
@@ -108,10 +108,11 @@
 import Vue from 'vue'
 import { getStop } from '@/utils/localstore/stops'
 import LineIcon from '@/components/LineIcon.vue'
+import UiHr from '@/components/ui/UiHr.vue'
 
 export default Vue.extend({
   name: 'AppNav',
-  components: { LineIcon },
+  components: { UiHr, LineIcon },
   data: () => ({
     showTabsList: false,
   }),
@@ -150,15 +151,6 @@ nav {
   color: #ffffff;
 }
 
-hr {
-  position: relative;
-  top: 0;
-  margin: 0 0 0 0;
-  height: 0.3rem;
-  background-color: #ffffff;
-  border: 0;
-}
-
 .nav-tabs-list {
   padding-top: 0.2rem;
   max-height: 70vh;
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
index b302f51..53f1119 100644
--- a/src/components/Stop/StopPrevNextStops.vue
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -1,27 +1,45 @@
 <template>
-  <DesignPrevNext
-    :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
-      label: getStop($route.params.line, prevStop).displayName,
-      link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
-    }))"
-    :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
-      label: getStop($route.params.line, nextStop).displayName,
-      link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
-    }))"
-  />
+  <div class="stop-prev-next">
+    <UiHr />
+    <div class="content">
+      <button
+        class="hint"
+        type="button"
+        @click="() => isOpen = !isOpen"
+      >
+        {{ `— ${isOpen ? 'Cacher' : 'Afficher'} les arrêts adjacents —` }}
+      </button>
+      <UiPrevNext
+        v-if="isOpen"
+        :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
+          label: getStop($route.params.line, prevStop).displayName,
+          link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
+        }))"
+        :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
+          label: getStop($route.params.line, nextStop).displayName,
+          link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
+        }))"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import { getStop } from '@/utils/localstore/stops'
-import DesignPrevNext from '@/components/ui/UiPrevNext.vue'
+import UiPrevNext from '@/components/ui/UiPrevNext.vue'
+import UiHr from '@/components/ui/UiHr.vue'
 
 export default Vue.extend({
   name: 'StopPrevNextStops',
   components: {
-    DesignPrevNext,
+    UiHr,
+    UiPrevNext,
   },
+  data: () => ({
+    isOpen: false,
+  }),
   props: {
     stop: Object as PropType<StopType>,
   },
@@ -32,4 +50,27 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+.stop-prev-next {
+  position: fixed;
+  bottom: 3.5rem;
+  left: 0;
+  right: 0;
+}
+
+.content {
+  padding: 0.25rem 1rem;
+  background: #F4F4F4;
+}
+
+.hint {
+  display: block;
+  padding: 0.3rem 0 0.5rem 0;
+  margin: 0 auto;
+  color: #4B4B4B;
+  font-size: 0.75rem;
+  font-family: unset;
+  font-weight: unset;
+  border: 0;
+  background: unset;
+}
 </style>
diff --git a/src/components/ui/UiHr.vue b/src/components/ui/UiHr.vue
new file mode 100644
index 0000000..a78c5bb
--- /dev/null
+++ b/src/components/ui/UiHr.vue
@@ -0,0 +1,20 @@
+<template>
+  <hr>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'UiHr',
+}
+</script>
+
+<style scoped>
+hr {
+    position: relative;
+    top: 0;
+    margin: 0 0 0 0;
+    height: 0.3rem;
+    background-color: #ffffff;
+    border: 0;
+}
+</style>
diff --git a/src/components/ui/UiPrevNext.vue b/src/components/ui/UiPrevNext.vue
index c183581..5902d9a 100644
--- a/src/components/ui/UiPrevNext.vue
+++ b/src/components/ui/UiPrevNext.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 <style scoped>
 .prev-next {
   display: flex;
-  margin-top: 1rem;
+  margin-top: 0.25rem;
   justify-content: space-between;
   align-items: center;
 }
@@ -65,9 +65,10 @@ export default Vue.extend({
   padding: 0.8rem 0;
   margin-bottom: 0.5rem;
   font-size: 0.95rem;
-  background-color: #dfdfdf;
+  background-color: #ffffff;
   border-radius: 0.4rem;
   text-align: center;
+  box-shadow: 0 0 0.3rem #0000001a;
 }
 
 .prev a::before {
diff --git a/src/pages/TimetablesStopPage.vue b/src/pages/TimetablesStopPage.vue
index 48ba862..8b0b356 100644
--- a/src/pages/TimetablesStopPage.vue
+++ b/src/pages/TimetablesStopPage.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="page">
     <StopHeader :stop="stop" />
-    <StopPrevNextStops :stop="stop" />
     <StopTimetable :stop="stop" />
+    <StopPrevNextStops :stop="stop" />
   </div>
 </template>
 

From a77bb8ced7a9a61c735f5ebd43b6b9563b0af400 Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 17:17:42 +0200
Subject: [PATCH 3/6] feat: update StopSchedules css style

---
 .../Stop/StopSchedulesDetailsTimes.vue        | 15 ++++++++++--
 ...topSchedulesDetailsTimesNonStopPassage.vue | 13 +++++++++--
 src/components/Stop/StopSchedulesVisits.vue   | 23 ++++++++-----------
 .../ui/Schedules/UiSchedulesDetailsRow.vue    |  2 ++
 .../UiSchedulesDetailsTimeWrapped.vue         |  4 ++++
 src/components/ui/UiClock.vue                 |  9 ++++----
 6 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
index 9da7cf1..2c2ef56 100644
--- a/src/components/Stop/StopSchedulesDetailsTimes.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -10,10 +10,10 @@
       :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
     />
     <div>
-      <div v-if="visit.platform">
+      <div v-if="visit.platform" class="way-label">
         Voie
       </div>
-      <div>{{ visit.platform }}</div>
+      <div class="way-value">{{ visit.platform }}</div>
     </div>
     <UiSchedulesDetailsTimeWrapped
       v-if="visit.departureTime"
@@ -71,5 +71,16 @@ export default Vue.extend({
   max-width: 20rem;
   margin-right: 1rem;
   justify-content: space-between;
+  font-size: 1.0625rem;
+}
+
+.way-label {
+  font-size: 0.875rem;
+}
+
+.way-value {
+  text-align: center;
+  font-weight: 600;
+  color: #222;
 }
 </style>
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
index 11d417e..9352b28 100644
--- a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -10,10 +10,10 @@
       />
     </div>
     <div>
-      <div v-if="visit.platform">
+      <div v-if="visit.platform" class="way-label">
         Voie
       </div>
-      <div>{{ visit.platform }}</div>
+      <div class="way-value">{{ visit.platform }}</div>
     </div>
   </div>
 </template>
@@ -44,5 +44,14 @@ export default Vue.extend({
   max-width: 20rem;
   margin: 0 1rem 0.5rem 0;
   justify-content: space-between;
+  font-size: 1.0625rem;
+}
+
+.way-label {
+  font-size: 0.875rem;
+}
+
+.way-value {
+  text-align: center;
 }
 </style>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 0919574..fe8f726 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -114,25 +114,20 @@ export default Vue.extend({
 <style scoped>
 
 .row {
-  margin: 0 -1rem;
+  margin: 0 -1rem 0.25rem -1rem;
+  border-bottom: 1px solid #E6E6E6;
 }
 
 .visit {
   display: flex;
-  min-height: 2.8rem;
+  margin-bottom: 0.25rem;
   align-items: center;
 }
 
-.row:nth-child(even) {
-  background-color: #ededed;
-}
-
 .visit-code {
-  padding: 0.3rem 0.5rem 0.3rem 1rem;
-  margin-right: 0.5rem;
-  max-width: 2.4rem;
-  min-width: 2.4rem; /* Prevents weird shrink */
-  background: #fff;
+  margin: 0 0.2rem 0 0.75rem;
+  max-width: 2.85rem;
+  min-width: 2.85rem; /* Prevents weird shrink */
   font-size: 0.8rem;
   font-weight: 700;
   color: #555;
@@ -141,13 +136,13 @@ export default Vue.extend({
 }
 
 .visit-destination {
-  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
+  padding: 0 0.4rem 0 0.5rem;
 }
 
 .visit-details {
-  padding: 0.2rem 0 1rem 1rem;
+  padding: 0.2rem 0 0.75rem 3.75rem;
   overflow-x: auto;
-  color: #3f3f3f;
+  color: #777777;
 }
 
 </style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsRow.vue b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
index f98bc61..b0dc6ee 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
@@ -28,10 +28,12 @@ export default Vue.extend({
 }
 
 .label {
+  font-size: 0.875rem;
   color: #777;
 }
 
 .value {
+  font-size: 0.9375rem;
   margin-left: 0.25rem;
   font-weight: 600;
   color: #3f3f3f;
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
index dc18f40..6915598 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -46,6 +46,10 @@ export default Vue.extend({
   margin-bottom: 0.5rem;
 }
 
+.label {
+  font-size: 0.875rem;
+}
+
 .sublabel {
   font-style: italic;
   color: #515151;
diff --git a/src/components/ui/UiClock.vue b/src/components/ui/UiClock.vue
index d5cf84d..c768bc0 100644
--- a/src/components/ui/UiClock.vue
+++ b/src/components/ui/UiClock.vue
@@ -24,19 +24,20 @@ export default Vue.extend({
 
 <style scoped>
 .datetime {
-  color: #444;
+  color: #222;
   font-weight: 600;
+  font-size: 1.0625em;
 }
 
 .separator {
-  color: #999;
+  color: #838383;
   font-size: 0.9em;
 }
 
 .seconds {
   padding-left: 0.1rem;
-  font-size: 0.75em;
-  color: #777;
+  font-size: 0.875em;
+  color: #838383;
 }
 
 .text-gray {

From 60c6517e37efb26c93c409641c4ee496956c655b Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 17:22:04 +0200
Subject: [PATCH 4/6] feat: add sw skipWaiting

---
 public/sw.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/sw.js b/public/sw.js
index 583c670..8704f43 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -4,6 +4,8 @@ import { CacheFirst } from 'workbox-strategies'
 
 precacheAndRoute(self.__WB_MANIFEST || [])
 
+self.addEventListener('install', () => self.skipWaiting())
+
 registerRoute(
   ({ url }) => url.pathname.startsWith('/img/lines-icons/'),
   new CacheFirst({

From f4a3d9d75e936fdf8b9b5c67becb185f1f2b472e Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 17:32:26 +0200
Subject: [PATCH 5/6] refactor: add proxy component StopSchedulesVisit

---
 src/components/Stop/StopSchedulesVisit.vue  | 127 ++++++++++++++++++++
 src/components/Stop/StopSchedulesVisits.vue | 121 ++-----------------
 2 files changed, 135 insertions(+), 113 deletions(-)
 create mode 100644 src/components/Stop/StopSchedulesVisit.vue

diff --git a/src/components/Stop/StopSchedulesVisit.vue b/src/components/Stop/StopSchedulesVisit.vue
new file mode 100644
index 0000000..3ae05b1
--- /dev/null
+++ b/src/components/Stop/StopSchedulesVisit.vue
@@ -0,0 +1,127 @@
+<template>
+  <details
+    class="row"
+  >
+    <summary class="visit-summary">
+      <div class="visit-code">
+        {{ visit.journeyCode }}
+      </div>
+      <StopSchedulesVisitTime
+        :key="updateCounter"
+        :visit="visit"
+      />
+      <div class="visit-destination">
+        {{ visit.destination }}
+      </div>
+    </summary>
+
+    <div
+      v-if="visit.operator === 'SNCF' && !visit.nonStopPassage"
+      class="visit-details"
+    >
+      <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"
+    >
+      <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"
+    >
+      <StopSchedulesDetailsTimes
+        :visit="visit"
+        is-inline
+      />
+      <UiSchedulesDetailsRow
+        v-if="visit.journeyCode"
+        label="Mission"
+        :value="visit.journeyCode"
+      />
+      <UiSchedulesDetailsRow
+        v-if="visit.trainNumber"
+        label="Train no."
+        :value="visit.trainNumber"
+      />
+    </div>
+  </details>
+</template>
+<script lang="ts">
+import StopSchedulesDetailsTimes from '@/components/Stop/StopSchedulesDetailsTimes.vue'
+import StopSchedulesDetailsTimesNonStopPassage from '@/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue'
+import StopSchedulesVisitTime from '@/components/Stop/StopSchedulesVisitTime.vue'
+import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsRow.vue'
+
+export default {
+  name: 'StopSchedulesVisit',
+  components: {
+    StopSchedulesDetailsTimes,
+    StopSchedulesDetailsTimesNonStopPassage,
+    StopSchedulesVisitTime,
+    UiSchedulesDetailsRow,
+  },
+  props: {
+    updateCounter: {},
+    visit: {},
+  },
+}
+</script>
+<style scoped>
+
+.row {
+    margin: 0 -1rem 0.25rem -1rem;
+    border-bottom: 1px solid #E6E6E6;
+}
+
+.visit-summary {
+    display: flex;
+    margin-bottom: 0.25rem;
+    align-items: center;
+}
+
+.visit-code {
+    margin: 0 0.2rem 0 0.75rem;
+    max-width: 2.85rem;
+    min-width: 2.85rem; /* Prevents weird shrink */
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: #555;
+    border-radius: 0 0.2rem 0.2rem 0;
+    overflow-x: hidden;
+}
+
+.visit-destination {
+    padding: 0 0.4rem 0 0.5rem;
+}
+
+.visit-details {
+    padding: 0.2rem 0 0.75rem 3.75rem;
+    overflow-x: auto;
+    color: #777777;
+}
+
+</style>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index fe8f726..01b3880 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -1,95 +1,26 @@
 <template>
   <div>
-    <details
+    <div
       v-for="visit in visits"
       :key="visit.id"
-      class="row"
     >
-      <summary class="visit">
-        <div class="visit-code">
-          {{ visit.journeyCode }}
-        </div>
-        <StopSchedulesVisitTime
-          :key="updateCounter"
-          :visit="visit"
-        />
-        <div class="visit-destination">
-          {{ visit.destination }}
-        </div>
-      </summary>
-
-      <div
-        v-if="visit.operator === 'SNCF' && !visit.nonStopPassage"
-        class="visit-details"
-      >
-        <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"
-      >
-        <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"
-      >
-        <StopSchedulesDetailsTimes
-          :visit="visit"
-          is-inline
-        />
-        <UiSchedulesDetailsRow
-          v-if="visit.journeyCode"
-          label="Mission"
-          :value="visit.journeyCode"
-        />
-        <UiSchedulesDetailsRow
-          v-if="visit.trainNumber"
-          label="Train no."
-          :value="visit.trainNumber"
-        />
-      </div>
-    </details>
+      <StopSchedulesVisit
+        :update-counter="updateCounter"
+        :visit="visit"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from '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'
-import StopSchedulesVisitTime from '@/components/Stop/StopSchedulesVisitTime.vue'
+import StopSchedulesVisit from '@/components/Stop/StopSchedulesVisit.vue'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
   components: {
-    StopSchedulesVisitTime,
-    UiSchedulesDetailsRow,
-    StopSchedulesDetailsTimes,
-    StopSchedulesDetailsTimesNonStopPassage,
+    StopSchedulesVisit,
   },
   props: {
     visits: {
@@ -110,39 +41,3 @@ export default Vue.extend({
   },
 })
 </script>
-
-<style scoped>
-
-.row {
-  margin: 0 -1rem 0.25rem -1rem;
-  border-bottom: 1px solid #E6E6E6;
-}
-
-.visit {
-  display: flex;
-  margin-bottom: 0.25rem;
-  align-items: center;
-}
-
-.visit-code {
-  margin: 0 0.2rem 0 0.75rem;
-  max-width: 2.85rem;
-  min-width: 2.85rem; /* Prevents weird shrink */
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #555;
-  border-radius: 0 0.2rem 0.2rem 0;
-  overflow-x: hidden;
-}
-
-.visit-destination {
-  padding: 0 0.4rem 0 0.5rem;
-}
-
-.visit-details {
-  padding: 0.2rem 0 0.75rem 3.75rem;
-  overflow-x: auto;
-  color: #777777;
-}
-
-</style>

From 3a529156f4acf6cdfef4b53099aed862c6fde7d8 Mon Sep 17 00:00:00 2001
From: Ludwig Chieng <lud.chieng@hotmail.fr>
Date: Sun, 21 May 2023 17:57:24 +0200
Subject: [PATCH 6/6] feat: add line-through for non departure train

---
 .../Stop/StopSchedulesDetailsTimes.vue        |  9 ++++-
 ...topSchedulesDetailsTimesNonStopPassage.vue |  9 ++++-
 src/components/Stop/StopSchedulesVisit.vue    | 38 +++++++++++++++++--
 .../Stop/StopSchedulesVisitTime.vue           | 16 +-------
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
index 2c2ef56..9ef925a 100644
--- 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
index 9352b28..9f84599 100644
--- 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
index 3ae05b1..8caf0a1 100644
--- 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
index 069b994..a79db64 100644
--- 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>