Merge branch 'dev' into staging

ludchieng · Nov 21, 2022 · 93ca575 · 93ca575
2 parents 688da83 + 771a0b1
commit 93ca575
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 69 deletions.
diff --git a/public/schemas/lines/rer-a.tsv b/public/schemas/lines/rer-a.tsv
@@ -12,7 +12,7 @@
 |  	.\ 	|  	@ 	11 	               	           	                             	                               	                                                 	                                   	
 \o 	|  	|  	@ 	12 	               	           	                             	                               	                                                 	                                   	
    	\. 	|  	@ 	13 	               	           	                             	                               	                                                 	                                   	
-   	   	*  	@ 	14 	41527          	         0 	maisons-laffite              	Maisons-Laffitte               	acheres-grand-cormier;acheres-ville              	sartrouville                       	transilien-l
+   	   	*  	@ 	14 	41527          	         0 	maisons-laffitte             	Maisons-Laffitte               	acheres-grand-cormier;acheres-ville              	sartrouville                       	transilien-l
    	   	*  	@ 	15 	411360         	         0 	sartrouville                 	Sartrouville                   	maisons-laffite                                  	houilles-carrieres-sur-seine       	transilien-l
    	   	*  	@ 	16 	411357         	         0 	houilles-carrieres-sur-seine 	Houilles – Carrières-sur-Seine 	sartrouville                                     	nanterre-prefecture                	transilien-j;transilien-l
 ^  	   	|  	@ 	17 	               	           	                             	                               	                                                 	                                   	

diff --git a/public/schemas/lines/rer-d.tsv b/public/schemas/lines/rer-d.tsv
@@ -10,9 +10,9 @@
    	   	  	   	* 	@ 	 9 	         41099 	         1 	goussainville                      	Goussainville                          	les-noues                                      	villiers-le-bel-gonesse-arnouville 	
    	   	  	   	* 	@ 	10 	         41097 	         1 	villiers-le-bel-gonesse-arnouville 	Villiers-le-Bel – Gonesse – Arnouville 	goussainville                                  	garges-sarcelles                   	
    	   	  	   	* 	@ 	11 	        411426 	         0 	garges-sarcelles                   	Garges – Sarcelles                     	villiers-le-bel-gonesse-arnouville             	pierrefitte-stains                 	tramway-5
