Rozszerzone opcje filtrów dzienników

src/components/JournalView/JournalDispatchers.vue

@@ -8,7 +8,7 @@
         :sorter-option-ids="['timestampFrom', 'duration']"
       />
 
-      <div class="timetables_wrapper" ref="scrollElement">
+      <div class="list_wrapper" @scroll="handleScroll">
         <transition name="warning" mode="out-in">
           <div :key="dataStatus">
             <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />
@@ -34,10 +34,10 @@
             </div>
           </div>
         </transition>
-      </div>
 
-      <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>
+        <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>
+      </div>
     </div>
   </section>
 </template>
@@ -137,8 +137,6 @@ export default defineComponent({
       this.searchersValues['search-dispatcher'] = this.dispatcherName?.toString() || '';
       this.search();
     }
-
-    window.addEventListener('scroll', this.handleScroll);
   },
 
   mounted() {
@@ -147,27 +145,15 @@ export default defineComponent({
     }
   },
 
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
   methods: {
-    closeDispatcherStatsCard() {
-      this.statsCardOpen = false;
-    },
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
 
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
 
-      const element = this.$refs.scrollElement as HTMLElement;
-
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.dataStatus == DataStatus.Loaded
-      )
-        this.addHistoryData();
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
     search() {

src/components/JournalView/JournalOptions.vue

@@ -1,16 +1,30 @@
 <template>
   <div class="journal-options">
+    <button class="btn--open">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+
+      FILTRY
+    </button>
+
     <div class="options_wrapper">
       <div class="options_content">
+        <h1>SORTUJ WG:</h1>
+
         <div class="content_select">
-          <select-box
+          <!-- <select-box
             :itemList="translatedSorterOptions"
             :defaultItemIndex="0"
             @selected="onSorterChange"
             :prefix="$t('journal.sort-prefix')"
-          />
+          /> -->
+
+          <div v-for="opt in translatedSorterOptions">
+            <button class="sort-option">{{ opt.value.toUpperCase() }}</button>
+          </div>
         </div>
 
+        <h1>SZUKAJ:</h1>
+
         <div class="content_search">
           <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
             <input
@@ -24,27 +38,14 @@
               <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
             </button>
           </div>
-          <!-- <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedTrain"
-              :placeholder="$t('journal.search-train')"
-              @keydown.enter="search"
-            />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
-          </div>
 
           <div class="search-box">
-            <input
-              class="search-input"
-              v-model="searchedDriver"
-              :placeholder="$t('journal.search-driver')"
-              @keydown.enter="search"
-            />
+            <input class="search-input" placeholder="Data" type="date" />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
-          </div> -->
+            <button class="search-exit">
+              <img :src="getIcon('exit')" alt="exit-icon" />
+            </button>
+          </div>
 
           <action-button class="search-button" @click="onInputSearch">
             {{ $t('journal.search') }}
@@ -52,10 +53,11 @@
         </div>
       </div>
 
+      <h1>FILTRUJ WG:</h1>
       <div class="options_filters">
         <button
           v-for="filter in filters"
-          class="journal-filter-option btn--option"
+          class="filter-option btn--option"
           :class="{ checked: journalFilterActive.id === filter.id }"
           :id="filter.id"
           @click="onFilterChange(filter)"
@@ -133,50 +135,95 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/option.scss';
+@import '../../styles/responsive.scss';
 @import '../../styles/search_box.scss';
+@import '../../styles/variables.scss';
 
-.options {
-  &_wrapper {
-    display: flex;
-    flex-direction: column;
+.btn--open {
+  display: flex;
+
+  padding: 0.4em 1em;
+  font-weight: bold;
+  font-size: 1em;
+
+  border-radius: 0.75em 0.75em 0 0;
+
+  img {
+    height: 1.3em;
+    margin-right: 0.5em;
+  }
+}
+
+h1 {
+  position: relative;
+  font-size: 1.1em;
+  margin: 0.7em 0 0.25em 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+
+    width: 50%;
+    height: 2px;
+    background-color: white;
+    border-radius: 2px;
+  }
+}
+
+.journal-options {
+  position: relative;
+}
+
+.options_wrapper {
+  position: absolute;
+
+  background-color: #111111dd;
+  padding: 1em;
+
+  z-index: 100;
+}
+
+.content_select {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  padding: 0.25em 0.25em 0 0;
+}
+
+.content_search > div {
+  margin: 0.5em auto;
+}
+
+.content_search > button {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.options_filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0.5em 0 0 0;
+}
+
+.sort-option,
+.filter-option {
+  margin: 0 0.25em 0 0;
+}
+
+.filter-option {
+  &#abandoned {
+    color: salmon;
   }
 
-  &_content {
-    display: flex;
-    flex-wrap: wrap;
-
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-
-      padding: 0.25em 0.25em 0 0;
-    }
+  &#fulfilled {
+    color: lightgreen;
   }
 
-  &_filters {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0.5em 0 0 0;
-
-    .journal-filter-option {
-      margin: 0 0.25em 0 0;
-
-      &#abandoned {
-        color: salmon;
-      }
-
-      &#fulfilled {
-        color: lightgreen;
-      }
-
-      &#active {
-        color: lightblue;
-      }
-    }
+  &#active {
+    color: lightblue;
   }
 }
 
