Migracja na Vite

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -13,7 +13,7 @@
       </router-link>
 
       <span class="dispatcher_likes text--primary">
-        <img :src="icons.like" alt="icon-like" />
+        <img :src="getIcon('like')" alt="icon-like" />
         <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
       </span>
     </div>
@@ -35,14 +35,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-
-import styleMixin from '@/mixins/styleMixin';
-import Station from '@/scripts/interfaces/Station';
-import dateMixin from '@/mixins/dateMixin';
-import routerMixin from '@/mixins/routerMixin';
+import dateMixin from '../../../mixins/dateMixin';
+import imageMixin from '../../../mixins/imageMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin],
+  mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
   props: {
     station: {
       type: Object as () => Station,
@@ -54,13 +54,6 @@ export default defineComponent({
       default: -1,
     },
   },
-
-  data: () => ({
-    icons: {
-      spawn: require('@/assets/icon-spawn.svg'),
-      like: require('@/assets/icon-like.svg'),
-    },
-  }),
 });
 </script>
 

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -20,7 +20,7 @@
     <img
       v-if="station.generalInfo?.SUP"
       class="icon-info"
-      :src="require(`@/assets/icon-SUP.svg`)"
+      :src="getIcon('SUP')"
       alt="SUP (RASP-UZK)"
       :title="$t('desc.SUP')"
     />
@@ -28,7 +28,7 @@
     <img
       v-if="station.generalInfo?.signalType"
       class="icon-info"
-      :src="require(`@/assets/icon-${station.generalInfo.signalType}.svg`)"
+      :src="getIcon(station.generalInfo.signalType)"
       :alt="station.generalInfo.signalType"
       :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
     />
@@ -36,7 +36,7 @@
     <img
       v-if="station.generalInfo?.availability == 'nonPublic'"
       class="icon-info"
-      :src="icons.lock"
+      :src="getIcon('lock')"
       alt="Non-public scenery"
       :title="$t('desc.non-public')"
     />
@@ -44,7 +44,7 @@
     <img
       v-if="station.generalInfo?.availability == 'unavailable'"
       class="icon-info"
-      :src="icons.unavailable"
+      :src="getIcon('unavailable')"
       alt="Unavailable scenery"
       :title="$t('desc.unavailable')"
     />
@@ -52,7 +52,7 @@
     <img
       v-if="station.generalInfo?.availability == 'abandoned'"
       class="icon-info"
-      :src="icons.abandoned"
+      :src="getIcon('abandoned')"
       alt="Abandoned scenery"
       :title="$t('desc.abandoned')"
     />
@@ -60,7 +60,7 @@
     <img
       v-if="station.generalInfo?.lines"
       class="icon-info"
-      :src="icons.real"
+      :src="getIcon('real')"
       alt="real scenery"
       :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
     />
@@ -68,7 +68,7 @@
     <img
       v-if="!station.generalInfo"
       class="icon-info"
-      :src="icons.unknown"
+      :src="getImage('unknown.png')"
       alt="icon-unknown"
       :title="$t('desc.unknown')"
     />
@@ -77,31 +77,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import stationInfoMixin from '@/mixins/stationInfoMixin';
-
-import Station from '@/scripts/interfaces/Station';
-import styleMixin from '@/mixins/styleMixin';
+import imageMixin from '../../../mixins/imageMixin';
+import stationInfoMixin from '../../../mixins/stationInfoMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
-  mixins: [stationInfoMixin, styleMixin],
+  mixins: [stationInfoMixin, styleMixin, imageMixin],
   props: {
     station: {
       type: Object as () => Station,
       default: {},
     },
   },
-
-  data: () => ({
-    icons: {
-      td2: require('@/assets/icon-td2.svg'),
-      lock: require('@/assets/icon-lock.svg'),
-      unavailable: require('@/assets/icon-unavailable.svg'),
-      unknown: require('@/assets/icon-unknown.svg'),
-      abandoned: require('@/assets/icon-abandoned.svg'),
-
-      real: require('@/assets/icon-real.svg'),
-    },
-  }),
 });
 </script>
 
