Migracja z wersji Vue 2 na Vue 3

src/components/SceneryView/SceneryInfo.vue

@@ -7,12 +7,14 @@
           :href="stationInfo.stationURL"
           target="_blank"
           rel="noopener noreferrer"
-          >{{ stationInfo.stationName }}</a
-        >
+        >{{ stationInfo.stationName }}</a>
 
         <span v-else>{{ stationInfo.stationName }}</span>
       </div>
-      <div class="scenery-hash" v-if="stationInfo.stationHash">
+      <div
+        class="scenery-hash"
+        v-if="stationInfo.stationHash"
+      >
         #{{ stationInfo.stationHash }}
       </div>
     </div>
@@ -23,24 +25,36 @@
         :class="!stationInfo.stationHash ? 'no-stats' : ''"
       >
         <span class="likes">
-          <img :src="likeIcon" alt="icon-like" />
+          <img
+            :src="likeIcon"
+            alt="icon-like"
+          />
           <span>{{ stationInfo.dispatcherRate }}</span>
         </span>
 
         <span class="users">
-          <img :src="userIcon" alt="icon-user" />
+          <img
+            :src="userIcon"
+            alt="icon-user"
+          />
           <span>{{ stationInfo.currentUsers }}</span>
           /
           <span>{{ stationInfo.maxUsers }}</span>
         </span>
 
         <span class="spawns">
-          <img :src="spawnIcon" alt="icon-spawn" />
+          <img
+            :src="spawnIcon"
+            alt="icon-spawn"
+          />
           <span>{{ stationInfo.spawns.length }}</span>
         </span>
 
         <span class="schedules">
