rework reaktywności danych z API i WS

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -1,35 +1,30 @@
 <template>
   <section class="info-dispatcher">
-    <div class="dispatcher" v-if="station.onlineInfo">
+    <div class="dispatcher" v-if="onlineScenery">
       <span
         class="dispatcher_level"
-        :style="
-          calculateExpStyle(
-            station.onlineInfo.dispatcherExp,
-            station.onlineInfo.dispatcherIsSupporter
-          )
-        "
+        :style="calculateExpStyle(onlineScenery.dispatcherExp, onlineScenery.dispatcherIsSupporter)"
       >
-        {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
+        {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
       </span>
 
       <router-link
         class="dispatcher_name"
-        :to="`/journal/dispatchers?dispatcherName=${station.onlineInfo.dispatcherName}`"
+        :to="`/journal/dispatchers?dispatcherName=${onlineScenery.dispatcherName}`"
       >
-        {{ station.onlineInfo.dispatcherName }}
+        {{ onlineScenery.dispatcherName }}
       </router-link>
 
       <span class="dispatcher_likes text--primary">
         <img src="/images/icon-like.svg" alt="Likes count icon" />
-        <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
+        <span>{{ onlineScenery?.dispatcherRate || '0' }}</span>
       </span>
     </div>
 
     <StationStatusBadge
-      :statusID="station.onlineInfo?.statusID"
-      :isOnline="station.onlineInfo ? true : false"
-      :statusTimestamp="station.onlineInfo?.statusTimestamp"
+      :statusID="onlineScenery?.statusID"
+      :isOnline="onlineScenery ? true : false"
+      :statusTimestamp="onlineScenery?.statusTimestamp"
     />
   </section>
 </template>
@@ -39,19 +34,15 @@ import { PropType, defineComponent } from 'vue';
 import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
-import Station from '../../../scripts/interfaces/Station';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+import { OnlineScenery } from '../../../scripts/interfaces/store/storeTypes';
 
 export default defineComponent({
   mixins: [styleMixin, dateMixin, routerMixin],
   props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true
-    },
-    onlineFrom: {
-      type: Number,
-      default: -1
+    onlineScenery: {
+      type: Object as PropType<OnlineScenery>,
+      required: false
     }
   },
   components: { StationStatusBadge }

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -3,14 +3,14 @@
     <h3 class="spawn-header section-header">
       <img src="/images/icon-spawn.svg" alt="Open spawns icon" />
       &nbsp;{{ $t('scenery.spawns') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
+      <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
     </h3>
 
-    <span v-if="station.onlineInfo">
+    <span v-if="onlineScenery">
       <span
         class="badge spawn"
         v-for="(spawn, i) in sortedSpawns"
-        :key="spawn.spawnName + station.onlineInfo?.dispatcherName + i"
+        :key="spawn.spawnName + onlineScenery?.dispatcherName + i"
         :data-electrified="spawn.isElectrified"
       >
         <span class="spawn_name">{{ spawn.spawnName }}</span>
@@ -18,9 +18,7 @@
       </span>
     </span>
 
-    <span
-      class="badge spawn badge-none"
-      v-if="!station.onlineInfo || station.onlineInfo.spawns.length == 0"
+    <span class="badge spawn badge-none" v-if="!onlineScenery || onlineScenery.spawns.length == 0"
       >{{ $t('scenery.no-spawns') }}
     </span>
   </section>
@@ -28,21 +26,21 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import Station from '../../../scripts/interfaces/Station';
+import { OnlineScenery } from '../../../scripts/interfaces/store/storeTypes';
 
 export default defineComponent({
   props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true
+    onlineScenery: {
+      type: Object as PropType<OnlineScenery>,
+      required: false
     }
   },
 
   computed: {
     sortedSpawns() {
-      if (!this.station.onlineInfo) return [];
+      if (!this.onlineScenery) return [];
 
-      return [...this.station.onlineInfo.spawns].sort((s1, s2) =>
+      return [...this.onlineScenery.spawns].sort((s1, s2) =>
         s1.spawnLength < s2.spawnLength ? 1 : -1
       );
     }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -3,12 +3,12 @@
     <h3 class="user-header section-header">
       <img src="/images/icon-user.svg" alt="Users icon" />
       &nbsp;{{ $t('scenery.users') }} &nbsp;
-      <span class="text--primary">{{ station.onlineInfo?.currentUsers || '0' }}</span
-      >&nbsp;/&nbsp;<span class="text--primary">{{ station.onlineInfo?.maxUsers || '0' }}</span>
+      <span class="text--primary">{{ onlineScenery?.currentUsers || 0 }}</span
+      >&nbsp;/&nbsp;<span class="text--primary">{{ onlineScenery?.maxUsers || 0 }}</span>
     </h3>
 
     <div
-      v-for="train in computedStationTrains"
+      v-for="train in onlineScenery?.stationTrains"
       class="badge user"
       :class="train.stopStatus"
       :key="train.trainId"
@@ -22,7 +22,7 @@
 
     <div
       class="badge user badge-none"
-      v-if="!computedStationTrains || computedStationTrains.length == 0"
+      v-if="!onlineScenery?.scheduledTrains || onlineScenery.scheduledTrains.length == 0"
     >
       {{ $t('scenery.no-users') }}
     </div>
@@ -30,45 +30,19 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
-import Station from '../../../scripts/interfaces/Station';
-import { useStore } from '../../../store/store';
+import { OnlineScenery } from '../../../scripts/interfaces/store/storeTypes';
 
 export default defineComponent({
   mixins: [routerMixin, modalTrainMixin],
 
   props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true
+    onlineScenery: {
+      type: Object as PropType<OnlineScenery>,
+      required: false
     }
-  },
-
-  setup(props) {
-    const store = useStore();
-
-    const computedStationTrains = computed(() => {
-      if (!props.station) return [];
-
-      const station = props.station as Station;
-      if (!station.onlineInfo) return [];
-      if (!station.onlineInfo.stationTrains) return [];
-
-      return station.onlineInfo.stationTrains.map((train) => {
-        const scheduledTrainStatus = station.onlineInfo?.scheduledTrains?.find(
-          (st) => st.trainNo === train.trainNo
-        );
-
-        return {
-          ...train,
-          stopStatus: scheduledTrainStatus?.stopStatus || 'no-timetable'
-        };
-      });
-    });
-
-    return { computedStationTrains, store };
   }
 });
 </script>