optymalizacja zapytań; filtr scenerii pocz.

src/components/JournalView/JournalOptions.vue

@@ -132,8 +132,8 @@ export default defineComponent({
 
     optionsType: {
       type: String,
-      required: true
+      required: true,
-    }
+    },
   },
 
   data() {
@@ -249,10 +249,6 @@ export default defineComponent({
       });
     },
 
-    focusEnd() {
-      console.log('focus end');
-    },
-
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;

src/locales/en.json

@@ -99,19 +99,20 @@
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",
     "search-author": "Timetable author name",
+    "search-issuedFrom": "Origin scenery name",
     "search-timetables-date": "Timetable date (CEST / GMT+2)",
     "search-dispatchers-date": "Service date (CEST / GMT+2)",
 
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
-    "sort-distance": "distance",
+    "sort-routeDistance": "route distance",
     "sort-timetable": "train no.",
     "sort-progress": "route progress",
     "sort-delay": "current delay",
     "sort-id": "timetable id",
 
-    "sort-total-stops": "total stops",
+    "sort-allStopsCount": "total stops",
     "sort-beginDate": "date",
     "sort-timetableId": "timetable ID",
     "sort-timestampFrom": "date",

src/locales/pl.json

@@ -99,11 +99,12 @@
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii",
     "search-author": "Nick autora rozkładu jazdy",
+    "search-issuedFrom": "Sceneria początkowa",
     "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-total-stops": "stacje",
+    "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
     "sort-timetableId": "ID rozkładu",
     "sort-timestampFrom": "data",

src/scripts/interfaces/api/TimetablesQueryParams.ts

@@ -0,0 +1,18 @@
+import { JournalTimetableSorter } from '../../../types/Journal/JournalTimetablesTypes';
+
+export interface TimetablesQueryParams {
+  driverName?: string;
+  trainNo?: string;
+  authorName?: string;
+  timestampFrom?: number;
+  timestampTo?: number;
+  issuedFrom?: string;
+
+  countFrom?: number;
+  countLimit?: number;
+
+  fulfilled?: number;
+  terminated?: number;
+
+  sortBy?: JournalTimetableSorter['id'];
+}

src/types/Journal/JournalTimetablesTypes.ts

@@ -1,6 +1,6 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
 
