Merge pull request #82 from Spythere/development

Wersja 1.22.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.scss

@@ -1,71 +0,0 @@
-@import './styles/responsive.scss';
-@import './styles/variables.scss';
-@import './styles/global.scss';
-@import './styles/animations.scss';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
-
-// APP
-#app {
-  color: white;
-  font-size: 1rem;
-  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
-}
-
-// CONTAINER
-.app_container {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 100%;
-
-  min-height: 100vh;
-}
-
-.app_main {
-  padding: 0 0.5em;
-}
-
-.warning {
-  background-color: firebrick;
-  text-align: center;
-  padding: 0.5em 0.4em;
-  max-width: 1100px;
-  margin: 0 auto;
-
-  border-radius: 0 0 1em 1em;
-}
-
-// FOOTER
-footer.app_footer {
-  max-width: 100%;
-  padding: 0.5em;
-
-  img {
-    width: 1.1em;
-    vertical-align: text-bottom;
-  }
-
-  z-index: 10;
-
-  background: #111;
-  color: white;
-
-  text-align: center;
-  vertical-align: middle;
-}

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app_container">
+  <div class="app_container" v-cloak>
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
@@ -73,6 +73,12 @@ export default defineComponent({
   },
 
   async mounted() {
+    window.addEventListener('focus', () => {
+      if (Date.now() - this.apiStore.lastFetchData.getTime() < 15000) return;
+
+      this.apiStore.fetchActiveData();
+    });
+
     watch(
       () => this.store.blockScroll,
       (value) => {
@@ -175,4 +181,74 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" src="./App.scss"></style>
+<style lang="scss">
+@import './styles/global';
+@import './styles/animations';
+
+.route {
+  margin: 0 0.2em;
+
+  &-active,
+  &[data-active='true'] {
+    color: $accentCol;
+    font-weight: bold;
+  }
+}
+
+// APP
+#app {
+  color: white;
+  font-size: 1rem;
+  overflow-x: hidden;
+
+  @include smallScreen() {
+    font-size: calc(0.65rem + 0.8vw);
+  }
+
+  @include screenLandscape() {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+}
+
+// CONTAINER
+.app_container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+
+  min-height: 100vh;
+}
+
+.app_main {
+  padding: 0 0.5em;
+}
+
+.warning {
+  background-color: firebrick;
+  text-align: center;
+  padding: 0.5em 0.4em;
+  max-width: 1100px;
+  margin: 0 auto;
+
+  border-radius: 0 0 1em 1em;
+}
+
+// FOOTER
+footer.app_footer {
+  max-width: 100%;
+  padding: 0.5em;
+
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
+  z-index: 10;
+
+  background: #111;
+  color: white;
+
+  text-align: center;
+  vertical-align: middle;
+}
+</style>

src/components/Global/RegionDropdown.vue

@@ -84,7 +84,7 @@ export default defineComponent({
     regionList() {
       return regionsJSON.map((region) => {
         const regionStationCount = this.store.activeSceneryList.filter(
-          (scenery) => scenery.region == region.id
+          (scenery) => scenery.region == region.id && scenery.dispatcherId != -1
         ).length;
 
         const regionTrainCount =

src/components/Global/StockList.vue

@@ -98,7 +98,7 @@ export default defineComponent({
     onImageError(event: Event, stockName: string) {
       let fallbackName = '';
 
-      const isLoco = /.-\d/.test(stockName);
+      const isLoco = /.-\d{3}/.test(stockName);
 
       if (isLoco) {
         fallbackName += 'loco-';

src/components/StationsView/StationTable.vue

@@ -286,7 +286,9 @@
           </tbody>
         </table>
 
-        <Loading v-if="apiStore.dataStatuses.connection == Status.Loading" />
+        <Loading
+          v-if="apiStore.dataStatuses.connection == Status.Loading && stations.length == 0"
+        />
 
         <div class="no-stations" v-else-if="stations.length == 0">
           {{ $t('sceneries.no-stations') }}

src/mixins/trainInfoMixin.ts

@@ -148,11 +148,6 @@ export default defineComponent({
       if (distance < 1000) return `${distance}m`;
 
       return `${(distance / 1000).toPrecision(2)}km`;
-    },
-
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
     }
   }
 });

src/router/index.ts

@@ -1,6 +1,4 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import JournalDispatchersVue from '../views/JournalDispatchers.vue';
-import JournalTimetablesVue from '../views/JournalTimetables.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -38,7 +36,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/timetables',
     name: 'JournalTimetables',
-    component: JournalTimetablesVue,
+    component: () => import('../views/JournalTimetables.vue'),
     props: (route) => ({
       region: route.query.region
     })
@@ -46,7 +44,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/journal/dispatchers',
     name: 'JournalDispatchers',
-    component: JournalDispatchersVue,
+    component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
     })

src/store/apiStore.ts

@@ -24,6 +24,8 @@ export const useApiStore = defineStore('apiStore', {
     donatorsData: [] as API.Donators.Response,
     sceneryData: [] as StationJSONData[],
 
+    lastFetchData: new Date(),
+
     client: undefined as AxiosInstance | undefined,
 
     activeDataScheduler: undefined as number | undefined
@@ -64,20 +66,19 @@ export const useApiStore = defineStore('apiStore', {
     async setupActiveDataFetcher() {
       if (this.activeDataScheduler) return;
 
-      this.dataStatuses.connection = Status.Data.Loading;
-
       this.activeDataScheduler = window.setInterval(() => {
-        if (UPDATE_SECONDS.includes(new Date().getSeconds())) {
-          this.fetchActiveData();
-        }
-      }, 1000);
+        this.fetchActiveData();
+      }, 25000);
     },
 
     async fetchActiveData() {
+      if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
+
       try {
         const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
 
         this.activeData = response.data;
+        this.lastFetchData = new Date();
         this.dataStatuses.connection = Status.Data.Loaded;
 
         console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));

src/styles/global.scss

@@ -1,4 +1,6 @@
-@import 'fonts.scss';
+@import 'fonts';
+@import 'variables';
+@import 'responsive';
 
 :root {
   --clr-primary: #ffc014;