refactor: add DesignTime

ludchieng · Jan 24, 2023 · 5d2932f · 5d2932f
1 parent 7d1001d
commit 5d2932f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 19 deletions.
diff --git 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
@@ -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 → src/components/design/DesignTime.vue b/src/components/TimeClock.vue → 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 → src/utils/time.ts b/src/utils/datetime.ts → 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'),