Dziennik: dodano filtrowanie po ID rozkładu

src/components/JournalView/JournalDispatchers.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref, watch } from 'vue';
+import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -92,9 +92,7 @@ import DispatcherStats from '@/components/JournalView/DispatcherStats.vue';
 
 import { URLs } from '@/scripts/utils/apiURLs';
 import { useStore } from '@/store/store';
-import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
 import Loading from '../Global/Loading.vue';
-import { useRoute, useRouter } from 'vue-router';
 
 const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
 
@@ -119,6 +117,10 @@ interface DispatcherHistoryItem {
   isOnline: boolean;
 }
 
+type JournalDispatcherSearcher = {
+  [key in 'search-dispatcher' | 'search-station']: string;
+};
+
 export default defineComponent({
   components: { SearchBox, ActionButton, JournalOptions, DispatcherStats, Loading },
   mixins: [dateMixin],
@@ -157,10 +159,10 @@ export default defineComponent({
 
     const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
     const journalFilterActive = ref({});
-    const searchersValues = reactive([
+    const searchersValues = reactive({
-      { id: 'search-dispatcher', value: '' },
+      'search-dispatcher': '',
-      { id: 'search-station', value: '' },
+      'search-station': '',
-    ]);
+    } as JournalDispatcherSearcher);
 
     const countFromIndex = ref(0);
     const countLimit = 15;
@@ -202,8 +204,8 @@ export default defineComponent({
 
   activated() {
     if (this.sceneryName || this.dispatcherName) {
-      this.searchersValues[1].value = this.sceneryName?.toString() || '';
+      this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
-      this.searchersValues[0].value = this.dispatcherName?.toString() || '';
+      this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
       this.search();
     }
 
@@ -289,7 +291,7 @@ export default defineComponent({
 
     async fetchHistoryData(
       props: {
-        searchers?: JournalSearcher[];
+        searchers?: JournalDispatcherSearcher;
         filter?: JournalFilter;
       } = {}
     ) {
@@ -297,8 +299,11 @@ export default defineComponent({
 
       const queries: string[] = [];
 
-      const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
+      // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
-      const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
+      // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
+
+      const dispatcher = props.searchers?.['search-dispatcher'].trim();
+      const station = props.searchers?.['search-station'].trim();
 
       if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
       if (station) queries.push(`stationName=${station}`);
@@ -330,7 +335,9 @@ export default defineComponent({
 
         // Stats display
         this.store.dispatcherStatsName =
-          this.historyList.length > 0 && this.searchersValues[0].value.trim() ? this.historyList[0].dispatcherName : '';
+          this.historyList.length > 0 && this.searchersValues['search-dispatcher'].trim()
+            ? this.historyList[0].dispatcherName
+            : '';
 
         this.historyDataStatus.status = DataStatus.Loaded;
       } catch (error) {

src/components/JournalView/JournalOptions.vue

@@ -12,15 +12,15 @@
         </div>
 
         <div class="content_search">
-          <div class="search-box" v-for="search in searchersValues" :key="search.id">
+          <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
             <input
               class="search-input"
-              :placeholder="$t(`journal.${search.id}`)"
+              :placeholder="$t(`journal.${propName}`)"
-              v-model="search.value"
+              v-model="searchersValues[propName]"
               @keydown.enter="onInputSearch"
             />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="onInputClear(search.id)" />
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="onInputClear(propName)" />
           </div>
           <!-- <div class="search-box">
             <input
@@ -91,7 +91,7 @@ export default defineComponent({
 
   setup() {
     return {
-      searchersValues: inject('searchersValues') as {id: string; value: string}[],
+      searchersValues: inject('searchersValues') as {[key: string]: string},
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
       journalFilterActive: inject('journalFilterActive') as JournalFilter,
     };
@@ -123,8 +123,8 @@ export default defineComponent({
       this.$emit('onInputChange');
     },
 
-    onInputClear(id: string) {
+    onInputClear(id: any) {
-      this.searchersValues.find(s => s.id == id)!.value = "";
+      this.searchersValues[id] = '';
       this.onInputSearch();
     },
   },

src/components/JournalView/JournalTimetables.vue

@@ -13,17 +13,6 @@
           :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
           :filters="journalTimetableFilters"
         />
-
-        <!-- <button
-          class="btn btn--option"
-          :disabled="store.driverStatsName == ''"
-          @click="() => (statsCardOpen = !statsCardOpen)"
-        >
-          <span v-if="store.driverStatsName">
-            Statystyki maszynisty <b>{{ store.driverStatsName }}</b>
-          </span>
-          <span v-else>Statystyki maszynisty niedostępne</span>
-        </button> -->
       </div>
 
       <div class="journal-list">
@@ -158,7 +147,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
+import { computed, defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -183,12 +172,22 @@ const TIMETABLES_API_URL = PROD_MODE
   ? `${URLs.stacjownikAPI}/api/getTimetables`
   : 'http://localhost:3001/api/getTimetables';
 
+type JournalTimetableSearcher = {
+  [key in 'search-driver' | 'search-train']: string;
+};
+
 export default defineComponent({
   components: { SearchBox, ActionButton, JournalOptions, DriverStats, Loading },
   mixins: [dateMixin, routerMixin],
 
   name: 'JournalTimetables',
 
+  props: {
+    timetableId: {
+      type: String,
+    },
+  },
+
   data: () => ({
     icons: {
       arrow: require('@/assets/icon-arrow-asc.svg'),
@@ -213,10 +212,11 @@ export default defineComponent({
     const sorterActive = ref({ id: 'timetableId', dir: -1 });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
-    const searchersValues = reactive([
+    const searchersValues = reactive({
-      { id: 'search-train', value: '' },
+      'search-train': '',
-      { id: 'search-driver', value: '' },
+      'search-driver': '',
-    ]);
+    } as JournalTimetableSearcher);
+
     const countFromIndex = ref(0);
     const countLimit = 15;
 
@@ -249,10 +249,15 @@ export default defineComponent({
 
   activated() {
     window.addEventListener('scroll', this.handleScroll);
+
+    if (this.timetableId) {
+      this.searchersValues['search-train'] = `#${this.timetableId}`;
+      this.search();
+    }
   },
 
   mounted() {
-    this.search();
+    if (!this.timetableId) this.search();
   },
 
   deactivated() {
@@ -329,7 +334,7 @@ export default defineComponent({
 
     async fetchHistoryData(
       props: {
-        searchers?: JournalSearcher[];
+        searchers?: JournalTimetableSearcher;
         filter?: JournalFilter;
       } = {}
     ) {
@@ -337,11 +342,11 @@ export default defineComponent({
 
       const queries: string[] = [];
 
-      const driver = props.searchers?.find((s) => s.id == 'search-driver')?.value.trim();
+      const driver = props.searchers?.['search-driver'].trim();
-      const train = props.searchers?.find((s) => s.id == 'search-train')?.value.trim();
+      const train = props.searchers?.['search-train'].trim();
 
       if (driver) queries.push(`driverName=${driver}`);
-      if (train) queries.push(`trainNo=${train}`);
+      if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
@@ -381,13 +386,6 @@ export default defineComponent({
           return;
         }
 
-        // if (responseData) {
-        //   this.historyDataStatus.status = DataStatus.Error;
-        //   this.historyDataStatus.error = responseData;
-
-        //   return;
-        // }
-
         if (!responseData) return;
 
         // Response data exists
@@ -395,7 +393,9 @@ export default defineComponent({
 
         // Stats display
         this.store.driverStatsName =
-          this.historyList.length > 0 && this.searchersValues[1].value.trim() ? this.historyList[0].driverName : '';
+          this.historyList.length > 0 && this.searchersValues['search-driver'].trim()
+            ? this.historyList[0].driverName
+            : '';
 
         this.historyDataStatus.status = DataStatus.Loaded;
       } catch (error) {

src/locales/en.json

@@ -198,7 +198,7 @@
     "section-dispatchers": "DISPATCHERS",
 
     "search": "Search",
-    "search-train": "Train no.",
+    "search-train": "Train no. / #",
     "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",

src/locales/pl.json

@@ -199,7 +199,7 @@
     "section-dispatchers": "DYŻURNI",
 
     "search": "Szukaj",
-    "search-train": "Numer pociągu",
+    "search-train": "Nr pociągu / #",
     "search-driver": "Nick maszynisty",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii",

src/vuex.d.ts

@@ -26,8 +26,5 @@ declare module '@vue/runtime-core' {
     isActive: boolean;
   }
 
-  interface JournalSearcher {
+
-    id: string;
-    value: string;
-  }
 }