chore: added scenery timetables history modes

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'] ?? '';
-      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'] ?? '';
+      Object.keys(this.searchersValues).forEach((v) => {
+        this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
+      });
+
+      // 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);
-    }
   }
 }