Migracja na Vite

src/views/ErrorView.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="error-view">
     <div class="container">
-      <img :src="icons.error" alt="error" />
+      <img :src="getIcon('error')" alt="error" />
       <div class="desc">Z powodu błędu w zapisywaniu rozkładów jazdy w tej zakładce można do odwołania nacieszyć się animacją sygnału S1a. Jak naprawię to będzie :)</div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/runtime-core';
+import { defineComponent } from "vue";
+import imageMixin from "../mixins/imageMixin";
+
 
 export default defineComponent({
-  data: () => ({
-    icons: {
-      error: require('@/assets/icon-error.svg'),
-    },
-  }),
+  mixins: [imageMixin]
 });
 </script>
 

src/views/JournalView.vue

@@ -21,13 +21,12 @@
 </template>
 
 <script lang="ts">
-import JournalTimetables from '@/components/JournalView/JournalTimetables.vue';
 import { defineComponent, ref } from 'vue';
-import JournalDispatchers from '@/components/JournalView/JournalDispatchers.vue';
+import JournalDispatchers from '../components/JournalView/JournalDispatchers.vue';
+import JournalTimetables from '../components/JournalView/JournalTimetables.vue';
 
 export default defineComponent({
-  components: { JournalTimetables, JournalDispatchers },
-
+  components: { JournalDispatchers, JournalTimetables },
   setup() {
     const journalTypeChosen = ref('journalTimetables');
 

src/views/SceneryView.vue

@@ -12,7 +12,7 @@
       <div class="scenery-left">
         <div class="scenery-actions">
           <button v-if="!timetableOnly" class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
-            <img :src="icons.back" alt="Back to scenery" />
+            <img :src="getImage('back')" alt="Back to scenery" />
           </button>
         </div>
 
@@ -41,19 +41,17 @@
 </template>
 
 <script lang="ts">
-import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
-import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
-import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
-import SceneryDispatchersHistory from '@/components/SceneryView/SceneryDispatchersHistory.vue';
-import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
-
-import ActionButton from '@/components/Global/ActionButton.vue';
-
-import { computed, defineComponent, ref } from '@vue/runtime-core';
+import { computed, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
-
-import { useStore } from '@/store/store';
-import routerMixin from '@/mixins/routerMixin';
+import routerMixin from '../mixins/routerMixin';
+import { useStore } from '../store/store';
+import SceneryInfo from '../components/SceneryView/SceneryInfo.vue';
+import SceneryHeader from '../components/SceneryView/SceneryHeader.vue';
+import SceneryTimetable from '../components/SceneryView/SceneryTimetable.vue';
+import SceneryTimetablesHistory from '../components/SceneryView/SceneryTimetablesHistory.vue';
+import SceneryDispatchersHistory from '../components/SceneryView/SceneryDispatchersHistory.vue';
+import ActionButton from '../components/Global/ActionButton.vue';
+import imageMixin from '../mixins/imageMixin';
 
 enum SceneryViewMode {
   'TIMETABLES_ACTIVE',
@@ -70,15 +68,8 @@ export default defineComponent({
     SceneryTimetablesHistory,
     SceneryDispatchersHistory,
   },
-
-  mixins: [routerMixin],
-
+  mixins: [routerMixin, imageMixin],
   data: () => ({
-    icons: {
-      user: require('@/assets/icon-user.svg'),
-      back: require('@/assets/icon-back.svg'),
-    },
-
     viewModes: [
       {
         id: 'scenery.option-active-timetables',
@@ -93,32 +84,22 @@ export default defineComponent({
         component: 'SceneryDispatchersHistory',
       },
     ],
-
     sceneryViewMode: SceneryViewMode,
-
     selectedCheckpoint: '',
-
     currentViewCompontent: 'SceneryTimetable',
-
     onlineFrom: -1,
   }),
-
   activated() {
     this.loadSelectedCheckpoint();
   },
-
   setup() {
     const route = useRoute();
     const store = useStore();
-
     const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
-
     const isComponentVisible = computed(() => route.path === '/scenery');
-
     const stationInfo = computed(() => {
       return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
     });
-
     return {
       timetableOnly,
       isComponentVisible,
@@ -126,19 +107,15 @@ export default defineComponent({
       store,
     };
   },
-
   methods: {
     setViewMode(componentName: string) {
       this.currentViewCompontent = componentName;
     },
-
     loadSelectedCheckpoint() {
       if (!this.stationInfo?.generalInfo?.checkpoints) return;
       if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
-
       this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
     },
-
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
@@ -290,7 +267,8 @@ button.back-btn {
 }
 
 @include smallScreen {
-  .scenery-left, .scenery-right {
+  .scenery-left,
+  .scenery-right {
     max-height: 100vh;
   }
 }

src/views/StationsView.vue

@@ -3,7 +3,7 @@
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
-          <FilterCard
+          <StationFilterCard
             :showCard="filterCardOpen"
             :exit="closeCard"
             @changeFilterValue="changeFilterValue"
@@ -25,30 +25,25 @@
 </template>
 
 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 
-import StorageManager from '@/scripts/managers/storageManager';
-import StationFilterManager from '@/scripts/managers/stationFilterManager';
-
-import inputData from '@/data/options.json';
-
-import StationTable from '@/components/StationsView/StationTable.vue';
-import FilterCard from '@/components/StationsView/StationFilterCard.vue';
-import SelectBox from '@/components/Global/SelectBox.vue';
+import inputData from '../data/options.json';
 
 import { computed, ComputedRef, defineComponent, reactive } from 'vue';
-import { useStore } from '@/store/store';
+import { useStore } from '../store/store';
+import StationFilterManager from '../scripts/managers/stationFilterManager';
+import Station from '../scripts/interfaces/Station';
+import StorageManager from '../scripts/managers/storageManager';
+import StationTable from '../components/StationsView/StationTable.vue';
+import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
+import SelectBox from '../components/Global/SelectBox.vue';
 
 export default defineComponent({
   components: {
     StationTable,
-    FilterCard,
+    StationFilterCard,
     SelectBox,
   },
   data: () => ({
-    trainIcon: require('@/assets/icon-train.svg'),
-    timetableIcon: require('@/assets/icon-timetable.svg'),
-    dolarIcon: require('@/assets/icon-dolar.svg'),
     filterCardOpen: false,
     modalHidden: true,
     STORAGE_KEY: 'options_saved',

src/views/TrainsView.vue

@@ -11,16 +11,14 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, PropType, provide, reactive, ref, TrainFilter } from 'vue';
-import { filteredTrainList } from '@/scripts/managers/trainFilterManager';
-import { trainFilters } from '@/data/trainOptions';
-
-import Train from '@/scripts/interfaces/Train';
-import TrainTable from '@/components/TrainsView/TrainTable.vue';
-import TrainStats from '@/components/TrainsView/TrainStats.vue';
-import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
-
-import { useStore } from '@/store/store';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
+import TrainOptions from '../components/TrainsView/TrainOptions.vue';
+import TrainStats from '../components/TrainsView/TrainStats.vue';
+import TrainTable from '../components/TrainsView/TrainTable.vue';
+import { trainFilters } from '../data/trainOptions';
+import Train from '../scripts/interfaces/Train';
+import { filteredTrainList } from '../scripts/managers/trainFilterManager';
+import { useStore } from '../store/store';
 
 export default defineComponent({
   components: {
@@ -42,7 +40,6 @@ export default defineComponent({
   },
 
   data: () => ({
-    statsIcon: require('@/assets/icon-stats.svg'),
     trainStatsOpen: false,
   }),