Filtry dzienników; poprawki stylistyczne

src/components/JournalView/JournalDispatchers.vue

@@ -1,12 +1,7 @@
 <template>
   <section class="journal-timetables">
     <div class="journal_wrapper">
-      <JournalOptions
-        @on-filter-change="search"
-        @on-input-change="search"
-        @on-sorter-change="search"
-        :sorter-option-ids="['timestampFrom', 'duration']"
-      />
+      <JournalOptions @on-search-confirm="searchHistory" :sorter-option-ids="['timestampFrom', 'duration']" />
 
       <div class="list_wrapper" @scroll="handleScroll">
         <transition name="warning" mode="out-in">
@@ -135,13 +130,13 @@ export default defineComponent({
     if (this.sceneryName || this.dispatcherName) {
       this.searchersValues['search-station'] = this.sceneryName?.toString() || '';
       this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
-      this.search();
+      this.searchHistory();
     }
   },
 
   mounted() {
     if (!this.sceneryName && !this.dispatcherName) {
-      this.search();
+      this.searchHistory();
     }
   },
 
@@ -156,7 +151,7 @@ export default defineComponent({
       if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
-    search() {
+    searchHistory() {
       this.fetchHistoryData({
         searchers: this.searchersValues,
       });

src/components/JournalView/JournalDispatchersList.vue

@@ -112,7 +112,7 @@ export default defineComponent({
   text-align: center;
   background-color: #4d4d4d;
 
-  margin-top: 1em;
+  margin: 1em 0;
 
   span {
     position: relative;

src/components/JournalView/JournalOptions.vue

@@ -1,37 +1,46 @@
 <template>
   <div class="journal-options">
-    <button class="btn--open">
+    <button class="btn--open" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-
       FILTRY
     </button>
 
-    <div class="options_wrapper">
+    <div class="options_wrapper" v-if="showOptions">
       <div class="options_content">
         <h1>SORTUJ WG:</h1>
 
-        <div class="content_select">
-          <!-- <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="onSorterChange"
-            :prefix="$t('journal.sort-prefix')"
-          /> -->
-
+        <div class="options_sorters">
           <div v-for="opt in translatedSorterOptions">
-            <button class="sort-option">{{ opt.value.toUpperCase() }}</button>
+            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+              {{ opt.value.toUpperCase() }}
+            </button>
           </div>
         </div>
 
+        <h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
+
+        <div class="options_filters">
+          <button
+            v-for="filter in filters"
+            class="filter-option btn--option"
+            :class="{ checked: journalFilterActive.id === filter.id }"
+            :id="filter.id"
+            @click="onFilterChange(filter)"
+          >
+            {{ $t(`journal.filter-${filter.id}`) }}
+          </button>
+        </div>
+
         <h1>SZUKAJ:</h1>
 
         <div class="content_search">
           <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
             <input
               class="search-input"
+              :type="propName == 'search-date' ? 'date' : 'input'"
+              @keydown.enter="onSearchConfirm"
               :placeholder="$t(`journal.${propName}`)"
               v-model="searchersValues[propName]"
-              @keydown.enter="onInputSearch"
             />
 
             <button class="search-exit">
@@ -39,32 +48,20 @@
             </button>
           </div>
 
+          <!-- <label for="">Data</label>
           <div class="search-box">
-            <input class="search-input" placeholder="Data" type="date" />
+            <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
 
             <button class="search-exit">
               <img :src="getIcon('exit')" alt="exit-icon" />
             </button>
-          </div>
+          </div> -->
 
-          <action-button class="search-button" @click="onInputSearch">
+          <action-button class="search-button" @click="onSearchConfirm">
             {{ $t('journal.search') }}
           </action-button>
         </div>
       </div>
-
-      <h1>FILTRUJ WG:</h1>
-      <div class="options_filters">
-        <button
-          v-for="filter in filters"
-          class="filter-option btn--option"
-          :class="{ checked: journalFilterActive.id === filter.id }"
-          :id="filter.id"
-          @click="onFilterChange(filter)"
-        >
-          {{ $t(`journal.filter-${filter.id}`) }}
-        </button>
-      </div>
     </div>
   </div>
 </template>
@@ -77,7 +74,7 @@ import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
+  emits: ['onSearchConfirm'],
   mixins: [imageMixin],
 
   props: {
@@ -92,6 +89,12 @@ export default defineComponent({
     },
   },
 
+  data() {
+    return {
+      showOptions: false,
+    };
+  },
+
   setup() {
     return {
       searchersValues: inject('searchersValues') as { [key: string]: string },
@@ -113,22 +116,21 @@ export default defineComponent({
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
-
-      this.$emit('onSorterChange');
+      this.$emit('onSearchConfirm');
     },
 
     onFilterChange(filter: JournalFilter) {
       this.journalFilterActive = filter;
-      this.$emit('onFilterChange');
-    },
-
-    onInputSearch() {
-      this.$emit('onInputChange');
+      this.$emit('onSearchConfirm');
     },
 
     onInputClear(id: any) {
       this.searchersValues[id] = '';
-      this.onInputSearch();
+      this.$emit('onSearchConfirm');
+    },
+
+    onSearchConfirm() {
+      this.$emit('onSearchConfirm');
     },
   },
 });
@@ -139,6 +141,26 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.journal-options {
+  position: relative;
+
+  margin-bottom: 0.5em;
+}
+
+.options_wrapper {
+  position: absolute;
+
+  background-color: #111111ee;
+  box-shadow: 0 0 10px 2px #111;
+
+  width: 100%;
+  max-width: 500px;
+
+  padding: 1em;
+
+  z-index: 100;
+}
+
 .btn--open {
   display: flex;
 
@@ -171,20 +193,7 @@ h1 {
   }
 }
 
-.journal-options {
-  position: relative;
-}
-
-.options_wrapper {
-  position: absolute;
-
-  background-color: #111111dd;
-  padding: 1em;
-
-  z-index: 100;
-}
-
-.content_select {
+.options_sorters {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -213,6 +222,11 @@ h1 {
   margin: 0 0.25em 0 0;
 }
 
+.sort-option[data-selected='true'] {
+  color: $accentCol;
+  font-weight: bold;
+}
+
 .filter-option {
   &#abandoned {
     color: salmon;
@@ -228,38 +242,54 @@ h1 {
 }
 
 @include smallScreen() {
-  .journal-options {
-    width: 100%;
-  }
+  h1 {
+    text-align: center;
 
-  .options {
-    &_wrapper {
-      justify-content: center;
-      align-items: center;
-    }
-
-    &_content {
-      padding: 0 1em;
-
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
-
-    &_filters {
-      justify-content: center;
-
-      .filter-option {
-        margin: 0.25em 0.25em;
-      }
+    &::before {
+      width: 75%;
+      left: 50%;
+      transform: translateX(-50%);
     }
   }
+
+  .options_wrapper {
+    max-width: 100%;
+  }
+
+  .btn--open {
+    margin: 0 auto;
+  }
+
+  .filter-option,
+  .sort-option {
+    margin: 0.25em 0.25em;
+  }
+
+  .options_filters,
+  .options_sorters {
+    justify-content: center;
+  }
+
+  // .options {
+  //   &_wrapper {
+  //     justify-content: center;
+  //     align-items: center;
+  //   }
+
+  //   &_content {
+  //     padding: 0 1em;
+
+  //     flex-direction: column;
+
+  //     .content_select {
+  //       margin: 0 auto;
+  //       padding: 0;
+  //     }
+
+  //     .content_search {
+  //       justify-content: center;
+  //     }
+  //   }
+  // }
 }
 </style>

src/components/JournalView/JournalTimetables.vue

@@ -6,39 +6,37 @@
 
     <div class="journal_wrapper">
       <JournalOptions
-        @on-input-change="searchHistory"
-        @on-filter-change="searchHistory"
-        @on-sorter-change="searchHistory"
+        @on-search-confirm="searchHistory"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
       />
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <transition name="warning" mode="out-in">
-          <div :key="dataStatus">
-            <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />
+        <!-- <transition name="warning" mode="out-in"> -->
+        <!-- <div :key="dataStatus"> -->
+        <Loading v-if="dataStatus == DataStatus.Loading || dataStatus == DataStatus.Initialized" />
 
-            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-              {{ $t('app.error') }}
-            </div>
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
 
-            <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-              {{ $t('app.no-result') }}
-            </div>
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
+        </div>
 
-            <div v-else>
-              <JournalTimetablesList :timetableHistory="timetableHistory" />
+        <div v-else>
+          <JournalTimetablesList :timetableHistory="timetableHistory" />
 
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
+        </div>
+        <!-- </div> -->
+        <!-- </transition> -->
 
         <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
         <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
@@ -105,6 +103,7 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-train': '',
       'search-driver': '',
+      // 'search-date': '',
     } as JournalTimetableSearcher);
 
     const countFromIndex = ref(0);
@@ -193,6 +192,9 @@ export default defineComponent({
 
       const driver = props.searchers?.['search-driver'].trim();
       const train = props.searchers?.['search-train'].trim();
+      
+      // TODO: dodanie możliwości sortowania timestampem z API
+      // const date = props.searchers?.['search-date'].trim();
 
       if (driver) queries.push(`driverName=${driver}`);
       if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
@@ -247,8 +249,6 @@ export default defineComponent({
             : '';
 
         this.dataStatus = DataStatus.Loaded;
-
-        console.log(this.dataStatus);
       } catch (error) {
         this.dataStatus = DataStatus.Error;
         this.dataErrorMessage = 'Ups! Coś poszło nie tak!';

src/components/JournalView/JournalTimetablesList.vue

@@ -91,7 +91,7 @@
           <img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
 
-        <div class="info-extended" v-if="timetable.stockString" v-show="item.showStock.value">
+        <div class="info-extended" v-if="timetable.stockString && item.showStock.value">
           <hr />
 
           <div>

src/styles/JournalSection.scss

@@ -8,11 +8,11 @@
   }
 
   &-enter-active {
-    transition: all 150ms ease-out;
+    transition: all 150ms 100ms ease-out;
   }
 
   &-leave-active {
-    transition: all 150ms ease-out;
+    transition: all 150ms 100ms ease-out;
   }
 }
 
@@ -47,7 +47,7 @@
 
 .journal_item,
 .journal_warning {
-  background: #202020;
+  background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;
 }

src/styles/global.scss

@@ -12,6 +12,25 @@
 
   --clr-error: #df3e3e;
   --clr-warning: #c59429;
+
+  font-size: 16px;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+  height: 1rem;
+  background-color: transparent;
+
+  &-track {
+    border-radius: 0.5em;
+    background-color: #333;
+
+  }
+
+  &-thumb {
+    border-radius: 0.5em;
+    background-color: #666;
+  }
 }
 
 html {
@@ -36,30 +55,6 @@ body {
   }
 }
 
-*:focus-visible {
-  outline: 1px solid white;
-  outline-offset: 1px;
-}
-
-:root {
-  font-size: 16px;
-}
-
-::-webkit-scrollbar {
-  width: 1rem;
-  height: 1rem;
-
-  &-track {
-    border-radius: 0.5em;
-  }
-
-  &-thumb {
-    border-radius: 0.5em;
-
-    background-color: #1b1b1b;
-  }
-}
-
 .g-tooltip {
   position: relative;
 

src/types/JournalTimetablesTypes.ts

@@ -1,3 +1,3 @@
 export type JournalTimetableSearcher = {
-  [key in 'search-driver' | 'search-train']: string;
+  [key in 'search-driver' | 'search-train' | 'search-date']: string;
 };