-          <img :src="timetableIcon" alt="icon-timetable" />
+          <img
+            :src="timetableIcon"
+            alt="icon-timetable"
+          />
           <span v-if="stationInfo.scheduledTrains">
             <span style="color: #eee">{{
               stationInfo.scheduledTrains.length
@@ -111,7 +125,10 @@
       </div>
 
       <div class="info-dispatcher">
-        <div class="dispatcher" v-if="stationInfo.stationHash">
+        <div
+          class="dispatcher"
+          v-if="stationInfo.stationHash"
+        >
           <span
             class="dispatcher_level"
             :style="
@@ -129,7 +146,10 @@
           <span class="dispatcher_name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
-        <span class="status-badge" :class="stationInfo.statusID">
+        <span
+          class="status-badge"
+          :class="stationInfo.statusID"
+        >
           {{ $t(`status.${stationInfo.statusID}`) }}
           {{
             stationInfo.statusID == "online" ? stationInfo.statusTimeString : ""
@@ -141,7 +161,10 @@
         <div class="user-list">
           <h3 class="user-header">
             {{ $t("scenery.users") }}
-            <img :src="userIcon" alt="icon-user" />
+            <img
+              :src="userIcon"
+              alt="icon-user"
+            />
           </h3>
 
           <div
@@ -166,7 +189,10 @@
         <div class="spawn-list">
           <h3 class="spawn-header">
             {{ $t("scenery.spawns") }}
-            <img :src="spawnIcon" alt="icon-spawn" />
+            <img
+              :src="spawnIcon"
+              alt="icon-spawn"
+            />
           </h3>
 
           <span
@@ -181,7 +207,7 @@
           <span
             class="spawn none"
             v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
-            >{{ $t("scenery.no-spawns") }}
+          >{{ $t("scenery.no-spawns") }}
           </span>
         </div>
       </div>
@@ -190,44 +216,56 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-
 import Station from "@/scripts/interfaces/Station";
-
 import styleMixin from "@/mixins/styleMixin";
+import { computed, defineComponent } from "@vue/runtime-core";
 
-@Component
-export default class SceneryInfo extends styleMixin {
-  @Prop() readonly stationInfo!: Station;
-  @Prop() readonly timetableOnly!: boolean;
+export default defineComponent({
+  props: {
+    stationInfo: {
+      type: Object as () => Station,
+    },
 
-  likeIcon: string = require("@/assets/icon-like.svg");
-  spawnIcon: string = require("@/assets/icon-spawn.svg");
-  timetableIcon: string = require("@/assets/icon-timetable.svg");
-  userIcon: string = require("@/assets/icon-user.svg");
+    timetableOnly: Boolean,
+  },
 
-  get computedStationTrains() {
-    if (!this.stationInfo) return null;
+  mixins: [styleMixin],
 
-    return this.stationInfo.stationTrains.map((stationTrain) => {
-      const scheduledData = this.stationInfo?.scheduledTrains.find(
-        (scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
-      );
+  data: () => ({
+    likeIcon: require("@/assets/icon-like.svg"),
+    spawnIcon: require("@/assets/icon-spawn.svg"),
+    timetableIcon: require("@/assets/icon-timetable.svg"),
+    userIcon: require("@/assets/icon-user.svg"),
+  }),
 
-      return {
-        ...stationTrain,
-        stopStatus: scheduledData?.stopStatus || "no-timetable",
-      };
+  setup(props) {
+    const computedStationTrains = computed(() => {
+      if (!props.stationInfo) return [];
+
+      return props.stationInfo.stationTrains.map((train) => {
+        const scheduledTrainStatus = props.stationInfo?.scheduledTrains.find(
+          (st) => st.trainNo === train.trainNo
+        );
+
+        return {
+          ...train,
+          stopStatus: scheduledTrainStatus?.stopStatus || "no-timetable",
+        };
+      });
     });
-  }
 
-  navigateToTrain(trainNo: number) {
-    this.$router.push({
-      name: "TrainsView",
-      params: { queryTrain: trainNo.toString() },
-    });
-  }
-}
+    return { computedStationTrains };
+  },
+
+  methods: {
+    navigateToTrain(trainNo: number) {
+      this.$router.push({
+        name: "TrainsView",
+        params: { queryTrain: trainNo.toString() },
+      });
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/SceneryView/SceneryTimetable.vue

@@ -25,11 +25,14 @@
             value: cp.checkpointName,
           }))
         "
-        @selected="chooseOption"
+        @selected="selectCheckpoint"
       ></select-box>
     </div>
 
-    <span class="timetable-item loading" v-if="dataStatus == 0">{{
+    <span
+      class="timetable-item loading"
+      v-if="dataStatus == 0"
+    >{{
       $t("app.loading")
     }}</span>
 
@@ -48,14 +51,12 @@
       >
         <span class="timetable-general">
           <span class="general-info">
-            <router-link
-              :to="{
+            <router-link :to="{
                 name: 'TrainsView',
                 params: {
                   queryTrain: scheduledTrain.trainNo.toString(),
                 },
-              }"
-            >
+              }">
               <span>
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
@@ -68,21 +69,17 @@
                   'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
                 "
                 target="_blank"
-                >{{ scheduledTrain.driverName }}</a
-              >
+              >{{ scheduledTrain.driverName }}</a>
             </span>
 
             <div class="info-route">
-              <strong
-                >{{ scheduledTrain.beginsAt }} -
-                {{ scheduledTrain.terminatesAt }}</strong
-              >
+              <strong>{{ scheduledTrain.beginsAt }} -
+                {{ scheduledTrain.terminatesAt }}</strong>
             </div>
           </span>
 
           <span class="general-status">
-            <span :class="scheduledTrain.stopStatus"
-              >{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
+            <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
             </span>
           </span>
         </span>
@@ -95,7 +92,10 @@
               v-html="$t('timetables.begins')"
             >
             </span>
-            <span class="arrival-time" v-else>
+            <span
+              class="arrival-time"
+              v-else
+            >
               {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
                 scheduledTrain.stopInfo.arrivalDelay
               }})
@@ -103,7 +103,10 @@
           </span>
 
           <span class="schedule-stop">
-            <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
+            <span
+              class="stop-time"
+              v-if="scheduledTrain.stopInfo.stopTime"
+            >
               {{ scheduledTrain.stopInfo.stopTime }}
               {{ scheduledTrain.stopInfo.stopType }}
             </span>
@@ -116,7 +119,10 @@
               v-html="$t('timetables.terminates')"
             >
             </span>
-            <span class="departure-time" v-else>
+            <span
+              class="departure-time"
+              v-else
+            >
               {{ scheduledTrain.stopInfo.departureTimeString }} ({{
                 scheduledTrain.stopInfo.departureDelay
               }})
@@ -129,74 +135,96 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
 import Station from "@/scripts/interfaces/Station";
-import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
 import SelectBox from "../Global/SelectBox.vue";
+import { computed, defineComponent, ref } from "@vue/runtime-core";
+import { useRoute } from "vue-router";
 
-@Component({ components: { SelectBox } })
-export default class SceneryTimetable extends Vue {
-  @Prop() readonly stationInfo!: Station;
-  @Prop() readonly timetableOnly!: boolean;
-  @Prop() readonly dataStatus!: number;
+export default defineComponent({
+  components: { SelectBox },
 
-  viewIcon: string = require("@/assets/icon-view.svg");
+  props: {
+    stationInfo: {
+      type: Object as () => Station,
+    },
+    timetableOnly: {
+      type: Boolean,
+    },
+    dataStatus: {
+      type: Number,
+    },
+  },
 
-  listOpen: boolean = false;
-  selectedOption: string = "";
+  data: () => ({
+    viewIcon: require("@/assets/icon-view.svg"),
+    listOpen: false,
+  }),
 
-  loadSelectedOption() {
-    if (!this.stationInfo) return;
-    if (!this.stationInfo.checkpoints) return;
-    if (this.selectedOption != "") return;
+  setup(props) {
+    const route = useRoute();
+    const currentURL = computed(() => `${location.origin}${route.fullPath}`);
 
-    this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
-  }
+    const selectedCheckpoint = ref("");
+
+    const computedScheduledTrains = computed(() => {
+      if (!props.stationInfo) return [];
+
+      let scheduledTrains = props.stationInfo.checkpoints?.find(
+        (cp) => cp.checkpointName === selectedCheckpoint.value
+      )?.scheduledTrains;
+
+      // if (props.stationInfo.checkpoints)
+      //   scheduledTrains = props.stationInfo.checkpoints.find(
+      //     (cp) => cp.checkpointName === selectedCheckpoint.value
+      //   )?.scheduledTrains;
+      // else scheduledTrains = props.stationInfo.scheduledTrains;
+
+      return (
+        scheduledTrains?.sort((a, b) => {
+          if (a.stopStatusID > b.stopStatusID) return 1;
+          else if (a.stopStatusID < b.stopStatusID) return -1;
+
+          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp)
+            return 1;
+          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
+            return -1;
+
+          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
+            ? 1
+            : -1;
+        }) || []
+      );
+    });
+
+    return {
+      currentURL,
+      selectedCheckpoint,
+      computedScheduledTrains,
+    };
+  },
+
+  methods: {
+    loadSelectedOption() {
+      if (!this.stationInfo) return;
+      if (!this.stationInfo.checkpoints) return;
+      if (this.selectedCheckpoint != "") return;
+
+      this.selectedCheckpoint = this.stationInfo.checkpoints[0].checkpointName;
+    },
+
+    selectCheckpoint(item: { id: number | string; value: string }) {
+      this.selectedCheckpoint = item.value;
+    },
+  },
 
   mounted() {
     this.loadSelectedOption();
-  }
+  },
 
   activated() {
     this.loadSelectedOption();
-  }
-
-  chooseOption(item: { id: number | string; value: string }) {
-    this.selectedOption = item.value;
-  }
-
-  get currentURL() {
-    return `${location.origin}${this.$route.fullPath}`;
-  }
-
-  get computedScheduledTrains() {
-    if (!this.stationInfo) return [];
-
-    let scheduledTrains: ScheduledTrain[] | undefined;
-
-    if (this.stationInfo.checkpoints)
-      scheduledTrains = this.stationInfo.checkpoints.find(
-        (cp) => cp.checkpointName === this.selectedOption
-      )?.scheduledTrains;
-    else scheduledTrains = this.stationInfo.scheduledTrains;
-
-    return (
-      scheduledTrains?.sort((a, b) => {
-        if (a.stopStatusID > b.stopStatusID) return 1;
-        else if (a.stopStatusID < b.stopStatusID) return -1;
-
-        if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
-        else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
-          return -1;
-
-        return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
-          ? 1
-          : -1;
-      }) || []
-    );
-  }
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>