filtry pociągów

src/components/TrainsView/TrainOptions.vue

@@ -55,17 +55,23 @@
           </div>
 
           <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+
           <div class="options_filters">
-            <div class="filter-option" v-for="filter in trainFilterList">
+            <div v-for="section in Object.keys(TrainFilterSection)">
-              <button class="btn--option" :data-inactive="!filter.isActive" @click="onFilterChange(filter)">
+              <button
+                class="btn--option"
+                v-for="filter in trainFilterList.filter((f) => f.section == section)"
+                :data-inactive="!filter.isActive"
+                @click="onFilterChange(filter)"
+              >
                 {{ $t(`options.filter-${filter.id}`) }}
               </button>
             </div>
+          </div>
 
-            <div class="filter-actions">
+          <div class="filter-actions">
-              <button class="btn--action" @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
+            <div></div>
-              <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
+            <button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
-            </div>
           </div>
         </div>
       </div>
@@ -80,6 +86,7 @@ import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
+import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
@@ -101,6 +108,7 @@ export default defineComponent({
     return {
       showOptions: false,
       lastSelectedFilter: null as TrainFilter | null,
+      TrainFilterSection,
     };
   },
 
@@ -183,14 +191,17 @@ export default defineComponent({
   margin: 0 auto;
 }
 
-.filter-option {
+.options_filters div {
-  button {
+  display: flex;
-    color: white;
+  width: 100%;
-    font-weight: bold;
 
-    &[data-disabled='true'] {
+  gap: 0.25em;
-      color: #888;
+  margin-bottom: 0.5em;
-    }
+
+  button {
+    width: 100%;
+    color: $accentCol;
+    font-weight: bold;
   }
 }
 
@@ -201,7 +212,7 @@ export default defineComponent({
 
   margin-top: 1em;
 
-  button {
+  > * {
     width: 100%;
   }
 }

src/components/TrainsView/TrainTable.vue

@@ -12,10 +12,6 @@
           {{ $t('trains.no-trains') }}
         </div>
 
-        <!-- <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length == 0">
-          <b class="warning-timeout">?</b>
-          {{ $t('trains.timeout') }}
-        </div> -->
         <transition-group name="list-anim" tag="ul" class="train-list" v-else>
           <li
             class="train-row"
@@ -70,18 +66,9 @@ export default defineComponent({
         id: string | number;
         dir: number;
       },
-      distanceLimitExceeded: computed(
-        () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
-      ),
     };
   },
 
-  computed: {
-    trainNumbersWithTimeouts() {
-      return this.store.trainList.filter((train) => train.isTimeout).map((train) => train.trainNo);
-    },
-  },
-
   activated() {
     const query = this.$route.query;
     if (query.trainNo && query.driverName) {

src/constants/Trains/TrainOptionsConsts.ts

@@ -1,33 +1,53 @@
-import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
 import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 
 export const trainFilters: TrainFilter[] = [
   {
     id: TrainFilterType.twr,
+    section: TrainFilterSection.TRAIN_TYPE,
     isActive: true,
   },
   {
     id: TrainFilterType.skr,
+    section: TrainFilterSection.TRAIN_TYPE,
     isActive: true,
   },
+
   {
     id: TrainFilterType.passenger,
+    section: TrainFilterSection.TIMETABLE_TYPE,
     isActive: true,
   },
   {
     id: TrainFilterType.freight,
+    section: TrainFilterSection.TIMETABLE_TYPE,
     isActive: true,
   },
   {
     id: TrainFilterType.other,
+    section: TrainFilterSection.TIMETABLE_TYPE,
+    isActive: true,
+  },
+
+  {
+    id: TrainFilterType.withComments,
+    section: TrainFilterSection.COMMENTS,
     isActive: true,
   },
   {
-    id: TrainFilterType.comments,
+    id: TrainFilterType.noComments,
+    section: TrainFilterSection.COMMENTS,
+    isActive: true,
+  },
+
+  {
+    id: TrainFilterType.withTimetable,
+    section: TrainFilterSection.TIMETABLE,
     isActive: true,
   },
   {
     id: TrainFilterType.noTimetable,
+    section: TrainFilterSection.TIMETABLE,
     isActive: true,
   },
 ];

src/locales/en.json

@@ -112,13 +112,15 @@
     "sort-timestampFrom": "date",
     "sort-duration": "duration",
 
-    "filter-comments": "COMMENTS",
+    "filter-noComments": "NO COMMENTS",
-    "filter-twr": "TWR",
+    "filter-withComments": "COMMENTS",
-    "filter-skr": "SKR",
+    "filter-twr": "HIGH RISK CARGO",
+    "filter-skr": "EXCEEDED GAUGE",
     "filter-passenger": "PASSENGER",
     "filter-freight": "FREIGHT",
     "filter-other": "OTHER",
     "filter-noTimetable": "NO TIMETABLE",
+    "filter-withTimetable": "TIMETABLE",
 
     "filter-reset": "RESET FILTERS",
     "filter-clear": "CLEAR FILTERS",
@@ -211,7 +213,7 @@
     "no-stations": "No stations to show here!",
     "scenery-search": "Search for scenery..."
   },
-  "trains": {
+    "trains": {
     "no-trains": "No trains to show here!",
     "loading": "Loading train data...",
     "offline": "Offline ride",

src/locales/pl.json

@@ -115,13 +115,15 @@
     "sort-delay": "opóźnienie",
     "sort-comments": "uwagi ekspl.",
 
-    "filter-comments": "UWAGI EKSPLOATACYJNE",
+    "filter-withComments": "UWAGI EKSPLOATACYJNE",
-    "filter-twr": "TWR",
+    "filter-noComments": "BEZ UWAG",
+    "filter-twr": "WYSOKIEGO RYZYKA",
     "filter-skr": "PRZEKR. SKRAJNIA",
     "filter-passenger": "PASAŻERSKIE",
     "filter-freight": "TOWAROWE",
     "filter-other": "INNE",
     "filter-noTimetable": "BEZ RJ",
+    "filter-withTimetable": "ROZKŁAD JAZDY",
 
     "filter-reset": "ZRESETUJ FILTRY",
     "filter-clear": "WYŁĄCZ FILTRY",

src/scripts/enums/TrainFilterType.ts

@@ -1,9 +1,19 @@
-export const enum TrainFilterType {
+export enum TrainFilterSection {
-    comments = "comments",
+  TRAIN_TYPE = 'TRAIN_TYPE',
-    twr = "twr",
+  TIMETABLE_TYPE = 'TIMETABLE_TYPE',
-    skr = "skr",
+  COMMENTS = 'COMMENTS',
-    passenger = "passenger",
+  TIMETABLE = 'TIMETABLE',
-    freight = "freight",
+}
-    other = "other",
+
-    noTimetable = "noTimetable"
+export const enum TrainFilterType {
+  noComments = 'noComments',
+  withComments = 'withComments',
+
+  twr = 'twr',
+  skr = 'skr',
+  passenger = 'passenger',
+  freight = 'freight',
+  other = 'other',
+  noTimetable = 'noTimetable',
+  withTimetable = 'withTimetable',
 }

src/scripts/managers/trainFilterManager.ts

@@ -24,26 +24,33 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
     const isFiltered = filters.every((f) => {
       if (f.isActive) return true;
 
-      if (!train.timetableData) return filters.find((filter) => filter.id == TrainFilterType.noTimetable)!.isActive;
-
       switch (f.id) {
-        case TrainFilterType.comments:
+        case TrainFilterType.noTimetable:
-          return !train.timetableData.followingStops.some((stop) => stop.comments);
+          return train.timetableData;
+
+        case TrainFilterType.withTimetable:
+          return !train.timetableData;
+
+        case TrainFilterType.noComments:
+          return train.timetableData?.followingStops.some((stop) => stop.comments) || false;
+
+        case TrainFilterType.withComments:
+          return train.timetableData?.followingStops.every((stop) => stop.comments) || true;
 
         case TrainFilterType.twr:
-          return !train.timetableData.TWR;
+          return !train.timetableData?.TWR || true;
 
         case TrainFilterType.skr:
-          return !train.timetableData.SKR;
+          return !train.timetableData?.SKR || true;
 
         case TrainFilterType.passenger:
-          return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+          return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
 
         case TrainFilterType.freight:
-          return !train.timetableData.category.startsWith('T');
+          return !train.timetableData?.category.startsWith('T');
 
         case TrainFilterType.other:
-          return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+          return !/^[PXZL]\D{2}$/.test(train.timetableData?.category || '');
 
         default:
           return true;
@@ -53,7 +60,7 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
     return (
       (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
       (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) &&
-      (!train.timetableData ? !train.online : true) &&
+      (!train.timetableData ? train.online : train.timetableData) &&
       isFiltered
     );
   });

src/types/Trains/TrainOptionsTypes.ts

@@ -1,6 +1,7 @@
-import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
+import { TrainFilterSection, TrainFilterType } from '../../scripts/enums/TrainFilterType';
 
 export interface TrainFilter {
   id: TrainFilterType;
+  section: TrainFilterSection;
   isActive: boolean;
 }