Migracja na Vite

src/components/TrainsView/TrainInfo.vue

@@ -20,7 +20,7 @@
         <img
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
           class="image-warning"
-          :src="icons.warning"
+          :src="getIcon('warning')"
           :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
         />
       </div>
@@ -59,7 +59,7 @@
       </div>
 
       <div class="driver_position text--grayed" style="margin-top: 0.25em">
-          {{ displayTrainPosition(train) }}
+        {{ displayTrainPosition(train) }}
       </div>
     </section>
 
@@ -79,7 +79,7 @@
       <div>
         <span v-for="(stat, i) in STATS.main" :key="stat.name">
           <span v-if="i > 0"> &bull; </span>
-          <span>{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
+          <span>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
         </span>
       </div>
     </section>
@@ -87,9 +87,10 @@
 </template>
 
 <script lang="ts">
-import trainInfoMixin from '@/mixins/trainInfoMixin';
-import Train from '@/scripts/interfaces/Train';
 import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import Train from '../../scripts/interfaces/Train';
 
 export default defineComponent({
   props: {
@@ -104,13 +105,7 @@ export default defineComponent({
     },
   },
 
-  mixins: [trainInfoMixin],
-
-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-    },
-  }),
+  mixins: [trainInfoMixin, imageMixin],
 });
 </script>
 
