Merge pull request #92 from Spythere/development

v1.24.4

package.json

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

src/App.vue

@@ -210,7 +210,7 @@ export default defineComponent({
   overflow-x: hidden;
 
   @include smallScreen() {
-    font-size: calc(0.65rem + 0.8vw);
+    font-size: calc(0.65rem + 0.85vw);
   }
 
   @include screenLandscape() {

src/components/Global/Card.vue

@@ -2,10 +2,9 @@
   <transition name="modal-anim" tag="div">
     <div class="card" v-if="isOpen">
       <div class="card-background" @click="toggleCard(false)"></div>
-      <div class="card-body" ref="wrapper" tabindex="0">
+      <div class="card-body" tabindex="0">
         <slot></slot>
       </div>
-      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleCard(false)"></div>
     </div>
   </transition>
 </template>
@@ -52,8 +51,12 @@ export default defineComponent({
   left: 0;
 
   width: 100%;
-  height: 100vh;
+  height: 100%;
   z-index: 200;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .card-background {
@@ -69,19 +72,22 @@ export default defineComponent({
 }
 
 .card-body {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 210;
-  overflow: auto;
-  max-height: 95vh;
+  position: relative;
 
+  margin: 1em;
+
+  max-height: 95vh;
+  max-height: 95dvh;
+
+  background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
 
-  & > :slotted(div) {
-    background-color: #1a1a1a;
-    width: 95vw;
+  overflow: auto;
+}
+
+@include smallScreen {
+  .card {
+    align-items: flex-start;
   }
 }
 </style>

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -103,7 +103,7 @@ export default defineComponent({
     showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
       if (timetable?.terminated) return;
 
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
+      this.selectModalTrainById(`${timetable.driverName}${timetable.trainNo}`, target);
     }
   }
 });

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -18,8 +18,8 @@
         tabindex="0"
         :key="train.id"
         :data-status="status"
-        @click.prevent="selectModalTrain(train.id, $event.currentTarget)"
-        @keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
+        @click.prevent="selectModalTrain(train, $event.currentTarget)"
+        @keydown.enter="selectModalTrain(train, $event.currentTarget)"
       >
         <span class="user_train">{{ train.trainNo }}</span>
         <span class="user_name">{{ train.driverName }}</span>
@@ -63,7 +63,9 @@ export default defineComponent({
 
       return this.onlineScenery.stationTrains.map((train) => {
         const stop = train.timetableData?.followingStops.find(
-          (stop) => stop.stopNameRAW.toLowerCase() == name.toLowerCase()
+          (stop) =>
+            stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
         );
 
         const status = stop

src/components/SceneryView/SceneryTimetable.vue

@@ -39,8 +39,8 @@
     <div class="timetable-list">
       <transition-group name="list-anim">
         <div
-          style="padding-bottom: 5em"
           v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
+          style="padding-bottom: 5em"
           key="list-loading"
         >
           <Loading />
@@ -65,11 +65,11 @@
         <div
           class="timetable-item"
           v-else
-          v-for="row in sceneryTimetables"
-          :key="row.train.id + row.checkpointStop.arrivalTimestamp"
+          v-for="(row, i) in sceneryTimetables"
+          :key="row.train.id + i"
           tabindex="0"
-          @click.prevent.stop="selectModalTrain(row.train.id, $event.currentTarget)"
-          @keydown.enter.prevent="selectModalTrain(row.train.id, $event.currentTarget)"
+          @click.prevent.stop="selectModalTrain(row.train, $event.currentTarget)"
+          @keydown.enter.prevent="selectModalTrain(row.train, $event.currentTarget)"
         >
           <span class="timetable-general">
             <span class="general-info">
@@ -236,8 +236,6 @@ export default defineComponent({
       if (!this.station) return [];
       if (!this.onlineScenery) return [];
 
-      console.log(this.onlineScenery.scheduledTrains, this.chosenCheckpoint);
-
       return this.onlineScenery.scheduledTrains
         .filter(
           (ct) =>

src/components/StationsView/StationFilterCard.vue

@@ -33,12 +33,13 @@
           <div class="card_title flex">{{ $t('filters.title') }}</div>
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
-          <div class="changed-filters" v-if="changedFilters.length > 0">
-            {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+          <div class="changed-filters" :data-active="changedFilters.length > 0">
+            <template v-if="changedFilters.length > 0">
+              {{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
+            </template>
+            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
           </div>
 
-          <div class="changed-filters" v-else>{{ $t('filters.no-changed-filters') }}</div>
-
           <section class="card_options">
             <div
               class="option-section"
@@ -371,6 +372,7 @@ export default defineComponent({
 @import '../../styles/responsive';
 @import '../../styles/card';
 @import '../../styles/animations';
+@import '../../styles/variables';
 
 h3.section-header {
   text-align: center;
@@ -390,6 +392,10 @@ h3.section-header {
 .changed-filters {
   background-color: #111;
   padding: 0.5em;
+
+  &[data-active='true'] {
+    color: lightgreen;
+  }
 }
 
 .card_controls {

src/components/TrainsView/TrainModal.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 
   computed: {
     chosenTrain() {
-      return this.store.trainList.find((train) => train.id == this.store.chosenModalTrainId);
+      return this.store.trainList.find((train) => train.modalId == this.store.chosenModalTrainId);
     }
   },
 
@@ -29,8 +29,15 @@ export default defineComponent({
     chosenTrain(train: Train | undefined) {
       this.$nextTick(() => {
         if (train) {
+          document.body.classList.add('no-scroll');
           const contentEl = this.$refs['content'] as HTMLElement;
           contentEl.focus();
+        } else {
+          (this.store.modalLastClickedTarget as any)?.focus();
+
+          setTimeout(() => {
+            document.body.classList.remove('no-scroll');
+          }, 90);
         }
       });
     }
@@ -47,12 +54,14 @@ export default defineComponent({
   left: 0;
 
   width: 100%;
+  height: 100%;
 
   color: white;
   z-index: 200;
 
   display: flex;
   justify-content: center;
+  align-items: flex-start;
 
   text-align: left;
 }
@@ -73,10 +82,10 @@ export default defineComponent({
   position: relative;
   overflow-y: scroll;
 
-  margin-top: 1em;
-
   width: 95vw;
   max-height: 95vh;
+  max-height: 95dvh;
+  margin-top: 1em;
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
@@ -91,10 +100,4 @@ export default defineComponent({
     }
   }
 }
-
-@include smallScreen {
-  .modal_content {
-    max-height: 85vh;
-  }
-}
 </style>

src/components/TrainsView/TrainTable.vue

@@ -18,8 +18,8 @@
           v-for="train in trains"
           :key="train.id"
           tabindex="0"
-          @click.stop="selectModalTrain(train.id, $event.currentTarget)"
-          @keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
+          @click.stop="selectModalTrain(train, $event.currentTarget)"
+          @keydown.enter="selectModalTrain(train, $event.currentTarget)"
         >
           <TrainInfo :train="train" :extended="false" />
         </li>
@@ -77,17 +77,6 @@ export default defineComponent({
 
       return Status.Data.Loaded;
     }
-  },
-
-  activated() {
-    const query = this.$route.query;
-    if (query.trainNo && query.driverName) {
-      this.searchedDriver = query.driverName.toString();
-      this.searchedTrain = query.trainNo.toString();
-      setTimeout(() => {
-        this.selectModalTrain(query.driverName! + query.trainNo!.toString());
-      }, 20);
-    }
   }
 });
 </script>

src/locales/en.json

@@ -112,8 +112,8 @@
     "filters": "FILTERS",
     "donate": "DONATE",
 
-    "search-button": "Search",
-    "reset-button": "Reset",
+    "search-button": "SEARCH",
+    "reset-button": "RESET",
 
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",

src/mixins/modalTrainMixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
 import { useTooltipStore } from '../store/tooltipStore';
+import { Train } from '../typings/common';
 
 export default defineComponent({
   data() {
@@ -11,20 +12,19 @@ export default defineComponent({
   },
 
   methods: {
-    selectModalTrain(trainId: string, target?: EventTarget | null) {
-      this.store.chosenModalTrainId = trainId;
-      document.body.classList.add('no-scroll');
+    selectModalTrain(train: Train, target?: EventTarget | null) {
+      this.store.chosenModalTrainId = train.modalId;
+      if (target) this.store.modalLastClickedTarget = target;
+    },
+
+    selectModalTrainById(modalId: string, target?: EventTarget | null) {
+      this.store.chosenModalTrainId = modalId;
       if (target) this.store.modalLastClickedTarget = target;
     },
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
       this.tooltipStore.hide();
-
-      setTimeout(() => {
-        (this.store.modalLastClickedTarget as any)?.focus();
-        document.body.classList.remove('no-scroll');
-      }, 150);
     }
   }
 });

src/store/apiStore.ts

@@ -60,8 +60,6 @@ export const useApiStore = defineStore('apiStore', {
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
-        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
-
         const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
 
         this.activeData = response.data;

src/store/mainStore.ts

@@ -36,17 +36,13 @@ export const useMainStore = defineStore('mainStore', {
     }) as MainStoreState,
 
   getters: {
-    checkpointsTrains() {
-      return checkpointsTrains;
-    },
-
     trainList(): Train[] {
       const apiStore = useApiStore();
 
       checkpointsTrains.clear();
       sceneriesTrains.clear();
 
-      const x = (apiStore.activeData?.trains ?? [])
+      return (apiStore.activeData?.trains ?? [])
         .filter((train) => train.timetable || train.online)
         .map((train) => {
           const stock = train.stockString.split(';');
@@ -65,6 +61,7 @@ export const useMainStore = defineStore('mainStore', {
 
           const trainObj = {
             id: train.id,
+            modalId: `${train.driverName}${train.trainNo}`, // simplified id for train modal
 
             trainNo: train.trainNo,
             mass: train.mass,
@@ -131,8 +128,6 @@ export const useMainStore = defineStore('mainStore', {
 
           return trainObj;
         });
-
-      return x;
     },
 
     // computed active sceneries
@@ -143,7 +138,6 @@ export const useMainStore = defineStore('mainStore', {
 
       if (!apiStore.activeData?.activeSceneries) return [];
 
-      console.time('activeSceneryList');
       const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
         if (!train.timetableData) return acc;
 
@@ -238,9 +232,16 @@ export const useMainStore = defineStore('mainStore', {
 
         const station = this.stationList.find((s) => s.name === scenery.name);
 
-        const checkpoints = [scenery.name];
-        if (station?.generalInfo?.checkpoints && station.generalInfo.checkpoints.length > 0)
-          checkpoints.push(...station.generalInfo.checkpoints.filter((cp) => cp !== station.name));
+        let checkpointsSet: Set<string> = new Set();
+
+        // Add checkpoints to active scenery data
+        checkpointsSet.add(scenery.name.toLowerCase());
+
+        station?.generalInfo?.checkpoints.forEach((cpName) => {
+          checkpointsSet.add(cpName.toLowerCase());
+        });
+
+        const checkpoints = Array.from(checkpointsSet);
 
         scenery.stationTrains =
           sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];
@@ -266,8 +267,6 @@ export const useMainStore = defineStore('mainStore', {
         });
       }
 
-      console.timeEnd('activeSceneryList');
-
       return allActiveSceneries;
     },
 

src/typings/common.ts

@@ -41,6 +41,7 @@ export interface RegionCounters {
 
 export interface Train {
   id: string;
+  modalId: string;
   mass: number;
   length: number;
   speed: number;

src/views/TrainsView.vue

@@ -109,7 +109,7 @@ export default defineComponent({
 
     this.$nextTick(() => {
       if (this.trainId) {
-        this.selectModalTrain(this.trainId);
+        this.selectModalTrainById(this.trainId);
       }
     });
   }