Filtry dziennika dyżurnych

src/components/JournalView/JournalDispatchers.vue

@@ -1,6 +1,13 @@
 <template>
   <section class="journal-timetables">
     <div class="journal-wrapper">
+      <journal-options
+        @on-filter-change="search"
+        @on-input-change="search"
+        @on-sorter-change="search"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+      />
+
       <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
         <img :src="icons.arrow" alt="return arrow" />
       </button>
@@ -43,7 +50,7 @@
                       </span>
                       <span>
                         <span :data-status="doc.isOnline"
-                          >{{ doc.isOnline ? $t('history.online-since') : 'OFFLINE' }}&nbsp;</span
+                          >{{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;</span
                         >
                         <span>
                           {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
@@ -56,7 +63,7 @@
                         <span v-if="doc.timestampTo">
                           &gt;
                           {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-                          ({{ $t('history.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
+                          ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
                         </span>
                       </span>
                     </div>
@@ -81,7 +88,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, Ref, ref } from 'vue';
+import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -92,7 +99,6 @@ import ActionButton from '@/components/Global/ActionButton.vue';
 import JournalOptions from '@/components/JournalView/JournalOptions.vue';
 
 import { URLs } from '@/scripts/utils/apiURLs';
-import { journalFilters } from '@/data/journalFilters';
 
 const DEV_MODE = true;
 const PROD_MODE = !DEV_MODE || process.env.NODE_ENV === 'production';
@@ -146,18 +152,16 @@ export default defineComponent({
       error: null,
     });
 
-    const sorterActive = ref({ id: 'timetableId', dir: -1 });
+    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
-    const journalFilterActive = ref(journalFilters[0]);
+    const journalFilterActive = ref({});
+    const searchersValues = reactive([{ id: 'search-dispatcher', value: '' }, { id: 'search-station', value: '' }])
 
-    const searchedDriver = ref('');
-    const searchedTrain = ref('');
     const countFromIndex = ref(0);
     const countLimit = 15;
 
-    provide('searchedTrain', searchedTrain);
-    provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
     provide('journalFilterActive', journalFilterActive);
+    provide('searchersValues', searchersValues);
 
     const scrollElement: Ref<HTMLElement | null> = ref(null);
 
@@ -169,10 +173,8 @@ export default defineComponent({
       isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
       isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
 
-      searchedDriver,
-      searchedTrain,
       sorterActive,
-      journalFilterActive,
+      searchersValues,
 
       countFromIndex,
       countLimit,
@@ -215,8 +217,8 @@ export default defineComponent({
       const minsInHour = minsTotal % 60;
 
       return minsTotal > 60
-        ? this.$t('history.hours', { hours: hoursTotal, minutes: minsInHour })
+        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('history.minutes', { minutes: minsTotal });
+        : this.$t('journal.minutes', { minutes: minsTotal });
     },
 
     isAnotherDay(prevIndex: number, currIndex: number) {
@@ -246,7 +248,9 @@ export default defineComponent({
     },
 
     search() {
-      this.fetchHistoryData();
+      this.fetchHistoryData({
+        searchers: this.searchersValues
+      });
 
       this.scrollNoMoreData = false;
       this.scrollDataLoaded = true;
@@ -272,21 +276,33 @@ export default defineComponent({
       this.scrollDataLoaded = true;
     },
 
-    async fetchHistoryData() {
+    async fetchHistoryData(
+      props: {
+        searchers?: JournalSearcher[];
+        filter?: JournalFilter;
+      } = {}
+    ) {
       this.historyDataStatus.status = DataStatus.Loading;
 
       const queries: string[] = [];
+
+      const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
+      const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
+      
+      if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
+      if (station) queries.push(`stationName=${station}`);
+
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
+      else if (this.sorterActive.id == 'duration') queries.push('sortBy=duration');
+      else queries.push('sortBy=timestampFrom');
+
       queries.push('countLimit=15');
 
       this.currentQuery = queries.join('&');
 
-      // sorters; sortBy: duration, timestampFrom (default)
-      // filters; dispatcherName, stationName
-
       try {
-        const responseData: APIResponse | null = await (
+        const responseData: APIResponse | null = await (await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)).data;
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
 
         if (!responseData) {
           this.historyDataStatus.status = DataStatus.Error;
@@ -330,8 +346,8 @@ export default defineComponent({
   }
 }
 
-.journal-wrapper {
+.list-wrapper {
-  max-width: 1100px;
+  margin-top: 1em;
 }
 
 .journal_item {
@@ -353,15 +369,6 @@ export default defineComponent({
     color: salmon;
   }
 }
-
-.journal-current-day {
-  position: sticky;
-  top: -1px;
-
-  padding: 0.5em 0;
-  background-color: salmon;
-}
-
 .journal_day {
   position: relative;
   text-align: center;

src/components/JournalView/JournalOptions.vue

@@ -6,13 +6,23 @@
           <select-box
             :itemList="translatedSorterOptions"
             :defaultItemIndex="0"
-            @selected="changeSorter"
+            @selected="onSorterChange"
             :prefix="$t('journal.sort-prefix')"
           />
         </div>
 
         <div class="content_search">
-          <div class="search-box">
+          <div class="search-box" v-for="search in searchersValues" :key="search.id">
+            <input
+              class="search-input"
+              :placeholder="$t(`journal.${search.id}`)"
+              v-model="search.value"
+              @keydown.enter="onInputSearch"
+            />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="onInputClear(search.id)" />
+          </div>
+          <!-- <div class="search-box">
             <input
               class="search-input"
               v-model="searchedTrain"
@@ -32,21 +42,21 @@
             />
 
             <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
-          </div>
+          </div> -->
 
-          <action-button class="search-button" @click="search">
+          <action-button class="search-button" @click="onInputSearch">
-            {{ $t('history.search') }}
+            {{ $t('journal.search') }}
           </action-button>
         </div>
       </div>
 
       <div class="options_filters">
         <button
-          v-for="filter in journalFilters"
+          v-for="filter in filters"
           class="journal-filter-option btn--option"
           :class="{ checked: journalFilterActive.id === filter.id }"
           :id="filter.id"
-          @click="changeJournalFilter(filter)"
+          @click="onFilterChange(filter)"
         >
           {{ $t(`journal.filter-${filter.id}`) }}
         </button>
@@ -56,68 +66,66 @@
 </template>
 
 <script lang="ts">
-import { journalFilters } from '@/data/journalFilters';
+import { defineComponent, inject, JournalFilter, PropType } from 'vue';
-import { computed, defineComponent, inject, JournalFilter } from 'vue';
-import { useI18n } from 'vue-i18n';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['changedOptions', 'changedFilter'],
+  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+
+    filters: {
+      type: Array as PropType<JournalFilter[]>,
+      default: [],
+    },
+  },
 
   data: () => ({
     exitIcon: require('@/assets/icon-exit.svg'),
-    journalFilters,
   }),
 
   setup() {
-    const { t } = useI18n();
-
-    const sorterOptions = ['timetableId', 'beginDate', 'distance', 'total-stops'];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map((id) => ({
-        id,
-        value: t(`journal.option-${id}`),
-      }))
-    );
-
     return {
-      translatedSorterOptions,
+      searchersValues: inject('searchersValues') as {id: string; value: string}[],
-
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter
+      journalFilterActive: inject('journalFilterActive') as JournalFilter,
     };
   },
 
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`journal.option-${id}`),
+      }));
+    },
+  },
+
   methods: {
-    changeSorter(item: { id: string | number; value: string }) {
+    onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
 
-      this.$emit('changedOptions');
+      this.$emit('onSorterChange');
     },
 
-    changeJournalFilter(filter: JournalFilter) {
+    onFilterChange(filter: JournalFilter) {
       this.journalFilterActive = filter;
-      this.$emit('changedFilter');
+      this.$emit('onFilterChange');
     },
 
-    search() {
+    onInputSearch() {      
-      this.$emit('changedOptions');
+      this.$emit('onInputChange');
     },
 
-    clearDriver() {
+    onInputClear(id: string) {
-      this.searchedDriver = '';
+      this.searchersValues.find(s => s.id == id)!.value = "";
-      this.search();
+      this.onInputSearch();
-    },
-
-    clearTrain() {
-      this.searchedTrain = '';
-      this.search();
     },
   },
 });

src/components/JournalView/JournalTimetables.vue

@@ -1,7 +1,13 @@
 <template>
   <section class="journal-timetables">
     <div class="journal-wrapper">
-      <JournalOptions @changedOptions="search" @changedFilter="search" />
+      <JournalOptions
+        @on-input-change="search"
+        @on-filter-change="search"
+        @on-sorter-change="search"
+        :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
+        :filters="journalTimetableFilters"
+      />
 
       <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
         <img :src="icons.arrow" alt="return arrow" />
@@ -69,7 +75,7 @@
                           <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
                             {{ item.route.split('|').slice(-1)[0] }}:
                           </b>
-                          <i v-else>{{ $t('history.timetable-abandoned') }} </i>
+                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
 
                           <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
                             {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
@@ -90,35 +96,35 @@
                       >
                         {{
                           !item.terminated
-                            ? $t('history.timetable-active')
+                            ? $t('journal.timetable-active')
                             : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
-                            ? $t('history.timetable-fulfilled')
+                            ? $t('journal.timetable-fulfilled')
-                            : $t('history.timetable-abandoned')
+                            : $t('journal.timetable-abandoned')
                         }}
                       </b>
                     </div>
 
-                    <div style="margin-top: 1em;">
+                    <div style="margin-top: 1em">
                       <div>
-                        {{ $t('history.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
+                        {{ $t('journal.timetable-day') }} <b>{{ localeDay(item.beginDate, $i18n.locale) }}</b>
                       </div>
 
                       <!-- Nick dyżurnego -->
                       <div v-if="item.authorName">
-                        <b class="text--grayed">{{ $t('history.dispatcher-name') }}&nbsp;</b>
+                        <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
                         <b>{{ item.authorName }}</b>
                       </div>
                     </div>
 
-                    <div style="margin-top: 1em;">
+                    <div style="margin-top: 1em">
                       <div>
-                        <b>{{ $t('history.route-length') }}</b>
+                        <b>{{ $t('journal.route-length') }}</b>
                         {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
                         {{ item.routeDistance }} km
                       </div>
 
                       <div>
-                        <b>{{ $t('history.station-count') }}</b>
+                        <b>{{ $t('journal.station-count') }}</b>
                         {{ item.confirmedStopsCount }} /
                         {{ item.allStopsCount }}
                       </div>
@@ -138,7 +144,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, JournalFilter, provide, Ref, ref } from 'vue';
+import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -149,7 +155,7 @@ import ActionButton from '@/components/Global/ActionButton.vue';
 import JournalOptions from '@/components/JournalView/JournalOptions.vue';
 
 import { URLs } from '@/scripts/utils/apiURLs';
-import { journalFilters } from '@/data/journalFilters';
+import { journalTimetableFilters } from '@/data/journalFilters';
 import { JournalFilterType } from '@/scripts/enums/JournalFilterType';
 
 const PROD_MODE = true;
@@ -206,6 +212,8 @@ export default defineComponent({
     scrollNoMoreData: false,
 
     showReturnButton: false,
+
+    journalTimetableFilters
   }),
 
   setup() {
@@ -215,15 +223,13 @@ export default defineComponent({
     });
 
     const sorterActive = ref({ id: 'timetableId', dir: -1 });
-    const journalFilterActive = ref(journalFilters[0]);
+    const journalFilterActive = ref(journalTimetableFilters[0]);
 
-    const searchedDriver = ref('');
+    const searchersValues = reactive([{ id: 'search-train', value: '' }, { id: 'search-driver', value: '' }])
-    const searchedTrain = ref('');
     const countFromIndex = ref(0);
     const countLimit = 15;
 
-    provide('searchedTrain', searchedTrain);
+    provide('searchersValues', searchersValues);
-    provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
     provide('journalFilterActive', journalFilterActive);
 
@@ -237,10 +243,9 @@ export default defineComponent({
       isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
       isDataInit: computed(() => historyDataStatus.value.status === DataStatus.Initialized),
 
-      searchedDriver,
-      searchedTrain,
       sorterActive,
       journalFilterActive,
+      searchersValues,
 
       countFromIndex,
       countLimit,
@@ -297,8 +302,7 @@ export default defineComponent({
 
     search() {
       this.fetchHistoryData({
-        searchedDriver: this.searchedDriver,
+        searchers: this.searchersValues,
-        searchedTrain: this.searchedTrain,
         filter: this.journalFilterActive,
       });
 
@@ -330,8 +334,7 @@ export default defineComponent({
 
     async fetchHistoryData(
       props: {
-        searchedDriver?: string;
+        searchers?: JournalSearcher[],
-        searchedTrain?: string;
         filter?: JournalFilter;
       } = {}
     ) {
@@ -339,8 +342,11 @@ export default defineComponent({
 
       const queries: string[] = [];
 
-      if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
+      const driver = props.searchers?.find(s => s.id == "search-driver")?.value.trim();
-      if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
+      const train = props.searchers?.find(s => s.id == "search-train")?.value.trim();
+
+      if (driver) queries.push(`driver=${driver}`);
+      if (train) queries.push(`train=${train}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
@@ -435,6 +441,4 @@ export default defineComponent({
     }
   }
 }
-
-
 </style>

src/data/journalFilters.ts

@@ -1,7 +1,7 @@
 import { JournalFilterType } from "@/scripts/enums/JournalFilterType";
 import { JournalFilter } from "vue";
 
-export const journalFilters: JournalFilter[] = [
+export const journalTimetableFilters: JournalFilter[] = [
     {
         id: JournalFilterType.all,
         filterSection: "timetable-status",
@@ -25,5 +25,6 @@ export const journalFilters: JournalFilter[] = [
         filterSection: "timetable-status",
         isActive: false
     },
-
 ]
+
+export const journalDispatcherFilters: JournalFilter[] = []

src/locales/en.json

@@ -185,8 +185,14 @@
     "loading": "Loading dispatcher history data...",
     "no-history": "No dispatcher history found!",
 
+    "section-timetables": "TIMETABLES",
+    "section-dispatchers": "DISPATCHERS",
+
+    "search": "Search",
     "search-train": "Train no.",
     "search-driver": "Driver name",
+    "search-dispatcher": "Dispatcher name",
+    "search-station": "Scenery name",
 
     "sort-prefix": "Sort: ",
 
@@ -194,6 +200,8 @@
     "option-total-stops": "total stops",
     "option-beginDate": "date",
     "option-timetableId": "timetable ID",
+    "option-timestampFrom": "date",
+    "option-duration": "duration",
 
     "filter-all": "ALL ENTRIES",
     "filter-abandoned": "ABANDONED",
@@ -201,7 +209,20 @@
     "filter-active": "ACTIVE",
 
     "no-further-data": "No further data for current parameters",
-    "loading-further-data": "Loading..."
+    "loading-further-data": "Loading...",
+
+    "route-length": "Route length:",
+    "station-count": "Stations:",
+    "dispatcher-name": "Created by",
+    "timetable-day": "Timetable created at",
+    "timetable-active": "ACTIVE",
+    "timetable-fulfilled": "FULFILLED",
+    "timetable-abandoned": "ABANDONED",
+
+    "online-since": "ONLINE SINCE",
+    "duty-lasted": "The duty lasted",
+    "minutes": "{minutes} mins",
+    "hours": "{hours}h {minutes} mins"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",
@@ -228,20 +249,7 @@
   },
   "history": {
     "title": "TIMETABLE JOURNAL",
-    "search": "Search",
     "search-train": "Train no.",
-    "search-driver": "Driver name",
+    "search-driver": "Driver name"
-    "route-length": "Route length:",
-    "station-count": "Stations:",
-    "dispatcher-name": "Created by",
-    "timetable-day": "Timetable created at",
-    "timetable-active": "ACTIVE",
-    "timetable-fulfilled": "FULFILLED",
-    "timetable-abandoned": "ABANDONED",
-
-    "online-since": "ONLINE SINCE",
-    "duty-lasted": "The duty lasted",
-    "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins"
   }
 }

src/locales/pl.json

@@ -187,8 +187,14 @@
     "loading": "Ładowanie historii dyżurów...",
     "no-history": "Brak historii dyżurów dla tej scenerii!",
 
+    "section-timetables": "ROZKŁADY JAZDY",
+    "section-dispatchers": "DYŻURNI",
+
+    "search": "Szukaj",
     "search-train": "Numer pociągu",
     "search-driver": "Nick maszynisty",
+    "search-dispatcher": "Nick dyżurnego",
+    "search-station": "Nazwa scenerii",
 
     "sort-prefix": "Sortuj: ",
 
@@ -196,6 +202,8 @@
     "option-total-stops": "stacje",
     "option-beginDate": "data",
     "option-timetableId": "ID rozkładu",
+    "option-timestampFrom": "data",
+    "option-duration": "czas dyżuru",
 
     "filter-all": "WSZYSTKIE",
     "filter-abandoned": "PORZUCONE",
@@ -203,7 +211,20 @@
     "filter-active": "AKTYWNE",
 
     "no-further-data": "Brak dalszych wyników dla podanych parametrów",
-    "loading-further-data": "Ładowanie..."
+    "loading-further-data": "Ładowanie...",
+
+    "online-since": "ONLINE OD",
+    "duty-lasted": "Dyżur trwał",
+    "minutes": "{minutes} min.",
+    "hours": "{hours} godz. {minutes} min.",
+
+    "route-length": "Kilometraż:",
+    "station-count": "Stacje:",
+    "dispatcher-name": "Wystawiony przez dyżurnego",
+    "timetable-day": "Rozkład z dnia",
+    "timetable-active": "AKTYWNY",
+    "timetable-fulfilled": "WYPEŁNIONY",
+    "timetable-abandoned": "PORZUCONY"
   },
   "scenery": {
     "users": "GRACZE ONLINE",
@@ -229,21 +250,6 @@
     "terminates": "KOŃCZY BIEG"
   },
   "history": {
-    "title": "DZIENNIK ROZKŁADÓW JAZDY",
+    "title": "DZIENNIK ROZKŁADÓW JAZDY"
-    "search": "Szukaj",
-    "search-train": "Numer pociągu",
-    "search-driver": "Nick maszynisty",
-    "route-length": "Kilometraż:",
-    "station-count": "Stacje:",
-    "dispatcher-name": "Wystawiony przez dyżurnego",
-    "timetable-day": "Rozkład z dnia",
-    "timetable-active": "AKTYWNY",
-    "timetable-fulfilled": "WYPEŁNIONY",
-    "timetable-abandoned": "PORZUCONY",
-
-    "online-since": "ONLINE OD",
-    "duty-lasted": "Dyżur trwał",
-    "minutes": "{minutes} min.",
-    "hours": "{hours} godz. {minutes} min."
   }
 }

src/views/JournalView.vue

@@ -6,7 +6,7 @@
         :class="{ checked: journalTypeChosen == 'timetables' }"
         @click="changeJournalType('timetables')"
       >
-        ROZKŁADY JAZDY
+        {{ $t('journal.section-timetables') }}
       </button>
       &nbsp;&bull;&nbsp;
       <button
@@ -14,7 +14,7 @@
         :class="{ checked: journalTypeChosen == 'dispatchers' }"
         @click="changeJournalType('dispatchers')"
       >
-        DYŻURNI
+        {{ $t('journal.section-dispatchers') }}
       </button>
     </div>
 

src/vuex.d.ts

@@ -25,4 +25,9 @@ declare module '@vue/runtime-core' {
     filterSection: string;
     isActive: boolean;
   }
+
+  interface JournalSearcher {
+    id: string;
+    value: string;
+  }
 }

tsconfig.json

@@ -33,6 +33,7 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
+    "src/**/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],