-   	   	  	   	* 	@ 	12 	        411416 	         0 	pierrefitte-stains                 	Pierrefitte – Stains                   	garges-sarcelles                               	saint-denis-l-ile-saint-denis      	tramway-11
+   	   	  	   	* 	@ 	12 	        411416 	         0 	pierrefitte-stains                 	Pierrefitte – Stains                   	garges-sarcelles                               	saint-denis      	tramway-11
    	   	  	   	* 	@ 	13 	        411414 	         0 	saint-denis                        	Saint-Denis (L'Île-Saint-Denis)        	pierrefitte-stains                             	stade-de-france-saint-denis        	tramway-1/gare-de-saint-denis;tramway-8/saint-denis-gare;transilien-h
-   	   	  	   	* 	@ 	14 	        411370 	         1 	stade-de-france-saint-denis        	Stade de France – Saint-Denis          	saint-denis-l-ile-saint-denis                  	paris-nord                         	
+   	   	  	   	* 	@ 	14 	        411370 	         1 	stade-de-france-saint-denis        	Stade de France – Saint-Denis          	saint-denis                  	paris-nord                         	
    	   	  	   	* 	@ 	15 	         41071 	         1 	paris-nord                         	Paris–Gare du Nord                     	stade-de-france-saint-denis                    	chatelet-les-halles                	metro-4/gare-du-nord;metro-5/gare-du-nord;metro-2/la-chapelle;rer-b/gare-du-nord;rer-e/magenta;transilien-h;transilien-k
    	   	  	   	* 	@ 	16 	        412815 	         1 	chatelet-les-halles                	Châtelet – Les Halles                  	paris-nord                                     	paris-lyon                         	metro-1/chatelet;metro-4/chatelet;metro-7/chatelet;metro-11/chatelet;metro-14/chatelet;metro-4/les-halles;rer-a;rer-b
    	   	  	   	* 	@ 	17 	         41396 	         1 	paris-lyon                         	Paris–Gare-de-Lyon                     	chatelet-les-halles                            	maisons-alfort-alfortville         	metro-1/gare-de-lyon;metro-14/gare-de-lyon;rer-a/gare-de-lyon;transilien-r

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -13,24 +13,25 @@
         <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
       </router-link>
     </div>
-    <div class="datetime">
-      <span class="datetime-hh">{{ datetime.hh }}</span>
-      <span class="datetime-separator">:</span>
-      <span class="datetime-mm">{{ datetime.mm }}</span>
-      <span class="datetime-ss">{{ datetime.ss }}</span>
+    <div class="clock">
+      <div>
+        <TimeClock :datetime="datetime" />
+      </div>
     </div>
   </header>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import LineIcon from '@/components/Line/Icon.vue'
+import TimeClock from '@/components/TimeClock.vue'
+import { DateTime } from '@/utils/datetime'
 export default Vue.extend({
   name: 'AppHeader',
-  components: { LineIcon },
+  components: { LineIcon, TimeClock },
   data: () => ({
     clockInterval: 0,
-    datetime: {} as { hh: string, mm: string, ss: string },
+    datetime: {} as DateTime,
   }),
   created () {
     this.clockInterval = setInterval(() => {
@@ -80,23 +81,17 @@ header {
   height: 2rem;
 }
 
-.datetime {
-  padding: 0 0.5rem 0 2.5rem;
-  text-align: center;
-  line-height: 2rem;
+.clock {
+  display: flex;
+  justify-content: end;
+  padding: 0 1rem 0 2.5rem;
   font-size: 1.3rem;
-  color: #444;
-  font-weight: 600;
-}
-
-.datetime-separator {
-  color: #999;
-  font-size: 1.2rem;
 }
 
-.datetime-ss {
-  padding-left: 0.1rem;
-  font-size: 1rem;
-  color: #777;
+.clock > div {
+  transform: translateX(0.75rem);
+  min-width: 6.5rem;
+  text-align: center;
+  line-height: 2rem;
 }
 </style>
diff --git a/src/components/Stop/Timetable/Visits.vue b/src/components/Stop/Timetable/Visits.vue
@@ -13,10 +13,11 @@
         </div>
         <div v-else-if="visit.nonStopPassage || !visit.departureTime"
           class="visit-time visit-time-shrouded"
+          :key="`0-${updateCounter}`"
         >
           {{ ((visit.arrivalTime.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
         </div>
-        <div v-else class="visit-time">
+        <div v-else class="visit-time" :key="`1-${updateCounter}`">
           {{ ((visit.time.valueOf() - Date.now()) / 1000 / 60).toFixed(0) }}
         </div>
         <div class="visit-destination">
@@ -28,12 +29,7 @@
         <div class="visit-details-times">
           <div v-if="visit.arrivalTime">
             <div class="visit-details-label">Arrivée</div>
-            <div>
-              <span class="datetime-hh">{{ visit.arrivalTime?.getHours().toString() }}</span>
-              <span class="datetime-separator">:</span>
-              <span class="datetime-mm">{{ visit.arrivalTime?.getMinutes().toString().padStart(2, '0') }}</span>
-              <span class="datetime-ss">{{ visit.arrivalTime?.getSeconds().toString().padStart(2, '0') }}</span>
-            </div>
+            <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
             <div v-if="visit.arrivalStatus !== 'onTime'" class="visit-details-status">{{ visit.arrivalStatus }}</div>
           </div>
           <div>
@@ -42,12 +38,7 @@
           </div>
           <div v-if="visit.departureTime">
             <div class="visit-details-label">Départ</div>
-            <div>
-              <span class="datetime-hh">{{ visit.departureTime?.getHours().toString() }}</span>
-              <span class="datetime-separator">:</span>
-              <span class="datetime-mm">{{ visit.departureTime?.getMinutes().toString().padStart(2, '0') }}</span>
-              <span class="datetime-ss">{{ visit.departureTime?.getSeconds().toString().padStart(2, '0') }}</span>
-            </div>
+            <TimeClock :datetime="toDateTime(visit.departureTime)" />
             <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
           </div>
         </div>
@@ -71,12 +62,7 @@
         <div class="visit-details-times">
           <div>
             <div class="visit-details-label">Passage sans arrêt</div>
-            <div v-if="visit?.passageTime">
-              <span class="datetime-hh datetime-shrouded">{{ visit.passageTime?.getHours().toString() }}</span>
-              <span class="datetime-separator">:</span>
-              <span class="datetime-mm datetime-shrouded">{{ visit.passageTime?.getMinutes().toString().padStart(2, '0') }}</span>
-              <span class="datetime-ss">{{ visit.passageTime?.getSeconds().toString().padStart(2, '0') }}</span>
-            </div>
+            <TimeClock v-if="visit?.passageTime" :datetime="toDateTime(visit.passageTime)" textGray />
             <div v-if="visit.departureStatus !== 'onTime'" class="visit-details-status">{{ visit.departureStatus }}</div>
           </div>
           <div>
@@ -105,19 +91,13 @@
           <div v-if="visit.departureTime" class="visit-details-label">
             Départ
             <span class="visit-details-train-value">
-              <span class="datetime-hh">{{ visit.departureTime?.getHours().toString() }}</span>
-              <span class="datetime-separator">:</span>
-              <span class="datetime-mm">{{ visit.departureTime?.getMinutes().toString().padStart(2, '0') }}</span>
-              <span class="datetime-ss">{{ visit.departureTime?.getSeconds().toString().padStart(2, '0') }}</span>
+              <TimeClock :datetime="toDateTime(visit.departureTime)" />
             </span>
           </div>
           <div v-else class="visit-details-label">
             Arrivée
             <span class="visit-details-train-value">
-              <span class="datetime-hh">{{ visit.arrivalTime?.getHours().toString() }}</span>
-              <span class="datetime-separator">:</span>
-              <span class="datetime-mm">{{ visit.arrivalTime?.getMinutes().toString().padStart(2, '0') }}</span>
-              <span class="datetime-ss">{{ visit.arrivalTime?.getSeconds().toString().padStart(2, '0') }}</span>
+              <TimeClock :datetime="toDateTime(visit.arrivalTime)" />
             </span>
           </div>
           <div v-if="visit.trainNumber" class="visit-details-label">
@@ -135,12 +115,34 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { VisitType } from '@/utils/fetcher'
+import { toDateTime } from '@/utils/datetime'
+import TimeClock from '@/components/TimeClock.vue'
 
 export default Vue.extend({
   name: 'StopTimetableVisits',
+  components: {
+    TimeClock,
+  },
   props: {
     visits: {} as PropType<VisitType[]>,
   },
+  data: () => ({
+    updateCounter: 0,
+    updateInterval: 0,
+  }),
+  created () {
+    this.updateInterval = setInterval(() => {
+      ++this.updateCounter
+    }, 5000)
+  },
+  destroyed () {
+    clearInterval(this.updateInterval)
+  },
+  methods: {
+    toDateTime (date: Date) {
+      return toDateTime(date)
+    },
+  },
 })
 </script>
 
@@ -237,24 +239,8 @@ export default Vue.extend({
   color: #3f3f3f;
 }
 
-.datetime-shrouded {
-  color: #777;
-}
-
-.datetime-hh,
-.datetime-mm {
+.datetime {
   font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.datetime-separator {
-  color: #999;
-  font-size: 1.05rem;
-}
-
-.datetime-ss {
-  padding-left: 0.1rem;
-  color: #777;
 }
 
 </style>
diff --git a/src/components/TimeClock.vue b/src/components/TimeClock.vue
@@ -0,0 +1,45 @@
+<template>
+    <span
+      v-if="datetime.hh && datetime.mm && datetime.ss"
+      class="datetime"
+    >
+      <span :class="{ 'text-gray': textGray }">{{ datetime.hh }}</span>
+      <span class="separator">:</span>
+      <span :class="{ 'text-gray': textGray }">{{ datetime.mm }}</span>
+      <span class="seconds">{{ datetime.ss }}</span>
+    </span>
+</template>
+
+<script lang="ts">
+import { DateTime } from '@/utils/datetime'
+import Vue, { PropType } from 'vue'
+export default Vue.extend({
+  name: 'TimeClock',
+  props: {
+    datetime: {} as PropType<DateTime>,
+    textGray: Boolean,
+  },
+})
+</script>
+
+<style scoped>
+.datetime {
+  color: #444;
+  font-weight: 600;
+}
+
+.separator {
+  color: #999;
+  font-size: 0.9em;
+}
+
+.seconds {
+  padding-left: 0.1rem;
+  font-size: 0.75em;
+  color: #777;
+}
+
+.text-gray {
+  color: #777;
+}
+</style>
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
@@ -0,0 +1,13 @@
+export type DateTime = {
+  hh: string,
+  mm: string,
+  ss: string
+}
+
+export const toDateTime = (date: Date) => {
+  return {
+    hh: date.getHours().toString(),
+    mm: date.getMinutes().toString().padStart(2, '0'),
+    ss: date.getSeconds().toString().padStart(2, '0'),
+  }
+}