From 7f758ffafe44c69c2d6da357464cb33998803e2e Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:14 +0100
Subject: [PATCH 01/24] fix: remove fetch on app start

---
 src/App.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 237ee24..a2cee06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,8 +26,6 @@ export default Vue.extend({
         window.location.href = '/'
       })
     }
-    // Ping server to wake it up
-    fetch(process.env.VUE_APP_API_URL)
   },
   watch: {
     '$route.params.tab': {

From f34b25bd95812ff08c00375b182323f8ac81a485 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:15 +0100
Subject: [PATCH 02/24] fix: store won't initialize correctly

---
 src/utils/localstore/synchronizer.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/utils/localstore/synchronizer.ts b/src/utils/localstore/synchronizer.ts
index 6128bc9..4746d80 100644
--- a/src/utils/localstore/synchronizer.ts
+++ b/src/utils/localstore/synchronizer.ts
@@ -8,11 +8,11 @@ export const lastUpdatedAt = () => {
 
 export const synchronize = async () => {
   const lines = await synchronizeFile('/schemas/lines.json', 'lines')
-
-  for (const line of Object.values(lines) as any[]) {
-    synchronizeLine(line.slugName)
-  }
-  localStorage.setItem('lines.updatedAt', new Date().toISOString())
+  return Promise.all(
+    Object.values(lines).map((line: any) => synchronizeLine(line.slugName)),
+  ).then(() => {
+    localStorage.setItem('lines.updatedAt', new Date().toISOString())
+  })
 }
 
 export const synchronizeLine = async (line: string) => {

From fb18ed41f32e42d4bd86b509f51dc190ec0677e1 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:15 +0100
Subject: [PATCH 03/24] fix: remove cache first on line schemas

---
 public/sw.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/public/sw.js b/public/sw.js
index c252376..583c670 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -17,10 +17,3 @@ registerRoute(
     cacheName: 'img-mui',
   }),
 )
-
-registerRoute(
-  ({ url }) => url.pathname.startsWith('/schemas/'),
-  new CacheFirst({
-    cacheName: 'schemas',
-  }),
-)

From 1b13d89ed2f381587829e04b971bb283bffac17c Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:16 +0100
Subject: [PATCH 04/24] fix: update uri paths

---
 src/App.vue                            |  8 ++++----
 src/components/AppHeader.vue           |  4 ++--
 src/components/AppNav.vue              | 10 +++++-----
 src/components/AppPageView.vue         |  8 ++------
 src/components/Line/RouteMap/Table.vue |  2 +-
 src/components/Stop/Header.vue         |  2 +-
 src/components/Stop/PrevNextStops.vue  |  4 ++--
 src/main.ts                            | 13 ++++++++-----
 src/pages/TabPage/New.vue              |  2 +-
 9 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a2cee06..3fea1da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,13 +30,13 @@ export default Vue.extend({
   watch: {
     '$route.params.tab': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
-          this.$router.push(`/1/${this.$store.state.tabs[0].path}`)
+          this.$router.push(`/timetables/1/${this.$store.state.tabs[0].path}`)
         }
       },
       deep: true,
@@ -59,7 +59,7 @@ export default Vue.extend({
     },
     '$store.state.tabs': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
@@ -67,7 +67,7 @@ export default Vue.extend({
         if (!isValidTabNumber) {
           const newTabNumber = Math.min(this.$store.state.tabs.length, Math.max(1, Number(this.$route.params.tab)))
           const { line, stop } = this.$store.state.tabs[newTabNumber - 1]
-          this.$router.push(`/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+          this.$router.push(`/timetables/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
         }
       },
       deep: true,
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 86b4e33..30ea657 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -3,13 +3,13 @@
     <div>
       <router-link v-if="$route.params.line"
         class="icon-line"
-        :to="`/${ $route.params.tab }/${ $route.params.line }`"
+        :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
       <LineIcon :lineSlugName="$route.params.line" theme="colors" />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/${ $route.params.tab }`">
+      <router-link class="logo" :to="`/timetables/${ $route.params.tab }`">
         <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
       </router-link>
     </div>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 572732b..326d99c 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -8,7 +8,7 @@
             class="tab"
             :class="{ 'tab-active': tabIndex() === i }"
           >
-            <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+            <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
                 <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                 <span v-if="stop" class="tab-label-text">
@@ -36,7 +36,7 @@
               class="tab"
               :class="{ 'tab-active': tabIndex() === i }"
             >
-              <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+              <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
                   <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                   <span v-if="stop" class="tab-label-text">
@@ -76,18 +76,18 @@ export default Vue.extend({
     },
     addTab () {
       this.$store.commit('addTab')
-      this.$router.push(`/${this.$store.state.tabs.length}`)
+      this.$router.push(`/timetables/${this.$store.state.tabs.length}`)
     },
     closeTab (tabIndex: number) {
       const currentTabIndex = Number(this.$route.params.tab) - 1
       if (currentTabIndex > tabIndex) {
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
         this.$store.commit('closeTab', { tabIndex })
-        this.$router.push(`/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       } else {
         this.$store.commit('closeTab', { tabIndex })
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
-        this.$router.push(`/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       }
     },
   },
diff --git a/src/components/AppPageView.vue b/src/components/AppPageView.vue
index 3712c1a..a7a596f 100644
--- a/src/components/AppPageView.vue
+++ b/src/components/AppPageView.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="tab">
-      <SettingsPage v-if="$route.params.tab === 'settings'" />
-      <TabPage v-else />
+      <router-view>
+      </router-view>
     </div>
     <AppNav />
   </div>
@@ -10,16 +10,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import SettingsPage from '@/pages/SettingsPage.vue'
-import TabPage from '@/pages/TabPage/index.vue'
 import AppNav from '@/components/AppNav.vue'
 
 export default Vue.extend({
   name: 'AppPageView',
   components: {
     AppNav,
-    SettingsPage,
-    TabPage,
   },
 })
 </script>
diff --git a/src/components/Line/RouteMap/Table.vue b/src/components/Line/RouteMap/Table.vue
index 79db893..b8ce1c6 100644
--- a/src/components/Line/RouteMap/Table.vue
+++ b/src/components/Line/RouteMap/Table.vue
@@ -12,7 +12,7 @@
       >
         <LabelCell
           :stopName="row.displayName"
-          :href="`/${$route.params.tab}/${line}/${row.slugName}`"
+          :href="`/timetables/${$route.params.tab}/${line}/${row.slugName}`"
           :lineConnections="row.lineConnections"
         />
       </td>
diff --git a/src/components/Stop/Header.vue b/src/components/Stop/Header.vue
index 657ea78..33138bd 100644
--- a/src/components/Stop/Header.vue
+++ b/src/components/Stop/Header.vue
@@ -6,7 +6,7 @@
     <span class="line-connections">
       <router-link v-for="conn in stop.lineConnections"
         :key="`${conn.line}/${conn.slugName}`"
-        :to="`/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon :lineSlugName="conn.line" theme="dark" />
       </router-link>
diff --git a/src/components/Stop/PrevNextStops.vue b/src/components/Stop/PrevNextStops.vue
index 0eaf69c..06a0d69 100644
--- a/src/components/Stop/PrevNextStops.vue
+++ b/src/components/Stop/PrevNextStops.vue
@@ -2,7 +2,7 @@
   <div class="prev-next-stops">
     <ul>
       <li v-for="(prevStop, i) in stop.prevStops.slice().reverse()" :key="i" class="prev-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${prevStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`">
           <span>
             {{ getStop($route.params.line, prevStop).displayName }}
           </span>
@@ -11,7 +11,7 @@
     </ul>
     <ul>
       <li v-for="(nextStop, i) in stop.nextStops.slice().reverse()" :key="i" class="next-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${nextStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`">
           <span>
             {{ getStop($route.params.line, nextStop).displayName }}
           </span>
diff --git a/src/main.ts b/src/main.ts
index 3499c11..0ac3224 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
+import TabPage from '@/pages/TabPage/index.vue'
+import SettingsPage from '@/pages/SettingsPage.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -11,10 +13,11 @@ Vue.use(Vuex)
 
 const routes = [
   { path: '/', component: App },
-  { path: '/:tab', component: App },
-  { path: '/:tab/:line', component: App },
-  { path: '/:tab/:line/:stop', component: App },
-  { path: '/about', component: App },
+  { path: '/settings', component: SettingsPage },
+  { path: '/timetables/', component: TabPage },
+  { path: '/timetables/:tab', component: TabPage },
+  { path: '/timetables/:tab/:line', component: TabPage },
+  { path: '/timetables/:tab/:line/:stop', component: TabPage },
 ]
 
 const router = new VueRouter({
@@ -56,5 +59,5 @@ const store = new Vuex.Store({
 new Vue({
   router,
   store,
-  template: '<router-view class="view"></router-view>',
+  render: h => h(App),
 }).$mount('#app')
diff --git a/src/pages/TabPage/New.vue b/src/pages/TabPage/New.vue
index 0e36cb4..5f06fbe 100644
--- a/src/pages/TabPage/New.vue
+++ b/src/pages/TabPage/New.vue
@@ -4,7 +4,7 @@
       <h2>{{ category.name }}</h2>
       <hr />
       <router-link v-for="line in category.lines" :key="line.slugName"
-        class="icon-line" :to="`/${$route.params.tab}/${line.slugName}`"
+        class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
         <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
       </router-link>

From aa18017e6a4bf3da312631321a90b3eea277fa0b Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:16 +0100
Subject: [PATCH 05/24] fix: change router base to /app

---
 src/main.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index 0ac3224..e159d16 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,8 @@ const routes = [
 ]
 
 const router = new VueRouter({
+  mode: 'history',
+  base: '/app',
   routes,
 })
 

From a0a324aa2da162f26c92bfc68eab353b4fc5aa5c Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:17 +0100
Subject: [PATCH 06/24] fix: correct uri undefined on page /settings

---
 src/components/AppHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 30ea657..745983b 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -9,7 +9,7 @@
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/timetables/${ $route.params.tab }`">
+      <router-link class="logo" :to="`/timetables/${ $route.params.tab || '' }`">
         <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
       </router-link>
     </div>

From eb7041660ff739f08245accf5228ecd832b73216 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:17 +0100
Subject: [PATCH 07/24] chore: rename components

---
 src/App.vue                                            |  9 +++------
 src/components/AppHeader.vue                           |  2 +-
 src/components/AppNav.vue                              |  2 +-
 src/components/{AppPageView.vue => AppView.vue}        |  5 ++++-
 src/components/{Line/Icon.vue => LineIcon.vue}         |  0
 .../{Line/RouteMap/index.vue => LineMap/LineMap.vue}   |  4 ++--
 .../DrawingCell.vue => LineMap/LineMapDrawingCell.vue} |  2 +-
 .../LabelCell.vue => LineMap/LineMapLabelCell.vue}     |  4 ++--
 .../RouteMap/Table.vue => LineMap/LineMapTable.vue}    |  6 +++---
 src/components/Stop/{Header.vue => StopHeader.vue}     |  2 +-
 .../Stop/{PrevNextStops.vue => StopPrevNextStops.vue}  |  0
 .../Stop/{Timetable/index.vue => StopSchedules.vue}    |  4 ++--
 .../{Timetable/Visits.vue => StopSchedulesVisits.vue}  |  2 +-
 .../Timetables/TimetablesHome.vue}                     |  4 ++--
 .../Timetables/TimetablesLine.vue}                     |  4 ++--
 .../Timetables/TimetablesStop.vue}                     |  8 ++++----
 src/main.ts                                            | 10 +++++-----
 src/pages/{TabPage/index.vue => TimetablesPage.vue}    |  8 ++++----
 18 files changed, 38 insertions(+), 38 deletions(-)
 rename src/components/{AppPageView.vue => AppView.vue} (77%)
 rename src/components/{Line/Icon.vue => LineIcon.vue} (100%)
 rename src/components/{Line/RouteMap/index.vue => LineMap/LineMap.vue} (89%)
 rename src/components/{Line/RouteMap/DrawingCell.vue => LineMap/LineMapDrawingCell.vue} (98%)
 rename src/components/{Line/RouteMap/LabelCell.vue => LineMap/LineMapLabelCell.vue} (93%)
 rename src/components/{Line/RouteMap/Table.vue => LineMap/LineMapTable.vue} (93%)
 rename src/components/Stop/{Header.vue => StopHeader.vue} (95%)
 rename src/components/Stop/{PrevNextStops.vue => StopPrevNextStops.vue} (100%)
 rename src/components/Stop/{Timetable/index.vue => StopSchedules.vue} (96%)
 rename src/components/Stop/{Timetable/Visits.vue => StopSchedulesVisits.vue} (99%)
 rename src/{pages/TabPage/New.vue => components/Timetables/TimetablesHome.vue} (93%)
 rename src/{pages/TabPage/Line.vue => components/Timetables/TimetablesLine.vue} (77%)
 rename src/{pages/TabPage/Stop.vue => components/Timetables/TimetablesStop.vue} (78%)
 rename src/pages/{TabPage/index.vue => TimetablesPage.vue} (61%)

diff --git a/src/App.vue b/src/App.vue
index 3fea1da..2b22203 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
   <div id="app">
-    <AppHeader />
-    <AppPageView />
+    <AppView />
   </div>
 </template>
 
@@ -10,15 +9,13 @@ import Vue from 'vue'
 import '@fontsource/inter/latin-500.css'
 import '@fontsource/inter/latin-600.css'
 import '@fontsource/inter/latin-700.css'
-import AppHeader from '@/components/AppHeader.vue'
-import AppPageView from '@/components/AppPageView.vue'
+import AppView from '@/components/AppView.vue'
 import { lastUpdatedAt, synchronize } from './utils/localstore/synchronizer'
 
 export default Vue.extend({
   name: 'App',
   components: {
-    AppHeader,
-    AppPageView,
+    AppView,
   },
   created () {
     if (!lastUpdatedAt()) {
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 745983b..53dbd35 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 import TimeClock from '@/components/TimeClock.vue'
 import { DateTime } from '@/utils/datetime'
 export default Vue.extend({
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 326d99c..4ae9eb9 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -61,7 +61,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { getStop } from '@/utils/localstore/stops'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
   name: 'AppNav',
diff --git a/src/components/AppPageView.vue b/src/components/AppView.vue
similarity index 77%
rename from src/components/AppPageView.vue
rename to src/components/AppView.vue
index a7a596f..67959e9 100644
--- a/src/components/AppPageView.vue
+++ b/src/components/AppView.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <AppHeader />
     <div class="tab">
       <router-view>
       </router-view>
@@ -11,10 +12,12 @@
 <script lang="ts">
 import Vue from 'vue'
 import AppNav from '@/components/AppNav.vue'
+import AppHeader from '@/components/AppHeader.vue'
 
 export default Vue.extend({
-  name: 'AppPageView',
+  name: 'AppView',
   components: {
+    AppHeader,
     AppNav,
   },
 })
diff --git a/src/components/Line/Icon.vue b/src/components/LineIcon.vue
similarity index 100%
rename from src/components/Line/Icon.vue
rename to src/components/LineIcon.vue
diff --git a/src/components/Line/RouteMap/index.vue b/src/components/LineMap/LineMap.vue
similarity index 89%
rename from src/components/Line/RouteMap/index.vue
rename to src/components/LineMap/LineMap.vue
index 9437aac..db92172 100644
--- a/src/components/Line/RouteMap/index.vue
+++ b/src/components/LineMap/LineMap.vue
@@ -7,12 +7,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineRouteMapTable from './Table.vue'
+import LineRouteMapTable from './LineMapTable.vue'
 import { RouteMapType } from '@/utils/parser'
 import { getLineRouteMap } from '@/utils/localstore/lines'
 
 export default Vue.extend({
-  name: 'LineRouteMap',
+  name: 'LineMap',
   components: { LineRouteMapTable },
   props: {
     line: String,
diff --git a/src/components/Line/RouteMap/DrawingCell.vue b/src/components/LineMap/LineMapDrawingCell.vue
similarity index 98%
rename from src/components/Line/RouteMap/DrawingCell.vue
rename to src/components/LineMap/LineMapDrawingCell.vue
index 164ccde..4104e9f 100644
--- a/src/components/Line/RouteMap/DrawingCell.vue
+++ b/src/components/LineMap/LineMapDrawingCell.vue
@@ -53,7 +53,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'LineRouteMapDrawingCell',
+  name: 'LineMapDrawingCell',
   props: {
     content: String,
     isLargeCircle: {
diff --git a/src/components/Line/RouteMap/LabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
similarity index 93%
rename from src/components/Line/RouteMap/LabelCell.vue
rename to src/components/LineMap/LineMapLabelCell.vue
index ba41652..e74802b 100644
--- a/src/components/Line/RouteMap/LabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -25,10 +25,10 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { LineConnectionType } from '@/utils/parser'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
-  name: 'LineRouteMapLabelCell',
+  name: 'LineMapLabelCell',
   components: { LineIcon },
   props: {
     stopName: String,
diff --git a/src/components/Line/RouteMap/Table.vue b/src/components/LineMap/LineMapTable.vue
similarity index 93%
rename from src/components/Line/RouteMap/Table.vue
rename to src/components/LineMap/LineMapTable.vue
index b8ce1c6..23f2bd9 100644
--- a/src/components/Line/RouteMap/Table.vue
+++ b/src/components/LineMap/LineMapTable.vue
@@ -23,11 +23,11 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { RouteMapType } from '@/utils/parser'
-import DrawingCell from './DrawingCell.vue'
-import LabelCell from './LabelCell.vue'
+import DrawingCell from './LineMapDrawingCell.vue'
+import LabelCell from './LineMapLabelCell.vue'
 
 export default Vue.extend({
-  name: 'LineRouteMapTable',
+  name: 'LineMapTable',
   components: { DrawingCell, LabelCell },
   props: {
     line: String,
diff --git a/src/components/Stop/Header.vue b/src/components/Stop/StopHeader.vue
similarity index 95%
rename from src/components/Stop/Header.vue
rename to src/components/Stop/StopHeader.vue
index 33138bd..e1ef10c 100644
--- a/src/components/Stop/Header.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 
 export default Vue.extend({
   name: 'StopHeader',
diff --git a/src/components/Stop/PrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
similarity index 100%
rename from src/components/Stop/PrevNextStops.vue
rename to src/components/Stop/StopPrevNextStops.vue
diff --git a/src/components/Stop/Timetable/index.vue b/src/components/Stop/StopSchedules.vue
similarity index 96%
rename from src/components/Stop/Timetable/index.vue
rename to src/components/Stop/StopSchedules.vue
index 423844a..0c0b3d9 100644
--- a/src/components/Stop/Timetable/index.vue
+++ b/src/components/Stop/StopSchedules.vue
@@ -24,13 +24,13 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import TrainVisits from '@/components/Stop/Timetable/Visits.vue'
+import TrainVisits 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: 'StopTimetable',
+  name: 'StopSchedules',
   components: {
     TrainVisits,
   },
diff --git a/src/components/Stop/Timetable/Visits.vue b/src/components/Stop/StopSchedulesVisits.vue
similarity index 99%
rename from src/components/Stop/Timetable/Visits.vue
rename to src/components/Stop/StopSchedulesVisits.vue
index 1fc7493..2507b03 100644
--- a/src/components/Stop/Timetable/Visits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -119,7 +119,7 @@ import { toDateTime } from '@/utils/datetime'
 import TimeClock from '@/components/TimeClock.vue'
 
 export default Vue.extend({
-  name: 'StopTimetableVisits',
+  name: 'StopSchedulesVisits',
   components: {
     TimeClock,
   },
diff --git a/src/pages/TabPage/New.vue b/src/components/Timetables/TimetablesHome.vue
similarity index 93%
rename from src/pages/TabPage/New.vue
rename to src/components/Timetables/TimetablesHome.vue
index 5f06fbe..c406ad7 100644
--- a/src/pages/TabPage/New.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -14,11 +14,11 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineIcon from '@/components/Line/Icon.vue'
+import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
 
 export default Vue.extend({
-  name: 'TabPageNew',
+  name: 'TimetablesHome',
   components: { LineIcon },
   computed: {
     linesByCategory () {
diff --git a/src/pages/TabPage/Line.vue b/src/components/Timetables/TimetablesLine.vue
similarity index 77%
rename from src/pages/TabPage/Line.vue
rename to src/components/Timetables/TimetablesLine.vue
index d549269..465170e 100644
--- a/src/pages/TabPage/Line.vue
+++ b/src/components/Timetables/TimetablesLine.vue
@@ -6,10 +6,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineRouteMap from '@/components/Line/RouteMap/index.vue'
+import LineRouteMap from '@/components/LineMap/LineMap.vue'
 
 export default Vue.extend({
-  name: 'TabPageLine',
+  name: 'TimetablesLine',
   components: { LineRouteMap },
 })
 </script>
diff --git a/src/pages/TabPage/Stop.vue b/src/components/Timetables/TimetablesStop.vue
similarity index 78%
rename from src/pages/TabPage/Stop.vue
rename to src/components/Timetables/TimetablesStop.vue
index ddc1bc8..e14f3a5 100644
--- a/src/pages/TabPage/Stop.vue
+++ b/src/components/Timetables/TimetablesStop.vue
@@ -9,13 +9,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import { StopType } from '@/utils/parser'
-import StopTimetable from '@/components/Stop/Timetable/index.vue'
-import StopHeader from '@/components/Stop/Header.vue'
-import StopPrevNextStops from '@/components/Stop/PrevNextStops.vue'
+import StopTimetable from '@/components/Stop/StopSchedules.vue'
+import StopHeader from '@/components/Stop/StopHeader.vue'
+import StopPrevNextStops from '@/components/Stop/StopPrevNextStops.vue'
 import { getStop } from '@/utils/localstore/stops'
 
 export default Vue.extend({
-  name: 'TabPageStop',
+  name: 'TimetablesStop',
   components: {
     StopTimetable,
     StopHeader,
diff --git a/src/main.ts b/src/main.ts
index e159d16..1a4ecff 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
-import TabPage from '@/pages/TabPage/index.vue'
+import TimetablesPage from '@/pages/TimetablesPage.vue'
 import SettingsPage from '@/pages/SettingsPage.vue'
 
 Vue.config.productionTip = false
@@ -14,10 +14,10 @@ Vue.use(Vuex)
 const routes = [
   { path: '/', component: App },
   { path: '/settings', component: SettingsPage },
-  { path: '/timetables/', component: TabPage },
-  { path: '/timetables/:tab', component: TabPage },
-  { path: '/timetables/:tab/:line', component: TabPage },
-  { path: '/timetables/:tab/:line/:stop', component: TabPage },
+  { path: '/timetables/', component: TimetablesPage },
+  { path: '/timetables/:tab', component: TimetablesPage },
+  { path: '/timetables/:tab/:line', component: TimetablesPage },
+  { path: '/timetables/:tab/:line/:stop', component: TimetablesPage },
 ]
 
 const router = new VueRouter({
diff --git a/src/pages/TabPage/index.vue b/src/pages/TimetablesPage.vue
similarity index 61%
rename from src/pages/TabPage/index.vue
rename to src/pages/TimetablesPage.vue
index 56136a1..6e59828 100644
--- a/src/pages/TabPage/index.vue
+++ b/src/pages/TimetablesPage.vue
@@ -8,12 +8,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import TabPageNew from '@/pages/TabPage/New.vue'
-import TabPageLine from '@/pages/TabPage/Line.vue'
-import TabPageStop from '@/pages/TabPage/Stop.vue'
+import TabPageNew from '@/components/Timetables/TimetablesHome.vue'
+import TabPageLine from '@/components/Timetables/TimetablesLine.vue'
+import TabPageStop from '@/components/Timetables/TimetablesStop.vue'
 
 export default Vue.extend({
-  name: 'TabPage',
+  name: 'TimetablesPage',
   components: {
     TabPageNew,
     TabPageLine,

From 9dc2d58241d17ba2150b6f832e8554ec950c1bf2 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:18 +0100
Subject: [PATCH 08/24] chore: remove deadcode and fix typo

---
 src/components/LineIcon.vue                 | 12 +-----------
 src/components/LineMap/LineMapLabelCell.vue |  8 +++++---
 src/components/Stop/StopHeader.vue          |  2 +-
 src/components/Stop/StopSchedulesVisits.vue |  8 ++++----
 src/utils/fetcher.ts                        |  2 +-
 5 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index f6936ef..4d040ac 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -2,8 +2,7 @@
   <img
     v-if="lineSlugName"
     :src="`/img/lines-icons/${theme}/${lineSlugName}.svg`"
-    :class="{ 'fade-in': fadeIn, 'hide': fadeIn }"
-    @load="onLoad"
+    :class="{ 'fade-in': fadeIn }"
   />
 </template>
 
@@ -20,19 +19,10 @@ export default Vue.extend({
     },
     theme: String,
   },
-  methods: {
-    onLoad (e: any) {
-      if (this.fadeIn) e.target.className = e.target.className.replace('hide', '')
-    },
-  },
 })
 </script>
 
 <style scoped>
-.hide-fade {
-  opacity: 0;
-}
-
 .fade-in {
   opacity: 1;
   animation: fadeIn 600ms ease;
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index e74802b..ad4f64d 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -11,15 +11,17 @@
     </div>
   </router-link>
 
-  <span v-else class="label-text">
+  <div v-else class="label-text">
     {{ stopName }}
     <div class="line-connections">
       <img
-        v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
+        v-for="conn in lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
         :src="`/img/lines-icons/colors/${conn.line}.svg`"
+        :alt="`${conn.slugName} ${conn.line}`"
       >
     </div>
-  </span>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index e1ef10c..6523879 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 h1 {
   font-size: 1.5rem;
   display: inline-block;
-  margin: 0.5rem 1rem 0rem 0;
+  margin: 0.5rem 1rem 0 0;
 }
 
 .line-connections {
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 2507b03..cb50f6e 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -33,8 +33,8 @@
             <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
           </div>
           <div>
-            <div v-if="visit.plateform" class="visit-details-label">Voie</div>
-            <div>{{ visit.plateform }}</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>
@@ -66,8 +66,8 @@
             <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
           </div>
           <div>
-            <div v-if="visit.plateform" class="visit-details-label">Voie</div>
-            <div>{{ visit.plateform }}</div>
+            <div v-if="visit.platform" class="visit-details-label">Voie</div>
+            <div>{{ visit.platform }}</div>
           </div>
         </div>
         <div class="visit-details-train">
diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts
index 0e727e0..1fb5ee6 100644
--- a/src/utils/fetcher.ts
+++ b/src/utils/fetcher.ts
@@ -13,7 +13,7 @@ export type VisitType = {
 
   time: Date,
 
-  plateform: string,
+  platform: string,
   arrivalTime: Date,
   arrivalStatus: string,
   departureTime: Date,

From 0c65306d372668e4b77bb70aff8e3888340b1515 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:18 +0100
Subject: [PATCH 09/24] refactor: add DesignIcon

---
 src/components/AppHeader.vue                 |  2 +-
 src/components/AppNav.vue                    |  4 +-
 src/components/LineIcon.vue                  | 25 ++++---------
 src/components/LineMap/LineMapLabelCell.vue  |  2 +-
 src/components/Stop/StopHeader.vue           |  2 +-
 src/components/Timetables/TimetablesHome.vue |  2 +-
 src/components/design/DesignIcon.vue         | 39 ++++++++++++++++++++
 7 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 src/components/design/DesignIcon.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 53dbd35..96729bb 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,7 +5,7 @@
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon :lineSlugName="$route.params.line" theme="colors" />
+      <LineIcon :lineSlugName="$route.params.line" color="colors" />
       </router-link>
     </div>
     <div>
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 4ae9eb9..eb90a81 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -10,7 +10,7 @@
           >
             <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
-                <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
+                <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
                 <span v-if="stop" class="tab-label-text">
                   {{ getStop(line, stop).displayName }}
                 </span>
@@ -38,7 +38,7 @@
             >
               <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
-                  <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
+                  <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
                   <span v-if="stop" class="tab-label-text">
                     {{ getStop(line, stop).displayName }}
                   </span>
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index 4d040ac..fff323a 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -1,39 +1,30 @@
 <template>
-  <img
+  <DesignIcon
     v-if="lineSlugName"
-    :src="`/img/lines-icons/${theme}/${lineSlugName}.svg`"
-    :class="{ 'fade-in': fadeIn }"
+    :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
+    :alt="`${lineSlugName}`"
   />
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import DesignIcon from '@/components/design/DesignIcon.vue'
 
 export default Vue.extend({
   name: 'LineIcon',
+  components: {
+    DesignIcon,
+  },
   props: {
     lineSlugName: String,
     fadeIn: {
       type: Boolean,
       default: false,
     },
-    theme: String,
+    color: String,
   },
 })
 </script>
 
 <style scoped>
-.fade-in {
-  opacity: 1;
-  animation: fadeIn 600ms ease;
-}
-
-@keyframes fadeIn {
-  0%{
-    opacity: 0;
-  }
-  100%{
-    opacity: 1;
-  }
-}
 </style>
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index ad4f64d..c1031ae 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -6,7 +6,7 @@
     {{ stopName }}
     <div class="line-connections">
       <LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line" theme="colors" fadeIn
+        :lineSlugName="conn.line" color="colors" fadeIn
       />
     </div>
   </router-link>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 6523879..168b740 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -8,7 +8,7 @@
         :key="`${conn.line}/${conn.slugName}`"
         :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
-        <LineIcon :lineSlugName="conn.line" theme="dark" />
+        <LineIcon :lineSlugName="conn.line" color="dark" />
       </router-link>
     </span>
   </div>
diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index c406ad7..e9b6b7c 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -6,7 +6,7 @@
       <router-link v-for="line in category.lines" :key="line.slugName"
         class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
-        <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
+        <LineIcon :lineSlugName="line.slugName" color="dark" fadeIn />
       </router-link>
     </div>
   </div>
diff --git a/src/components/design/DesignIcon.vue b/src/components/design/DesignIcon.vue
new file mode 100644
index 0000000..cb9e7cd
--- /dev/null
+++ b/src/components/design/DesignIcon.vue
@@ -0,0 +1,39 @@
+<template>
+  <img
+    :class="{ 'fade-in': fadeIn }"
+    :src="src"
+    :alt="alt"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignIcon',
+  props: {
+    src: String,
+    alt: String,
+    fadeIn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.fade-in {
+  opacity: 1;
+  animation: fadeIn 600ms ease;
+}
+
+@keyframes fadeIn {
+  0%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 1;
+  }
+}
+</style>

From 32c2face26cc436f8cb74e730e3917e49bb0d74c Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:19 +0100
Subject: [PATCH 10/24] refactor: add size prop to DesignIcon

---
 src/components/AppHeader.vue                 | 11 ++++----
 src/components/AppNav.vue                    | 12 +++++++--
 src/components/LineIcon.vue                  | 10 +++++---
 src/components/LineMap/LineMapLabelCell.vue  | 10 +++++---
 src/components/Stop/StopHeader.vue           |  6 ++++-
 src/components/Timetables/TimetablesHome.vue | 12 ++++-----
 src/components/design/DesignIcon.vue         | 27 ++++++++++++++++++--
 7 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 96729bb..eda2dd4 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -5,7 +5,11 @@
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon :lineSlugName="$route.params.line" color="colors" />
+      <LineIcon
+        :lineSlugName="$route.params.line"
+        color="colors"
+        size="md"
+      />
       </router-link>
     </div>
     <div>
@@ -76,11 +80,6 @@ header {
   margin-left: 0.5rem;
 }
 
-.icon-line img {
-  width: 2rem;
-  height: 2rem;
-}
-
 .clock {
   display: flex;
   justify-content: end;
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index eb90a81..7180a57 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -10,7 +10,11 @@
           >
             <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
-                <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
+                <LineIcon
+                  :lineSlugName="line"
+                  :color="tabIndex() === i ? 'dark' : 'light'"
+                  size="sm"
+                />
                 <span v-if="stop" class="tab-label-text">
                   {{ getStop(line, stop).displayName }}
                 </span>
@@ -38,7 +42,11 @@
             >
               <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
-                  <LineIcon :lineSlugName="line" :color="tabIndex() === i ? 'dark' : 'light'" />
+                  <LineIcon
+                    :lineSlugName="line"
+                    :color="tabIndex() === i ? 'dark' : 'light'"
+                    size="sm"
+                  />
                   <span v-if="stop" class="tab-label-text">
                     {{ getStop(line, stop).displayName }}
                   </span>
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index fff323a..8bcc826 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -3,12 +3,15 @@
     v-if="lineSlugName"
     :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
     :alt="`${lineSlugName}`"
+    :size="size"
   />
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import DesignIcon from '@/components/design/DesignIcon.vue'
+import Vue, { PropType } from 'vue'
+import DesignIcon, { DesignIconSize } from '@/components/design/DesignIcon.vue'
+
+export type LineIconColor = 'colors' | 'light' | 'dark'
 
 export default Vue.extend({
   name: 'LineIcon',
@@ -21,7 +24,8 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    color: String,
+    color: String as PropType<LineIconColor>,
+    size: String as PropType<DesignIconSize>,
   },
 })
 </script>
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index c1031ae..2c0ce5c 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -5,8 +5,13 @@
   >
     {{ stopName }}
     <div class="line-connections">
-      <LineIcon v-for="conn in lineConnections" :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line" color="colors" fadeIn
+      <LineIcon
+        v-for="conn in lineConnections"
+        :key="`${conn.line}/${conn.slugName}`"
+        :lineSlugName="conn.line"
+        color="colors"
+        size="sm"
+        fadeIn
       />
     </div>
   </router-link>
@@ -51,6 +56,5 @@ export default Vue.extend({
 .line-connections > img {
   margin-top: 0.2rem;
   margin-right: 0.2rem;
-  width: 1.35rem;
 }
 </style>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 168b740..3ea9bed 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -8,7 +8,11 @@
         :key="`${conn.line}/${conn.slugName}`"
         :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
-        <LineIcon :lineSlugName="conn.line" color="dark" />
+        <LineIcon
+          :lineSlugName="conn.line"
+          color="dark"
+          size="md"
+        />
       </router-link>
     </span>
   </div>
diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index e9b6b7c..4076c57 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -6,7 +6,12 @@
       <router-link v-for="line in category.lines" :key="line.slugName"
         class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
-        <LineIcon :lineSlugName="line.slugName" color="dark" fadeIn />
+        <LineIcon
+          :lineSlugName="line.slugName"
+          color="dark"
+          size="lg"
+          fadeIn
+        />
       </router-link>
     </div>
   </div>
@@ -50,9 +55,4 @@ hr {
   display: inline-block;
   margin: 1rem 1rem 0 0;
 }
-
-.icon-line img {
-  width: 3.5rem;
-  height: 3.5rem;
-}
 </style>
diff --git a/src/components/design/DesignIcon.vue b/src/components/design/DesignIcon.vue
index cb9e7cd..8ee5a48 100644
--- a/src/components/design/DesignIcon.vue
+++ b/src/components/design/DesignIcon.vue
@@ -1,19 +1,27 @@
 <template>
   <img
-    :class="{ 'fade-in': fadeIn }"
+    :class="{
+      'size-sm': size === 'sm',
+      'size-md': size === 'md',
+      'size-lg': size === 'lg',
+      'fade-in': fadeIn,
+    }"
     :src="src"
     :alt="alt"
   />
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
+
+export type DesignIconSize = 'sm' | 'md' | 'lg'
 
 export default Vue.extend({
   name: 'DesignIcon',
   props: {
     src: String,
     alt: String,
+    size: String as PropType<DesignIconSize>,
     fadeIn: {
       type: Boolean,
       default: false,
@@ -23,6 +31,21 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+.size-sm {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.size-md {
+  width: 2rem;
+  height: 2rem;
+}
+
+.size-lg {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+
 .fade-in {
   opacity: 1;
   animation: fadeIn 600ms ease;

From 5b9522f8c3d521ea06412ea368e23d42aa26a10c Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:19 +0100
Subject: [PATCH 11/24] refactor: add DesignTitle

---
 src/components/Timetables/TimetablesHome.vue | 38 +++++++++-----------
 src/components/design/DesignTitle.vue        | 31 ++++++++++++++++
 2 files changed, 48 insertions(+), 21 deletions(-)
 create mode 100644 src/components/design/DesignTitle.vue

diff --git a/src/components/Timetables/TimetablesHome.vue b/src/components/Timetables/TimetablesHome.vue
index 4076c57..63e5d71 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/components/Timetables/TimetablesHome.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="tab-page-new">
-    <div v-for="category in linesByCategory" :key="category.name">
-      <h2>{{ category.name }}</h2>
-      <hr />
-      <router-link v-for="line in category.lines" :key="line.slugName"
-        class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
+    <div
+      v-for="category in linesByCategory"
+      :key="category.name"
+    >
+      <DesignTitle>{{ category.name }}</DesignTitle>
+      <router-link
+        v-for="line in category.lines"
+        :key="line.slugName"
+        class="icon-line"
+        :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
         <LineIcon
-          :lineSlugName="line.slugName"
+          :line-slug-name="line.slugName"
           color="dark"
           size="lg"
-          fadeIn
+          fade-in
         />
       </router-link>
     </div>
@@ -21,10 +26,14 @@
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
+import DesignTitle from '@/components/design/DesignTitle.vue'
 
 export default Vue.extend({
   name: 'TimetablesHome',
-  components: { LineIcon },
+  components: {
+    LineIcon,
+    DesignTitle,
+  },
   computed: {
     linesByCategory () {
       return getLinesByCategory()
@@ -38,19 +47,6 @@ export default Vue.extend({
   padding: 1rem;
 }
 
-h2 {
-  font-size: 1.1rem;
-  margin: 2rem 0 0.1rem 0;
-}
-
-hr {
-  margin: 0;
-  height: 2px;
-  max-width: 15rem;
-  background-color: #2f2f2f;
-  border: 0;
-}
-
 .icon-line {
   display: inline-block;
   margin: 1rem 1rem 0 0;
diff --git a/src/components/design/DesignTitle.vue b/src/components/design/DesignTitle.vue
new file mode 100644
index 0000000..3183b75
--- /dev/null
+++ b/src/components/design/DesignTitle.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h2>
+      <slot />
+    </h2>
+    <hr>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignTitle',
+})
+</script>
+
+<style scoped>
+h2 {
+  font-size: 1.1rem;
+  margin: 2rem 0 0.1rem 0;
+}
+
+hr {
+  margin: 0;
+  height: 2px;
+  max-width: 15rem;
+  background-color: #2f2f2f;
+  border: 0;
+}
+</style>

From 7d1001d193d0051333b66ad8ecb4e3d0357faa9b Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:20 +0100
Subject: [PATCH 12/24] fix: icon fade in

---
 src/components/LineIcon.vue          | 1 +
 src/components/design/DesignIcon.vue | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index 8bcc826..f0cd17d 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -4,6 +4,7 @@
     :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
     :alt="`${lineSlugName}`"
     :size="size"
+    :fadeIn="fadeIn"
   />
 </template>
 
diff --git a/src/components/design/DesignIcon.vue b/src/components/design/DesignIcon.vue
index 8ee5a48..62f69ee 100644
--- a/src/components/design/DesignIcon.vue
+++ b/src/components/design/DesignIcon.vue
@@ -31,6 +31,11 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+img {
+  /* Prevents alt text to display on image load */
+  color: transparent;
+}
+
 .size-sm {
   width: 1.35rem;
   height: 1.35rem;

From 5d2932f9b6061b0f5f22965223f140a912bf1b46 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:20 +0100
Subject: [PATCH 13/24] refactor: add DesignTime

---
 src/components/AppHeader.vue                   | 13 ++++++++-----
 src/components/Stop/StopSchedulesVisits.vue    | 18 +++++++++---------
 .../{TimeClock.vue => design/DesignTime.vue}   |  6 +++---
 src/utils/{datetime.ts => time.ts}             |  4 ++--
 4 files changed, 22 insertions(+), 19 deletions(-)
 rename src/components/{TimeClock.vue => design/DesignTime.vue} (87%)
 rename src/utils/{datetime.ts => time.ts} (75%)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index eda2dd4..cb2652d 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="clock">
       <div>
-        <TimeClock :datetime="datetime" />
+        <DesignTime :datetime="datetime" />
       </div>
     </div>
   </header>
@@ -28,14 +28,17 @@
 <script lang="ts">
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
-import TimeClock from '@/components/TimeClock.vue'
-import { DateTime } from '@/utils/datetime'
+import DesignTime from '@/components/design/DesignTime.vue'
+import { Time } from '@/utils/time'
 export default Vue.extend({
   name: 'AppHeader',
-  components: { LineIcon, TimeClock },
+  components: {
+    LineIcon,
+    DesignTime,
+  },
   data: () => ({
     clockInterval: 0,
-    datetime: {} as DateTime,
+    datetime: {} as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index cb50f6e..27adf55 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -29,7 +29,7 @@
         <div class="visit-details-times">
           <div v-if="visit.arrivalTime">
             <div class="visit-details-label">Arrivée</div>
-            <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
+            <DesignTime :datetime="toDateTime(visit.arrivalTime)" />
             <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
           </div>
           <div>
@@ -38,7 +38,7 @@
           </div>
           <div v-if="visit.departureTime">
             <div class="visit-details-label">Départ</div>
-            <TimeClock :datetime="toDateTime(visit.departureTime)" />
+            <DesignTime :datetime="toDateTime(visit.departureTime)" />
             <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
           </div>
         </div>
@@ -62,7 +62,7 @@
         <div class="visit-details-times">
           <div>
             <div class="visit-details-label">Passage sans arrêt</div>
-            <TimeClock v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
+            <DesignTime v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
             <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
           </div>
           <div>
@@ -91,13 +91,13 @@
           <div v-if="visit.departureTime" class="visit-details-label">
             Départ
             <span class="visit-details-train-value">
-              <TimeClock :datetime="toDateTime(visit.departureTime)" />
+              <DesignTime :datetime="toDateTime(visit.departureTime)" />
             </span>
           </div>
           <div v-else class="visit-details-label">
             Arrivée
             <span class="visit-details-train-value">
-              <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
+              <DesignTime :datetime="toDateTime(visit.arrivalTime)" />
             </span>
           </div>
           <div v-if="visit.trainNumber" class="visit-details-label">
@@ -115,13 +115,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { VisitType } from '@/utils/fetcher'
-import { toDateTime } from '@/utils/datetime'
-import TimeClock from '@/components/TimeClock.vue'
+import { toTime } from '@/utils/time'
+import DesignTime from '@/components/design/DesignTime.vue'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
   components: {
-    TimeClock,
+    DesignTime,
   },
   props: {
     visits: {} as PropType<VisitType[]>,
@@ -140,7 +140,7 @@ export default Vue.extend({
   },
   methods: {
     toDateTime (date: Date) {
-      return toDateTime(date)
+      return toTime(date)
     },
   },
 })
diff --git a/src/components/TimeClock.vue b/src/components/design/DesignTime.vue
similarity index 87%
rename from src/components/TimeClock.vue
rename to src/components/design/DesignTime.vue
index c3c239f..6b480d8 100644
--- a/src/components/TimeClock.vue
+++ b/src/components/design/DesignTime.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import { DateTime } from '@/utils/datetime'
+import { Time } from '@/utils/time'
 import Vue, { PropType } from 'vue'
 export default Vue.extend({
-  name: 'TimeClock',
+  name: 'DesignTime',
   props: {
-    datetime: {} as PropType<DateTime>,
+    datetime: {} as PropType<Time>,
     textGray: Boolean,
   },
 })
diff --git a/src/utils/datetime.ts b/src/utils/time.ts
similarity index 75%
rename from src/utils/datetime.ts
rename to src/utils/time.ts
index 80c2e9e..d7d3717 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/time.ts
@@ -1,10 +1,10 @@
-export type DateTime = {
+export type Time = {
   hh: string,
   mm: string,
   ss: string
 }
 
-export const toDateTime = (date: Date) => {
+export const toTime = (date: Date) => {
   return {
     hh: date.getHours().toString(),
     mm: date.getMinutes().toString().padStart(2, '0'),

From 2aa7aa47c0030dd4c4775859773b9b4994755bd8 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:20 +0100
Subject: [PATCH 14/24] refactor: clean routes

---
 src/main.ts                                   | 11 ++++----
 .../TimetablesHubPage.vue}                    |  6 ++---
 .../TimetablesLinePage.vue}                   |  6 ++---
 src/pages/TimetablesPage.vue                  | 26 -------------------
 .../TimetablesStopPage.vue}                   |  6 ++---
 5 files changed, 15 insertions(+), 40 deletions(-)
 rename src/{components/Timetables/TimetablesHome.vue => pages/TimetablesHubPage.vue} (93%)
 rename src/{components/Timetables/TimetablesLine.vue => pages/TimetablesLinePage.vue} (81%)
 delete mode 100644 src/pages/TimetablesPage.vue
 rename src/{components/Timetables/TimetablesStop.vue => pages/TimetablesStopPage.vue} (93%)

diff --git a/src/main.ts b/src/main.ts
index 1a4ecff..b04af5a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,10 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
-import TimetablesPage from '@/pages/TimetablesPage.vue'
 import SettingsPage from '@/pages/SettingsPage.vue'
+import TimetablesHubPage from '@/pages/TimetablesHubPage.vue'
+import TimetablesLinePage from '@/pages/TimetablesLinePage.vue'
+import TimetablesStopPage from '@/pages/TimetablesStopPage.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
@@ -14,10 +16,9 @@ Vue.use(Vuex)
 const routes = [
   { path: '/', component: App },
   { path: '/settings', component: SettingsPage },
-  { path: '/timetables/', component: TimetablesPage },
-  { path: '/timetables/:tab', component: TimetablesPage },
-  { path: '/timetables/:tab/:line', component: TimetablesPage },
-  { path: '/timetables/:tab/:line/:stop', component: TimetablesPage },
+  { path: '/timetables/:tab', component: TimetablesHubPage },
+  { path: '/timetables/:tab/:line', component: TimetablesLinePage },
+  { path: '/timetables/:tab/:line/:stop', component: TimetablesStopPage },
 ]
 
 const router = new VueRouter({
diff --git a/src/components/Timetables/TimetablesHome.vue b/src/pages/TimetablesHubPage.vue
similarity index 93%
rename from src/components/Timetables/TimetablesHome.vue
rename to src/pages/TimetablesHubPage.vue
index 63e5d71..25e70ba 100644
--- a/src/components/Timetables/TimetablesHome.vue
+++ b/src/pages/TimetablesHubPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-page-new">
+  <div class="page">
     <div
       v-for="category in linesByCategory"
       :key="category.name"
@@ -29,7 +29,7 @@ import { getLinesByCategory } from '@/utils/localstore/lines'
 import DesignTitle from '@/components/design/DesignTitle.vue'
 
 export default Vue.extend({
-  name: 'TimetablesHome',
+  name: 'TimetablesHubPage',
   components: {
     LineIcon,
     DesignTitle,
@@ -43,7 +43,7 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.tab-page-new {
+.page {
   padding: 1rem;
 }
 
diff --git a/src/components/Timetables/TimetablesLine.vue b/src/pages/TimetablesLinePage.vue
similarity index 81%
rename from src/components/Timetables/TimetablesLine.vue
rename to src/pages/TimetablesLinePage.vue
index 465170e..bf865a5 100644
--- a/src/components/Timetables/TimetablesLine.vue
+++ b/src/pages/TimetablesLinePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-page-line">
+  <div class="page">
     <LineRouteMap :line="$route.params.line"/>
   </div>
 </template>
@@ -9,13 +9,13 @@ import Vue from 'vue'
 import LineRouteMap from '@/components/LineMap/LineMap.vue'
 
 export default Vue.extend({
-  name: 'TimetablesLine',
+  name: 'TimetablesLinePage',
   components: { LineRouteMap },
 })
 </script>
 
 <style scoped>
-.tab-page-line {
+.page {
   padding: 10rem 1rem 4rem 1rem;
 }
 </style>
diff --git a/src/pages/TimetablesPage.vue b/src/pages/TimetablesPage.vue
deleted file mode 100644
index 6e59828..0000000
--- a/src/pages/TimetablesPage.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <TabPageStop v-if="$route.params.line && $route.params.stop" />
-    <TabPageLine v-else-if="$route.params.line" />
-    <TabPageNew v-else />
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-import TabPageNew from '@/components/Timetables/TimetablesHome.vue'
-import TabPageLine from '@/components/Timetables/TimetablesLine.vue'
-import TabPageStop from '@/components/Timetables/TimetablesStop.vue'
-
-export default Vue.extend({
-  name: 'TimetablesPage',
-  components: {
-    TabPageNew,
-    TabPageLine,
-    TabPageStop,
-  },
-})
-</script>
-
-<style scoped>
-</style>
diff --git a/src/components/Timetables/TimetablesStop.vue b/src/pages/TimetablesStopPage.vue
similarity index 93%
rename from src/components/Timetables/TimetablesStop.vue
rename to src/pages/TimetablesStopPage.vue
index e14f3a5..0cfca3a 100644
--- a/src/components/Timetables/TimetablesStop.vue
+++ b/src/pages/TimetablesStopPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-page-stop">
+  <div class="page">
     <StopHeader :stop="stop" />
     <StopPrevNextStops :stop="stop" />
     <StopTimetable :stop="stop" />
@@ -15,7 +15,7 @@ import StopPrevNextStops from '@/components/Stop/StopPrevNextStops.vue'
 import { getStop } from '@/utils/localstore/stops'
 
 export default Vue.extend({
-  name: 'TimetablesStop',
+  name: 'TimetablesStopPage',
   components: {
     StopTimetable,
     StopHeader,
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.tab-page-stop {
+.page {
   padding: 0 1rem 8rem 1rem;
 }
 </style>

From b18be8c35ba7f62e1cbb047d725389074513ffb7 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:21 +0100
Subject: [PATCH 15/24] refactor: add DesignPageTitle

---
 src/components/Stop/StopHeader.vue            | 34 +++++++------------
 ...DesignTitle.vue => DesignContentTitle.vue} |  2 +-
 src/components/design/DesignPageTitle.vue     | 27 +++++++++++++++
 src/pages/TimetablesHubPage.vue               |  6 ++--
 4 files changed, 44 insertions(+), 25 deletions(-)
 rename src/components/design/{DesignTitle.vue => DesignContentTitle.vue} (92%)
 create mode 100644 src/components/design/DesignPageTitle.vue

diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 3ea9bed..25d7223 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="title">
-    <h1>
-      {{ stop.displayName }}
-    </h1>
-    <span class="line-connections">
-      <router-link v-for="conn in stop.lineConnections"
-        :key="`${conn.line}/${conn.slugName}`"
-        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+  <DesignPageTitle :text="stop.displayName">
+    <div class="line-connections">
+      <router-link
+        v-for="conn in stop.lineConnections"
+       :key="`${conn.line}/${conn.slugName}`"
+       :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon
           :lineSlugName="conn.line"
@@ -14,18 +12,22 @@
           size="md"
         />
       </router-link>
-    </span>
-  </div>
+    </div>
+  </DesignPageTitle>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import LineIcon from '@/components/LineIcon.vue'
+import DesignPageTitle from '@/components/design/DesignPageTitle.vue'
 
 export default Vue.extend({
   name: 'StopHeader',
-  components: { LineIcon },
+  components: {
+    LineIcon,
+    DesignPageTitle,
+  },
   props: {
     stop: {} as PropType<StopType>,
   },
@@ -33,16 +35,6 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.title {
-  min-height: 2.8rem;
-}
-
-h1 {
-  font-size: 1.5rem;
-  display: inline-block;
-  margin: 0.5rem 1rem 0 0;
-}
-
 .line-connections {
   display: inline-block;
 }
diff --git a/src/components/design/DesignTitle.vue b/src/components/design/DesignContentTitle.vue
similarity index 92%
rename from src/components/design/DesignTitle.vue
rename to src/components/design/DesignContentTitle.vue
index 3183b75..46b09b1 100644
--- a/src/components/design/DesignTitle.vue
+++ b/src/components/design/DesignContentTitle.vue
@@ -11,7 +11,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'DesignTitle',
+  name: 'DesignContentTitle',
 })
 </script>
 
diff --git a/src/components/design/DesignPageTitle.vue b/src/components/design/DesignPageTitle.vue
new file mode 100644
index 0000000..9443a90
--- /dev/null
+++ b/src/components/design/DesignPageTitle.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>
+      {{ text }}
+    </h1>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignContentTitle',
+  props: {
+    text: String,
+  },
+})
+</script>
+
+<style scoped>
+h1 {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin: 0.5rem 1rem 0 0;
+}
+</style>
diff --git a/src/pages/TimetablesHubPage.vue b/src/pages/TimetablesHubPage.vue
index 25e70ba..a9ccee7 100644
--- a/src/pages/TimetablesHubPage.vue
+++ b/src/pages/TimetablesHubPage.vue
@@ -4,7 +4,7 @@
       v-for="category in linesByCategory"
       :key="category.name"
     >
-      <DesignTitle>{{ category.name }}</DesignTitle>
+      <DesignContentTitle>{{ category.name }}</DesignContentTitle>
       <router-link
         v-for="line in category.lines"
         :key="line.slugName"
@@ -26,13 +26,13 @@
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
-import DesignTitle from '@/components/design/DesignTitle.vue'
+import DesignContentTitle from '@/components/design/DesignContentTitle.vue'
 
 export default Vue.extend({
   name: 'TimetablesHubPage',
   components: {
     LineIcon,
-    DesignTitle,
+    DesignContentTitle,
   },
   computed: {
     linesByCategory () {

From e8a2ab4a1a55f9f55093b80e5c09d6ce29f40d8d Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:21 +0100
Subject: [PATCH 16/24] refactor: add DesignPrevNext

---
 src/components/Stop/StopPrevNextStops.vue | 69 ++++--------------
 src/components/design/DesignPrevNext.vue  | 88 +++++++++++++++++++++++
 2 files changed, 102 insertions(+), 55 deletions(-)
 create mode 100644 src/components/design/DesignPrevNext.vue

diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
index 06a0d69..e490eea 100644
--- a/src/components/Stop/StopPrevNextStops.vue
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -1,33 +1,27 @@
 <template>
-  <div class="prev-next-stops">
-    <ul>
-      <li v-for="(prevStop, i) in stop.prevStops.slice().reverse()" :key="i" class="prev-stops">
-        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`">
-          <span>
-            {{ getStop($route.params.line, prevStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </ul>
-    <ul>
-      <li v-for="(nextStop, i) in stop.nextStops.slice().reverse()" :key="i" class="next-stops">
-        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`">
-          <span>
-            {{ getStop($route.params.line, nextStop).displayName }}
-          </span>
-        </router-link>
-      </li>
-    </ul>
-  </div>
+  <DesignPrevNext
+    :prevItems="stop.prevStops.slice().reverse().map(prevStop => ({
+      label: getStop($route.params.line, prevStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
+    }))"
+    :nextItems="stop.nextStops.slice().reverse().map(nextStop => ({
+      label: getStop($route.params.line, nextStop).displayName,
+      link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
+    }))"
+  />
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import { getStop } from '@/utils/localstore/stops'
+import DesignPrevNext from '@/components/design/DesignPrevNext.vue'
 
 export default Vue.extend({
   name: 'StopPrevNextStops',
+  components: {
+    DesignPrevNext,
+  },
   props: {
     stop: {} as PropType<StopType>,
   },
@@ -38,39 +32,4 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.prev-next-stops {
-  display: flex;
-  margin-top: 1rem;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.prev-next-stops ul {
-  width: 49%;
-}
-
-.prev-next-stops li a {
-  display: flex;
-  padding: 0.8rem 0;
-  margin-bottom: 0.5rem;
-  font-size: 0.95rem;
-  background-color: #dfdfdf;
-  border-radius: 0.4rem;
-  text-align: center;
-}
-.prev-next-stops a span {
-  display: inline-block;
-  width: 100%;
-  padding: 0.1rem 0.3rem 0 0.3rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prev-stops a::before {
-  content: '〈';
-}
-.next-stops a::after {
-  content: '〉';
-}
 </style>
diff --git a/src/components/design/DesignPrevNext.vue b/src/components/design/DesignPrevNext.vue
new file mode 100644
index 0000000..0fea777
--- /dev/null
+++ b/src/components/design/DesignPrevNext.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="prev-next">
+    <ul class="prev-list-items">
+      <li
+        v-for="({ label, link }, i) in prevItems"
+        :key="i"
+        class="prev"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+    <ul class="next-list-items">
+      <li
+        v-for="({ label, link }, i) in nextItems"
+        :key="i"
+        class="next"
+      >
+        <router-link :to="link">
+          <span class="label">
+            {{ label }}
+          </span>
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export type PrevNextItem = {
+  label: string,
+  link: string,
+}
+
+export default Vue.extend({
+  name: 'DesignPrevNext',
+  props: {
+    prevItems: [] as PropType<PrevNextItem[]>,
+    nextItems: [] as PropType<PrevNextItem[]>,
+  },
+})
+</script>
+
+<style scoped>
+.prev-next {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.prev-list-items,
+.next-list-items {
+  width: calc(50% - 0.25rem);
+}
+
+.prev a,
+.next a {
+  display: flex;
+  padding: 0.8rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.95rem;
+  background-color: #dfdfdf;
+  border-radius: 0.4rem;
+  text-align: center;
+}
+
+.prev a::before {
+  content: '〈';
+}
+.next a::after {
+  content: '〉';
+}
+
+.label {
+  display: inline-block;
+  width: 100%;
+  padding: 0.1rem 0.3rem 0 0.3rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

From 4677f685fd39e2a0e1bbe035d88989f4b22faa87 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:22 +0100
Subject: [PATCH 17/24] chores: rename components

---
 src/components/AppHeader.vue                                | 2 +-
 src/components/LineIcon.vue                                 | 2 +-
 src/components/LineMap/LineMap.vue                          | 6 +++---
 src/components/Stop/StopHeader.vue                          | 2 +-
 src/components/Stop/StopPrevNextStops.vue                   | 2 +-
 src/components/Stop/StopSchedulesVisits.vue                 | 2 +-
 .../DesignContentTitle.vue => ui/UiContentTitle.vue}        | 2 +-
 src/components/{design/DesignIcon.vue => ui/UiIcon.vue}     | 6 +++---
 .../{design/DesignPageTitle.vue => ui/UiPageTitle.vue}      | 2 +-
 .../{design/DesignPrevNext.vue => ui/UiPrevNext.vue}        | 2 +-
 src/components/{design/DesignTime.vue => ui/UiTime.vue}     | 2 +-
 src/pages/TimetablesHubPage.vue                             | 2 +-
 12 files changed, 16 insertions(+), 16 deletions(-)
 rename src/components/{design/DesignContentTitle.vue => ui/UiContentTitle.vue} (92%)
 rename src/components/{design/DesignIcon.vue => ui/UiIcon.vue} (87%)
 rename src/components/{design/DesignPageTitle.vue => ui/UiPageTitle.vue} (91%)
 rename src/components/{design/DesignPrevNext.vue => ui/UiPrevNext.vue} (98%)
 rename src/components/{design/DesignTime.vue => ui/UiTime.vue} (97%)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index cb2652d..a37b498 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -28,7 +28,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
-import DesignTime from '@/components/design/DesignTime.vue'
+import DesignTime from '@/components/ui/UiTime.vue'
 import { Time } from '@/utils/time'
 export default Vue.extend({
   name: 'AppHeader',
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index f0cd17d..bdaf0db 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import DesignIcon, { DesignIconSize } from '@/components/design/DesignIcon.vue'
+import DesignIcon, { DesignIconSize } from '@/components/ui/UiIcon.vue'
 
 export type LineIconColor = 'colors' | 'light' | 'dark'
 
diff --git a/src/components/LineMap/LineMap.vue b/src/components/LineMap/LineMap.vue
index db92172..fc1e8a7 100644
--- a/src/components/LineMap/LineMap.vue
+++ b/src/components/LineMap/LineMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <LineRouteMapTable
+  <LineMapTable
     :line="line"
     :routeMap="routeMap"
   />
@@ -7,13 +7,13 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import LineRouteMapTable from './LineMapTable.vue'
+import LineMapTable from './LineMapTable.vue'
 import { RouteMapType } from '@/utils/parser'
 import { getLineRouteMap } from '@/utils/localstore/lines'
 
 export default Vue.extend({
   name: 'LineMap',
-  components: { LineRouteMapTable },
+  components: { LineMapTable },
   props: {
     line: String,
   },
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index 25d7223..acea049 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -20,7 +20,7 @@
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import LineIcon from '@/components/LineIcon.vue'
-import DesignPageTitle from '@/components/design/DesignPageTitle.vue'
+import DesignPageTitle from '@/components/ui/UiPageTitle.vue'
 
 export default Vue.extend({
   name: 'StopHeader',
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
index e490eea..d06aa72 100644
--- a/src/components/Stop/StopPrevNextStops.vue
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -15,7 +15,7 @@
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import { getStop } from '@/utils/localstore/stops'
-import DesignPrevNext from '@/components/design/DesignPrevNext.vue'
+import DesignPrevNext from '@/components/ui/UiPrevNext.vue'
 
 export default Vue.extend({
   name: 'StopPrevNextStops',
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 27adf55..926c824 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -116,7 +116,7 @@
 import Vue, { PropType } from 'vue'
 import { VisitType } from '@/utils/fetcher'
 import { toTime } from '@/utils/time'
-import DesignTime from '@/components/design/DesignTime.vue'
+import DesignTime from '@/components/ui/UiTime.vue'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
diff --git a/src/components/design/DesignContentTitle.vue b/src/components/ui/UiContentTitle.vue
similarity index 92%
rename from src/components/design/DesignContentTitle.vue
rename to src/components/ui/UiContentTitle.vue
index 46b09b1..43d9aca 100644
--- a/src/components/design/DesignContentTitle.vue
+++ b/src/components/ui/UiContentTitle.vue
@@ -11,7 +11,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'DesignContentTitle',
+  name: 'UiContentTitle',
 })
 </script>
 
diff --git a/src/components/design/DesignIcon.vue b/src/components/ui/UiIcon.vue
similarity index 87%
rename from src/components/design/DesignIcon.vue
rename to src/components/ui/UiIcon.vue
index 62f69ee..db1de65 100644
--- a/src/components/design/DesignIcon.vue
+++ b/src/components/ui/UiIcon.vue
@@ -14,14 +14,14 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
-export type DesignIconSize = 'sm' | 'md' | 'lg'
+export type UiIconSize = 'sm' | 'md' | 'lg'
 
 export default Vue.extend({
-  name: 'DesignIcon',
+  name: 'UiIcon',
   props: {
     src: String,
     alt: String,
-    size: String as PropType<DesignIconSize>,
+    size: String as PropType<UiIconSize>,
     fadeIn: {
       type: Boolean,
       default: false,
diff --git a/src/components/design/DesignPageTitle.vue b/src/components/ui/UiPageTitle.vue
similarity index 91%
rename from src/components/design/DesignPageTitle.vue
rename to src/components/ui/UiPageTitle.vue
index 9443a90..f48466e 100644
--- a/src/components/design/DesignPageTitle.vue
+++ b/src/components/ui/UiPageTitle.vue
@@ -11,7 +11,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'DesignContentTitle',
+  name: 'UiContentTitle',
   props: {
     text: String,
   },
diff --git a/src/components/design/DesignPrevNext.vue b/src/components/ui/UiPrevNext.vue
similarity index 98%
rename from src/components/design/DesignPrevNext.vue
rename to src/components/ui/UiPrevNext.vue
index 0fea777..c183581 100644
--- a/src/components/design/DesignPrevNext.vue
+++ b/src/components/ui/UiPrevNext.vue
@@ -38,7 +38,7 @@ export type PrevNextItem = {
 }
 
 export default Vue.extend({
-  name: 'DesignPrevNext',
+  name: 'UiPrevNext',
   props: {
     prevItems: [] as PropType<PrevNextItem[]>,
     nextItems: [] as PropType<PrevNextItem[]>,
diff --git a/src/components/design/DesignTime.vue b/src/components/ui/UiTime.vue
similarity index 97%
rename from src/components/design/DesignTime.vue
rename to src/components/ui/UiTime.vue
index 6b480d8..7b6ae95 100644
--- a/src/components/design/DesignTime.vue
+++ b/src/components/ui/UiTime.vue
@@ -14,7 +14,7 @@
 import { Time } from '@/utils/time'
 import Vue, { PropType } from 'vue'
 export default Vue.extend({
-  name: 'DesignTime',
+  name: 'UiTime',
   props: {
     datetime: {} as PropType<Time>,
     textGray: Boolean,
diff --git a/src/pages/TimetablesHubPage.vue b/src/pages/TimetablesHubPage.vue
index a9ccee7..fbfb96a 100644
--- a/src/pages/TimetablesHubPage.vue
+++ b/src/pages/TimetablesHubPage.vue
@@ -26,7 +26,7 @@
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
-import DesignContentTitle from '@/components/design/DesignContentTitle.vue'
+import DesignContentTitle from '@/components/ui/UiContentTitle.vue'
 
 export default Vue.extend({
   name: 'TimetablesHubPage',

From 2c41a7fd68b763012bbacea39a80d630446a97b3 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:23 +0100
Subject: [PATCH 18/24] refactor: add UiSchedulesDetailsRow

---
 src/components/Stop/StopSchedulesVisits.vue   | 91 ++++++++-----------
 .../ui/Schedules/UiSchedulesDetailsRow.vue    | 38 ++++++++
 2 files changed, 77 insertions(+), 52 deletions(-)
 create mode 100644 src/components/ui/Schedules/UiSchedulesDetailsRow.vue

diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 926c824..c6a23f5 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -29,7 +29,7 @@
         <div class="visit-details-times">
           <div v-if="visit.arrivalTime">
             <div class="visit-details-label">Arrivée</div>
-            <DesignTime :datetime="toDateTime(visit.arrivalTime)" />
+            <UiTime :datetime="toDateTime(visit.arrivalTime)" />
             <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
           </div>
           <div>
@@ -38,23 +38,21 @@
           </div>
           <div v-if="visit.departureTime">
             <div class="visit-details-label">Départ</div>
-            <DesignTime :datetime="toDateTime(visit.departureTime)" />
+            <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">
-          <div v-if="visit.journeyCode" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.journeyCode }}
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Train no.
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
-            </span>
-          </div>
+          <UiSchedulesDetailsRow
+            v-if="visit.journeyCode"
+            label="Mission"
+            :value="visit.journeyCode"
+          />
+          <UiSchedulesDetailsRow
+            v-if="visit.trainNumber"
+            label="Train no."
+            :value="visit.trainNumber"
+          />
         </div>
       </div>
 
@@ -62,7 +60,7 @@
         <div class="visit-details-times">
           <div>
             <div class="visit-details-label">Passage sans arrêt</div>
-            <DesignTime v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
+            <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>
@@ -71,18 +69,16 @@
           </div>
         </div>
         <div class="visit-details-train">
-          <div v-if="visit.journeyCode" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.journeyCode }}
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Train no.
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
-            </span>
-          </div>
+          <UiSchedulesDetailsRow
+            v-if="visit.journeyCode"
+            label="Mission"
+            :value="visit.journeyCode"
+          />
+          <UiSchedulesDetailsRow
+            v-if="visit.trainNumber"
+            label="Train no."
+            :value="visit.trainNumber"
+          />
         </div>
       </div>
 
@@ -91,21 +87,25 @@
           <div v-if="visit.departureTime" class="visit-details-label">
             Départ
             <span class="visit-details-train-value">
-              <DesignTime :datetime="toDateTime(visit.departureTime)" />
+              <UiTime :datetime="toDateTime(visit.departureTime)" />
             </span>
           </div>
           <div v-else class="visit-details-label">
             Arrivée
             <span class="visit-details-train-value">
-              <DesignTime :datetime="toDateTime(visit.arrivalTime)" />
-            </span>
-          </div>
-          <div v-if="visit.trainNumber" class="visit-details-label">
-            Mission
-            <span class="visit-details-train-value">
-              {{ visit.trainNumber }}
+              <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>
       </div>
     </details>
@@ -116,12 +116,14 @@
 import Vue, { PropType } from 'vue'
 import { VisitType } from '@/utils/fetcher'
 import { toTime } from '@/utils/time'
-import DesignTime from '@/components/ui/UiTime.vue'
+import UiTime from '@/components/ui/UiTime.vue'
+import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsRow.vue'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
   components: {
-    DesignTime,
+    UiTime,
+    UiSchedulesDetailsRow,
   },
   props: {
     visits: {} as PropType<VisitType[]>,
@@ -211,11 +213,6 @@ export default Vue.extend({
   color: #3f3f3f;
 }
 
-.visit-details-label {
-  color: #777;
-  font-size: 0.9rem;
-}
-
 .visit-details-times {
   display: flex;
   max-width: 20rem;
@@ -233,14 +230,4 @@ export default Vue.extend({
   line-height: 1.5;
 }
 
-.visit-details-train-value {
-  margin-left: 0.25rem;
-  font-weight: 600;
-  color: #3f3f3f;
-}
-
-.datetime {
-  font-size: 1.1rem;
-}
-
 </style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsRow.vue b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
new file mode 100644
index 0000000..76cb812
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsRow.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="schedules-details-row">
+    <span class="label">
+      {{ label }}
+    </span>
+    <span class="value">
+      {{ value }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsRow',
+  props: {
+    label: String,
+    value: String,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-row {
+  font-size: 0.9rem;
+}
+
+.label {
+  color: #777;
+}
+
+.value {
+  margin-left: 0.25rem;
+  font-weight: 600;
+  color: #3f3f3f;
+}
+</style>

From e3e6114c70c64fd3557011ba505c5a5e66d00aa4 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:23 +0100
Subject: [PATCH 19/24] fix: platform won't display

---
 src/utils/fetcher.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts
index 1fb5ee6..6d3d457 100644
--- a/src/utils/fetcher.ts
+++ b/src/utils/fetcher.ts
@@ -104,7 +104,7 @@ const formatData = (visit: any) => {
 
     time: new Date(mvjmc?.ExpectedDepartureTime),
 
-    plateform: mvjmc?.ArrivalPlatformName?.value,
+    platform: mvjmc?.ArrivalPlatformName?.value,
     arrivalTime: mvjmc?.ExpectedArrivalTime && new Date(mvjmc.ExpectedArrivalTime),
     arrivalStatus: mvjmc?.ArrivalStatus,
     departureTime: mvjmc?.ExpectedDepartureTime && new Date(mvjmc.ExpectedDepartureTime),

From 1890bbb2a737334da01bf157ceddceac93167e13 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:23 +0100
Subject: [PATCH 20/24] refactor: stop schedules

---
 src/components/AppHeader.vue                  |   6 +-
 src/components/Stop/StopSchedules.vue         |   6 +-
 .../Stop/StopSchedulesDetailsTimes.vue        |  73 +++++++++
 ...topSchedulesDetailsTimesNonStopPassage.vue |  46 ++++++
 src/components/Stop/StopSchedulesVisits.vue   | 143 +++++-------------
 .../ui/Schedules/UiSchedulesDetailsRow.vue    |   1 +
 .../UiSchedulesDetailsTimeInline.vue          |  46 ++++++
 .../UiSchedulesDetailsTimeWrapped.vue         |  44 ++++++
 src/components/ui/UiTime.vue                  |  10 +-
 9 files changed, 262 insertions(+), 113 deletions(-)
 create mode 100644 src/components/Stop/StopSchedulesDetailsTimes.vue
 create mode 100644 src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
 create mode 100644 src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
 create mode 100644 src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index a37b498..25fa548 100644
--- 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
index 0c0b3d9..69c2865 100644
--- a/src/components/Stop/StopSchedules.vue
+++ b/src/components/Stop/StopSchedules.vue
@@ -16,7 +16,7 @@
             Synchroniser
           </button>
         </div>
-        <TrainVisits :visits="visits" />
+        <StopSchedulesVisits :visits="visits" />
       </div>
     </div>
   </div>
@@ -24,7 +24,7 @@
 
 <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'
@@ -32,7 +32,7 @@ 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
new file mode 100644
index 0000000..6644cf9
--- /dev/null
+++ 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
new file mode 100644
index 0000000..58d6d9d
--- /dev/null
+++ 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
index c6a23f5..77c705d 100644
--- 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,87 +25,48 @@
       </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>
@@ -114,16 +74,17 @@
 
 <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
index 76cb812..f98bc61 100644
--- 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 {
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
new file mode 100644
index 0000000..0612cd6
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="label">{{ label }}</div>
+    <div class="value">
+      <UiTime :time="time" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiTime from '@/components/ui/UiTime.vue'
+import { Time, toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsTimeInline',
+  components: {
+    UiTime,
+  },
+  props: {
+    label: String,
+    time: {} as PropType<Time>,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.label,
+.value {
+  display: inline-block;
+  line-height: 1.5;
+}
+
+.label {
+  margin-right: 0.5rem;
+  color: #777;
+  font-size: 0.9rem;
+}
+
+.value {
+  font-size: 1.1rem;
+}
+</style>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
new file mode 100644
index 0000000..52fac08
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="schedules-details-time-wrapped">
+    <div class="label">{{ label }}</div>
+    <UiTime :time="time" :textGray="isTimeTextGray" />
+    <div v-if="sublabel" class="sublabel">{{ sublabel }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import UiTime from '@/components/ui/UiTime.vue'
+import { Time, toTime } from '@/utils/time'
+
+export default Vue.extend({
+  name: 'UiSchedulesDetailsTimeWrapped',
+  components: {
+    UiTime,
+  },
+  props: {
+    label: String,
+    time: {} as PropType<Time>,
+    isTimeTextGray: {
+      type: Boolean,
+      default: false,
+    },
+    sublabel: String,
+  },
+  methods: {
+    toTime,
+  },
+})
+</script>
+
+<style scoped>
+.schedules-details-time-wrapped {
+  margin-bottom: 0.5rem;
+}
+
+.sublabel {
+  font-style: italic;
+  color: #515151;
+  font-size: 0.9rem;
+}
+</style>
diff --git a/src/components/ui/UiTime.vue b/src/components/ui/UiTime.vue
index 7b6ae95..e0e58c4 100644
--- a/src/components/ui/UiTime.vue
+++ b/src/components/ui/UiTime.vue
@@ -1,12 +1,12 @@
 <template>
     <span
-      v-if="datetime.hh && datetime.mm && datetime.ss"
+      v-if="time.hh && time.mm && time.ss"
       class="datetime"
     >
-      <span :class="{ 'text-gray': textGray }">{{ datetime.hh }}</span>
+      <span :class="{ 'text-gray': textGray }">{{ time.hh }}</span>
       <span class="separator">:</span>
-      <span :class="{ 'text-gray': textGray }">{{ datetime.mm }}</span>
-      <span class="seconds">{{ datetime.ss }}</span>
+      <span :class="{ 'text-gray': textGray }">{{ time.mm }}</span>
+      <span class="seconds">{{ time.ss }}</span>
     </span>
 </template>
 
@@ -16,7 +16,7 @@ import Vue, { PropType } from 'vue'
 export default Vue.extend({
   name: 'UiTime',
   props: {
-    datetime: {} as PropType<Time>,
+    time: {} as PropType<Time>,
     textGray: Boolean,
   },
 })

From c9405fa2906de3b897e5328a0d4ff141589f4b25 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:24 +0100
Subject: [PATCH 21/24] chore: add linter rules

---
 .eslintrc.js                                  |  2 +
 src/App.vue                                   | 14 +--
 src/components/AppHeader.vue                  | 23 +++--
 src/components/AppNav.vue                     | 70 +++++++++++----
 src/components/AppView.vue                    |  3 +-
 src/components/LineIcon.vue                   |  2 +-
 src/components/LineMap/LineMap.vue            | 12 +--
 src/components/LineMap/LineMapDrawingCell.vue | 86 ++++++++++++++++---
 src/components/LineMap/LineMapLabelCell.vue   | 12 ++-
 src/components/LineMap/LineMapTable.vue       | 24 ++++--
 src/components/Stop/StopHeader.vue            |  6 +-
 src/components/Stop/StopPrevNextStops.vue     |  4 +-
 src/components/Stop/StopSchedules.vue         | 44 ++++++----
 .../Stop/StopSchedulesDetailsTimes.vue        |  4 +-
 ...topSchedulesDetailsTimesNonStopPassage.vue |  6 +-
 src/components/Stop/StopSchedulesVisits.vue   | 37 ++++++--
 .../UiSchedulesDetailsTimeInline.vue          |  4 +-
 .../UiSchedulesDetailsTimeWrapped.vue         | 16 +++-
 src/components/ui/UiIcon.vue                  |  2 +-
 src/components/ui/UiTime.vue                  | 18 ++--
 src/pages/SettingsPage.vue                    |  7 +-
 src/pages/TimetablesLinePage.vue              |  2 +-
 src/pages/TimetablesStopPage.vue              | 16 ++--
 23 files changed, 292 insertions(+), 122 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a87c751..8131582 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,8 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
+    'plugin:vue/strongly-recommended',
+    'plugin:vue/recommended',
     '@vue/standard',
     '@vue/typescript/recommended',
   ],
diff --git a/src/App.vue b/src/App.vue
index 2b22203..5019586 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,13 +17,6 @@ export default Vue.extend({
   components: {
     AppView,
   },
-  created () {
-    if (!lastUpdatedAt()) {
-      synchronize().then(() => {
-        window.location.href = '/'
-      })
-    }
-  },
   watch: {
     '$route.params.tab': {
       handler () {
@@ -71,6 +64,13 @@ export default Vue.extend({
       immediate: true,
     },
   },
+  created () {
+    if (!lastUpdatedAt()) {
+      synchronize().then(() => {
+        window.location.href = '/'
+      })
+    }
+  },
 })
 </script>
 
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 25fa548..bb8e754 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,20 +1,27 @@
 <template>
   <header>
     <div>
-      <router-link v-if="$route.params.line"
+      <router-link
+        v-if="$route.params.line"
         class="icon-line"
         :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
-      <LineIcon
-        :lineSlugName="$route.params.line"
-        color="colors"
-        size="md"
-      />
+        <LineIcon
+          :line-slug-name="$route.params.line"
+          color="colors"
+          size="md"
+        />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/timetables/${ $route.params.tab || '' }`">
-        <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
+      <router-link
+        class="logo"
+        :to="`/timetables/${ $route.params.tab || '' }`"
+      >
+        <img
+          alt="Logo Alednavigo"
+          src="@/assets/icon-light.png"
+        >
       </router-link>
     </div>
     <div class="clock">
diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
index 7180a57..931c4f7 100644
--- a/src/components/AppNav.vue
+++ b/src/components/AppNav.vue
@@ -2,25 +2,37 @@
   <nav>
     <hr>
     <div class="nav-content">
-      <div v-if="showTabsList" class="nav-tabs-list">
+      <div
+        v-if="showTabsList"
+        class="nav-tabs-list"
+      >
         <ul>
-          <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <li
+            v-for="({ line, stop, path }, i) in $store.state.tabs"
+            :key="`/${i + 1}/${path}`"
             class="tab"
             :class="{ 'tab-active': tabIndex() === i }"
           >
-            <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
+            <router-link
+              class="tab-link"
+              :to="`/timetables/${i + 1}/${path}`"
+            >
               <span class="tab-label">
                 <LineIcon
-                  :lineSlugName="line"
+                  :line-slug-name="line"
                   :color="tabIndex() === i ? 'dark' : 'light'"
                   size="sm"
                 />
-                <span v-if="stop" class="tab-label-text">
+                <span
+                  v-if="stop"
+                  class="tab-label-text"
+                >
                   {{ getStop(line, stop).displayName }}
                 </span>
               </span>
             </router-link>
-            <button v-if="$store.state.tabs.length > 1"
+            <button
+              v-if="$store.state.tabs.length > 1"
               class="close-tab"
               @click="closeTab(i)"
             >
@@ -31,23 +43,40 @@
       </div>
 
       <div class="nav-controls">
-        <router-link class="to-settings" to="/settings">
-          <img class="icon-settings" src="/img/mui/more-vert.svg" />
+        <router-link
+          class="to-settings"
+          to="/settings"
+        >
+          <img
+            class="icon-settings"
+            src="/img/mui/more-vert.svg"
+          >
         </router-link>
         <div class="tabs-manager">
-          <ul v-if="!showTabsList" class="tabs">
-            <li v-for="({ line, stop, path }, i) in $store.state.tabs" :key="`/${i + 1}/${path}`"
+          <ul
+            v-if="!showTabsList"
+            class="tabs"
+          >
+            <li
+              v-for="({ line, stop, path }, i) in $store.state.tabs"
+              :key="`/${i + 1}/${path}`"
               class="tab"
               :class="{ 'tab-active': tabIndex() === i }"
             >
-              <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
+              <router-link
+                class="tab-link"
+                :to="`/timetables/${i + 1}/${path}`"
+              >
                 <span class="tab-label">
                   <LineIcon
-                    :lineSlugName="line"
+                    :line-slug-name="line"
                     :color="tabIndex() === i ? 'dark' : 'light'"
                     size="sm"
                   />
-                  <span v-if="stop" class="tab-label-text">
+                  <span
+                    v-if="stop"
+                    class="tab-label-text"
+                  >
                     {{ getStop(line, stop).displayName }}
                   </span>
                 </span>
@@ -55,11 +84,20 @@
             </li>
           </ul>
         </div>
-        <button class="add-tab" @click="addTab()">
+        <button
+          class="add-tab"
+          @click="addTab()"
+        >
           +
         </button>
-        <button class="btn-toggle-tabs-list" @click="showTabsList = !showTabsList">
-          <img class="icon-tabs-list" src="/img/mui/reorder.svg" />
+        <button
+          class="btn-toggle-tabs-list"
+          @click="showTabsList = !showTabsList"
+        >
+          <img
+            class="icon-tabs-list"
+            src="/img/mui/reorder.svg"
+          >
         </button>
       </div>
     </div>
diff --git a/src/components/AppView.vue b/src/components/AppView.vue
index 67959e9..64e9324 100644
--- a/src/components/AppView.vue
+++ b/src/components/AppView.vue
@@ -2,8 +2,7 @@
   <div>
     <AppHeader />
     <div class="tab">
-      <router-view>
-      </router-view>
+      <router-view />
     </div>
     <AppNav />
   </div>
diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index bdaf0db..66a0951 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -4,7 +4,7 @@
     :src="`/img/lines-icons/${color}/${lineSlugName}.svg`"
     :alt="`${lineSlugName}`"
     :size="size"
-    :fadeIn="fadeIn"
+    :fade-in="fadeIn"
   />
 </template>
 
diff --git a/src/components/LineMap/LineMap.vue b/src/components/LineMap/LineMap.vue
index fc1e8a7..567737a 100644
--- a/src/components/LineMap/LineMap.vue
+++ b/src/components/LineMap/LineMap.vue
@@ -1,7 +1,7 @@
 <template>
   <LineMapTable
     :line="line"
-    :routeMap="routeMap"
+    :route-map="routeMap"
   />
 </template>
 
@@ -20,6 +20,11 @@ export default Vue.extend({
   data: () => ({
     routeMap: [] as RouteMapType,
   }),
+  watch: {
+    line () {
+      this.update()
+    },
+  },
   created () {
     this.update()
   },
@@ -28,11 +33,6 @@ export default Vue.extend({
       this.routeMap = getLineRouteMap(this.line)
     },
   },
-  watch: {
-    line () {
-      this.update()
-    },
-  },
 })
 </script>
 
diff --git a/src/components/LineMap/LineMapDrawingCell.vue b/src/components/LineMap/LineMapDrawingCell.vue
index 4104e9f..8b59a04 100644
--- a/src/components/LineMap/LineMapDrawingCell.vue
+++ b/src/components/LineMap/LineMapDrawingCell.vue
@@ -1,48 +1,108 @@
 <template>
-  <svg v-if="content === '*'" class="drawing-stop" viewBox="0 0 16 16">
-    <circle v-if="isLargeCircle" cx="8" cy="8" r="6"/>
-    <circle v-else cx="8" cy="8" r="4"/>
+  <svg
+    v-if="content === '*'"
+    class="drawing-stop"
+    viewBox="0 0 16 16"
+  >
+    <circle
+      v-if="isLargeCircle"
+      cx="8"
+      cy="8"
+      r="6"
+    />
+    <circle
+      v-else
+      cx="8"
+      cy="8"
+      r="4"
+    />
   </svg>
 
-  <svg v-else-if="content === '^'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === '^'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
     <path d="M0,8 a8,-8 0 0,1 8,-8 L0,0 Z" />
   </svg>
 
-  <svg v-else-if="content === 'v'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === 'v'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M0,8 a8,8 0 0,0 8,8 L0,16 Z" />
     <path d="M8,16 a8,-8 0 0,0 8,-8 L16,16 Z" />
   </svg>
 
-  <svg v-else-if="content === 'o\\'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === 'o\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === 'o/'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
+  <svg
+    v-else-if="content === 'o/'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '\\o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
+  <svg
+    v-else-if="content === '\\o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '/o'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
+  <svg
+    v-else-if="content === '/o'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,0 Z" />
   </svg>
 
-  <svg v-else-if="content === '\\.'" class="drawing-path" viewBox="0 0 16 16">
+  <svg
+    v-else-if="content === '\\.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === '/.'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(90)">
+  <svg
+    v-else-if="content === '/.'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(90)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === '.\\'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(180)">
+  <svg
+    v-else-if="content === '.\\'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(180)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
-  <svg v-else-if="content === './'" class="drawing-path" viewBox="0 0 16 16" transform="rotate(270)">
+  <svg
+    v-else-if="content === './'"
+    class="drawing-path"
+    viewBox="0 0 16 16"
+    transform="rotate(270)"
+  >
     <path d="M8,0 a8,8 0 0,1 8,8 L16,16 L0,16 L0 0 Z" />
   </svg>
 
diff --git a/src/components/LineMap/LineMapLabelCell.vue b/src/components/LineMap/LineMapLabelCell.vue
index 2c0ce5c..8b5b167 100644
--- a/src/components/LineMap/LineMapLabelCell.vue
+++ b/src/components/LineMap/LineMapLabelCell.vue
@@ -1,5 +1,6 @@
 <template>
-  <router-link v-if="href"
+  <router-link
+    v-if="href"
     class="label-text"
     :to="href"
   >
@@ -8,15 +9,18 @@
       <LineIcon
         v-for="conn in lineConnections"
         :key="`${conn.line}/${conn.slugName}`"
-        :lineSlugName="conn.line"
+        :line-slug-name="conn.line"
         color="colors"
         size="sm"
-        fadeIn
+        fade-in
       />
     </div>
   </router-link>
 
-  <div v-else class="label-text">
+  <div
+    v-else
+    class="label-text"
+  >
     {{ stopName }}
     <div class="line-connections">
       <img
diff --git a/src/components/LineMap/LineMapTable.vue b/src/components/LineMap/LineMapTable.vue
index 23f2bd9..c25df89 100644
--- a/src/components/LineMap/LineMapTable.vue
+++ b/src/components/LineMap/LineMapTable.vue
@@ -1,19 +1,29 @@
 <template>
   <table>
-    <tr v-for="(row, i) in routeMap" :key="i">
-      <td v-for="(cell, j) in row.drawing" :key="j"
+    <tr
+      v-for="(row, i) in routeMap"
+      :key="i"
+    >
+      <td
+        v-for="(cell, j) in row.drawing"
+        :key="j"
         :class="{ filled: shouldBeFilledCell(cell) }"
       >
-        <DrawingCell :content="cell" :isLargeCircle="row.isTerminus || false" />
+        <DrawingCell
+          :content="cell"
+          :is-large-circle="row.isTerminus || false"
+        />
       </td>
 
-      <td v-if="row.slugName"
-        class="label" :class="{ 'label-terminus': row.isTerminus }"
+      <td
+        v-if="row.slugName"
+        class="label"
+        :class="{ 'label-terminus': row.isTerminus }"
       >
         <LabelCell
-          :stopName="row.displayName"
+          :stop-name="row.displayName"
           :href="`/timetables/${$route.params.tab}/${line}/${row.slugName}`"
-          :lineConnections="row.lineConnections"
+          :line-connections="row.lineConnections"
         />
       </td>
     </tr>
diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
index acea049..a76d216 100644
--- a/src/components/Stop/StopHeader.vue
+++ b/src/components/Stop/StopHeader.vue
@@ -3,11 +3,11 @@
     <div class="line-connections">
       <router-link
         v-for="conn in stop.lineConnections"
-       :key="`${conn.line}/${conn.slugName}`"
-       :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+        :key="`${conn.line}/${conn.slugName}`"
+        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon
-          :lineSlugName="conn.line"
+          :line-slug-name="conn.line"
           color="dark"
           size="md"
         />
diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
index d06aa72..aaf5279 100644
--- a/src/components/Stop/StopPrevNextStops.vue
+++ b/src/components/Stop/StopPrevNextStops.vue
@@ -1,10 +1,10 @@
 <template>
   <DesignPrevNext
-    :prevItems="stop.prevStops.slice().reverse().map(prevStop => ({
+    :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
       label: getStop($route.params.line, prevStop).displayName,
       link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
     }))"
-    :nextItems="stop.nextStops.slice().reverse().map(nextStop => ({
+    :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
       label: getStop($route.params.line, nextStop).displayName,
       link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
     }))"
diff --git a/src/components/Stop/StopSchedules.vue b/src/components/Stop/StopSchedules.vue
index 69c2865..25736af 100644
--- a/src/components/Stop/StopSchedules.vue
+++ b/src/components/Stop/StopSchedules.vue
@@ -3,16 +3,26 @@
     <pre v-if="debugData.size > 0">{{ Array.from(debugData).reduce((acc, line) => acc + `\n${line}`, '') }}</pre>
     <div :class="Object.entries(visitsByDirections).length ? 'fade-show' : 'hide'">
       <div
-        v-for="[direction, visits] in visitsByDirections" :key="direction"
+        v-for="[direction, visits] in visitsByDirections"
+        :key="direction"
         class="timetables"
       >
         <h2>{{ direction }}</h2>
         <div class="sync">
-          <span class="sync-time" :key="updateCounter">
+          <span
+            :key="updateCounter"
+            class="sync-time"
+          >
             {{ ((new Date().getTime() - updatedAt.getTime()) / 1000).toFixed(0) }}s
           </span>
-          <button class="sync-btn" @click="update">
-            <img class="icon-settings" src="/img/mui/update.svg" />
+          <button
+            class="sync-btn"
+            @click="update"
+          >
+            <img
+              class="icon-settings"
+              src="/img/mui/update.svg"
+            >
             Synchroniser
           </button>
         </div>
@@ -45,6 +55,19 @@ export default Vue.extend({
     updateCounter: 0,
     updateInterval: 0,
   }),
+  computed: {
+    linesByRef () {
+      return getLinesByRef()
+    },
+  },
+  watch: {
+    stop () {
+      this.visitsByDirections = []
+      this.fetchAbortController.abort()
+      this.fetchAbortController = new AbortController()
+      this.update()
+    },
+  },
   created () {
     this.update()
     this.updateInterval = setInterval(() => {
@@ -68,19 +91,6 @@ export default Vue.extend({
         })
     },
   },
-  computed: {
-    linesByRef () {
-      return getLinesByRef()
-    },
-  },
-  watch: {
-    stop () {
-      this.visitsByDirections = []
-      this.fetchAbortController.abort()
-      this.fetchAbortController = new AbortController()
-      this.update()
-    },
-  },
 })
 </script>
 
diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
index 6644cf9..36015a7 100644
--- a/src/components/Stop/StopSchedulesDetailsTimes.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -10,7 +10,9 @@
       :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
     />
     <div>
-      <div v-if="visit.platform">Voie</div>
+      <div v-if="visit.platform">
+        Voie
+      </div>
       <div>{{ visit.platform }}</div>
     </div>
     <UiSchedulesDetailsTimeWrapped
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
index 58d6d9d..c58d37f 100644
--- a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
+++ b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -6,11 +6,13 @@
         label="Passage sans arrêt"
         :time="toTime(visit.departureTime)"
         :sublabel="visit.departureStatus !== 'onTime' ? visit.departureStatus : null"
-        isTimeTextGray
+        is-time-text-gray
       />
     </div>
     <div>
-      <div v-if="visit.platform">Voie</div>
+      <div v-if="visit.platform">
+        Voie
+      </div>
       <div>{{ visit.platform }}</div>
     </div>
   </div>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 77c705d..6e20f18 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -1,22 +1,32 @@
 <template>
   <div>
-    <details v-for="visit in visits" :key="visit.id" class="row">
+    <details
+      v-for="visit in visits"
+      :key="visit.id"
+      class="row"
+    >
       <summary class="visit">
         <div class="visit-code">
           {{ visit.journeyCode }}
         </div>
-        <div v-if="visit.departureStatus === 'cancelled' || visit.arrivalStatus === 'cancelled'"
+        <div
+          v-if="visit.departureStatus === 'cancelled' || visit.arrivalStatus === 'cancelled'"
           class="visit-time visit-time-cancelled"
         >
           &times;
         </div>
-        <div v-else-if="visit.nonStopPassage || !visit.departureTime"
-          class="visit-time visit-time-shrouded"
+        <div
+          v-else-if="visit.nonStopPassage || !visit.departureTime"
           :key="`0-${updateCounter}`"
+          class="visit-time visit-time-shrouded"
         >
           {{ ((visit.arrivalTime.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
         </div>
-        <div v-else class="visit-time" :key="`1-${updateCounter}`">
+        <div
+          v-else
+          :key="`1-${updateCounter}`"
+          class="visit-time"
+        >
           {{ ((visit.time.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
         </div>
         <div class="visit-destination">
@@ -24,7 +34,10 @@
         </div>
       </summary>
 
-      <div v-if="visit.operator === 'SNCF' && !visit.nonStopPassage" class="visit-details">
+      <div
+        v-if="visit.operator === 'SNCF' && !visit.nonStopPassage"
+        class="visit-details"
+      >
         <StopSchedulesDetailsTimes :visit="visit" />
         <UiSchedulesDetailsRow
           v-if="visit.journeyCode"
@@ -38,7 +51,10 @@
         />
       </div>
 
-      <div v-else-if="visit.operator === 'SNCF' && visit.nonStopPassage" class="visit-details">
+      <div
+        v-else-if="visit.operator === 'SNCF' && visit.nonStopPassage"
+        class="visit-details"
+      >
         <StopSchedulesDetailsTimesNonStopPassage :visit="visit" />
         <UiSchedulesDetailsRow
           v-if="visit.journeyCode"
@@ -52,10 +68,13 @@
         />
       </div>
 
-      <div v-else class="visit-details">
+      <div
+        v-else
+        class="visit-details"
+      >
         <StopSchedulesDetailsTimes
           :visit="visit"
-          isInline
+          is-inline
         />
         <UiSchedulesDetailsRow
           v-if="visit.journeyCode"
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
index 0612cd6..862114c 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="label">{{ label }}</div>
+    <div class="label">
+      {{ label }}
+    </div>
     <div class="value">
       <UiTime :time="time" />
     </div>
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
index 52fac08..2dfb597 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -1,8 +1,18 @@
 <template>
   <div class="schedules-details-time-wrapped">
-    <div class="label">{{ label }}</div>
-    <UiTime :time="time" :textGray="isTimeTextGray" />
-    <div v-if="sublabel" class="sublabel">{{ sublabel }}</div>
+    <div class="label">
+      {{ label }}
+    </div>
+    <UiTime
+      :time="time"
+      :text-gray="isTimeTextGray"
+    />
+    <div
+      v-if="sublabel"
+      class="sublabel"
+    >
+      {{ sublabel }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/ui/UiIcon.vue b/src/components/ui/UiIcon.vue
index db1de65..128db23 100644
--- a/src/components/ui/UiIcon.vue
+++ b/src/components/ui/UiIcon.vue
@@ -8,7 +8,7 @@
     }"
     :src="src"
     :alt="alt"
-  />
+  >
 </template>
 
 <script lang="ts">
diff --git a/src/components/ui/UiTime.vue b/src/components/ui/UiTime.vue
index e0e58c4..1546286 100644
--- a/src/components/ui/UiTime.vue
+++ b/src/components/ui/UiTime.vue
@@ -1,13 +1,13 @@
 <template>
-    <span
-      v-if="time.hh && time.mm && time.ss"
-      class="datetime"
-    >
-      <span :class="{ 'text-gray': textGray }">{{ time.hh }}</span>
-      <span class="separator">:</span>
-      <span :class="{ 'text-gray': textGray }">{{ time.mm }}</span>
-      <span class="seconds">{{ time.ss }}</span>
-    </span>
+  <span
+    v-if="time.hh && time.mm && time.ss"
+    class="datetime"
+  >
+    <span :class="{ 'text-gray': textGray }">{{ time.hh }}</span>
+    <span class="separator">:</span>
+    <span :class="{ 'text-gray': textGray }">{{ time.mm }}</span>
+    <span class="seconds">{{ time.ss }}</span>
+  </span>
 </template>
 
 <script lang="ts">
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 50ffeec..0b60227 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -3,7 +3,12 @@
     <h1>Paramètres</h1>
     <fieldset>
       <legend>Schéma de lignes</legend>
-      <button class="btn-synchronize" @click="synchronize">Mettre à jour</button>
+      <button
+        class="btn-synchronize"
+        @click="synchronize"
+      >
+        Mettre à jour
+      </button>
       <p>Dernière mise à jour : {{ updatedAt.toLocaleString() }}</p>
     </fieldset>
   </div>
diff --git a/src/pages/TimetablesLinePage.vue b/src/pages/TimetablesLinePage.vue
index bf865a5..95b9ae5 100644
--- a/src/pages/TimetablesLinePage.vue
+++ b/src/pages/TimetablesLinePage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <LineRouteMap :line="$route.params.line"/>
+    <LineRouteMap :line="$route.params.line" />
   </div>
 </template>
 
diff --git a/src/pages/TimetablesStopPage.vue b/src/pages/TimetablesStopPage.vue
index 0cfca3a..e1cb0a1 100644
--- a/src/pages/TimetablesStopPage.vue
+++ b/src/pages/TimetablesStopPage.vue
@@ -24,6 +24,14 @@ export default Vue.extend({
   data: () => ({
     stop: {} as StopType,
   }),
+  watch: {
+    '$route.path': {
+      handler () {
+        this.update()
+      },
+      deep: true,
+    },
+  },
   created () {
     this.update()
   },
@@ -33,14 +41,6 @@ export default Vue.extend({
       this.stop = getStop(this.$route.params.line, this.$route.params.stop)
     },
   },
-  watch: {
-    '$route.path': {
-      handler () {
-        this.update()
-      },
-      deep: true,
-    },
-  },
 })
 </script>
 

From 82fbe9c5f51e8e87e0dec9a6c42b12679ffb2364 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:24 +0100
Subject: [PATCH 22/24] chore: fix name

---
 src/components/LineIcon.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/LineIcon.vue b/src/components/LineIcon.vue
index 66a0951..384a467 100644
--- a/src/components/LineIcon.vue
+++ b/src/components/LineIcon.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import DesignIcon, { DesignIconSize } from '@/components/ui/UiIcon.vue'
+import DesignIcon, { UiIconSize } from '@/components/ui/UiIcon.vue'
 
 export type LineIconColor = 'colors' | 'light' | 'dark'
 
@@ -26,7 +26,7 @@ export default Vue.extend({
       default: false,
     },
     color: String as PropType<LineIconColor>,
-    size: String as PropType<DesignIconSize>,
+    size: String as PropType<UiIconSize>,
   },
 })
 </script>

From ccb54badcad61fe12cbe22f018fdf9327e94a6aa Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:24 +0100
Subject: [PATCH 23/24] chore: rename UiTime to UiClock

---
 src/components/AppHeader.vue                                | 6 +++---
 .../ui/Schedules/UiSchedulesDetailsTimeInline.vue           | 6 +++---
 .../ui/Schedules/UiSchedulesDetailsTimeWrapped.vue          | 6 +++---
 src/components/ui/{UiTime.vue => UiClock.vue}               | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/ui/{UiTime.vue => UiClock.vue} (97%)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index bb8e754..01ea059 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -26,7 +26,7 @@
     </div>
     <div class="clock">
       <div>
-        <DesignTime :time="time" />
+        <UiClock :time="time" />
       </div>
     </div>
   </header>
@@ -35,13 +35,13 @@
 <script lang="ts">
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
-import DesignTime from '@/components/ui/UiTime.vue'
+import UiClock from '@/components/ui/UiClock.vue'
 import { Time } from '@/utils/time'
 export default Vue.extend({
   name: 'AppHeader',
   components: {
     LineIcon,
-    DesignTime,
+    UiClock,
   },
   data: () => ({
     clockInterval: 0,
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
index 862114c..f5a990a 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeInline.vue
@@ -4,20 +4,20 @@
       {{ label }}
     </div>
     <div class="value">
-      <UiTime :time="time" />
+      <UiClock :time="time" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import UiTime from '@/components/ui/UiTime.vue'
+import UiClock from '@/components/ui/UiClock.vue'
 import { Time, toTime } from '@/utils/time'
 
 export default Vue.extend({
   name: 'UiSchedulesDetailsTimeInline',
   components: {
-    UiTime,
+    UiClock,
   },
   props: {
     label: String,
diff --git a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
index 2dfb597..b49c1e9 100644
--- a/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
+++ b/src/components/ui/Schedules/UiSchedulesDetailsTimeWrapped.vue
@@ -3,7 +3,7 @@
     <div class="label">
       {{ label }}
     </div>
-    <UiTime
+    <UiClock
       :time="time"
       :text-gray="isTimeTextGray"
     />
@@ -18,13 +18,13 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import UiTime from '@/components/ui/UiTime.vue'
+import UiClock from '@/components/ui/UiClock.vue'
 import { Time, toTime } from '@/utils/time'
 
 export default Vue.extend({
   name: 'UiSchedulesDetailsTimeWrapped',
   components: {
-    UiTime,
+    UiClock,
   },
   props: {
     label: String,
diff --git a/src/components/ui/UiTime.vue b/src/components/ui/UiClock.vue
similarity index 97%
rename from src/components/ui/UiTime.vue
rename to src/components/ui/UiClock.vue
index 1546286..d5cf84d 100644
--- a/src/components/ui/UiTime.vue
+++ b/src/components/ui/UiClock.vue
@@ -14,7 +14,7 @@
 import { Time } from '@/utils/time'
 import Vue, { PropType } from 'vue'
 export default Vue.extend({
-  name: 'UiTime',
+  name: 'UiClock',
   props: {
     time: {} as PropType<Time>,
     textGray: Boolean,

From 2aebf0c17ee8ea45ad700556c9cc8239436e0e70 Mon Sep 17 00:00:00 2001
From: ludchieng <lud.chieng@hotmail.fr>
Date: Tue, 24 Jan 2023 23:17:25 +0100
Subject: [PATCH 24/24] refactor: Add StopSchedulesVisitTime

---
 .../Stop/StopSchedulesVisitTime.vue           | 43 +++++++++++++
 src/components/Stop/StopSchedulesVisits.vue   | 52 ++-------------
 .../ui/Schedules/UiSchedulesTime.vue          | 63 +++++++++++++++++++
 3 files changed, 112 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Stop/StopSchedulesVisitTime.vue
 create mode 100644 src/components/ui/Schedules/UiSchedulesTime.vue

diff --git a/src/components/Stop/StopSchedulesVisitTime.vue b/src/components/Stop/StopSchedulesVisitTime.vue
new file mode 100644
index 0000000..62cb3f7
--- /dev/null
+++ b/src/components/Stop/StopSchedulesVisitTime.vue
@@ -0,0 +1,43 @@
+<template>
+  <UiSchedulesTime
+    :time="time"
+    :variant="variant"
+  />
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { VisitType } from '@/utils/fetcher'
+import UiSchedulesTime from '@/components/ui/Schedules/UiSchedulesTime.vue'
+
+export default Vue.extend({
+  name: 'StopSchedulesVisitTime',
+  components: { UiSchedulesTime },
+  props: {
+    visit: {
+      type: {} as PropType<VisitType>,
+      required: true,
+    },
+  },
+  computed: {
+    time () {
+      const visitTime: any = (this.visit.nonStopPassage || !this.visit.departureTime)
+        ? this.visit?.arrivalTime
+        : 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>
diff --git a/src/components/Stop/StopSchedulesVisits.vue b/src/components/Stop/StopSchedulesVisits.vue
index 6e20f18..84d1ae7 100644
--- a/src/components/Stop/StopSchedulesVisits.vue
+++ b/src/components/Stop/StopSchedulesVisits.vue
@@ -9,26 +9,10 @@
         <div class="visit-code">
           {{ visit.journeyCode }}
         </div>
-        <div
-          v-if="visit.departureStatus === 'cancelled' || visit.arrivalStatus === 'cancelled'"
-          class="visit-time visit-time-cancelled"
-        >
-          &times;
-        </div>
-        <div
-          v-else-if="visit.nonStopPassage || !visit.departureTime"
-          :key="`0-${updateCounter}`"
-          class="visit-time visit-time-shrouded"
-        >
-          {{ ((visit.arrivalTime.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
-        </div>
-        <div
-          v-else
-          :key="`1-${updateCounter}`"
-          class="visit-time"
-        >
-          {{ ((visit.time.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
-        </div>
+        <StopSchedulesVisitTime
+          :key="updateCounter"
+          :visit="visit"
+        />
         <div class="visit-destination">
           {{ visit.destination }}
         </div>
@@ -97,10 +81,12 @@ import UiSchedulesDetailsRow from '@/components/ui/Schedules/UiSchedulesDetailsR
 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'
 
 export default Vue.extend({
   name: 'StopSchedulesVisits',
   components: {
+    StopSchedulesVisitTime,
     UiSchedulesDetailsRow,
     StopSchedulesDetailsTimes,
     StopSchedulesDetailsTimesNonStopPassage,
@@ -152,32 +138,6 @@ export default Vue.extend({
   overflow-x: hidden;
 }
 
-.visit-time {
-  background-color: #202b3b;
-  color: #ffc700;
-  font-size: 1.2rem;
-  font-weight: 600;
-  min-width: 2.2rem;
-  height: 2.2rem;
-  border-radius: 0.3rem;
-  line-height: 2.2rem;
-  text-align: center;
-}
-
-.visit-time-shrouded {
-  background-color: #C2C2C2;
-  color: #444;
-  font-weight: 500;
-  font-size: 1rem;
-}
-
-.visit-time-cancelled {
-  background-color: #E59999;
-  color: #a03434;
-  font-size: 1.5rem;
-  font-weight: 500;
-}
-
 .visit-destination {
   padding: 0.4rem 0.4rem 0.4rem 0.5rem;
 }
diff --git a/src/components/ui/Schedules/UiSchedulesTime.vue b/src/components/ui/Schedules/UiSchedulesTime.vue
new file mode 100644
index 0000000..f16200a
--- /dev/null
+++ b/src/components/ui/Schedules/UiSchedulesTime.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="variant === 'alert'"
+    class="visit-time visit-time-alert"
+  >
+    &times;
+  </div>
+  <div
+    v-else-if="variant === 'shaded'"
+    class="visit-time visit-time-shaded"
+  >
+    {{ time }}
+  </div>
+  <div
+    v-else
+    class="visit-time"
+  >
+    {{ time }}
+  </div>
+</template>
+<script lang="ts">
+
+import { PropType } from 'vue'
+
+export type UiSchedulesTimeVariant = 'normal' | 'alert' | 'shaded'
+
+export default {
+  name: 'UiSchedulesTime',
+  props: {
+    variant: String as PropType<UiSchedulesTimeVariant>,
+    time: String,
+  },
+}
+</script>
+<style scoped>
+
+.visit-time {
+  background-color: #202b3b;
+  color: #ffc700;
+  font-size: 1.2rem;
+  font-weight: 600;
+  min-width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 0.3rem;
+  line-height: 2.2rem;
+  text-align: center;
+}
+
+.visit-time-shaded {
+  background-color: #C2C2C2;
+  color: #444;
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.visit-time-alert {
+  background-color: #E59999;
+  color: #a03434;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+</style>