@@ -130,3 +118,4 @@ export default defineComponent({
   }
 }
 </style>
+

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -57,8 +57,8 @@
 </template>
 
 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 import { defineComponent } from 'vue';
+import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
   props: {

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="info-spawn-list">
     <h3 class="spawn-header section-header">
-      <img :src="icons.spawn" alt="icon-spawn" />
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
       &nbsp;{{ $t('scenery.spawns') }} &nbsp;
       <span class="text--primary">{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </h3>
@@ -24,22 +24,19 @@
 </template>
 
 <script lang="ts">
-import Station from '@/scripts/interfaces/Station';
 import { defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
+  mixins: [imageMixin],
+
   props: {
     station: {
       type: Object as () => Station,
       default: {},
     },
   },
-
-  data: () => ({
-    icons: {
-      spawn: require('@/assets/icon-spawn.svg'),
-    },
-  }),
 });
 </script>
 

src/components/SceneryView/SceneryInfo/SceneryInfoStats.vue

@@ -1,24 +1,24 @@
 <template>
   <section class="info-stats" :class="!station.onlineInfo ? 'no-stats' : ''">
     <span class="likes">
-      <img :src="icons.like" alt="icon-like" />
+      <img :src="getIcon('like')" alt="icon-like" />
       <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
     </span>
 
     <span class="users">
-      <img :src="icons.user" alt="icon-user" />
+      <img :src="getIcon('user')" alt="icon-user" />
       <span>{{ station.onlineInfo?.currentUsers || '0' }}</span>
       /
       <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
     </span>
 
     <span class="spawns">
-      <img :src="icons.spawn" alt="icon-spawn" />
+      <img :src="getIcon('spawn')" alt="icon-spawn" />
       <span>{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </span>
 
     <span class="schedules">
-      <img :src="icons.timetable" alt="icon-timetable" />
+      <img :src="getIcon('timetable')" alt="icon-timetable" />
       <span>
         <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
         /
@@ -32,25 +32,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-
-import Station from '@/scripts/interfaces/Station';
+import imageMixin from '../../../mixins/imageMixin';
+import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
+  mixins: [imageMixin],
   props: {
     station: {
       type: Object as () => Station,
       default: {},
     },
   },
-
-  data: () => ({
-    icons: {
-      like: require('@/assets/icon-like.svg'),
-      timetable: require('@/assets/icon-timetable.svg'),
-      user: require('@/assets/icon-user.svg'),
-      spawn: require('@/assets/icon-spawn.svg'),
-    },
-  }),
 });
 </script>
 
@@ -83,7 +75,7 @@ export default defineComponent({
   }
 
   span > img {
-    width: 1.2em; 
+    width: 1.2em;
     margin-right: 0.5em;
   }
 }

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="info-user-list">
     <h3 class="user-header section-header">
-      <img :src="icons.user" alt="icon-user" />
+      <img :src="getIcon('user')" alt="icon-user" />
       &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>
@@ -27,13 +27,15 @@
 </template>
 
 <script lang="ts">
-import routerMixin from '@/mixins/routerMixin';
-import Station from '@/scripts/interfaces/Station';
-import { useStore } from '@/store/store';
+
 import { computed, defineComponent } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import routerMixin from '../../../mixins/routerMixin';
+import Station from '../../../scripts/interfaces/Station';
+import { useStore } from '../../../store/store';
 
 export default defineComponent({
-  mixins: [routerMixin],
+  mixins: [routerMixin, imageMixin],
 
   props: {
     station: {
@@ -65,12 +67,6 @@ export default defineComponent({
     return { computedStationTrains, store };
   },
 
-  data: () => ({
-    icons: {
-      user: require('@/assets/icon-user.svg'),
-    },
-  }),
-
   methods: {
     selectTrain(trainId: string) {
       this.store.chosenModalTrain = this.store.trainList.find((train) => train.trainId == trainId);