chore: added scenery timetables history modes

src/components/JournalView/typings.ts

@@ -6,7 +6,9 @@ export namespace Journal {
     | 'search-train'
     | 'search-date'
     | 'search-dispatcher'
-    | 'search-issuedFrom';
+    | 'search-issuedFrom'
+    | 'search-terminatingAt'
+    | 'search-via';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -37,7 +37,7 @@
                 {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
               </b>
 
-              <b v-else>?</b>
+              <b v-else>-</b>
             </td>
             <td class="text--primary">
               <b>{{ historyItem.dispatcherRate }}</b>

src/components/SceneryView/SceneryInfo.vue

@@ -124,11 +124,6 @@ h3.section-header {
   align-items: center;
 
   font-size: 1.2em;
-
-  img {
-    width: 1.1em;
-    margin-left: 0.5em;
-  }
 }
 
 .info-lists {

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="scenery-timetables-history">
     <div class="top-filters">
-      <button class="btn btn--option checked">ROZPOCZYNA BIEG</button>
+      <button
+        class="btn btn--option"
+        v-for="mode in historyModeList"
+        :key="mode"
+        :class="{ checked: checkedHistoryMode == mode }"
+        @click="checkHistoryMode(mode)"
+      >
+        {{ $t(`scenery.timetable-${mode}`) }}
+      </button>
 
-      <button class="btn btn--option checked">PRZEZ</button>
+      <!-- <button class="btn btn--option checked">PRZEZ</button> -->
 
-      <button class="btn btn--option checked">KOŃCZY BIEG</button>
+      <!-- <button class="btn btn--option checked">KOŃCZY BIEG</button> -->
     </div>
 
     <div class="history-wrapper">
@@ -18,11 +26,11 @@
       <table class="scenery-history-table" v-else>
         <thead>
           <th>{{ $t('scenery.timetables-history-id') }}</th>
-          <th>{{ $t('scenery.timetables-history-number') }}</th>
+          <th style="width: 15%">{{ $t('scenery.timetables-history-number') }}</th>
-          <th>{{ $t('scenery.timetables-history-route') }}</th>
+          <th style="width: 25%">{{ $t('scenery.timetables-history-route') }}</th>
           <th>{{ $t('scenery.timetables-history-driver') }}</th>
           <th>{{ $t('scenery.timetables-history-author') }}</th>
-          <th>{{ $t('scenery.timetables-history-date') }}</th>
+          <th style="width: 20%">{{ $t('scenery.timetables-history-date') }}</th>
         </thead>
 
         <tbody>
@@ -33,7 +41,7 @@
               </router-link>
             </td>
             <td>
-              <b class="text--primary">{{ historyItem.trainCategoryCode }}</b> <br />
+              <b class="text--primary">{{ historyItem.trainCategoryCode }}</b>
               {{ historyItem.trainNo }}
             </td>
             <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
@@ -52,8 +60,14 @@
               <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
             </td>
             <td>
-              <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+              <b>{{
-              {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+                localeDateTime(
+                  historyItem.createdAt > historyItem.beginDate
+                    ? historyItem.beginDate
+                    : historyItem.createdAt,
+                  $i18n.locale
+                )
+              }}</b>
             </td>
           </tr>
         </tbody>
@@ -77,6 +91,9 @@ import { API } from '../../typings/api';
 import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
+const historyModeList = ['issuedFrom', 'terminatingAt', 'via'] as const;
+type HistoryMode = (typeof historyModeList)[number];
+
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
   mixins: [dateMixin],
@@ -92,9 +109,13 @@ export default defineComponent({
   data() {
     return {
       historyList: [] as API.TimetableHistory.Response,
+      historyModeList,
+
       apiStore: useApiStore(),
       dataStatus: Status.Data.Loading,
-      DataStatus: Status.Data
+      DataStatus: Status.Data,
+
+      checkedHistoryMode: 'issuedFrom' as HistoryMode
     };
   },
 
@@ -104,17 +125,22 @@ export default defineComponent({
 
   methods: {
     async fetchAPIData() {
-      if (!this.station && !this.onlineScenery) {
+      const stationName = this.$route.query['station'];
+
+      if (!stationName) {
+        this.historyList = [];
         this.dataStatus = Status.Data.Loaded;
         return;
       }
 
+      const requestFilters: Record<string, any> = {};
+      requestFilters[this.checkedHistoryMode] = stationName.toString();
+      requestFilters.countLimit = 30;
+
       try {
         const response: API.TimetableHistory.Response = await (
           await this.apiStore.client!.get('api/getTimetables', {
-            params: {
+            params: requestFilters
-              issuedFrom: this.station?.name || this.onlineScenery?.name
-            }
           })
         ).data;
 
@@ -126,11 +152,17 @@ export default defineComponent({
       }
     },
 
+    checkHistoryMode(mode: HistoryMode) {
+      this.checkedHistoryMode = mode;
+      this.dataStatus = Status.Data.Loading;
+      this.fetchAPIData();
+    },
+
     navigateToHistory() {
       this.$router.push({
         path: '/journal/timetables',
         query: {
-          'search-issuedFrom': this.station?.name || this.onlineScenery?.name
+          [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
         }
       });
     }
@@ -149,7 +181,7 @@ export default defineComponent({
 
   display: grid;
   gap: 1em;
-  grid-template-rows: 40px auto 40px;
+  grid-template-rows: auto 1fr 40px;
 }
 
 .history-wrapper {
@@ -160,7 +192,14 @@ export default defineComponent({
 .top-filters {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+
   gap: 0.5em;
   padding: 0.25em;
+
+  button {
+    padding: 0.35em;
+    min-width: 120px;
+  }
 }
 </style>

src/locales/en.json

@@ -125,7 +125,9 @@
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",
     "search-author": "Timetable author name",
-    "search-issuedFrom": "Origin scenery name",
+    "search-issuedFrom": "Issuing scenery name",
+    "search-via": "Via scenery name",
+    "search-terminatingAt": "Terminating scenery name",
     "search-timetables-date": "Timetable date (UTC+2 / CEST)",
     "search-dispatchers-date": "Service date (UTC+2 / CEST)",
     "search-date": "Date (UTC+2 / CEST)",
@@ -493,6 +495,10 @@
     "option-timetables-history": "Timetables history PL1",
     "option-dispatchers-history": "Dispatchers history PL1",
 
+    "timetable-via": "ALL TIMETABLES",
+    "timetable-issuedFrom": "BEGINS HERE",
+    "timetable-terminatingAt": "TERMINATES HERE",
+
     "timetable-author-title": "Issued by",
     "timetable-author-unknown": "Author unknown",
 

src/locales/pl.json

@@ -122,6 +122,8 @@
     "search-station": "Nazwa scenerii",
     "search-author": "Nick autora rozkładu jazdy",
     "search-issuedFrom": "Sceneria początkowa",
+    "search-via": "Przez scenerię",
+    "search-terminatingAt": "Sceneria końcowa",
     "search-timetables-date": "Data rozkładu jazdy (UTC+2 / CEST)",
     "search-dispatchers-date": "Data służby (UTC+2 / CEST)",
     "search-date": "Data (UTC+2 / CEST)",
@@ -476,6 +478,10 @@
     "option-timetables-history": "Historia rozkładów PL1",
     "option-dispatchers-history": "Historia dyżurów PL1",
 
+    "timetable-via": "WSZYSTKIE RJ",
+    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
+    "timetable-terminatingAt": "KOŃCZY BIEG",
+
     "timetable-author-title": "Wydany przez",
     "timetable-author-unknown": "Autor nieznany",
 

src/styles/JournalSection.scss

@@ -4,7 +4,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: 90vh;
-  min-height: 550px;
+  min-height: 650px;
   margin-top: 0.5em;
   position: relative;
 

src/styles/sceneryViewTables.scss

@@ -1,5 +1,6 @@
 table.scenery-history-table {
   width: 100%;
+  min-width: 900px;
   border-collapse: collapse;
 
   thead {

src/views/JournalTimetables.vue

@@ -126,6 +126,8 @@ interface TimetablesQueryParams {
   dateTo?: string;
 
   issuedFrom?: string;
+  terminatingAt?: string;
+  via?: string;
 
   countFrom?: number;
   countLimit?: number;
@@ -206,6 +208,8 @@ export default defineComponent({
       'search-driver': '',
       'search-dispatcher': '',
       'search-issuedFrom': '',
+      'search-via': '',
+      'search-terminatingAt': '',
       'search-date': ''
     } as Journal.TimetableSearchType);
 
@@ -299,11 +303,17 @@ export default defineComponent({
     },
 
     setOptions(options: { [key: string]: string }) {
-      this.searchersValues['search-date'] = options['search-date'] ?? '';
+      Object.keys(this.searchersValues).forEach((v) => {
-      this.searchersValues['search-driver'] = options['search-driver'] ?? '';
+        this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
-      this.searchersValues['search-train'] = options['search-train'] ?? '';
+      });
-      this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
+
-      this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
+      // this.searchersValues['search-date'] = options['search-date'] ?? '';
+      // this.searchersValues['search-driver'] = options['search-driver'] ?? '';
+      // this.searchersValues['search-train'] = options['search-train'] ?? '';
+      // this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
+      // this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
+      // this.searchersValues['search-via'] = options['search-via'] ?? '';
+      // this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
 
       this.sorterActive.id =
         (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';
@@ -347,6 +357,8 @@ export default defineComponent({
       const authorName = this.searchersValues['search-dispatcher'].trim() || undefined;
       const dateFrom = this.searchersValues['search-date'].trim() || undefined;
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
+      const via = this.searchersValues['search-via'].trim() || undefined;
+      const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
 
       let dateTo: string | undefined = undefined;
 
@@ -418,6 +430,10 @@ export default defineComponent({
       queryParams['authorName'] = authorName;
       queryParams['dateFrom'] = dateFrom;
       queryParams['dateTo'] = dateTo;
+      queryParams['issuedFrom'] = issuedFrom;
+      queryParams['terminatingAt'] = terminatingAt;
+      queryParams['via'] = via;
+
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['sortBy'] =
         this.sorterActive.id != 'timetableId' ? this.sorterActive.id : undefined;

src/views/SceneryView.vue

@@ -22,8 +22,8 @@
             v-for="(viewMode, i) in viewModes"
             :key="i"
             class="btn btn--option"
+            :class="{ checked: currentMode == viewMode.component }"
             @click="setViewMode(viewMode.component)"
-            :data-checked="currentMode == viewMode.component"
           >
             {{ $t(viewMode.id) }}
           </button>
@@ -223,26 +223,25 @@ button.back-btn {
   }
 }
 
-.scenery-left {
+.scenery-left,
+.scenery-right {
   position: relative;
+  overflow: auto;
+
   background-color: #181818;
   padding: 1em 0.5em;
 
   height: calc(100vh - 0.5em);
   min-height: 800px;
-  overflow: auto;
+  max-height: 2000px;
+}
 
+.scenery-left {
   display: flex;
   flex-direction: column;
 }
 
 .scenery-right {
-  background: #181818;
-  padding: 1em 0.5em;
-
-  height: calc(100vh - 0.5em);
-  min-height: 800px;
-
   display: grid;
   grid-template-rows: auto 1fr;
   gap: 1em;
@@ -254,18 +253,12 @@ button.back-btn {
 
 .info-actions {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-wrap: wrap;
+  justify-content: center;
   gap: 0.75em;
 
-  .btn {
+  button {
     padding: 0.5em;
-    box-shadow: 0 0 10px 4px #242424;
-
-    &[data-checked='true'] {
-      color: var(--clr-primary);
-    }
   }
 }