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

src/components/App/StatusIndicator.vue

@@ -195,18 +195,9 @@ export default defineComponent({
 
   watch: {
     dataStatus(storeData: StoreData) {
-      const dataConnectionStatus = storeData.dataConnectionStatus;
       const sceneryDataStatus = storeData.sceneryDataStatus;
       const trainsDataStatus = storeData.trainsDataStatus;
       const dispatcherDataStatus = storeData.dispatcherDataStatus;
-      const timetableDataStatus = storeData.timetableDataStatus;
-
-      if (dataConnectionStatus == DataStatus.Error) {
-        this.setSignalStatus(dataConnectionStatus);
-        this.indicator.status = dataConnectionStatus;
-        this.indicator.message = 'data-status.S1a-connection';
-        return;
-      }
 
       if (sceneryDataStatus == DataStatus.Error) {
         this.setSignalStatus(sceneryDataStatus);
@@ -229,20 +220,6 @@ export default defineComponent({
         return;
       }
 
-      if (timetableDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(timetableDataStatus);
-        this.indicator.status = timetableDataStatus;
-        this.indicator.message = 'data-status.S5-timetables';
-        return;
-      }
-
-      if (timetableDataStatus == DataStatus.Loading) {
-        this.setSignalStatus(timetableDataStatus);
-        this.indicator.status = timetableDataStatus;
-        this.indicator.message = 'data-status.S3';
-        return;
-      }
-
       this.setSignalStatus(DataStatus.Loaded);
 
       this.indicator.status = DataStatus.Loaded;

src/components/Global/StopDate.vue

@@ -0,0 +1,119 @@
+<template>
+  <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>{{ timestampToString(stop.arrivalTimestamp) }}</s>
+        {{ timestampToString(stop.arrivalRealTimestamp) }}
+        ({{ stop.arrivalDelay > 0 ? '+' : '' }}{{ stop.arrivalDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.arrivalTimestamp) }}
+      </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>{{ timestampToString(stop.departureTimestamp) }}</s>
+        {{ timestampToString(stop.departureRealTimestamp) }}
+
+        ({{ stop.departureDelay > 0 ? '+' : '' }}{{ stop.departureDelay }})
+      </span>
+
+      <span v-else>
+        {{ timestampToString(stop.departureTimestamp) }}
+      </span>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import dateMixin from '@/mixins/dateMixin';
+import TrainStop from '@/scripts/interfaces/TrainStop';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    stop: {
+      type: Object as () => TrainStop,
+      required: true,
+    },
+  },
+
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+$preponedClr: lime;
+$delayedClr: salmon;
+$dateClr: #525151;
+$stopExchangeClr: #db8e29;
+$stopDefaultClr: #252525;
+
+.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;
+      }
+    }
+  }
+}
+</style>

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -17,7 +17,7 @@
 
     <span class="status-badge" v-if="station.onlineInfo" :class="station.onlineInfo.statusID">
       {{ $t(`status.${station.onlineInfo.statusID}`) }}
-      {{ station.onlineInfo.statusID == 'online' ? station.onlineInfo.statusTimeString : '' }}
+      {{ station.onlineInfo.statusID == 'online' ?  timestampToString(station.onlineInfo.statusTimestamp) : '' }}
     </span>
 
     <span class="status-badge free" v-else>
@@ -31,9 +31,10 @@ import { defineComponent } from 'vue';
 
 import styleMixin from '@/mixins/styleMixin';
 import Station from '@/scripts/interfaces/Station';
+import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
-  mixins: [styleMixin],
+  mixins: [styleMixin, dateMixin ],
   props: {
     station: {
       type: Object as () => Station,

src/components/SceneryView/SceneryTimetable.vue

@@ -21,8 +21,8 @@
     </div>
 
     <transition name="scenery-timetable-list-anim" mode="out-in">
-      <div :key="timetableDataStatus + selectedCheckpoint">
-        <span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0">
+      <div :key="trainsDataStatus + selectedCheckpoint">
+        <span class="timetable-item loading" v-if="trainsDataStatus == 0 && computedScheduledTrains.length == 0">
           {{ $t('app.loading') }}
         </span>
 
@@ -65,18 +65,26 @@
           </span>
 
           <span class="timetable-schedule">
-            <span class="schedule-arrival">              
-              <span
-                class="arrival-time begins"
-                v-if="scheduledTrain.stopInfo.beginsHere"
-                v-html="$t('timetables.begins')"
-              >
+            <span class="schedule-arrival">
+              <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
+                {{ $t('timetables.begins') }}
               </span>
 
               <span class="arrival-time" v-else>
-                {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
+                <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <s style="margin-right: 0.2em;" class="text--grayed">{{
+                    timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+                  }}</s>
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+                  </span>
+                </div>
               </span>
-
             </span>
 
             <span class="schedule-stop">
@@ -88,15 +96,25 @@
             </span>
 
             <span class="schedule-departure">
-              <span
-                class="departure-time terminates"
-                v-if="scheduledTrain.stopInfo.terminatesHere"
-                v-html="$t('timetables.terminates')"
-              >
+              <span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
+                {{ $t('timetables.terminates') }}
               </span>
 
               <span class="departure-time" v-else>
-                {{ scheduledTrain.stopInfo.departureTimeString }} ({{ scheduledTrain.stopInfo.departureDelay }})
+                <div v-if="scheduledTrain.stopInfo.departureDelay == 0">
+                  <span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
+                </div>
+                <div v-else>
+                  <s style="margin-right: 0.2em;" class="text--grayed">{{
+                    timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+                  }}</s>
+
+                  <span>
+                    {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
+                    ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
+                    }}{{ scheduledTrain.stopInfo.departureDelay }})
+                  </span>
+                </div>
               </span>
             </span>
           </span>
@@ -115,10 +133,13 @@ import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
+import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
   components: { SelectBox },
 
+  mixins: [dateMixin],
+
   props: {
     station: {
       type: Object as () => Station,
@@ -142,7 +163,7 @@ export default defineComponent({
 
     const store = useStore();
 
-    const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>;
+    const trainsDataStatus = computed(() => store.getters[GETTERS.trainsDataStatus]) as ComputedRef<DataStatus>;
 
     const selectedCheckpoint = ref(
       props.station?.generalInfo?.checkpoints?.length == 0
@@ -176,7 +197,7 @@ export default defineComponent({
       currentURL,
       selectedCheckpoint,
       computedScheduledTrains,
-      timetableDataStatus,
+      trainsDataStatus,
     };
   },
 
@@ -317,11 +338,12 @@ h3 {
   &-schedule {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
-    font-size: 1.3em;
+    font-size: 1.15em;
 
     @include smallScreen() {
       width: 100%;
       margin: 0.5em 0;
+      font-size: 1.4em;
     }
   }
 }
@@ -378,7 +400,6 @@ h3 {
 .general-info {
   .info-number {
     color: $accentCol;
-
   }
 
   .info-route {
@@ -396,6 +417,8 @@ h3 {
 }
 
 .general-status {
+  margin-left: 0.5em;
+
   span.arriving {
     color: #aaa;
   }
@@ -449,6 +472,6 @@ h3 {
 
 .arrival-time.begins,
 .departure-time.terminates {
-  font-size: 0.75em;
+  font-size: 0.85em;
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -87,7 +87,7 @@
             <td class="station_status">
               <span class="status-badge" :class="station.onlineInfo.statusID" v-if="station.onlineInfo">
                 {{ $t(`status.${station.onlineInfo.statusID}`) }}
-                {{ station.onlineInfo.statusID == 'online' ? station.onlineInfo.statusTimeString : '' }}
+                {{ station.onlineInfo.statusID == 'online' ? timestampToString(station.onlineInfo.statusTimestamp) : '' }}
               </span>
 
               <span class="status-badge free" v-else>
@@ -102,7 +102,7 @@
             <td class="station_dispatcher-exp">
               <span
                 v-if="station.onlineInfo"
-                :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+                :style="calculateExpStyle(station.onlineInfo.dispatcherExp)"
               >
                 {{ 2 > station.onlineInfo.dispatcherExp ? 'L' : station.onlineInfo.dispatcherExp }}
               </span>
@@ -231,6 +231,8 @@ import { computed, ComputedRef, defineComponent } from '@vue/runtime-core';
 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
 import Station from '@/scripts/interfaces/Station';
+import { StoreData } from '@/scripts/interfaces/StoreData';
+import dateMixin from '@/mixins/dateMixin';
 
 export default defineComponent({
   props: {
@@ -248,7 +250,7 @@ export default defineComponent({
     changeSorter: { type: Function, required: true },
   },
 
-  mixins: [styleMixin],
+  mixins: [styleMixin, dateMixin],
 
   data: () => ({
     likeIcon: require('@/assets/icon-like.svg'),
@@ -275,10 +277,10 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const dataConnectionStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.dataStatus]);
+    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
 
     const isDataLoaded = computed(() => {
-      return dataConnectionStatus.value == DataStatus.Loaded;
+      return data.value.sceneryDataStatus == DataStatus.Loaded;
     });
 
     return {

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;
 

src/components/TrainsView/TrainTable.vue

@@ -80,7 +80,6 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
 
-    const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
     const trainsDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.trainsDataStatus]);
 
     const searchedTrain = inject('searchedTrain') as Ref<string>;
@@ -108,9 +107,6 @@ export default defineComponent({
 
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       trainsDataStatus: computed(() => trainsDataStatus.value),
-      timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
-      timetableWarning: computed(() => timetableDataStatus.value === DataStatus.Warning),
-      timetableError: computed(() => timetableDataStatus.value === DataStatus.Error),
       distanceLimitExceeded: computed(
         () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
       ),

src/components/TrainsView/TrainTimetableCard.vue

@@ -6,7 +6,7 @@
     </div>
 
     <train-info :train="train" />
-    <train-schedule :followingStops="train.timetableData?.followingStops" ref="card-inner" tabindex="0" />
+    <train-schedule v-if="train.timetableData" :followingStops="train.timetableData.followingStops" ref="card-inner" tabindex="0" />
   </section>
 </template>