fixy filtrowania; ogólne

src/App.vue

@@ -6,8 +6,6 @@
       </keep-alive>
     </transition>
 
-    <!-- <UpdateModal /> -->
-
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
@@ -36,7 +34,7 @@
 <script lang="ts">
 import { defineComponent, watch } from 'vue';
 import axios from 'axios';
-import packageInfo from '.././package.json';
+import { version } from '.././package.json';
 
 import Clock from './components/App/Clock.vue';
 
@@ -49,19 +47,19 @@ import TrainModal from './components/TrainsView/TrainModal.vue';
 import StorageManager from './managers/storageManager';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
-import UpdateModal from './components/App/UpdateModal.vue';
+
+const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     AppHeader,
-    TrainModal,
-    UpdateModal
+    TrainModal
   },
 
   data: () => ({
-    VERSION: packageInfo.version,
+    VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
 
@@ -89,12 +87,29 @@ export default defineComponent({
       this.loadLang();
       this.setReleaseURL();
       this.setupOfflineHandling();
+      this.checkAppVersion();
 
       this.apiStore.setupAPIData();
 
       if (!this.isOnProductionHost) document.title = 'Stacjownik Dev';
     },
 
+    checkAppVersion() {
+      if (import.meta.env.DEV) {
+        this.store.isNewUpdate = true;
+
+        return;
+      }
+
+      const storageVersion = StorageManager.getStringValue(STORAGE_VERSION_KEY);
+
+      if (storageVersion === undefined || storageVersion != version) {
+        this.store.isNewUpdate = true;
+
+        StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
+      }
+    },
+
     setupOfflineHandling() {
       this.store.isOffline = !window.navigator.onLine;
 

src/components/App/UpdateModal.vue

@@ -1,19 +1,48 @@
 <template>
-  <div class="update-modal">
-    <AnimatedModal :is-open="true">Test</AnimatedModal>
-  </div>
+  <AnimatedModal :is-open="mainStore.isNewUpdate" @toggle-modal="toggleModal">
+    <div class="modal_content">
+      <h1 class="header">Aktualizacja Stacjownika</h1>
+      <h2>wersja {{ version }}</h2>
+
+      <b>Co nowego?</b>
+      <p>
+         <ul>
+            <li>test</li>
+         </ul>
+      </p>
+    </div>
+  </AnimatedModal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { version } from '../../../package.json';
 import AnimatedModal from '../Global/AnimatedModal.vue';
 
 export default defineComponent({
   components: { AnimatedModal },
+
   data() {
-    return {};
+    return {
+      mainStore: useMainStore(),
+      version: version
+    };
+  },
+
+  methods: {
+    toggleModal(value: boolean) {
+      this.$emit('toggleModal', value);
+    }
   }
 });
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.modal_content {
+  text-align: center;
+  padding: 1em;
+  height: 80vh;
+  min-height: 550px;
+}
+</style>

src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="filteredOneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
       <b>{{ $t('scenery.one-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredOneWayRoutes"
+          v-for="route in oneWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -24,12 +24,12 @@
       </ul>
     </div>
 
-    <div class="routes two-way" v-if="filteredTwoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
       <b>{{ $t('scenery.two-way-routes') }}</b>
 
       <ul class="routes-list">
         <li
-          v-for="route in filteredTwoWayRoutes"
+          v-for="route in twoWayRoutes"
           :key="route.routeName"
           @click="setActiveShowLength(route.routeName)"
         >
@@ -53,9 +53,6 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import Station from '../../../scripts/interfaces/Station';
-import { StationRoutesInfo } from '../../../store/typings';
-
-const routeFilter = (route: StationRoutesInfo) => !route.hidden;
 
 export default defineComponent({
   props: {
@@ -80,12 +77,12 @@ export default defineComponent({
   },
 
   computed: {
-    filteredOneWayRoutes() {
-      return this.station.generalInfo?.routes.single.filter(routeFilter) || [];
+    oneWayRoutes() {
+      return this.station.generalInfo?.routes.single ?? [];
     },
 
-    filteredTwoWayRoutes() {
-      return this.station.generalInfo?.routes.double.filter(routeFilter) || [];
+    twoWayRoutes() {
+      return this.station.generalInfo?.routes.double ?? [];
     }
   }
 });

src/components/StationsView/StationTable.vue

@@ -196,21 +196,22 @@
                 </div>
               </td>
 
-              <td class="station-info" v-if="station.generalInfo">
+              <td class="station-info">
                 <span
+                  v-if="station.generalInfo?.signalType"
                   class="scenery-icon icon-info"
-                  :class="station.generalInfo.controlType.replace('+', '-')"
+                  :class="station.generalInfo?.controlType.replace('+', '-')"
                   :title="
                     $t('sceneries.info.control-type') +
-                    $t(`controls.${station.generalInfo.controlType}`)
+                    $t(`controls.${station.generalInfo?.controlType}`)
                   "
                   v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
                 >
                 </span>
 
                 <img
+                  v-if="station.generalInfo?.signalType"
                   class="icon-info"
-                  v-if="station.generalInfo.signalType"
                   :src="`/images/icon-${station.generalInfo.signalType}.svg`"
                   :alt="station.generalInfo.signalType"
                   :title="
@@ -220,24 +221,23 @@
                 />
 
                 <img
+                  v-if="station.generalInfo?.SUP"
                   class="icon-info"
-                  v-if="station.generalInfo.SUP"
                   src="/images/icon-SUP.svg"
                   alt="SUP (RASP-UZK)"
                   :title="$t('sceneries.info.SUP')"
                 />
 
                 <img
+                  v-if="station.generalInfo?.ASDEK"
                   class="icon-info"
-                  v-if="station.generalInfo.ASDEK"
                   src="/images/icon-ASDEK.svg"
                   alt="dSAT ASDEK"
                   :title="$t('sceneries.info.ASDEK')"
                 />
-              </td>
 
-              <td class="station-info" v-else>
                 <img
+                  v-if="!station.generalInfo"
                   class="icon-info"
                   src="/images/icon-unknown.svg"
                   alt="icon-unknown"
@@ -460,7 +460,7 @@ table {
     }
 
     &.general {
-      width: 10em;
+      width: 11em;
     }
 
     &.header-image {

src/scripts/utils/stationFilterUtils.ts

@@ -56,12 +56,14 @@ export const sortStations = (
 
     case 'routes-single':
       diff =
-        (a.generalInfo?.routes.single.length ?? -1) - (b.generalInfo?.routes.single.length ?? -1);
+        (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
       break;
 
     case 'routes-double':
       diff =
-        (a.generalInfo?.routes.double.length ?? -1) - (b.generalInfo?.routes.double.length ?? -1);
+        (a.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
+        (b.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
       break;
 
     case 'user':

src/store/mainStore.ts

@@ -15,6 +15,7 @@ export const useMainStore = defineStore('store', {
       region: { id: 'eu', value: 'PL1' },
 
       isOffline: false,
+      isNewUpdate: false,
 
       dispatcherStatsName: '',
       dispatcherStatsStatus: Status.Data.Initialized,

src/store/typings.ts

@@ -14,6 +14,8 @@ export interface StoreState {
 
   isOffline: boolean;
 
+  isNewUpdate: boolean;
+
   dispatcherStatsName: string;
   dispatcherStatsData?: API.DispatcherStats.Response;