migracja assetów

src/App.vue

@@ -22,9 +22,9 @@
       {{ new Date().getUTCFullYear() }} |
       <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
       <br />
-      <a href="https://discord.gg/x2mpNN3svk"
-        ><img :src="getIcon('discord', 'png')" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b></a
-      >
+      <a href="https://discord.gg/x2mpNN3svk">
+        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+      </a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>
@@ -43,7 +43,6 @@ import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
 import TrainModal from './components/Global/TrainModal.vue';
 import StorageManager from './scripts/managers/storageManager';
-import imageMixin from './mixins/imageMixin';
 import AppHeader from './components/App/AppHeader.vue';
 import axios from 'axios';
 import useCustomSW from './mixins/useCustomSW';
@@ -57,8 +56,6 @@ export default defineComponent({
     AppHeader
   },
 
-  mixins: [imageMixin],
-
   setup() {
     const store = useStore();
     store.connectToAPI();

src/components/App/AppHeader.vue

@@ -4,12 +4,12 @@
       <div class="header_icons">
         <span class="icons-top">
           <img
-            :src="getIcon('pl')"
+            src="/images/icon-pl.svg"
             alt="icon-pl"
             @click="changeLang('en')"
             v-if="currentLang == 'pl'"
           />
-          <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
+          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
         </span>
       </div>
 
@@ -18,7 +18,7 @@
 
         <span class="header_brand">
           <router-link to="/">
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
+            <img src="/images/stacjownik-header-logo.svg" alt="Stacjownik" />
           </router-link>
         </span>
 
@@ -26,7 +26,7 @@
           <Clock />
 
           <div class="info_counter">
-            <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
+            <img src="/images/icon-dispatcher.svg" alt="icon dispatcher" />
             <span class="text--primary">{{ onlineDispatchersCount }}</span>
 
             <!-- <span class="g-tooltip">
@@ -36,7 +36,7 @@
 
             <span class="text--grayed"> / </span>
             <span class="text--primary">{{ onlineTrainsCount }}</span>
-            <img :src="getIcon('train')" alt="icon train" />
+            <img src="/images/icon-train.svg" alt="icon train" />
           </div>
 
           <span class="info_region">
@@ -70,14 +70,12 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store/store';
 import options from '../../data/options.json';
-import imageMixin from '../../mixins/imageMixin';
 import SelectBox from '../Global/SelectBox.vue';
 import StatusIndicator from './StatusIndicator.vue';
 import Clock from './Clock.vue';
 
 export default defineComponent({
   emits: ['changeLang'],
-  mixins: [imageMixin],
   props: {
     currentLang: {
       type: String,

src/components/Global/SearchBox.vue

@@ -7,17 +7,14 @@
       @keypress="updateValue"
     />
 
-    <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="clearSearchValue" />
+    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 
 export default defineComponent({
-  mixins: [imageMixin],
-
   emits: ['update:searchedValue', 'clearValue'],
   props: {
     searchedValue: {

src/components/Global/SelectBox.vue

@@ -5,7 +5,7 @@
         <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
 
         <div class="arrow">
-          <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
+          <img :src="`/images/icon-arrow-${listOpen ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
         </div>
       </button>
 
@@ -34,7 +34,6 @@
 
 <script lang="ts">
 import { defineComponent, Ref, ref, computed } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 
 interface Item {
   id: string;
@@ -44,7 +43,6 @@ interface Item {
 
 export default defineComponent({
   emits: ['selected'],
-  mixins: [imageMixin],
 
   props: {
     itemList: {

src/components/Global/StockList.vue

@@ -52,11 +52,8 @@
 import { PropType, defineComponent } from 'vue';
 import { useStore } from '../../store/store';
 import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
-import imageMixin from '../../mixins/imageMixin';
 
 export default defineComponent({
-  mixins: [imageMixin],
-
   props: {
     trainStockList: {
       type: Array as PropType<string[]>,

src/components/Global/TrainModal.vue

@@ -3,7 +3,7 @@
     <div class="modal_background" @click="closeModal"></div>
     <div class="modal_content" ref="content" tabindex="0">
       <button class="btn exit" @click="closeModal">
-        <img :src="getIcon('exit')" alt="close card" />
+        <img src="/images/icon-exit.svg" alt="close card" />
       </button>
 
       <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import { useStore } from '../../store/store';
@@ -23,7 +22,7 @@ import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin, modalTrainMixin, imageMixin],
+  mixins: [trainInfoMixin, modalTrainMixin],
 
   data() {
     return {

src/components/JournalView/JournalDispatchersList.vue

@@ -116,7 +116,6 @@ import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
 import styleMixin from '../../mixins/styleMixin';
-import imageMixin from '../../mixins/imageMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
@@ -126,7 +125,7 @@ import AddDataButton from '../Global/AddDataButton.vue';
 export default defineComponent({
   components: { Loading, AddDataButton },
 
-  mixins: [dateMixin, styleMixin, imageMixin],
+  mixins: [dateMixin, styleMixin],
 
   props: {
     dispatcherHistory: {

src/components/JournalView/JournalOptions.vue

@@ -8,13 +8,13 @@
         @click="showOptions = !showOptions"
         ref="button"
       >
-        <img :src="getIcon('filter2')" alt="Open filters" />
+        <img src="/images/icon-filter2.svg" alt="Open filters" />
         {{ $t('options.filters') }} [F]
         <span class="active-indicator" v-if="currentOptionsActive"></span>
       </button>
 
       <button class="filter-button btn--filled btn--image" @click="refreshData">
-        <img :src="getIcon('refresh')" alt="Refresh data" />
+        <img src="/images/icon-refresh.svg" alt="Refresh data" />
         {{ $t('general.refresh') }}
       </button>
     </div>
@@ -51,7 +51,7 @@
                 />
 
                 <button class="search-exit" v-if="propName != 'search-date'">
-                  <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+                  <img src="/images/icon-exit.svg" alt="exit-icon" @click="onInputClear(propName)" />
                 </button>
               </div>
             </div>
@@ -108,7 +108,6 @@
 <script lang="ts">
 import axios from 'axios';
 import { defineComponent, inject, PropType } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { DriverStatsAPIData } from '../../scripts/interfaces/api/DriverStatsAPIData';
@@ -119,7 +118,7 @@ import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
-  mixins: [imageMixin, keyMixin],
+  mixins: [keyMixin],
 
   props: {
     sorterOptionIds: {

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -78,11 +78,9 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
-import imageMixin from '../../../mixins/imageMixin';
 import StockList from '../../Global/StockList.vue';
 
 export default defineComponent({
-  mixins: [imageMixin],
   components: { StockList },
   props: {
     showExtraInfo: {
@@ -121,7 +119,7 @@ export default defineComponent({
   methods: {
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
+      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -23,7 +23,10 @@
 
           <button class="btn--option btn--show">
             {{ $t('journal.stock-info') }}
-            <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+            <img
+              :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
+              alt="Arrow icon"
+            />
           </button>
           <!-- Extra -->
           <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
@@ -35,7 +38,6 @@
 
 <script lang="ts">
 import { PropType, defineComponent, ref } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
 import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
 
 import TimetableGeneral from './TimetableGeneral.vue';
@@ -44,7 +46,6 @@ import TimetableStatus from './TimetableStatus.vue';
 import TimetableExtra from './TimetableExtra.vue';
 
 export default defineComponent({
-  mixins: [imageMixin],
   props: {
     timetableHistory: {
       type: Array as PropType<TimetableHistory[]>,

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -21,7 +21,7 @@
       </router-link>
 
       <span class="dispatcher_likes text--primary">
-        <img :src="getIcon('like')" alt="icon-like" />
+        <img src="/images/icon-like.svg" alt="Likes count icon" />
         <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
       </span>
     </div>
@@ -37,14 +37,13 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 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';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin, imageMixin],
+  mixins: [styleMixin, dateMixin, routerMixin],
   props: {
     station: {
       type: Object as PropType<Station>,

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -20,7 +20,7 @@
     <img
       v-if="station.generalInfo?.SUP"
       class="icon-info"
-      :src="getIcon('SUP')"
+      src="/images/icon-SUP.svg"
       alt="SUP (RASP-UZK)"
       :title="$t('desc.SUP')"
     />
@@ -28,7 +28,7 @@
     <img
       v-if="station.generalInfo?.signalType"
       class="icon-info"
-      :src="getIcon(station.generalInfo.signalType)"
+      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
       :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="getIcon('lock')"
+      src="/images/icon-lock.svg"
       alt="Non-public scenery"
       :title="$t('desc.non-public')"
     />
@@ -44,7 +44,7 @@
     <img
       v-if="station.generalInfo?.availability == 'unavailable'"
       class="icon-info"
-      :src="getIcon('unavailable')"
+      src="/images/icon-unavailable.svg"
       alt="Unavailable scenery"
       :title="$t('desc.unavailable')"
     />
@@ -52,7 +52,7 @@
     <img
       v-if="station.generalInfo?.availability == 'abandoned'"
       class="icon-info"
-      :src="getIcon('abandoned')"
+      src="/images/icon-abandoned.svg"
       alt="Abandoned scenery"
       :title="$t('desc.abandoned')"
     />
@@ -60,7 +60,7 @@
     <img
       v-if="station.generalInfo?.lines"
       class="icon-info"
-      :src="getIcon('real')"
+      src="/images/icon-real.svg"
       alt="real scenery"
       :title="`${$t('desc.real')} ${station.generalInfo.lines}`"
     />
@@ -68,7 +68,7 @@
     <img
       v-if="!station.generalInfo"
       class="icon-info"
-      :src="getIcon('unknown')"
+      src="/images/icon-unknown.svg"
       alt="icon-unknown"
       :title="$t('desc.unknown')"
     />
@@ -77,13 +77,12 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-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, imageMixin],
+  mixins: [stationInfoMixin, styleMixin],
   props: {
     station: {
       type: Object as PropType<Station>,

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

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

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="getIcon('like')" alt="icon-like" />
+      <img src="/images/icon-like" alt="Likes count icon" />
       <span>{{ station.onlineInfo?.dispatcherRate || '0' }}</span>
     </span>
 
     <span class="users">
-      <img :src="getIcon('user')" alt="icon-user" />
+      <img src="/images/icon-user" alt="Users count icon" />
       <span>{{ station.onlineInfo?.currentUsers || '0' }}</span>
       /
       <span>{{ station.onlineInfo?.maxUsers || '0' }}</span>
     </span>
 
     <span class="spawns">
-      <img :src="getIcon('spawn')" alt="icon-spawn" />
+      <img src="/images/icon-spawn" alt="Spawns count icon" />
       <span>{{ station.onlineInfo?.spawns.length || '0' }}</span>
     </span>
 
     <span class="schedules">
-      <img :src="getIcon('timetable')" alt="icon-timetable" />
+      <img src="/images/icon-timetable" alt="Timetables count icon" />
       <span>
         <span style="color: #eee">{{ station.onlineInfo?.scheduledTrains?.length || '0' }}</span>
         /
@@ -35,11 +35,9 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
 import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
-  mixins: [imageMixin],
   props: {
     station: {
       type: Object as PropType<Station>,

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="info-user-list">
     <h3 class="user-header section-header">
-      <img :src="getIcon('user')" alt="icon-user" />
+      <img src="/images/icon-user.svg" alt="Users icon" />
       &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>
@@ -31,14 +31,13 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent } from 'vue';
-import imageMixin from '../../../mixins/imageMixin';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import Station from '../../../scripts/interfaces/Station';
 import { useStore } from '../../../store/store';
 
 export default defineComponent({
-  mixins: [routerMixin, imageMixin, modalTrainMixin],
+  mixins: [routerMixin, modalTrainMixin],
 
   props: {
     station: {

src/components/SceneryView/SceneryTimetable.vue

@@ -2,7 +2,7 @@
   <section class="scenery-timetable">
     <div class="timetable-header">
       <h3>
-        <img :src="getIcon('timetable')" alt="icon-timetable" />
+        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
         <span>{{ $t('scenery.timetables') }}</span>
 
         <span>
@@ -24,11 +24,11 @@
             target="_blank"
             :title="$t('scenery.pragotron-link')"
           >
-            <img :src="getIcon('pragotron')" alt="icon-pragotron" />
+            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
           </a>
 
           <a :href="tabliceZbiorczeHref" target="_blank" :title="$t('scenery.tablice-link')">
-            <img :src="getIcon('tablice', 'ico')" alt="icon-tablice" />
+            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
           </a>
         </span>
       </h3>
@@ -84,7 +84,7 @@
                 {{ scheduledTrain.trainNo }}
 
                 <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
-                  <img :src="getIcon('warning')" />
+                  <img src="/images/icon-warning.svg" />
                   <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
                 </span>
               </span>
@@ -184,7 +184,6 @@ import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import Station from '../../scripts/interfaces/Station';
 import { useStore } from '../../store/store';
-import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 
@@ -193,7 +192,7 @@ export default defineComponent({
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, imageMixin, modalTrainMixin],
+  mixins: [dateMixin, routerMixin, modalTrainMixin],
 
   props: {
     station: {

src/components/StationsView/FilterOption.vue

@@ -1,6 +1,12 @@
 <template>
   <label @dblclick="handleDbClick">
-    <input type="checkbox" :class="option.section" :name="option.id" />
+    <input
+      :value="optionValue"
+      @input="$emit('update:optionValue', ($event.target as HTMLInputElement).value)"
+      type="checkbox"
+      :class="option.section"
+      :name="option.id"
+    />
     <span>
       {{ $t(`filters.${option.id}`) }}
     </span>
@@ -24,9 +30,16 @@ export default defineComponent({
     option: {
       type: Object as () => FilterOption,
       required: true
+    },
+
+    optionValue: {
+      type: Boolean,
+      required: true
     }
   },
 
+  emits: ['update:optionValue'],
+
   setup() {
     return {
       filterStore: useStationFiltersStore()
@@ -45,6 +58,7 @@ export default defineComponent({
 
       this.filterStore.lastClickedFilterId = this.option.id;
       // this.option.value = true;
+      this.$emit('update:optionValue', true);
 
       this.filterStore.inputs.options
         .filter((option) => {

src/components/StationsView/StationFilterCard.vue

@@ -2,7 +2,7 @@
   <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
     <div class="card_controls">
       <button class="btn--filled btn--image" @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
+        <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
         {{ $t('options.filters') }} [F]
         <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
@@ -34,22 +34,6 @@
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
-            <!-- QUICK ACTIONS (TODO) -->
-            <!-- <div class="quick-actions">
-              <h3 class="text--primary">{{ $t('filters.sections.quick') }}</h3>
-              <hr />
-
-              <div>
-                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-available')">
-                  {{ $t('filters.all-available') }}
-                </button>
-
-                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-free')">
-                  {{ $t('filters.all-free') }}
-                </button>
-              </div>
-            </div> -->
-
             <div
               class="option-section"
               v-for="section in filterStore.inputs.optionSections"
@@ -68,6 +52,7 @@
                   v-for="(option, i) in filterStore.inputs.options.filter(
                     (o) => o.section == section
                   )"
+                  v-model:optionValue="option.value"
                   :option="option"
                   :key="i"
                 />
@@ -151,7 +136,6 @@
 
 <script lang="ts">
 import { defineComponent, inject } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import routerMixin from '../../mixins/routerMixin';
 import StorageManager from '../../scripts/managers/storageManager';
@@ -162,7 +146,7 @@ import FilterOption from './FilterOption.vue';
 
 export default defineComponent({
   components: { FilterOption },
-  mixins: [imageMixin, keyMixin, routerMixin],
+  mixins: [keyMixin, routerMixin],
 
   data: () => ({
     saveOptions: false,

src/components/StationsView/StationTable.vue

@@ -16,7 +16,7 @@
                 <img
                   class="sort-icon"
                   v-if="sorterActive.headerName == headerName"
-                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
                   alt="sort icon"
                 />
               </span>
@@ -30,7 +30,7 @@
             >
               <span class="header_wrapper">
                 <img
-                  :src="getIcon(headerName)"
+                  :src="`/images/icon-${headerName}.svg`"
                   :alt="headerName"
                   :title="$t(`sceneries.${headerName}`)"
                 />
@@ -38,7 +38,7 @@
                 <img
                   class="sort-icon"
                   v-if="sorterActive.headerName == headerName"
-                  :src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
+                  :src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
                   alt="sort icon"
                 />
               </span>
@@ -79,16 +79,16 @@
                 </span>
 
                 <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                  <img :src="getIcon('abandoned')" alt="non-public" :title="$t('desc.abandoned')" />
+                  <img src="/images/icon-abandoned.svg" alt="non-public" :title="$t('desc.abandoned')" />
                 </span>
 
                 <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                  <img :src="getIcon('lock')" alt="non-public" :title="$t('desc.non-public')" />
+                  <img src="/images/icon-lock.svg" alt="non-public" :title="$t('desc.non-public')" />
                 </span>
 
                 <span v-else>
                   <img
-                    :src="getIcon('unavailable')"
+                    src="/images/icon-unavailable.svg"
                     alt="unavailable"
                     :title="$t('desc.unavailable')"
                   />
@@ -185,7 +185,7 @@
                 <img
                   class="icon-info"
                   v-if="station.generalInfo.SUP"
-                  :src="getIcon('SUP')"
+                  src="/images/icon-SUP.svg"
                   alt="SUP (RASP-UZK)"
                   :title="$t('desc.SUP')"
                 />
@@ -195,7 +195,7 @@
                 <img
                   class="icon-info"
                   v-if="station.generalInfo.signalType"
-                  :src="getIcon(station.generalInfo.signalType)"
+                  :src="`/images/icon-${station.generalInfo.signalType}.svg`"
                   :alt="station.generalInfo.signalType"
                   :title="$t('desc.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
                 />
@@ -205,7 +205,7 @@
                 <img
                   class="icon-info"
                   v-if="station.generalInfo && station.generalInfo.routes.sblRouteNames.length > 0"
-                  :src="getIcon('SBL')"
+                  src="/images/icon-SBL.svg"
                   alt="SBL"
                   :title="$t('desc.SBL') + `${station.generalInfo.routes.sblRouteNames.join(',')}`"
                 />
@@ -215,7 +215,7 @@
             <td class="station_info" v-else>
               <img
                 class="icon-info"
-                :src="getIcon('unknown')"
+                src="/images/icon-unknown.svg"
                 alt="icon-unknown"
                 :title="$t('desc.unknown')"
               />
@@ -282,10 +282,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import imageMixin from '../../mixins/imageMixin';
-import returnBtnMixin from '../../mixins/returnBtnMixin';
 import stationInfoMixin from '../../mixins/stationInfoMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -299,13 +297,13 @@ import StationStatusBadge from '../Global/StationStatusBadge.vue';
 export default defineComponent({
   props: {
     stations: {
-      type: Array as () => Station[],
+      type: Array as PropType<Station[]>,
       required: true
     }
   },
 
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
+  mixins: [styleMixin, dateMixin, stationInfoMixin],
 
   data: () => ({
     headIconsIds,

src/components/TrainsView/TrainInfo.vue

@@ -40,7 +40,7 @@
         <img
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
           class="image-warning"
-          :src="getIcon('warning')"
+          src="/images/icon-warning.svg"
           :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
             train.timetableData
           )})`"
@@ -106,7 +106,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
@@ -114,6 +113,9 @@ import ProgressBar from '../Global/ProgressBar.vue';
 import TrainThumbnail from '../Global/TrainThumbnail.vue';
 
 export default defineComponent({
+  mixins: [trainInfoMixin, styleMixin],
+  components: { ProgressBar, TrainThumbnail },
+
   props: {
     train: {
       type: Object as () => Train,
@@ -123,9 +125,7 @@ export default defineComponent({
       type: Boolean,
       default: true
     }
-  },
-  mixins: [trainInfoMixin, imageMixin, styleMixin],
-  components: { ProgressBar, TrainThumbnail }
+  }
 });
 </script>
 

src/components/TrainsView/TrainOptions.vue

@@ -3,7 +3,7 @@
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
     <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
-      <img :src="getIcon('filter2')" alt="Open filters" />
+      <img src="/images/icon-filter2.svg" alt="Open filters icon" />
       {{ $t('options.filters') }} [F]
       <span class="active-indicator" v-if="currentOptionsActive"></span>
     </button>
@@ -23,7 +23,7 @@
                 v-model="searchedTrain"
               />
               <button class="search-exit">
-                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" @click="onInputClear('train')" />
               </button>
             </div>
 
@@ -36,7 +36,7 @@
                 v-model="searchedDriver"
               />
               <button class="search-exit">
-                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
+                <img src="/images/icon-exit.svg" alt="Driver search clear icon" @click="onInputClear('driver')" />
               </button>
             </div>
           </div>
@@ -86,13 +86,12 @@
 
 <script lang="ts">
 import { defineComponent, inject, PropType } from 'vue';
-import imageMixin from '../../mixins/imageMixin';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
 import { TrainFilter } from '../../scripts/interfaces/Trains/TrainFilter';
 
 export default defineComponent({
-  mixins: [imageMixin, keyMixin],
+  mixins: [keyMixin],
 
   props: {
     sorterOptionIds: {

src/components/TrainsView/TrainSchedule.vue

@@ -71,7 +71,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import imageMixin from '../../mixins/imageMixin';
 import Train from '../../scripts/interfaces/Train';
 import TrainStop from '../../scripts/interfaces/TrainStop';
 import { useStore } from '../../store/store';
@@ -87,7 +86,7 @@ export default defineComponent({
     }
   },
 
-  mixins: [dateMixin, imageMixin],
+  mixins: [dateMixin],
 
   emits: ['click'],
 
@@ -146,7 +145,7 @@ export default defineComponent({
 
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
+      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/components/TrainsView/TrainTable.vue

@@ -35,7 +35,6 @@
 <script lang="ts">
 import { computed, defineComponent, inject, PropType, Ref } from 'vue';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
-import returnBtnMixin from '../../mixins/returnBtnMixin';
 import Train from '../../scripts/interfaces/Train';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
@@ -51,7 +50,7 @@ export default defineComponent({
     }
   },
 
-  mixins: [returnBtnMixin, modalTrainMixin],
+  mixins: [modalTrainMixin],
 
   setup(props) {
     const store = useStore();

src/mixins/imageMixin.ts

@@ -1,13 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    getIcon(name: string, ext = 'svg') {
-      return new URL(`../assets/icon-${name}.${ext}`, import.meta.url).href;
-    },
-
-    getImage(name: string) {
-      return new URL(`../assets/${name}`, import.meta.url).href;
-    }
-  }
-});

src/mixins/returnBtnMixin.ts

@@ -1,34 +0,0 @@
-import { defineComponent } from 'vue';
-import imageMixin from './imageMixin';
-
-export default defineComponent({
-  mixins: [imageMixin],
-
-  data() {
-    return {
-      icons: {
-        arrow: this.getIcon('arrow-asc')
-      },
-
-      showReturnButton: false
-    };
-  },
-
-  methods: {
-    scrollToTop() {
-      window.scrollTo({ top: 0 });
-    },
-
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight * 0.35;
-    }
-  },
-
-  activated() {
-    window.addEventListener('wheel', this.handleScroll);
-  },
-
-  deactivated() {
-    window.removeEventListener('wheel', this.handleScroll);
-  }
-});

src/mixins/trainInfoMixin.ts

@@ -1,11 +1,8 @@
 import { defineComponent } from 'vue';
 import Train from '../scripts/interfaces/Train';
 import TrainStop from '../scripts/interfaces/TrainStop';
-import imageMixin from './imageMixin';
 
 export default defineComponent({
-  mixins: [imageMixin],
-
   data: () => ({
     STATS: {
       main: [
@@ -155,7 +152,7 @@ export default defineComponent({
 
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
+      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/views/JournalTimetables.vue

@@ -37,7 +37,6 @@
 import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
-import imageMixin from '../mixins/imageMixin';
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
 import modalTrainMixin from '../mixins/modalTrainMixin';
@@ -71,7 +70,7 @@ export default defineComponent({
     JournalHeader,
     JournalTimetablesList
   },
-  mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
+  mixins: [dateMixin, routerMixin, modalTrainMixin],
 
   name: 'JournalTimetables',
 

src/views/SceneryView.vue

@@ -20,7 +20,7 @@
       <div class="scenery-left" v-if="!timetableOnly">
         <div class="scenery-actions">
           <button class="back-btn btn" :title="$t('scenery.return-btn')" @click="navigateTo('/')">
-            <img :src="getIcon('back')" alt="Back to scenery" />
+            <img src="/images/icon-back.svg" alt="Back to scenery" />
           </button>
         </div>
 
@@ -65,7 +65,6 @@ 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',
@@ -83,7 +82,7 @@ export default defineComponent({
     SceneryDispatchersHistory
   },
 
-  mixins: [routerMixin, imageMixin],
+  mixins: [routerMixin],
 
   data: () => ({
     viewModes: [