Merge branch 'dev' into staging

ludchieng · May 21, 2023 · e576250 · e576250
2 parents 02bedd9 + 3a52915
commit e576250
Show file tree

Hide file tree

Showing 20 changed files with 311 additions and 181 deletions.
diff --git a/public/sw.js b/public/sw.js
@@ -4,6 +4,8 @@ import { CacheFirst } from 'workbox-strategies'
 
 precacheAndRoute(self.__WB_MANIFEST || [])
 
+self.addEventListener('install', () => self.skipWaiting())
+
 registerRoute(
   ({ url }) => url.pathname.startsWith('/img/lines-icons/'),
   new CacheFirst({

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
   },
   data: () => ({
     clockInterval: 0,
-    time: {} as Time,
+    time: Object as Time,
   }),
   created () {
     this.clockInterval = setInterval(() => {

diff --git a/src/components/AppNav.vue b/src/components/AppNav.vue
@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <hr>
+    <UiHr />
     <div class="nav-content">
       <div
         v-if="showTabsList"
@@ -108,10 +108,11 @@
 import Vue from 'vue'
 import { getStop } from '@/utils/localstore/stops'
 import LineIcon from '@/components/LineIcon.vue'
+import UiHr from '@/components/ui/UiHr.vue'
 
 export default Vue.extend({
   name: 'AppNav',
-  components: { LineIcon },
+  components: { UiHr, LineIcon },
   data: () => ({
     showTabsList: false,
   }),
@@ -150,15 +151,6 @@ nav {
   color: #ffffff;
 }
 
-hr {
-  position: relative;
-  top: 0;
-  margin: 0 0 0 0;
-  height: 0.3rem;
-  background-color: #ffffff;
-  border: 0;
-}
-
 .nav-tabs-list {
   padding-top: 0.2rem;
   max-height: 70vh;

diff --git a/src/components/Stop/StopHeader.vue b/src/components/Stop/StopHeader.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
     DesignPageTitle,
   },
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
 })
 </script>

diff --git a/src/components/Stop/StopPrevNextStops.vue b/src/components/Stop/StopPrevNextStops.vue
@@ -1,29 +1,47 @@
 <template>
-  <DesignPrevNext
-    :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
-      label: getStop($route.params.line, prevStop).displayName,
-      link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
-    }))"
-    :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
-      label: getStop($route.params.line, nextStop).displayName,
-      link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
-    }))"
-  />
+  <div class="stop-prev-next">
+    <UiHr />
+    <div class="content">
+      <button
+        class="hint"
+        type="button"
+        @click="() => isOpen = !isOpen"
+      >
+        {{ `— ${isOpen ? 'Cacher' : 'Afficher'} les arrêts adjacents —` }}
+      </button>
+      <UiPrevNext
+        v-if="isOpen"
+        :prev-items="stop.prevStops.slice().reverse().map(prevStop => ({
+          label: getStop($route.params.line, prevStop).displayName,
+          link: `/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`,
+        }))"
+        :next-items="stop.nextStops.slice().reverse().map(nextStop => ({
+          label: getStop($route.params.line, nextStop).displayName,
+          link: `/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`,
+        }))"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import { getStop } from '@/utils/localstore/stops'
-import DesignPrevNext from '@/components/ui/UiPrevNext.vue'
+import UiPrevNext from '@/components/ui/UiPrevNext.vue'
+import UiHr from '@/components/ui/UiHr.vue'
 
 export default Vue.extend({
   name: 'StopPrevNextStops',
   components: {
-    DesignPrevNext,
+    UiHr,
+    UiPrevNext,
   },
+  data: () => ({
+    isOpen: false,
+  }),
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
   methods: {
     getStop,
@@ -32,4 +50,27 @@ export default Vue.extend({
 </script>
 
 <style scoped>
+.stop-prev-next {
+  position: fixed;
+  bottom: 3.5rem;
+  left: 0;
+  right: 0;
+}
+
+.content {
+  padding: 0.25rem 1rem;
+  background: #F4F4F4;
+}
+
+.hint {
+  display: block;
+  padding: 0.3rem 0 0.5rem 0;
+  margin: 0 auto;
+  color: #4B4B4B;
+  font-size: 0.75rem;
+  font-family: unset;
+  font-weight: unset;
+  border: 0;
+  background: unset;
+}
 </style>
diff --git a/src/components/Stop/StopSchedules.vue b/src/components/Stop/StopSchedules.vue
@@ -45,13 +45,13 @@ export default Vue.extend({
     StopSchedulesVisits,
   },
   props: {
-    stop: {} as PropType<StopType>,
+    stop: Object as PropType<StopType>,
   },
   data: () => ({
     fetchAbortController: new AbortController(),
     visitsByDirections: [] as [string, VisitType[]][],
     debugData: new Set(),
-    updatedAt: {} as Date,
+    updatedAt: Object as Date,
     updateCounter: 0,
     updateInterval: 0,
   }),

diff --git a/src/components/Stop/StopSchedulesDetailsTimes.vue b/src/components/Stop/StopSchedulesDetailsTimes.vue
@@ -10,10 +10,15 @@
       :sublabel="visit.arrivalStatus !== 'onTime' ? visit.arrivalStatus : null"
     />
     <div>
-      <div v-if="visit.platform">
+      <div
+        v-if="visit.platform"
+        class="way-label"
+      >
         Voie
       </div>
-      <div>{{ visit.platform }}</div>
+      <div class="way-value">
+        {{ visit.platform }}
+      </div>
     </div>
     <UiSchedulesDetailsTimeWrapped
       v-if="visit.departureTime"
@@ -53,7 +58,7 @@ export default Vue.extend({
     UiSchedulesDetailsTimeInline,
   },
   props: {
-    visit: {} as PropType<VisitType>,
+    visit: Object as PropType<VisitType>,
     isInline: {
       type: Boolean,
       default: false,
@@ -71,5 +76,16 @@ export default Vue.extend({
   max-width: 20rem;
   margin-right: 1rem;
   justify-content: space-between;
+  font-size: 1.0625rem;
+}
+
+.way-label {
+  font-size: 0.875rem;
+}
+
+.way-value {
+  text-align: center;
+  font-weight: 600;
+  color: #222;
 }
 </style>
diff --git a/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue b/src/components/Stop/StopSchedulesDetailsTimesNonStopPassage.vue
@@ -10,10 +10,15 @@
       />
     </div>
     <div>
-      <div v-if="visit.platform">
+      <div
+        v-if="visit.platform"
+        class="way-label"
+      >
         Voie
       </div>
-      <div>{{ visit.platform }}</div>
+      <div class="way-value">
+        {{ visit.platform }}
+      </div>
     </div>
   </div>
 </template>
@@ -30,7 +35,7 @@ export default Vue.extend({
     UiSchedulesDetailsTimeWrapped,
   },
   props: {
-    visit: {} as PropType<VisitType>,
+    visit: Object as PropType<VisitType>,
   },
   methods: {
     toTime,
@@ -44,5 +49,14 @@ export default Vue.extend({
   max-width: 20rem;
   margin: 0 1rem 0.5rem 0;
   justify-content: space-between;
+  font-size: 1.0625rem;
+}
+
+.way-label {
+  font-size: 0.875rem;
+}
+
+.way-value {
+  text-align: center;
 }
 </style>