Filtry dziennika dyżurnych

2026-05-03 05:18:11 +00:00 · 2022-05-21 15:37:30 +02:00
parent 20cc9132db
commit ad3e0bbd84
9 changed files with 181 additions and 141 deletions
@@ -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 journalFilterActive = ref(journalFilters[0]);
+    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
+    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,
@@ -199,7 +201,7 @@ export default defineComponent({
  },

  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('scroll', this.handleScroll);    
  },

  methods: {
@@ -215,8 +217,8 @@ export default defineComponent({
      const minsInHour = minsTotal % 60;

      return minsTotal > 60
-        ? this.$t('history.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('history.minutes', { minutes: minsTotal });
+        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
+        : 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 (
-          await axios.get(`${DISPATCHERS_API_URL}?${this.currentQuery}`)
-        ).data;
+        const responseData: APIResponse | null = await (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 {
-  max-width: 1100px;
+.list-wrapper {
+  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;
@@ -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">
-            {{ $t('history.search') }}
+          <action-button class="search-button" @click="onInputSearch">
+            {{ $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 { computed, defineComponent, inject, JournalFilter } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { defineComponent, inject, JournalFilter, PropType } from 'vue';
 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,
-
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
+      searchersValues: inject('searchersValues') as {id: string; value: 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() {
-      this.$emit('changedOptions');
+    onInputSearch() {      
+      this.$emit('onInputChange');
    },

-    clearDriver() {
-      this.searchedDriver = '';
-      this.search();
-    },
-
-    clearTrain() {
-      this.searchedTrain = '';
-      this.search();
+    onInputClear(id: string) {
+      this.searchersValues.find(s => s.id == id)!.value = "";
+      this.onInputSearch();
    },
  },
 });
@@ -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('history.timetable-abandoned')
+                            ? $t('journal.timetable-fulfilled')
+                            : $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 searchedTrain = ref('');
+    const searchersValues = reactive([{ id: 'search-train', value: '' }, { id: 'search-driver', value: '' }])
    const countFromIndex = ref(0);
    const countLimit = 15;

-    provide('searchedTrain', searchedTrain);
-    provide('searchedDriver', searchedDriver);
+    provide('searchersValues', searchersValues);
    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,
-        searchedTrain: this.searchedTrain,
+        searchers: this.searchersValues,
        filter: this.journalFilterActive,
      });

@@ -330,8 +334,7 @@ export default defineComponent({

    async fetchHistoryData(
      props: {
-        searchedDriver?: string;
-        searchedTrain?: string;
+        searchers?: JournalSearcher[],
        filter?: JournalFilter;
      } = {}
    ) {
@@ -339,8 +342,11 @@ export default defineComponent({

      const queries: string[] = [];

-      if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
-      if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
+      const driver = props.searchers?.find(s => s.id == "search-driver")?.value.trim();
+      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>
@@ -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[] = []
@@ -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",
-    "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"
+    "search-driver": "Driver name"
  }
 }
@@ -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",
-    "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."
+    "title": "DZIENNIK ROZKŁADÓW JAZDY"
  }
 }
@@ -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>

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