@@ -209,7 +256,7 @@ export default defineComponent({
     &_filters {
       justify-content: center;
 
-      .journal-filter-option {
+      .filter-option {
         margin: 0.25em 0.25em;
       }
     }

src/components/JournalView/JournalTimetables.vue

@@ -13,7 +13,7 @@
         :filters="journalTimetableFilters"
       />
 
-      <div class="timetables_wrapper" ref="scrollElement">
+      <div class="list_wrapper" @scroll="handleScroll">
         <transition name="warning" mode="out-in">
           <div :key="dataStatus">
             <Loading v-if="dataStatus == (DataStatus.Loading || DataStatus.Initialized)" />
@@ -39,10 +39,10 @@
             </div>
           </div>
         </transition>
-      </div>
 
-      <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>
+        <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>
+      </div>
     </div>
   </section>
 </template>
@@ -130,35 +130,25 @@ export default defineComponent({
   },
 
   activated() {
-    window.addEventListener('scroll', this.handleScroll);
-
     if (this.timetableId) {
       this.searchersValues['search-train'] = `#${this.timetableId}`;
       this.searchHistory();
     }
   },
 
-  deactivated() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
   mounted() {
     if (!this.timetableId) this.searchHistory();
   },
 
   methods: {
-    handleScroll() {
-      this.showReturnButton = window.scrollY > window.innerHeight;
+    handleScroll(e: Event) {
+      const listElement = e.target as HTMLElement;
+      const scrollTop = listElement.scrollTop;
+      const elementHeight = listElement.scrollHeight - listElement.offsetHeight;
 
-      const element = this.$refs.scrollElement as HTMLElement;
+      if (!this.scrollDataLoaded || this.scrollNoMoreData || this.dataStatus != DataStatus.Loaded) return;
 
-      if (
-        element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
-        this.scrollDataLoaded &&
-        !this.scrollNoMoreData &&
-        this.dataStatus == DataStatus.Loaded
-      )
-        this.addHistoryData();
+      if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
     searchHistory() {

src/styles/JournalSection.scss

@@ -18,6 +18,13 @@
 
 //Styles
 
+.list_wrapper {
+  overflow-y: scroll;
+  height: 90vh;
+
+  padding-right: 0.2em;
+}
+
 .journal_wrapper {
   max-width: 1350px;
   width: 100%;
@@ -42,7 +49,7 @@
 .journal_warning {
   background: #202020;
   padding: 1em;
-  margin: 1em 0;
+  margin-bottom: 1em;
 }
 
 .journal_top-bar {

src/styles/global.scss

@@ -50,11 +50,13 @@ body {
   height: 1rem;
 
   &-track {
-    background-color: #222;
+    border-radius: 0.5em;
   }
 
   &-thumb {
-    background-color: #777;
+    border-radius: 0.5em;
+
+    background-color: #1b1b1b;
   }
 }
 
@@ -113,7 +115,6 @@ select {
 }
 
 input {
-  border: 1px solid white;
   background: none;
   color: white;
   font-size: 1em;
@@ -190,6 +191,16 @@ ul {
   }
 }
 
+button {
+  cursor: pointer;
+
+  color: white;
+  background-color: #333;
+
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+}
+
 .btn {
   background: none;
   cursor: pointer;

src/styles/search_box.scss

@@ -33,6 +33,12 @@
     }
   }
 
+  &-button {
+    width: 80%;
+    max-width: 300px;
+
+  }
+
   @include smallScreen {
     &-box,
     &-button {
@@ -42,10 +48,5 @@
     &-box {
       width: 100%;
     }
-
-    &-button {
-      width: 80%;
-      max-width: 300px;
-    }
   }
 }