-export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher'; 
+export type JournalTimetableSearchKey = 'search-driver' | 'search-train' | 'search-date' | 'search-dispatcher' | 'search-issuedFrom'; 
 
 export type JournalTimetableSearchType = {
   [key in JournalTimetableSearchKey]: string;
@@ -13,6 +13,6 @@ export interface JournalTimetableFilter {
 }
 
 export interface JournalTimetableSorter {
-  id:  'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  id: 'timetableId' | 'beginDate' | 'routeDistance' | 'allStopsCount';
-  dir: -1 | 1;
+  dir: 'asc' | 'desc';
 }

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', 'total-stops']"
+        :sorter-option-ids="['timetableId', 'beginDate', 'routeDistance', 'allStopsCount']"
         :filters="journalTimetableFilters"
         :currentOptionsActive="currentOptionsActive"
         :data-status="dataStatus"
@@ -64,7 +64,6 @@ import { JournalTimetableSorter } from '../types/Journal/JournalTimetablesTypes'
 import dateMixin from '../mixins/dateMixin';
 import routerMixin from '../mixins/routerMixin';
 import { DataStatus } from '../scripts/enums/DataStatus';
-import { JournalFilterType } from '../scripts/enums/JournalFilterType';
 import { TimetableHistory } from '../scripts/interfaces/api/TimetablesAPIData';
 import { URLs } from '../scripts/utils/apiURLs';
 import { useStore } from '../store/store';
@@ -77,6 +76,8 @@ import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesC
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
 import { LocationQuery } from 'vue-router';
+import { TimetablesQueryParams } from '../scripts/interfaces/api/TimetablesQueryParams';
+import { JournalFilterType } from '../scripts/enums/JournalFilterType';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
@@ -93,8 +94,7 @@ export default defineComponent({
   },
 
   data: () => ({
-    currentQuery: '',
+    currentQueryParams: {} as TimetablesQueryParams,
-    currentQueryArray: [] as string[],
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -113,13 +113,14 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 'desc' });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
     const searchersValues = reactive({
       'search-train': '',
       'search-driver': '',
       'search-dispatcher': '',
+      'search-issuedFrom': '',
       'search-date': '',
     } as JournalTimetableSearchType);
 
@@ -156,6 +157,8 @@ export default defineComponent({
   beforeRouteUpdate(to, _) {
     this.handleQueries(to.query);
     this.fetchHistoryData();
+
+    console.log('test');
   },
 
   activated() {
@@ -163,7 +166,6 @@ export default defineComponent({
     this.fetchHistoryData();
   },
 
-
   methods: {
     handleScroll(e: Event) {
       const listElement = e.target as HTMLElement;
@@ -198,10 +200,12 @@ export default defineComponent({
     async addHistoryData() {
       this.scrollDataLoaded = false;
 
-      const countFrom = this.timetableHistory.length;
+      this.currentQueryParams['countFrom'] = this.timetableHistory.length;
 
       const responseData: TimetableHistory[] = await (
-        await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}&countFrom=${countFrom}`)
+        await axios.get(`${TIMETABLES_API_URL}`, {
+          params: { ...this.currentQueryParams },
+        })
       ).data;
 
       if (!responseData) return;
@@ -216,57 +220,52 @@ export default defineComponent({
     },
 
     async fetchHistoryData() {
-      // if(this.dataStatus == DataStatus.Loading) return;
+      const driverName = this.searchersValues['search-driver'].trim() || undefined;
-
+      const trainNo = this.searchersValues['search-train'].trim() || undefined;
-      const queries: string[] = [];
+      const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
-
+      const dateString = this.searchersValues['search-date'].trim() || undefined;
-      const driverName = this.searchersValues['search-driver'].trim();
+      const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
-      const trainNo = this.searchersValues['search-train'].trim();
-      const authorName = this.searchersValues['search-dispatcher'].trim();
-      const dateString = this.searchersValues['search-date'].trim();
 
       const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
-      if (driverName) queries.push(`driverName=${driverName}`);
-      if (trainNo)
-        queries.push(trainNo.startsWith('#') ? `timetableId=${trainNo.replace('#', '')}` : `trainNo=${trainNo}`);
-      if (authorName) queries.push(`authorName=${authorName}`);
-      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
-
-      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
-      if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
-      else if (this.sorterActive.id == 'total-stops') queries.push('sortBy=allStopsCount');
-      else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
-      // else queries.push('sortBy=timetableId');
-
-      queries.push('countLimit=15');
-
       switch (this.journalFilterActive.id) {
         case JournalFilterType.abandoned:
-          queries.push('fulfilled=0', 'terminated=1');
+          this.currentQueryParams['fulfilled'] = 0;
+          this.currentQueryParams['terminated'] = 1;
           break;
 
         case JournalFilterType.active:
-          queries.push('terminated=0');
+          this.currentQueryParams['terminated'] = 0;
           break;
 
         case JournalFilterType.fulfilled:
-          queries.push('fulfilled=1');
+          this.currentQueryParams['fulfilled'] = 1;
           break;
 
         default:
           break;
       }
 
-      if (this.currentQuery != queries.join('&')) this.dataStatus = DataStatus.Loading;
+      this.currentQueryParams['driverName'] = driverName;
+      this.currentQueryParams['trainNo'] = trainNo;
 
-      this.currentQuery = queries.join('&');
+      this.currentQueryParams['countFrom'] = undefined;
-      this.currentQueryArray = queries;
+      this.currentQueryParams['countLimit'] = undefined;
+
+      this.currentQueryParams['authorName'] = authorName;
+      this.currentQueryParams['timestampFrom'] = timestampFrom;
+      this.currentQueryParams['timestampTo'] = timestampTo;
+      this.currentQueryParams['issuedFrom'] = issuedFrom;
+      this.currentQueryParams['sortBy'] = this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;
+
+      this.dataStatus = DataStatus.Loading;
 
       try {
         const responseData: TimetableHistory[] = await (
-          await axios.get(`${TIMETABLES_API_URL}?${this.currentQuery}`)
+          await axios.get(`${TIMETABLES_API_URL}`, {
+            params: this.currentQueryParams,
+          })
         ).data;
 
         if (!responseData) {
@@ -302,4 +301,3 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../styles/JournalSection.scss';
 </style>
-