Ładowanie danych nt pociągów i rozkładów jazdy z API Stacjownika

src/components/TrainsView/TrainSchedule.vue

@@ -22,51 +22,8 @@
                 <span class="content" v-html="stop.comments"> </span>
               </span>
             </span>
-            <span class="stop-date">
-              <span
-                class="date arrival"
-                v-if="!stop.beginsHere"
-                :class="{
-                  delayed: stop.arrivalDelay > 0 && stop.confirmed,
-                  preponed: stop.arrivalDelay < 0 && stop.confirmed,
-                  'on-time': stop.arrivalDelay == 0 && stop.confirmed,
-                }"
-              >
-                <span v-if="stop.arrivalDelay != 0 && stop.confirmed">
-                  <s>{{ stop.arrivalTimeString }}</s>
-                  {{ stop.arrivalRealTimeString }}
-                  ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
-                </span>
 
-                <span v-else>
-                  {{ stop.arrivalTimeString }}
-                </span>
-              </span>
-
-              <span class="date stop" v-if="stop.stopTime" :class="stop.stopType.replace(', ', '-')">
-                {{ stop.stopTime }} {{ stop.stopType == '' ? 'pt' : stop.stopType }}
-              </span>
-
-              <span
-                class="date departure"
-                v-if="!stop.terminatesHere && stop.stopTime != 0"
-                :class="{
-                  delayed: stop.departureDelay > 0 && stop.confirmed,
-                  preponed: stop.departureDelay < 0 && stop.confirmed,
-                }"
-              >
-                <span v-if="stop.departureDelay != 0 && stop.confirmed">
-                  <s>{{ stop.departureTimeString }}</s>
-                  {{ stop.departureRealTimeString }}
-
-                  ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
-                </span>
-
-                <span v-else>
-                  {{ stop.departureTimeString }}
-                </span>
-              </span>
-            </span>
+            <stop-date :stop="stop" />
           </span>
 
           <div class="stop_line" v-if="i < followingStops.length - 1">
@@ -88,10 +45,13 @@
 </template>
 
 <script lang="ts">
-import TrainStop from '@/scripts/interfaces/TrainStop';
 import { computed, defineComponent } from '@vue/runtime-core';
+import dateMixin from '@/mixins/dateMixin';
+import TrainStop from '@/scripts/interfaces/TrainStop';
+import StopDate from '../Global/StopDate.vue';
 
 export default defineComponent({
+  components: { StopDate },
   props: {
     followingStops: {
       type: Array as () => TrainStop[],
@@ -99,6 +59,8 @@ export default defineComponent({
     },
   },
 
+  mixins: [dateMixin],
+
   emits: ['click'],
 
   data: () => ({
@@ -159,12 +121,6 @@ $barClr: #b1b1b1;
 $confirmedClr: #18d818;
 $stoppedClr: #f55f31;
 $haltClr: #f8bb36;
-
-$preponedClr: lime;
-$delayedClr: salmon;
-$dateClr: #525151;
-$stopExchangeClr: #db8e29;
-$stopDefaultClr: #252525;
 $stopNameClr: #22a8d1;
 
 @keyframes blink {
@@ -220,49 +176,6 @@ $stopNameClr: #22a8d1;
   }
 }
 
-.stop-date {
-  display: flex;
-  align-items: center;
-
-  .date {
-    background: $dateClr;
-    padding: 0.3em 0.5em;
-  }
-
-  .stop {
-    &.ph,
-    &.ph-pm,
-    &.pm {
-      background: $stopExchangeClr;
-    }
-
-    background: $stopDefaultClr;
-  }
-
-  .arrival,
-  .departure {
-    &.delayed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $delayedClr;
-      }
-    }
-
-    &.preponed {
-      s {
-        color: #999;
-      }
-
-      span {
-        color: $preponedClr;
-      }
-    }
-  }
-}
-
 ul.stop_list > li.stop {
   position: relative;