poprawki filtrów poc.

src/components/TrainsView/TrainInfo.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="train-info">
-    <section class="train-route">
+    <section class="train-general">
-      <div class="train_general">
+      <div class="general-info">
         <b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
-        <span class="timetable-id" v-if="train.timetableData"
+        <span class="timetable-id" v-if="train.timetableData">
-          >#{{ train.timetableData.timetableId }}</span
+          #{{ train.timetableData.timetableId }}
-        >
+        </span>
 
         <span
-          class="timetable_warnings"
+          class="timetable-warnings"
           v-if="train.timetableData?.TWR || train.timetableData?.SKR"
         >
-          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')"
+          <span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">
-            >TWR</span
+            TWR
-          >
+          </span>
-          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')"
+          <span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">
-            >SKR</span
+            SKR
-          >
+          </span>
         </span>
 
         <strong>
@@ -35,7 +35,7 @@
         <span>{{ train.driverName }}</span>
       </div>
 
-      <div class="timetable_route" v-if="train.timetableData">
+      <div class="general-timetable" v-if="train.timetableData">
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
         <img
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
@@ -49,27 +49,30 @@
 
       <hr style="margin: 0.25em 0" />
 
-      <div class="timetable_stops" v-if="train.timetableData">
+      <div class="general-stops" v-if="train.timetableData">
         <span v-if="train.timetableData.followingStops.length > 2">
           {{ $t('trains.via-title') }}
           <span v-html="displayStopList(train.timetableData.followingStops)"></span>
         </span>
       </div>
 
-      <div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
+      <div class="general-status">
-        <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
+        <div class="timetable-progress" v-if="train.timetableData">
+          <ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
 
-        <span class="timetable_progress-distance">
+          <span class="progress-distance">
-          &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
+            &nbsp; {{ currentDistance(train.timetableData.followingStops) }} km /
-          <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
+            <span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
-          |
+            |
-          <span v-html="currentDelay(train.timetableData.followingStops)"></span>
+            <span v-html="currentDelay(train.timetableData.followingStops)"></span>
-        </span>
+          </span>
+        </div>
 
-        <div class="train-status-badges">
+        <div class="status-badges">
           <div v-if="!train.currentStationHash" class="train-badge offline">
             {{ $t('trains.scenery-offline') }}
           </div>
+
           <div v-if="!train.online" class="train-badge offline">
             Offline {{ lastSeenMessage(train.lastSeen) }}
           </div>
@@ -181,11 +184,17 @@ export default defineComponent({
   padding: 0 0.25em;
 }
 
-.timetable_stops {
+.train-general {
-  font-size: 0.75em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
 }
 
-.train_general {
+.general-stops {
+  font-size: 0.8em;
+}
+
+.general-info {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -193,55 +202,41 @@ export default defineComponent({
   gap: 0.25em;
   margin-right: 1.5em;
 }
-.train-status-badges {
+.general-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.25em;
+}
+
+.status-badges {
   display: flex;
   flex-wrap: wrap;
 
   gap: 0.25em;
 }
 
-.train-driver {
+.general-timetable {
-  &.supporter {
-    color: orange;
-    text-shadow: orange 0 0 5px;
-  }
-}
-
-.timetable_route {
   display: flex;
   align-items: center;
-
-  margin-top: 0.5em;
 }
 
-.timetable_warnings {
+.timetable-warnings {
   display: flex;
   gap: 0.25em;
 }
 
-.timetable_progress {
+.timetable-progress {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }
 
-.timetable_progress-distance {
+.progress-distance {
   margin-right: 0.25em;
 }
 
-.comments {
-  display: flex;
-  align-items: center;
-
-  font-size: 0.9em;
-
-  margin-top: 1em;
-
-  img {
-    margin-right: 0.5em;
-  }
-}
-
 @include smallScreen() {
   .train-info {
     grid-template-columns: 1fr;
@@ -255,19 +250,13 @@ export default defineComponent({
     font-size: 1.1em;
   }
 
-  .train_general {
+  .general-info,
+  .general-status,
+  .general-timetable {
     justify-content: center;
   }
 
-  .train-status-badges {
+  .timetable-progress {
-    justify-content: center;
-  }
-
-  .timetable_route {
-    justify-content: center;
-  }
-
-  .timetable_progress {
     justify-content: center;
   }
 

src/store/mainStore.ts

@@ -61,7 +61,7 @@ export const useStore = defineStore('store', {
   getters: {
     trainList(): Train[] {
       return (this.activeData?.trains ?? [])
-        .filter((train) => train.online || train.timetable || train.lastSeen > Date.now() - 180000)
+        .filter((train) => train.timetable || train.online)
         .map((train) => {
           const stock = train.stockString.split(';');
           const locoType = stock ? stock[0] : train.stockString;