Dodano animację do widoków

src/components/Global/Loading.vue

@@ -30,8 +30,8 @@ export default defineComponent({
 }
 
 .loading-circle {
-  width: 1.25em;
-  padding-top: 1.25em;
+  width: 1.25rem;
+  padding-top: 1.25rem;
 
   border-radius: 50%;
 

src/components/JournalView/JournalDispatchers.vue

@@ -33,9 +33,7 @@
         <div class="list-wrapper" ref="scrollElement">
           <transition name="warning" mode="out-in">
             <div :key="historyDataStatus.status">
-              <div class="journal_warning loading" v-if="isDataLoading || isDataInit">
-                {{ $t('app.loading') }}
-              </div>
+              <Loading v-if="isDataLoading || isDataInit" />
 
               <div v-else-if="isDataError" class="journal_warning error">
                 {{ $t('app.error') }}
@@ -112,6 +110,7 @@ import DispatcherStats from '@/components/JournalView/DispatcherStats.vue';
 import { URLs } from '@/scripts/utils/apiURLs';
 import { useStore } from '@/store/store';
 import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
+import Loading from '../Global/Loading.vue';
 
 const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -137,7 +136,7 @@ interface DispatcherHistoryItem {
 }
 
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats },
+  components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
   mixins: [dateMixin],
   name: 'JournalDispatchers',
 

src/components/JournalView/JournalTimetables.vue

@@ -30,9 +30,7 @@
         <div class="list-wrapper" ref="scrollElement">
           <transition name="warning" mode="out-in">
             <div :key="historyDataStatus.status">
-              <div class="journal_loading" v-if="isDataLoading || isDataInit">
-                {{ $t('app.loading') }}
-              </div>
+              <Loading v-if="isDataLoading || isDataInit" />
 
               <div v-else-if="isDataError" class="journal_warning error">
                 {{ $t('app.error') }}
@@ -177,6 +175,7 @@ import routerMixin from '@/mixins/routerMixin';
 import { useStore } from '@/store/store';
 import DriverStats from './DriverStats.vue';
 import { TimetableHistory } from '@/scripts/interfaces/api/TimetablesAPIData';
+import Loading from '../Global/Loading.vue';
 
 const PROD_MODE = process.env.VUE_APP_JOURNAL_TIMETABLES_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -185,7 +184,7 @@ const TIMETABLES_API_URL = PROD_MODE
   : 'http://localhost:3001/api/getTimetables';
 
 export default defineComponent({
-  components: { SearchBox, ActionButton, JournalOptions, DriverStats },
+  components: { SearchBox, ActionButton, JournalOptions, DriverStats, Loading },
   mixins: [dateMixin, routerMixin],
 
   name: 'JournalTimetables',
@@ -401,7 +400,6 @@ export default defineComponent({
         this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
 
         console.error(error);
-        
       }
     },
   },

src/components/SceneryView/SceneryTimetable.vue

@@ -30,10 +30,10 @@
     </div>
 
     <transition name="scenery-timetable-list-anim" mode="out-in">
-      <div :key="trainsDataStatus + selectedCheckpoint">
-        <span class="timetable-item loading" v-if="trainsDataStatus == 0 && computedScheduledTrains.length == 0">
-          {{ $t('app.loading') }}
-        </span>
+      <div :key="store.dataStatuses.trains + selectedCheckpoint">
+        <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
+          <Loading />
+        </div>
 
         <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
           {{ $t('scenery.no-timetables') }}
@@ -144,14 +144,13 @@ import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
 import { computed, defineComponent, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
-import { DataStatus } from '@/scripts/enums/DataStatus';
-import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
 import { useStore } from '@/store/store';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
-  components: { SelectBox },
+  components: { SelectBox, Loading },
 
   mixins: [dateMixin, routerMixin],
 
@@ -180,8 +179,6 @@ export default defineComponent({
 
     const store = useStore();
 
-    const trainsDataStatus = store.dataStatuses.trains;
-
     const selectedCheckpoint = ref(
       props.station?.generalInfo?.checkpoints?.length == 0
         ? ''
@@ -216,7 +213,7 @@ export default defineComponent({
       currentURL,
       selectedCheckpoint,
       computedScheduledTrains,
-      trainsDataStatus,
+      store,
     };
   },
 
@@ -317,13 +314,9 @@ h3.timetable-header {
     cursor: pointer;
     z-index: 10;
 
-    &.loading,
     &.empty {
       padding: 1rem;
       font-size: 1.2em;
-    }
-
-    &.empty {
       color: #bbb;
     }
   }

src/components/StationsView/StationTable.vue

@@ -213,12 +213,10 @@
       </table>
     </div>
 
-    <div class="no-stations" v-if="isDataLoaded && stations.length == 0">
-      {{ $t('sceneries.no-stations') }}
-    </div>
+    <Loading v-if="!isDataLoaded && stations.length == 0" />
 
-    <div class="no-stations" v-if="!isDataLoaded && stations.length == 0">
-      {{ $t('app.loading') }}
+    <div class="no-stations" v-else-if="stations.length == 0">
+      {{ $t('sceneries.no-stations') }}
     </div>
   </section>
 </template>
@@ -234,6 +232,7 @@ import { computed, ComputedRef, defineComponent } from '@vue/runtime-core';
 import Station from '@/scripts/interfaces/Station';
 import { StoreData } from '@/scripts/interfaces/StoreData';
 import { useStore } from '@/store/store';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
   props: {
@@ -241,18 +240,17 @@ export default defineComponent({
       type: Array as () => Station[],
       required: true,
     },
-
     sorterActive: {
-      type: Object as () => { index: number; dir: number },
+      type: Object as () => {
+        index: number;
+        dir: number;
+      },
       required: true,
     },
-
     setFocusedStation: { type: Function, required: true },
     changeSorter: { type: Function, required: true },
   },
-
   mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin],
-
   data: () => ({
     likeIcon: require('@/assets/icon-like.svg'),
     spawnIcon: require('@/assets/icon-spawn.svg'),
@@ -265,50 +263,38 @@ export default defineComponent({
     unavailableIcon: require('@/assets/icon-unavailable.svg'),
     unknownIcon: require('@/assets/icon-unknown.svg'),
     abandonedIcon: require('@/assets/icon-abandoned.svg'),
-
     ascIcon: require('@/assets/icon-arrow-asc.svg'),
     descIcon: require('@/assets/icon-arrow-desc.svg'),
-
     headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'],
-
     headIconsIds: ['user', 'spawn', 'timetable'],
-
     lastSelectedStationName: '',
   }),
-
   setup() {
     const store = useStore();
-
     const isDataLoaded = computed(() => {
       return store.dataStatuses.sceneries != DataStatus.Loading;
     });
-
     return {
       isDataLoaded,
     };
   },
-
   methods: {
     setScenery(name: string) {
       const station = this.stations.find((station) => station.name === name);
-
       if (!station) return;
-
       this.lastSelectedStationName = station.name;
-
       this.$router.push({
         name: 'SceneryView',
         query: { station: station.name.replaceAll(' ', '_') },
       });
     },
-
     openForumSite(e: Event, url: string | undefined) {
       if (!url) return;
-
       e.preventDefault();
       window.open(url, '_blank');
     },
   },
+  components: { Loading },
 });
 </script>
 

src/components/TrainsView/TrainTable.vue

@@ -5,19 +5,13 @@
     </button>
 
     <transition name="anim" mode="out-in">
-      <div :key="trainsDataStatus">
-        <!-- <div class="traffic-warning" v-if="data.">
-          {{ $t('trains.distance-exceeded') }}
-        </div> -->
+      <div :key="store.dataStatuses.trains">
+        <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
 
-        <div class="table-info no-trains" v-if="trains.length == 0 && trainsDataStatus != 0">
+        <div class="table-info no-trains" v-if="trains.length == 0 && store.dataStatuses.trains != 0">
           {{ $t('trains.no-trains') }}
         </div>
 
-        <div class="table-info loading" v-if="trains.length == 0 && trainsDataStatus == 0">
-          {{ $t('trains.loading') }}
-        </div>
-
         <ul class="train-list">
           <li
             class="train-row"
@@ -37,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, inject, Ref, watchEffect } from '@vue/runtime-core';
+import { computed, defineComponent, inject, Ref } from '@vue/runtime-core';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
 
@@ -46,14 +40,15 @@ import Train from '@/scripts/interfaces/Train';
 import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
 import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
-import { DataStatus } from '@/scripts/enums/DataStatus';
 import returnBtnMixin from '@/mixins/returnBtnMixin';
 import { useStore } from '@/store/store';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
   components: {
     TrainSchedule,
     TrainInfo,
+    Loading,
   },
 
   mixins: [returnBtnMixin],
@@ -80,8 +75,6 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
 
-    const trainsDataStatus = store.dataStatuses.trains;
-
     const searchedTrain = inject('searchedTrain') as Ref<string>;
     const searchedDriver = inject('searchedDriver') as Ref<string>;
 
@@ -93,7 +86,7 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       currentTrains,
-      trainsDataStatus,
+      store,
 
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       distanceLimitExceeded: computed(