@@ -165,7 +160,6 @@ export default defineComponent({
 .train-status-badges {
   display: flex;
   flex-wrap: wrap;
-
 }
 
 .train-badge {
@@ -204,7 +198,6 @@ export default defineComponent({
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
 }
 
 .timetable_progress-bar {

src/components/TrainsView/TrainOptions.vue

@@ -15,13 +15,13 @@
           <div class="search-box">
             <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
           </div>
 
           <div class="search-box">
             <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+            <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
           </div>
         </div>
       </div>
@@ -58,15 +58,13 @@
 <script lang="ts">
 import { computed, defineComponent, inject, TrainFilter } from 'vue';
 import { useI18n } from 'vue-i18n';
+import imageMixin from '../../mixins/imageMixin';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox },
   emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
-
-  data: () => ({
-    exitIcon: require('@/assets/icon-exit.svg'),
-  }),
+  mixins: [imageMixin],
 
   setup() {
     const { t } = useI18n();

src/components/TrainsView/TrainOptionsCard.vue

@@ -2,7 +2,7 @@
   <section class="filter-card" v-click-outside="closeCard">
     <div class="card_btn">
       <action-button @click="toggleCard">
-        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
+        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
         <p>{{ $t('options.filters') }}</p>
       </action-button>
     </div>
@@ -26,13 +26,13 @@
               <div class="search-box">
                 <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
-                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
               </div>
 
               <div class="search-box">
                 <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
               </div>
             </div>
           </div>
@@ -50,24 +50,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from '@vue/runtime-core';
+import inputData from "../../data/options.json";
 
-import inputData from '@/data/options.json';
-
-import ActionButton from '@/components/Global/ActionButton.vue';
-import { sorterOptions } from '@/data/trainOptions';
-import { TrainFilter, computed } from 'vue';
+import { TrainFilter, computed, defineComponent, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SelectBox from '../Global/SelectBox.vue';
+import ActionButton from '../Global/ActionButton.vue';
+import { sorterOptions } from '../../data/trainOptions';
+import imageMixin from "../../mixins/imageMixin";
 
 export default defineComponent({
   components: { ActionButton, SelectBox },
   emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
+  mixins: [imageMixin],
 
   data: () => ({
-    filterIcon: require('@/assets/icon-filter2.svg'),
-    exitIcon: require('@/assets/icon-exit.svg'),
-
     inputs: { ...inputData },
   }),
 

src/components/TrainsView/TrainSchedule.vue

@@ -83,10 +83,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/runtime-core';
-import dateMixin from '@/mixins/dateMixin';
-import TrainStop from '@/scripts/interfaces/TrainStop';
+import dateMixin from '../../mixins/dateMixin';
+import imageMixin from '../../mixins/imageMixin';
+import Train from '../../scripts/interfaces/Train';
+import TrainStop from '../../scripts/interfaces/TrainStop';
 import StopDate from '../Global/StopDate.vue';
-import Train from '@/scripts/interfaces/Train';
 
 export default defineComponent({
   components: { StopDate },
@@ -97,16 +98,10 @@ export default defineComponent({
     },
   },
 
-  mixins: [dateMixin],
+  mixins: [dateMixin, imageMixin],
 
   emits: ['click'],
 
-  data: () => ({
-    icons: {
-      warning: require('@/assets/icon-warning.svg'),
-    },
-  }),
-
   setup(props) {
     return {
       lastConfirmed: computed(() => {
@@ -154,7 +149,7 @@ export default defineComponent({
 
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
-      imageEl.src = require('@/assets/unknown.png');
+      imageEl.src = this.getImage('unknown.png');
     },
   },
 });

src/components/TrainsView/TrainStats.vue

@@ -1,29 +1,27 @@
 <template>
   <div class="train-stats" v-click-outside="closeStats">
     <action-button class="stats_button" @click="toggleStatsOpen">
-      <img :src="statsIcon" :alt="$t('trains.stats')" />
-      <p>{{ $t("trains.stats") }}</p>
+      <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
+      <p>{{ $t('trains.stats') }}</p>
     </action-button>
 
     <transition name="stats-anim" class="stats_wrapper" tag="div">
       <div class="stats-body" v-if="trainStatsOpen">
         <h2 class="stats-header">
-          <img :src="statsIcon" :alt="$t('trains.stats')" />
-          {{ $t("trains.stats") }}
+          <img :src="getIcon('stats')" :alt="$t('trains.stats')" />
+          {{ $t('trains.stats') }}
         </h2>
 
         <div class="stats-speed">
           <div class="title stats-title">
-            {{ $t("trains.stats-speed") }}
-          </div>
-          <div class="stats-content">
-            {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
+            {{ $t('trains.stats-speed') }}
           </div>
+          <div class="stats-content">{{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}</div>
         </div>
 
         <div class="stats-length">
           <div class="title stats-title">
-            {{ $t("trains.stats-length") }}
+            {{ $t('trains.stats-length') }}
           </div>
           <div class="stats-content">
             {{ timetableStats.min }} | {{ timetableStats.avg }} |
@@ -33,15 +31,11 @@
 
         <div class="stats-categories">
           <div class="title stats-title">
-            {{ $t("trains.stats-categories") }}
+            {{ $t('trains.stats-categories') }}
           </div>
 
           <div class="category-list">
-            <span
-              class="category"
-              v-for="[key, value] of categoryList"
-              :key="key"
-            >
+            <span class="category" v-for="[key, value] of categoryList" :key="key">
               <span class="category-type">{{ key }}</span>
               <span class="category-count">{{ value }}</span>
             </span>
@@ -49,28 +43,22 @@
 
           <div class="special-list">
             <span class="special twr">
-              <span class="special-type">{{
-                $t("trains.stats-special-twr")
-              }}</span>
+              <span class="special-type">{{ $t('trains.stats-special-twr') }}</span>
               <span class="special-count">{{ specialTrainCount[0] }}</span>
             </span>
 
             <span class="special skr">
-              <span class="special-type">{{
-                $t("trains.stats-special-skr")
-              }}</span>
+              <span class="special-type">{{ $t('trains.stats-special-skr') }}</span>
               <span class="special-count">{{ specialTrainCount[1] }}</span>
             </span>
           </div>
         </div>
 
         <div class="stats-locos">
-          <div class="title stats-title">{{ $t("trains.stats-locos") }}</div>
+          <div class="title stats-title">{{ $t('trains.stats-locos') }}</div>
 
           <div class="loco-list stats-content">
-            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">
-              {{ loco[0] }} | {{ loco[1] }}
-            </div>
+            <div class="loco-item" v-for="(loco, i) in locoList" :key="i">{{ loco[0] }} | {{ loco[1] }}</div>
           </div>
         </div>
       </div>
@@ -79,13 +67,15 @@
 </template>
 
 <script lang="ts">
-import ActionButton from "@/components/Global/ActionButton.vue";
-
-import Train from "@/scripts/interfaces/Train";
-import { computed, defineComponent, inject } from "@vue/runtime-core";
+import { defineComponent, computed, inject } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import Train from '../../scripts/interfaces/Train';
+import ActionButton from '../Global/ActionButton.vue';
 
 export default defineComponent({
   components: { ActionButton },
+  mixins: [imageMixin],
+
   props: {
     trains: {
       type: Array as () => Train[],
@@ -95,7 +85,6 @@ export default defineComponent({
 
   data: () => ({
     trainStatsOpen: false,
-    statsIcon: require("@/assets/icon-stats.svg"),
   }),
 
   methods: {
@@ -110,14 +99,11 @@ export default defineComponent({
 
   setup(props) {
     const speedStats = computed(() => {
-      if (props.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };
 
       const trainList = props.trains.filter((train) => train.timetableData);
 
-      const avg = (
-        trainList.reduce((acc, train) => acc + train.speed, 0) /
-        trainList.length
-      ).toFixed(2);
+      const avg = (trainList.reduce((acc, train) => acc + train.speed, 0) / trainList.length).toFixed(2);
 
       const minMaxSpeed = trainList.reduce((acc, train) => {
         if (!train.timetableData) return acc;
@@ -136,32 +122,21 @@ export default defineComponent({
     });
 
     const timetableStats = computed(() => {
-      if (props.trains.length == 0) return { avg: "0", min: "0", max: "0" };
+      if (props.trains.length == 0) return { avg: '0', min: '0', max: '0' };
 
-      const activeTrainsLength = props.trains.filter(
-        (train) => train.timetableData
-      ).length;
+      const activeTrainsLength = props.trains.filter((train) => train.timetableData).length;
 
       const avg = (
-        props.trains.reduce(
-          (acc, train) =>
-            train.timetableData ? acc + train.timetableData.routeDistance : acc,
-          0
-        ) / activeTrainsLength
+        props.trains.reduce((acc, train) => (train.timetableData ? acc + train.timetableData.routeDistance : acc), 0) /
+        activeTrainsLength
       ).toFixed(2);
 
       const minMaxDistance = props.trains.reduce((acc, train) => {
         if (!train.timetableData) return acc;
 
-        acc[0] =
-          !acc[0] || train.timetableData.routeDistance < acc[0]
-            ? train.timetableData.routeDistance
-            : acc[0];
+        acc[0] = !acc[0] || train.timetableData.routeDistance < acc[0] ? train.timetableData.routeDistance : acc[0];
 
-        acc[1] =
-          !acc[1] || train.timetableData.routeDistance > acc[1]
-            ? train.timetableData.routeDistance
-            : acc[1];
+        acc[1] = !acc[1] || train.timetableData.routeDistance > acc[1] ? train.timetableData.routeDistance : acc[1];
         return acc;
       }, [] as any);
 
@@ -178,9 +153,7 @@ export default defineComponent({
 
         acc.set(
           train.timetableData.category,
-          acc.get(train.timetableData.category)
-            ? acc.get(train.timetableData.category) + 1
-            : 1
+          acc.get(train.timetableData.category) ? acc.get(train.timetableData.category) + 1 : 1
         );
 
         return acc;
@@ -193,35 +166,26 @@ export default defineComponent({
       const map: Map<string, number> = props.trains.reduce((acc, train) => {
         if (!train.timetableData || !train.locoType) return acc;
 
-        acc.set(
-          train.locoType,
-          acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1
-        );
+        acc.set(train.locoType, acc.get(train.locoType) ? acc.get(train.locoType) + 1 : 1);
 
         return acc;
       }, new Map());
 
-      const sorted = [...map.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .filter((v, i) => i < 3);
+      const sorted = [...map.entries()].sort((a, b) => b[1] - a[1]).filter((v, i) => i < 3);
 
       return sorted;
     });
 
     const specialTrainCount = computed(() => {
-      const twrList = props.trains.filter(
-        (train) => train.timetableData && train.timetableData.TWR
-      );
+      const twrList = props.trains.filter((train) => train.timetableData && train.timetableData.TWR);
 
-      const skrList = props.trains.filter(
-        (train) => train.timetableData && train.timetableData.SKR
-      );
+      const skrList = props.trains.filter((train) => train.timetableData && train.timetableData.SKR);
 
       return [twrList.length, skrList.length];
     });
 
     /* Inject list from TrainsView for category filter */
-    const chosenTrainCategories = inject("chosenTrainCategories") as string[];
+    const chosenTrainCategories = inject('chosenTrainCategories') as string[];
 
     return {
       speedStats,
@@ -229,14 +193,14 @@ export default defineComponent({
       categoryList,
       locoList,
       specialTrainCount,
-      chosenTrainCategories
+      chosenTrainCategories,
     };
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive";
+@import '../../styles/responsive';
 
 .stats-anim {
   &-enter-active,
@@ -370,4 +334,4 @@ export default defineComponent({
     justify-content: center;
   }
 }
-</style>
+</style>

src/components/TrainsView/TrainTable.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="train-table">
-    <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
-      <img :src="icons.arrowAsc" alt="return arrow" />
-    </button>
-
     <transition name="anim" mode="out-in">
       <div :key="store.dataStatuses.trains">
         <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
@@ -29,19 +25,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, Ref } from '@vue/runtime-core';
-
-import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
-
-import Train from '@/scripts/interfaces/Train';
-
-import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
-import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
-
-import returnBtnMixin from '@/mixins/returnBtnMixin';
-import { useStore } from '@/store/store';
+import { defineComponent, inject, Ref, computed } from 'vue';
+import returnBtnMixin from '../../mixins/returnBtnMixin';
+import Train from '../../scripts/interfaces/Train';
+import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
 import TrainModal from '../Global/TrainModal.vue';
+import TrainInfo from './TrainInfo.vue';
+import TrainSchedule from './TrainSchedule.vue';
 
 export default defineComponent({
   components: {
@@ -60,17 +51,6 @@ export default defineComponent({
     },
   },
 
-  data: () => ({
-    defaultLocoImage: require('@/assets/unknown.png'),
-
-    icons: {
-      arrowAsc: require('@/assets/icon-arrow-asc.svg'),
-      arrowDesc: require('@/assets/icon-arrow-desc.svg'),
-    },
-
-    defaultVehicleIcons: defaultVehicleIconsJSON,
-  }),
-
   setup(props) {
     const store = useStore();