Migracja z wersji Vue 2 na Vue 3

src/components/StationsView/FilterCard.vue

@@ -1,5 +1,8 @@
 <template>
-  <section class="card">
+  <section
+    class="card"
+    v-if="showCard"
+  >
     <div
       class="card-exit"
       @click="exit"
@@ -79,13 +82,13 @@
     <div class="card-actions flex">
       <action-button
         class="outlined"
-        @click.native="resetFilters"
+        @click="resetFilters"
       >
         {{ $t("filters.reset") }}
       </action-button>
       <action-button
         class="outlined"
-        @click.native="exit"
+        @click="exit"
       >{{
         $t("filters.close")
       }}</action-button>
@@ -94,83 +97,85 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
-
 import inputData from "@/data/options.json";
 
 import StorageManager from "@/scripts/managers/storageManager";
+import { defineComponent } from "@vue/runtime-core";
 import ActionButton from "../Global/ActionButton.vue";
 
-@Component({ components: { ActionButton } })
-export default class FilterCard extends Vue {
-  inputs = { ...inputData };
-  saveOptions: boolean = false;
-  STORAGE_KEY: string = "options_saved";
+export default defineComponent({
+  components: { ActionButton },
+  props: ["showCard", "exit"],
 
-  @Prop() exit!: () => void;
+  data: () => ({
+    inputs: { ...inputData },
+    saveOptions: false,
+    STORAGE_KEY: "options_saved",
+  }),
 
   mounted() {
     this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
-  }
+  },
 
-  handleChange(e: Event): void {
-    const target = <HTMLInputElement>e.target;
+  methods: {
+    handleChange(e: Event) {
+      const target = e.target as HTMLInputElement;
 
-    this.$emit("changeFilterValue", {
-      name: target.name,
-      value: !target.checked,
-    });
+      this.$emit("changeFilterValue", {
+        name: target.name,
+        value: !target.checked,
+      });
+      if (this.saveOptions)
+        StorageManager.setBooleanValue(target.name, target.checked);
+    },
 
-    if (this.saveOptions)
-      StorageManager.setBooleanValue(target.name, target.checked);
-  }
+    handleInput(e: Event) {
+      const target = e.target as HTMLInputElement;
 
-  handleInput(e: Event): void {
-    const target = <HTMLInputElement>e.target;
-    this.$emit("changeFilterValue", {
-      name: target.name,
-      value: target.value,
-    });
+      this.$emit("changeFilterValue", {
+        name: target.name,
+        value: target.value,
+      });
+      if (this.saveOptions)
+        StorageManager.setStringValue(target.name, target.value);
+    },
 
-    if (this.saveOptions)
-      StorageManager.setStringValue(target.name, target.value);
-  }
+    saveFilters() {
+      if (!this.saveOptions) {
+        StorageManager.unregisterStorage(this.STORAGE_KEY);
+        return;
+      }
 
-  saveFilters(): void {
-    if (!this.saveOptions) {
-      StorageManager.unregisterStorage(this.STORAGE_KEY);
-      return;
-    }
+      StorageManager.registerStorage(this.STORAGE_KEY);
 
-    StorageManager.registerStorage(this.STORAGE_KEY);
+      this.inputs.options.forEach((option) =>
+        StorageManager.setBooleanValue(option.name, option.value)
+      );
 
-    this.inputs.options.forEach((option) =>
-      StorageManager.setBooleanValue(option.name, option.value)
-    );
+      this.inputs.sliders.forEach((slider) =>
+        StorageManager.setNumericValue(slider.name, slider.value)
+      );
+    },
 
-    this.inputs.sliders.forEach((slider) =>
-      StorageManager.setNumericValue(slider.name, slider.value)
-    );
-  }
+    resetFilters() {
+      this.inputs.options.forEach((option) => {
+        option.value = option.defaultValue;
+        StorageManager.setBooleanValue(option.name, option.value);
+      });
 
-  resetFilters(): void {
-    this.inputs.options.forEach((option) => {
-      option.value = option.defaultValue;
-      StorageManager.setBooleanValue(option.name, option.value);
-    });
+      this.inputs.sliders.forEach((slider) => {
+        slider.value = slider.defaultValue;
+        StorageManager.setNumericValue(slider.name, slider.value);
+      });
 
-    this.inputs.sliders.forEach((slider) => {
-      slider.value = slider.defaultValue;
-      StorageManager.setNumericValue(slider.name, slider.value);
-    });
+      this.$emit("resetFilters");
+    },
 
-    this.$emit("resetFilters");
-  }
-
-  closeCard(): void {
-    this.exit();
-  }
-}
+    closeCard() {
+      this.exit();
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/StationsView/Options.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="options">
-    <div class="options-actions">
-      <button
-        class="action-btn"
-        :class="{'open': filterCardOpen}"
-        @click="() => toggleCardsState('filter')"
-      >
-        <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" />
-        <p>FILTRY</p>
-      </button>
-
-      <button
-        class="action-btn"
-        :class="{'open': legendCardOpen}"
-        @click="() => toggleCardsState('legend')"
-      >
-        <img :src="require('@/assets/icon-legend.svg')" alt="icon legend" />
-        <p>LEGENDA</p>
-      </button>
-    </div>
-
-    <div class="options-content">
-      <transition name="card-anim"></transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-
-@Component({})
-export default class Options extends Vue {
-  filterCardOpen: boolean = false;
-  legendCardOpen: boolean = false;
-
-  toggleCardsState(name: string): void {
-    if (name == "filter") {
-      this.legendCardOpen = false;
-      this.filterCardOpen = !this.filterCardOpen;
-    }
-
-    if (name == "legend") {
-      this.filterCardOpen = false;
-      this.legendCardOpen = !this.legendCardOpen;
-    }
-  }
-
-  toggleCardState(): void {
-    this.filterCardOpen = !this.filterCardOpen;
-  }
-
-  toggleLegendCardState(): void {
-    this.legendCardOpen = !this.legendCardOpen;
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.options {
-  display: flex;
-  z-index: 5;
-}
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translate(-45%, -50%);
-    opacity: 0;
-  }
-}
-
-.options {
-  &-actions {
-    display: flex;
-  }
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-
-  background: #333;
-  border: none;
-
-  color: #e0e0e0;
-  font-size: 0.4em;
-
-  padding: 0.3em;
-
-  outline: none;
-  cursor: pointer;
-
-  transition: all 0.3s;
-
-  img {
-    width: 1.3em;
-    margin-right: 0.2em;
-  }
-
-  p {
-    max-width: 0;
-    font-size: 1em;
-    overflow: hidden;
-
-    transition: max-width 0.35s ease-in-out;
-  }
-
-  &:hover > p,
-  &.open > p {
-    max-width: 500px;
-    color: $accentCol;
-  }
-
-  &:hover {
-    background: rgba(#e0e0e0, 0.4);
-  }
-}
-
-@include smallScreen {
-  .options {
-    display: flex;
-    justify-content: center;
-  }
-
-  .action-btn {
-    font-size: 0.8rem;
-  }
-}
-</style>

src/components/StationsView/StationTable.vue

@@ -160,6 +160,7 @@
                   $t('desc.signals-type') + $t(`signals.${station.signalType}`)
                 "
               />
+
               <img
                 v-if="station.SBL && station.SBL !== ''"
                 :src="require(`@/assets/icon-SBL.svg`)"
@@ -236,80 +237,87 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-
-import Station from "@/scripts/interfaces/Station";
 import styleMixin from "@/mixins/styleMixin";
 
-import { Getter } from "vuex-class";
-
-import Options from "@/components/StationsView/Options.vue";
-import { StoreData } from "@/scripts/interfaces/StoreData";
 import { DataStatus } from "@/scripts/enums/DataStatus";
+import { computed, ComputedRef, defineComponent } from "@vue/runtime-core";
+import { useStore } from "@/store";
+import { GETTERS } from "@/constants/storeConstants";
+import Station from "@/scripts/interfaces/Station";
 
-@Component({
-  components: { Options },
-})
-export default class StationTable extends styleMixin {
-  @Prop() readonly stations!: Station[];
-  @Prop() readonly sorterActive!: number;
+export default defineComponent({
+  props: {
+    stations: {
+      type: Array as () => Station[],
+      required: true,
+    },
 
-  @Prop() readonly setFocusedStation!: () => void;
-  @Prop() readonly changeSorter!: () => void;
+    sorterActive: {
+      type: Object as () => { id: string; dir: number },
+      required: true,
+    },
 
-  @Getter("getAllData") storeAPIData!: StoreData;
+    setFocusedStation: Function,
+    changeSorter: Function,
+  },
 
-  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");
-  trainIcon: string = require("@/assets/icon-train.svg");
+  mixins: [styleMixin],
 
-  ascIcon: string = require("@/assets/icon-arrow-asc.svg");
-  descIcon: string = require("@/assets/icon-arrow-desc.svg");
+  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"),
+    trainIcon: require("@/assets/icon-train.svg"),
 
-  headIds = [
-    "station",
-    "min-lvl",
-    "status",
-    "dispatcher",
-    "dispatcher-lvl",
-    "routes",
-    "general",
-  ];
+    ascIcon: require("@/assets/icon-arrow-asc.svg"),
+    descIcon: require("@/assets/icon-arrow-desc.svg"),
 
-  headIconsIds = ["user", "spawn", "timetable"];
+    headIds: [
+      "station",
+      "min-lvl",
+      "status",
+      "dispatcher",
+      "dispatcher-lvl",
+      "routes",
+      "general",
+    ],
 
-  headTitles: string[][] = [
-    ["Stacja"],
-    ["Min. poziom", "dyżurnego"],
-    ["Status"],
-    ["Dyżurny"],
-    ["Poziom", "dyżurnego"],
-    ["Szlaki", "2tor | 1tor"],
-    ["Informacje", "ogólne"],
-    [this.userIcon, "Mechanicy online"],
-    [this.spawnIcon, "Otwarte spawny"],
-    [this.timetableIcon, "Aktywne RJ"],
-  ];
+    headIconsIds: ["user", "spawn", "timetable"],
+  }),
 
-  setScenery(name: string) {
-    const station = this.stations.find(
-      (station) => station.stationName === name
+  setup() {
+    const store = useStore();
+
+    const dataConnectionStatus: ComputedRef<DataStatus> = computed(
+      () => store.getters[GETTERS.dataStatus]
     );
 
-    if (!station) return;
+    const isDataLoaded = () =>
+      computed(() => {
+        dataConnectionStatus.value == DataStatus.Loaded;
+      });
 
-    this.$router.push({
-      name: "SceneryView",
-      query: { station: station.stationName.replaceAll(" ", "_") },
-    });
-  }
+    return {
+      isDataLoaded,
+    };
+  },
 
-  get isDataLoaded() {
-    return this.storeAPIData.dataConnectionStatus == DataStatus.Loaded;
-  }
-}
+  methods: {
+    setScenery(name: string) {
+      const station = this.stations.find(
+        (station) => station.stationName === name
+      );
+
+      if (!station) return;
+
+      this.$router.push({
+        name: "SceneryView",
+        query: { station: station.stationName.replaceAll(" ", "_") },
+      });
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -358,6 +366,7 @@ table {
 
     padding: 0.5em;
     background-color: $primaryCol;
+    white-space: pre-wrap;
 
     cursor: pointer;
     user-select: none;
@@ -442,8 +451,8 @@ td.station {
     }
 
     .track {
-      margin: 0 0.3em;
-      padding: 0.35em 0.1em;
+      margin: 0 0.35em;
+      padding: 0.35em;
       font-size: 1.05em;
       white-space: pre-wrap;
     }

src/components/StationsView/StationTimetable.vue

@@ -1,286 +0,0 @@
-<template>
-  <div class="station-timetable">
-    <div class="timetable-wrapper">
-      <div class="timetable-title title">
-        <div style="font-size: 1.5em">{{ stationName.toUpperCase() }}</div>
-        <div style="font-size: 0.7em">AKTYWNE ROZKŁADY JAZDY</div>
-      </div>
-
-      <div class="timetable-content">
-        <div
-          class="timetable-item"
-          v-for="(scheduledTrain, i) in computedScheduledTrains"
-          :key="i"
-        >
-          <span class="timetable-general">
-            <span class="general-info">
-              <router-link
-                :to="{
-                  name: 'TrainsView',
-                  params: {
-                    passedSearchedTrain: scheduledTrain.trainNo.toString(),
-                  },
-                }"
-              >
-                <span>
-                  <strong>{{ scheduledTrain.category }}</strong>
-                  {{ scheduledTrain.trainNo }}
-                </span>
-              </router-link>
-              |
-              <span>
-                <a
-                  :href="
-                    'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
-                  "
-                  target="_blank"
-                  >{{ scheduledTrain.driverName }}</a
-                >
-              </span>
-            </span>
-
-            <span class="general-status">
-              <span :class="scheduledTrain.stopStatus">{{
-                scheduledTrain.stopLabel
-              }}</span>
-            </span>
-          </span>
-
-          <span class="timetable-schedule">
-            <span class="schedule-arrival">
-              <span
-                class="arrival-time begins"
-                v-if="scheduledTrain.stopInfo.beginsHere"
-                >ROZPOCZYNA BIEG</span
-              >
-              <span class="arrival-time" v-else
-                >{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-                  scheduledTrain.stopInfo.arrivalDelay
-                }})</span
-              >
-            </span>
-
-            <span class="schedule-stop">
-              <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime"
-                >{{ scheduledTrain.stopInfo.stopTime }}
-                {{ scheduledTrain.stopInfo.stopType }}</span
-              >
-              <span class="stop-arrow arrow"></span>
-            </span>
-            <span class="schedule-departure">
-              <span
-                class="departure-time terminates"
-                v-if="scheduledTrain.stopInfo.terminatesHere"
-                >KOŃCZY BIEG</span
-              >
-              <span class="departure-time" v-else
-                >{{ scheduledTrain.stopInfo.departureTimeString }} ({{
-                  scheduledTrain.stopInfo.departureDelay
-                }})</span
-              >
-            </span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class StationTimetable extends Vue {
-  @Prop() readonly scheduledTrains;
-  @Prop() readonly stationName;
-
-  get computedScheduledTrains() {
-    return this.scheduledTrains.sort((a, b) => {
-      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>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.station-timetable {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-
-  overflow: hidden;
-
-  transform: translateY(-100%);
-  -webikit-transform: translateY(-100%);
-
-  &.show {
-    transform: translateY(0);
-    -webkit-transform: translateY(0);
-  }
-
-  transition: transform 150ms ease-out;
-
-  background: #333;
-
-  @include smallScreen() {
-    font-size: 1.3em;
-  }
-}
-
-.timetable {
-  &-content {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  &-title {
-    padding-top: 2rem;
-    padding-bottom: 0.3rem;
-    font-size: 1.6em;
-  }
-
-  &-wrapper {
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-item {
-    margin: 1em auto;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-
-    padding: 0 1rem;
-
-    @include smallScreen() {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-  }
-}
-
-.timetable {
-  &-general {
-    padding: 0.3rem 0.7rem;
-    border: 2px solid white;
-    border-radius: 10px;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    @include smallScreen() {
-      width: 95%;
-      font-size: 0.85em;
-    }
-  }
-
-  &-schedule {
-    @include smallScreen() {
-      width: 80%;
-      margin: 0.7em 0;
-      font-size: 0.9em;
-    }
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-    font-size: 1.35em;
-  }
-}
-
-.arrow {
-  border: solid white;
-  border-width: 0 2px 2px 0;
-  display: inline-block;
-  padding: 2px;
-  margin-left: 50px;
-
-  position: relative;
-
-  transform: rotate(-45deg);
-
-  &::before {
-    content: "";
-    position: absolute;
-    display: block;
-    width: 55px;
-    height: 3px;
-    top: 4px;
-    left: 4px;
-
-    transform: translate(-100%, -1px) rotate(45deg);
-    transform-origin: right bottom;
-
-    background: white;
-  }
-}
-
-.general-info {
-  span {
-    color: $accentCol;
-  }
-}
-
-.general-status {
-  span.arriving {
-    color: #aaa;
-  }
-
-  span.departed {
-    color: lime;
-  }
-
-  span.stopped {
-    color: #ffa600;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: red;
-  }
-}
-
-.schedule {
-  &-arrival,
-  &-stop,
-  &-departure {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    margin: 0 0.3rem;
-  }
-
-  &-stop {
-    display: flex;
-    flex-direction: column;
-
-    .stop-time {
-      font-size: 0.7em;
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.75em;
-}
-</style>