rozbudowane filtry dziennika RJ

src/components/JournalView/JournalOptions.vue

@@ -74,16 +74,23 @@
           </div>
 
           <h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
-          <div class="options_filters">
+
-            <button
+          <div class="options_filter-sections" v-if="filterList">
-              v-for="filter in filters"
+            <section class="filter-section" v-for="section in JournalFilterSection">
-              class="filter-option btn--option"
+              <p>{{ $t(`options.filter-section-${section}`) }}</p>
-              :class="{ checked: journalFilterActive.id === filter.id }"
+
-              :id="filter.id"
+              <div class="options_filters">
-              @click="onFilterChange(filter)"
+                <button
-            >
+                  v-for="filter in filterList.filter((f) => f.filterSection == section)"
-              {{ $t(`options.filter-${filter.id}`) }}
+                  class="filter-option btn--option"
-            </button>
+                  :class="{ checked: filter.isActive }"
+                  :id="filter.id"
+                  @click="onFilterChange(filter)"
+                >
+                  {{ $t(`options.filter-${filter.id}`) }}
+                </button>
+              </div>
+            </section>
           </div>
         </div>
       </div>
@@ -103,7 +110,7 @@ import { useStore } from '../../store/store';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 import { JournalFilterSection } from '../../scripts/enums/JournalFilterType';
-import { JournalTimetableFilter } from '../../scripts/types/JournalTimetablesTypes';
+import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
@@ -117,7 +124,7 @@ export default defineComponent({
     },
 
     filters: {
-      type: Array as PropType<JournalTimetableFilter[]>,
+      type: Array as PropType<JournalFilter[]>,
       default: [],
     },
 
@@ -156,7 +163,8 @@ export default defineComponent({
     return {
       searchersValues: inject('searchersValues') as { [key: string]: string },
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
+      // journalFilterActive: inject('journalFilterActive') as JournalFilter,
+      filterList: inject('filterList') as JournalFilter[] | undefined,
     };
   },
 
@@ -257,8 +265,11 @@ export default defineComponent({
       this.$emit('onSearchConfirm');
     },
 
-    onFilterChange(filter: JournalTimetableFilter) {
+    onFilterChange(filter: JournalFilter) {
-      this.journalFilterActive = filter;
+      // this.journalFilterActive = filter;
+      this.filterList?.filter((f) => f.filterSection === filter.filterSection).forEach((f) => (f.isActive = false));
+      filter.isActive = true;
+
       this.$emit('onSearchConfirm');
     },
 

src/constants/Journal/JournalTimetablesConsts.ts

@@ -1,28 +1,46 @@
-import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+import { JournalFilterSection, JournalFilterType } from '../../scripts/enums/JournalFilterType';
-import { JournalTimetableFilter } from '../../scripts/types/JournalTimetablesTypes';
+import { JournalFilter } from '../../scripts/types/JournalTimetablesTypes';
 
-export const journalTimetableFilters: JournalTimetableFilter[] = [
+export const journalTimetableFilters: JournalFilter[] = [
   {
     id: JournalFilterType.ALL,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
     isActive: true,
   },
 
   {
     id: JournalFilterType.ACTIVE,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
     isActive: false,
   },
 
   {
     id: JournalFilterType.FULFILLED,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
     isActive: false,
   },
 
   {
     id: JournalFilterType.ABANDONED,
-    filterSection: 'timetable-status',
+    filterSection: JournalFilterSection.TIMETABLE_STATUS,
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.TWR_SKR,
+    filterSection: JournalFilterSection.TWRSKR,
+    isActive: true,
+  },
+
+  {
+    id: JournalFilterType.TWR,
+    filterSection: JournalFilterSection.TWRSKR,
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.SKR,
+    filterSection: JournalFilterSection.TWRSKR,
     isActive: false,
   },
 ];

src/locales/en.json

@@ -106,7 +106,7 @@
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
-    "sort-distance": "route distance",
+    "sort-routeDistance": "route distance",
     "sort-timetable": "train no.",
     "sort-progress": "route progress",
     "sort-delay": "current delay",
@@ -122,6 +122,7 @@
     "filter-withComments": "COMMENTS",
     "filter-twr": "HIGH RISK CARGO",
     "filter-skr": "EXCEEDED GAUGE",
+    "filter-twr-skr": "ALL TYPES",
     "filter-common": "NO WARNINGS",
     "filter-passenger": "PASSENGER",
     "filter-freight": "FREIGHT",
@@ -132,6 +133,9 @@
     "filter-reset": "RESET FILTERS",
     "filter-clear": "CLEAR FILTERS",
 
+    "filter-section-timetable-status": "TIMETABLE STATUS",
+    "filter-section-twrskr": "WARNINGS",
+
     "filter-all": "ALL ENTRIES",
     "filter-abandoned": "ABANDONED",
     "filter-fulfilled": "FULFILLED",

src/locales/pl.json

@@ -103,7 +103,7 @@
     "search-timetables-date": "Data rozkładu jazdy (czas polski)",
     "search-dispatchers-date": "Data służby (czas polski)",
 
-    "sort-distance": "kilometraż",
+    "sort-routeDistance": "kilometraż",
     "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
     "sort-timetableId": "ID rozkładu",
@@ -123,6 +123,7 @@
     "filter-noComments": "BEZ UWAG",
     "filter-twr": "WYS. RYZYKA",
     "filter-skr": "SKRAJNIA",
+    "filter-twr-skr": "WSZYSTKIE",
     "filter-common": "ZWYKŁE",
     "filter-passenger": "PASAŻERSKIE",
     "filter-freight": "TOWAROWE",
@@ -133,6 +134,9 @@
     "filter-reset": "ZRESETUJ FILTRY",
     "filter-clear": "WYŁĄCZ FILTRY",
 
+    "filter-section-timetable-status": "STATUS ROZKŁADU JAZDY",
+    "filter-section-twrskr": "UWAGI",
+
     "filter-all": "WSZYSTKIE",
     "filter-abandoned": "PORZUCONE",
     "filter-fulfilled": "WYPEŁNIONE",

src/scripts/enums/JournalFilterType.ts

@@ -5,10 +5,10 @@ export const enum JournalFilterType {
   ALL = 'all',
   TWR = 'twr',
   SKR = 'skr',
+  TWR_SKR = 'twr-skr',
 }
 
 export enum JournalFilterSection {
   TIMETABLE_STATUS = 'timetable-status',
-  TWR = 'twr',
+  TWRSKR = 'twrskr',
-  SKR = 'skr',
 }

src/scripts/interfaces/api/TimetablesQueryParams.ts

@@ -14,5 +14,8 @@ export interface TimetablesQueryParams {
   fulfilled?: number;
   terminated?: number;
 
+  twr?: number;
+  skr?: number;
+
   sortBy?: JournalTimetableSorter['id'];
 }

src/scripts/managers/trainFilterManager.ts

@@ -44,7 +44,7 @@ function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriv
           return !train.timetableData?.SKR;
 
         case TrainFilterType.common:
-          return train.timetableData?.SKR ||  train.timetableData?.TWR;
+          return train.timetableData?.SKR || train.timetableData?.TWR;
 
         case TrainFilterType.passenger:
           return !/^[AMRE]\D{2}$/.test(train.timetableData?.category || '');
@@ -81,7 +81,7 @@ function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: numb
         if (a.mass > b.mass) return sorterActive.dir;
         return -sorterActive.dir;
 
-      case 'distance':
+      case 'routeDistance':
         if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
 
         return -sorterActive.dir;

src/scripts/types/JournalTimetablesTypes.ts

@@ -13,7 +13,7 @@ export type JournalTimetableSearchType = {
   [key in JournalTimetableSearchKey]: string;
 };
 
-export interface JournalTimetableFilter {
+export interface JournalFilter {
   id: JournalFilterType;
   filterSection: string;
   isActive: boolean;

src/store/journalFiltersStore.ts

@@ -1,6 +1,9 @@
 import { defineStore } from 'pinia';
 
 export const useJournalFiltersStore = defineStore('journalFiltersStore', {
-  state: () => ({}),
+  state: () => ({
+    timetableFilters: {
       
+    },
+  }),
 });

src/styles/filters_options.scss

@@ -82,12 +82,16 @@ h1.option-title {
   padding: 0.25em 0.25em 0 0;
 }
 
+.options_filter-sections section {
+  margin: 0.5em 0;
+}
+
 .options_filters {
   display: flex;
   flex-wrap: wrap;
 
   gap: 0.5em;
-  margin: 0.5em 0 0 0;
+  margin: 0.25em 0;
 }
 
 .sort-option,
@@ -159,4 +163,8 @@ h1.option-title {
   .options_sorters {
     justify-content: center;
   }
+
+  .filter-section {
+    text-align: center;
+  }
 }

src/views/JournalTimetables.vue

@@ -7,7 +7,7 @@
         @on-search-confirm="fetchHistoryData"
         @on-options-reset="resetOptions"
         @on-refresh-data="fetchHistoryData"
-        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'allStopsCount']"
+        :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
         :filters="journalTimetableFilters"
         :currentOptionsActive="currentOptionsActive"
         :data-status="dataStatus"
@@ -78,7 +78,11 @@ import { useStore } from '../store/store';
 import { LocationQuery } from 'vue-router';
 import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams';
 import { JournalFilterType } from '../scripts/enums/JournalFilterType';
-import { JournalTimetableSearchType, JournalTimetableSorter } from '../scripts/types/JournalTimetablesTypes';
+import {
+  JournalFilter,
+  JournalTimetableSearchType,
+  JournalTimetableSorter,
+} from '../scripts/types/JournalTimetablesTypes';
 import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
@@ -116,7 +120,9 @@ export default defineComponent({
 
   setup() {
     const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
-    const journalFilterActive = ref(journalTimetableFilters[0]);
+    // const journalFilterActive = ref(journalTimetableFilters[0]);
+    const initFilters: readonly JournalFilter[] = JSON.parse(JSON.stringify(journalTimetableFilters));
+    const filterList = reactive([...initFilters]);
 
     const searchersValues = reactive({
       'search-train': '',
@@ -131,14 +137,14 @@ export default defineComponent({
 
     provide('searchersValues', searchersValues);
     provide('sorterActive', sorterActive);
-    provide('journalFilterActive', journalFilterActive);
+    provide('filterList', filterList);
 
     const scrollElement: Ref<HTMLElement | null> = ref(null);
 
     return {
       sorterActive,
-      journalFilterActive,
       searchersValues,
+      filterList,
 
       countFromIndex,
       countLimit,
@@ -194,7 +200,7 @@ export default defineComponent({
     resetOptions() {
       this.setSearchers('', '', '', '', '');
 
-      this.journalFilterActive = this.journalTimetableFilters[0];
+      // this.journalFilterActive = this.journalTimetableFilters[0];
       this.sorterActive.id = 'timetableId';
 
       this.fetchHistoryData();
@@ -234,29 +240,49 @@ export default defineComponent({
 
       const queryParams: TimetablesQueryParams = {};
 
-      switch (this.journalFilterActive.id) {
+      this.filterList
-        case JournalFilterType.ABANDONED:
+        .filter((f) => f.isActive)
-          queryParams['fulfilled'] = 0;
+        .forEach((f) => {
-          queryParams['terminated'] = 1;
+          switch (f.id) {
-          break;
+            case JournalFilterType.ABANDONED:
+              queryParams['fulfilled'] = 0;
+              queryParams['terminated'] = 1;
+              break;
 
-        case JournalFilterType.ACTIVE:
+            case JournalFilterType.ACTIVE:
-          queryParams['fulfilled'] = undefined;
+              queryParams['fulfilled'] = undefined;
-          queryParams['terminated'] = 0;
+              queryParams['terminated'] = 0;
-          break;
+              break;
 
-        case JournalFilterType.FULFILLED:
+            case JournalFilterType.FULFILLED:
-          queryParams['terminated'] = undefined;
+              queryParams['terminated'] = undefined;
-          queryParams['fulfilled'] = 1;
+              queryParams['fulfilled'] = 1;
-          break;
+              break;
-        case JournalFilterType.ALL:
-          queryParams['terminated'] = undefined;
-          queryParams['fulfilled'] = undefined;
-          break;
 
-        default:
+            case JournalFilterType.ALL:
-          break;
+              queryParams['terminated'] = undefined;
-      }
+              queryParams['fulfilled'] = undefined;
+              break;
+
+            case JournalFilterType.TWR_SKR:
+              queryParams['twr'] = undefined;
+              queryParams['skr'] = undefined;
+              break;
+
+            case JournalFilterType.TWR:
+              queryParams['twr'] = 1;
+              queryParams['skr'] = undefined;
+              break;
+
+            case JournalFilterType.SKR:
+              queryParams['twr'] = undefined;
+              queryParams['skr'] = 1;
+              break;
+
+            default:
+              break;
+          }
+        });
 
       queryParams['driverName'] = driverName;
       queryParams['trainNo'] = trainNo;

src/views/TrainsView.vue

@@ -2,7 +2,7 @@
   <section class="trains-view">
     <div class="trains_wrapper">
       <TrainOptions
-        :sorter-option-ids="['distance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
+        :sorter-option-ids="['routeDistance', 'id', 'progress', 'delay', 'mass', 'speed', 'length']"
         :current-options-active="currentOptionsActive"
       />
 
@@ -57,7 +57,7 @@ export default defineComponent({
     const store = useStore();
     const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
 
-    const sorterActive = reactive({ id: 'distance', dir: -1 });
+    const sorterActive = reactive({ id: 'routeDistance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
 
     const currentOptionsActive = ref(false);