Dodano animację do widoków

src/components/Global/Loading.vue

@@ -30,8 +30,8 @@ export default defineComponent({
 }
 
 .loading-circle {
-  width: 1.25em;
+  width: 1.25rem;
-  padding-top: 1.25em;
+  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">
+              <Loading v-if="isDataLoading || isDataInit" />
-                {{ $t('app.loading') }}
-              </div>
 
               <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">
+              <Loading v-if="isDataLoading || isDataInit" />
-                {{ $t('app.loading') }}
-              </div>
 
               <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">
+      <div :key="store.dataStatuses.trains + selectedCheckpoint">
-        <span class="timetable-item loading" v-if="trainsDataStatus == 0 && computedScheduledTrains.length == 0">
+        <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
-          {{ $t('app.loading') }}
+          <Loading />
-        </span>
+        </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">
+    <Loading v-if="!isDataLoaded && stations.length == 0" />
-      {{ $t('sceneries.no-stations') }}
-    </div>
 
-    <div class="no-stations" v-if="!isDataLoaded && stations.length == 0">
+    <div class="no-stations" v-else-if="stations.length == 0">
-      {{ $t('app.loading') }}
+      {{ $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 :key="store.dataStatuses.trains">
-        <!-- <div class="traffic-warning" v-if="data.">
+        <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
-          {{ $t('trains.distance-exceeded') }}
-        </div> -->
 
-        <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(

src/styles/JournalSection.scss

@@ -16,15 +16,8 @@
   }
 }
 
-
 //Styles
 
-.journal-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .journal-wrapper {
   width: 1350px;
   padding: 1em 0;

src/views/SceneryView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="scenery-view">
-    <div class="scenery-offline" v-if="!stationInfo && isComponentVisible">
+    <div class="scenery-offline" v-if="!stationInfo && isComponentVisible && store.dataStatuses.sceneries == 2">
       <div>{{ $t('scenery.no-scenery') }}</div>
 
       <action-button>
@@ -19,7 +19,7 @@
       </button>
 
       <button
-        v-if="!timetableOnly && currentRegion.id == 'eu' && stationInfo"
+        v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
         class="history-btn btn btn--image"
         @click="
           navigateTo('/journal', {
@@ -46,10 +46,9 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
-import { computed, defineComponent, provide, reactive } from '@vue/runtime-core';
+import { computed, defineComponent, reactive } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
 
-import Station from '@/scripts/interfaces/Station';
 import { useStore } from '@/store/store';
 
 export default defineComponent({
@@ -64,16 +63,15 @@ export default defineComponent({
 
     viewMode: 'info',
 
-    stationInfo: {} as Station | undefined,
     onlineFrom: -1,
   }),
 
+  activated() {},
+
   setup() {
     const route = useRoute();
     const store = useStore();
 
-    const savedSceneryHistory = reactive({});
-
     const timetableOnly = computed(() => (route.query['timetable_only'] == '1' ? true : false));
 
     const isComponentVisible = computed(() => route.path === '/scenery');
@@ -82,17 +80,11 @@ export default defineComponent({
       return store.stationList.find((station) => station.name === route.query.station?.toString().replace(/_/g, ' '));
     });
 
-    provide('savedSceneryHistory', savedSceneryHistory);
-
-    // const onlineFrom = computed(async () => {
-    //   return await (await axios.get(`${URLs.stacjownikAPI}?name=${route.query.station}&historyCount=0`)).data;
-    // });
-
     return {
-      currentRegion: store.region,
       timetableOnly,
       isComponentVisible,
       stationInfo,
+      store,
     };
   },