From 0d9a3f4b4f5f2e7c43bc08f5c0f538e904e6f471 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 6 Sep 2022 12:44:18 +0200
Subject: [PATCH 01/15] =?UTF-8?q?Rozszerzone=20opcje=20filtr=C3=B3w=20dzie?=
 =?UTF-8?q?nnik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        |  34 ++--
 src/components/JournalView/JournalOptions.vue | 167 +++++++++++-------
 .../JournalView/JournalTimetables.vue         |  30 ++--
 src/styles/JournalSection.scss                |   9 +-
 src/styles/global.scss                        |  17 +-
 src/styles/search_box.scss                    |  11 +-
 6 files changed, 155 insertions(+), 113 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index 96464e8..f6d8a8b 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/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() {
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 56b4f1a..e31e565 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/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;
       }
     }
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index d8c498b..895f9a3 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/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() {
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 6be3530..4da8337 100644
--- a/src/styles/JournalSection.scss
+++ b/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 {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8f800b2..3d58dad 100644
--- a/src/styles/global.scss
+++ b/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;
diff --git a/src/styles/search_box.scss b/src/styles/search_box.scss
index e74da0d..0fd1b15 100644
--- a/src/styles/search_box.scss
+++ b/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;
-    }
   }
 }

From 21bacb1c95e96386a16c0cb4fdb87d777b6cb167 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 7 Sep 2022 20:37:58 +0200
Subject: [PATCH 02/15] =?UTF-8?q?Filtry=20dziennik=C3=B3w;=20poprawki=20st?=
 =?UTF-8?q?ylistyczne?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        |  13 +-
 .../JournalView/JournalDispatchersList.vue    |   2 +-
 src/components/JournalView/JournalOptions.vue | 194 ++++++++++--------
 .../JournalView/JournalTimetables.vue         |  52 ++---
 .../JournalView/JournalTimetablesList.vue     |   2 +-
 src/styles/JournalSection.scss                |   6 +-
 src/styles/global.scss                        |  43 ++--
 src/types/JournalTimetablesTypes.ts           |   2 +-
 8 files changed, 167 insertions(+), 147 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index f6d8a8b..7623e25 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/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,
       });
diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 24e9f27..60f36f6 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/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;
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index e31e565..b77ea32 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 895f9a3..2b7afee 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/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!';
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index e618289..44eb82b 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/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>
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 4da8337..ea63cb0 100644
--- a/src/styles/JournalSection.scss
+++ b/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;
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3d58dad..c976f00 100644
--- a/src/styles/global.scss
+++ b/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;
 
diff --git a/src/types/JournalTimetablesTypes.ts b/src/types/JournalTimetablesTypes.ts
index 0805257..dd27bc1 100644
--- a/src/types/JournalTimetablesTypes.ts
+++ b/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;
 };

From 828421efe054ede3e5ce5c978cff2c3597dbf503 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Sep 2022 12:21:27 +0200
Subject: [PATCH 03/15] =?UTF-8?q?Filtry=20aktywnych=20poci=C4=85g=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue |  22 +-
 src/components/TrainsView/TrainOptions.vue    | 340 ++++++++++--------
 .../TrainsView/TrainOptionsCard.vue           | 144 --------
 src/data/trainOptions.ts                      | 118 +++---
 src/locales/en.json                           |  94 +++--
 src/locales/pl.json                           |  85 +++--
 src/scripts/managers/trainFilterManager.ts    | 228 ++++++------
 src/types/TrainOptionsTypes.ts                |   6 +
 src/views/TrainsView.vue                      |  12 +-
 src/vuex.d.ts                                 |   6 +-
 10 files changed, 476 insertions(+), 579 deletions(-)
 delete mode 100644 src/components/TrainsView/TrainOptionsCard.vue
 create mode 100644 src/types/TrainOptionsTypes.ts

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index b77ea32..674c16c 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="journal-options">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+
     <button class="btn--open" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
       FILTRY
@@ -27,19 +29,19 @@
             :id="filter.id"
             @click="onFilterChange(filter)"
           >
-            {{ $t(`journal.filter-${filter.id}`) }}
+            {{ $t(`options.filter-${filter.id}`) }}
           </button>
         </div>
 
         <h1>SZUKAJ:</h1>
 
         <div class="content_search">
-          <div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
+          <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
             <input
               class="search-input"
               :type="propName == 'search-date' ? 'date' : 'input'"
               @keydown.enter="onSearchConfirm"
-              :placeholder="$t(`journal.${propName}`)"
+              :placeholder="$t(`options.${propName}`)"
               v-model="searchersValues[propName]"
             />
 
@@ -58,7 +60,7 @@
           </div> -->
 
           <action-button class="search-button" @click="onSearchConfirm">
-            {{ $t('journal.search') }}
+            {{ $t('options.search-button') }}
           </action-button>
         </div>
       </div>
@@ -107,7 +109,7 @@ export default defineComponent({
     translatedSorterOptions() {
       return this.$props.sorterOptionIds.map((id) => ({
         id,
-        value: this.$t(`journal.option-${id}`),
+        value: this.$t(`options.sort-${id}`),
       }));
     },
   },
@@ -141,6 +143,16 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 10;
+}
+
 .journal-options {
   position: relative;
 
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 32eb3bf..224827f 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -1,230 +1,266 @@
 <template>
   <div class="train-options">
-    <div class="options_wrapper">
+    <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
+
+    <button class="btn--open" @click="showOptions = !showOptions">
+      <img :src="getIcon('filter2')" alt="Open filters" />
+      FILTRY
+    </button>
+
+    <div class="options_wrapper" v-if="showOptions">
       <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="changeSorter"
-            :prefix="$t('trains.sorter-prefix')"
-          />
+        <h1>{{ $t('options.sort-title') }}</h1>
+
+        <div class="options_sorters">
+          <div v-for="opt in translatedSorterOptions">
+            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+              {{ opt.value.toUpperCase() }}
+            </button>
+          </div>
         </div>
 
+        <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+
+        <div class="options_filters">
+          <button
+            v-for="filter in trainFilterList"
+            class="filter-option btn--option"
+            :class="{ checked: filter.isActive }"
+            :id="filter.id"
+            @click="onFilterChange(filter)"
+          >
+            {{ $t(`options.filter-${filter.id}`) }}
+          </button>
+        </div>
+
+        <h1>{{ $t('options.search-title') }}</h1>
+
         <div class="content_search">
           <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+            <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
 
             <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
+              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
             </button>
           </div>
 
           <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+            <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
 
             <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
+              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
             </button>
           </div>
         </div>
       </div>
     </div>
-
-    <div class="filters">
-      <span
-        :class="{ active: filter.isActive }"
-        class="filter"
-        v-for="filter in filterList"
-        :key="filter.id"
-        tabindex="0"
-        @contextmenu="
-          (e) => {
-            e.preventDefault();
-            return false;
-          }
-        "
-        @click.left="toggleFilter(filter)"
-        @keydown.enter="toggleFilter(filter)"
-        @click.right="setFilterOnly(filter)"
-        @keydown.space="setFilterOnly(filter)"
-      >
-        {{ $t(`trains.filter-${filter.id}`) }}
-      </span>
-
-      <span class="filter reset-btn" @click="resetFilters" tabindex="0">
-        {{ $t('trains.filter-reset') }}
-      </span>
-    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, TrainFilter } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import { TrainFilter } from '../../types/TrainOptionsTypes';
+import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
-  components: { SelectBox },
-  emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
+  components: { SelectBox, ActionButton },
+  emits: ['onSearchConfirm'],
   mixins: [imageMixin],
 
-  setup() {
-    const { t } = useI18n();
-
-    const sorterOptions = [
-      {
-        id: 'distance',
-        value: 'kilometraż',
-      },
-      {
-        id: 'progress',
-        value: 'przebyta trasa',
-      },
-      {
-        id: 'delay',
-        value: 'opóźnienie',
-      },
-      {
-        id: 'mass',
-        value: 'masa',
-      },
-      {
-        id: 'speed',
-        value: 'prędkość',
-      },
-      {
-        id: 'length',
-        value: 'długość',
-      },
-    ];
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
+  props: {
+    sorterOptionIds: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+  },
 
+  data() {
     return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
+      showOptions: false,
     };
   },
 
+  setup() {
+    return {
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      trainFilterList: inject('filterList') as TrainFilter[],
+    };
+  },
+
+  computed: {
+    translatedSorterOptions() {
+      return this.$props.sorterOptionIds.map((id) => ({
+        id,
+        value: this.$t(`options.sort-${id}`),
+      }));
+    },
+  },
+
   methods: {
-    changeSorter(item: { id: string | number; value: string }) {
+    onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
+      this.$emit('onSearchConfirm');
     },
 
-    toggleFilter(filter: TrainFilter) {
+    onFilterChange(filter: TrainFilter) {
       filter.isActive = !filter.isActive;
     },
 
-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
+    onInputClear(id: 'driver' | 'train') {
+      if (id == 'driver') this.searchedDriver = '';
+      if (id == 'train') this.searchedTrain = '';
     },
 
-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-      this.searchedDriver = '';
-      this.searchedTrain = '';
+    test(e: Event) {
+      console.log(e.target);
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@import '../../styles/responsive.scss';
 @import '../../styles/search_box.scss';
+@import '../../styles/variables.scss';
 
-.train-options {
-  @include smallScreen() {
-    width: 100%;
-    font-size: 1.25em;
-  }
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 10;
 }
 
-.options {
-  &_wrapper {
-    display: flex;
-  }
+.journal-options {
+  position: relative;
 
-  &_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;
-    }
-  }
+  margin-bottom: 0.5em;
 }
 
-.filters {
+.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;
+
+  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;
+  }
+}
+
+.options_sorters {
+  display: flex;
+  align-items: center;
   flex-wrap: wrap;
 
-  margin-top: 0.5em;
-
-  @include smallScreen() {
-    justify-content: center;
-  }
+  padding: 0.25em 0.25em 0 0;
 }
 
-.filter {
-  background: #333;
-  padding: 0.2em 0.25em;
-  margin: 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.25em 0.25em 0.25em 0;
+}
+
+.sort-option[data-selected='true'] {
+  color: $accentCol;
   font-weight: bold;
+}
 
-  cursor: pointer;
-  color: gray;
-
-  &.active {
-    color: var(--clr-primary);
+.filter-option {
+  &#abandoned {
+    color: salmon;
   }
 
-  &.reset-btn {
-    color: salmon;
+  &#fulfilled {
+    color: lightgreen;
+  }
+
+  &#active {
+    color: lightblue;
   }
 }
 
 @include smallScreen() {
-  .journal-options {
-    width: 100%;
+  h1 {
+    text-align: center;
+
+    &::before {
+      width: 75%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
-  .options {
-    &_wrapper {
-      justify-content: center;
-    }
+  .options_wrapper {
+    max-width: 100%;
+  }
 
-    &_content {
-      padding: 0 1em;
+  .btn--open {
+    margin: 0 auto;
+  }
 
-      flex-direction: column;
-
-      .content_select {
-        margin: 0 auto;
-        padding: 0;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
-    }
+  .options_filters,
+  .options_sorters {
+    justify-content: center;
   }
 }
 </style>
diff --git a/src/components/TrainsView/TrainOptionsCard.vue b/src/components/TrainsView/TrainOptionsCard.vue
deleted file mode 100644
index 0183d02..0000000
--- a/src/components/TrainsView/TrainOptionsCard.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_btn">
-      <action-button @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
-        <p>{{ $t('options.filters') }}</p>
-      </action-button>
-    </div>
-
-    <transition name="card-anim">
-      <div class="card_content card" v-if="isVisible">
-        <div class="card_exit" @click="closeCard"></div>
-
-        <div class="options_wrapper">
-          <div class="options_content">
-            <div class="content_select">
-              <select-box
-                :itemList="translatedSorterOptions"
-                :defaultItemIndex="0"
-                @selected="changeSorter"
-                :prefix="$t('trains.sorter-prefix')"
-              />
-            </div>
-
-            <div class="content_search">
-              <div class="search-box">
-                <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
-
-                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
-              </div>
-
-              <div class="search-box">
-                <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
-
-                <img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <section class="card_actions flex">
-          <action-button class="outlined">
-            {{ $t('filters.reset') }}
-          </action-button>
-          <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
-        </section>
-      </div>
-    </transition>
-  </section>
-</template>
-
-<script lang="ts">
-import inputData from "../../data/options.json";
-
-import { TrainFilter, computed, defineComponent, inject } from 'vue';
-import { useI18n } from 'vue-i18n';
-import SelectBox from '../Global/SelectBox.vue';
-import ActionButton from '../Global/ActionButton.vue';
-import { sorterOptions } from '../../data/trainOptions';
-import imageMixin from "../../mixins/imageMixin";
-
-export default defineComponent({
-  components: { ActionButton, SelectBox },
-  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
-  mixins: [imageMixin],
-
-  data: () => ({
-    inputs: { ...inputData },
-  }),
-
-  setup() {
-    const isVisible = inject('isTrainOptionsCardVisible');
-
-    const { t } = useI18n();
-
-    let filterList = inject('filterList') as TrainFilter[];
-
-    const translatedSorterOptions = computed(() =>
-      sorterOptions.map(({ id }) => ({
-        id,
-        value: t(`trains.option-${id}`),
-      }))
-    );
-
-    return {
-      translatedSorterOptions,
-      searchedTrain: inject('searchedTrain') as string,
-      searchedDriver: inject('searchedDriver') as string,
-      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      filterList,
-      isVisible,
-    };
-  },
-
-  methods: {
-    closeCard() {
-      this.isVisible = false;
-    },
-
-    toggleCard() {
-      this.isVisible = !this.isVisible;
-    },
-
-    changeSorter(item: { id: string | number; value: string }) {
-      this.sorterActive.id = item.id;
-      this.sorterActive.dir = -1;
-    },
-
-    toggleFilter(filter: TrainFilter) {
-      filter.isActive = !filter.isActive;
-    },
-
-    setFilterOnly(filter: TrainFilter) {
-      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
-    },
-
-    resetFilters() {
-      this.filterList.forEach((f) => (f.isActive = true));
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-
-
-.card {
-  section {
-    margin: 0.5em 0;
-  }
-
-  &_title {
-    font-size: 2em;
-    font-weight: 700;
-    color: $accentCol;
-
-    margin: 0.5em 0;
-
-    text-align: center;
-  }
-}
-</style>
diff --git a/src/data/trainOptions.ts b/src/data/trainOptions.ts
index 852422d..d8aa8e8 100644
--- a/src/data/trainOptions.ts
+++ b/src/data/trainOptions.ts
@@ -1,60 +1,60 @@
-import { TrainFilter } from "vue";
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
-
-export const trainFilters: TrainFilter[] = [
-  {
-    id: TrainFilterType.twr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.skr,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.passenger,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.freight,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.other,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.comments,
-    isActive: true,
-  },
-  {
-    id: TrainFilterType.noTimetable,
-    isActive: true,
-  },
-];
-
-export const sorterOptions = [
-  {
-    id: 'distance',
-    value: 'kilometraż',
-  },
-  {
-    id: 'progress',
-    value: 'przebyta trasa',
-  },
-  {
-    id: 'delay',
-    value: 'opóźnienie',
-  },
-  {
-    id: 'mass',
-    value: 'masa',
-  },
-  {
-    id: 'speed',
-    value: 'prędkość',
-  },
-  {
-    id: 'length',
-    value: 'długość',
-  }
+import { TrainFilterType } from "../scripts/enums/TrainFilterType";
+import { TrainFilter } from "../types/TrainOptionsTypes";
+
+export const trainFilters: TrainFilter[] = [
+  {
+    id: TrainFilterType.twr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.skr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.passenger,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.freight,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.other,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.comments,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.noTimetable,
+    isActive: true,
+  },
+];
+
+export const sorterOptions = [
+  {
+    id: 'distance',
+    value: 'kilometraż',
+  },
+  {
+    id: 'progress',
+    value: 'przebyta trasa',
+  },
+  {
+    id: 'delay',
+    value: 'opóźnienie',
+  },
+  {
+    id: 'mass',
+    value: 'masa',
+  },
+  {
+    id: 'speed',
+    value: 'prędkość',
+  },
+  {
+    id: 'length',
+    value: 'długość',
+  }
 ];
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 39b35f9..9f954a8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -11,10 +11,10 @@
     "migration-confirm": "Roger that!"
   },
   "update": {
-      "title": "New Stacjownik version is available!",
-      "paragraph1": "Enjoy the application and may the green signal be with you!",
-      "release-link": "Click here to browse version changelog (GitHub)",
-      "confirm-button": "Understood!" 
+    "title": "New Stacjownik version is available!",
+    "paragraph1": "Enjoy the application and may the green signal be with you!",
+    "release-link": "Click here to browse version changelog (GitHub)",
+    "confirm-button": "Understood!"
   },
   "data-status": {
     "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
@@ -72,7 +72,47 @@
   },
   "options": {
     "filters": "FILTERS",
-    "donate": "DONATE"
+    "donate": "DONATE",
+
+    "search-button": "Search",
+
+    "sort-title": "SORT BY:",
+    "filter-title": "FILTER BY:",
+    "search-title": "SEARCH:",
+
+    "search-train-no": "Train no. / #",
+    "search-train": "Train no.",
+    "search-driver": "Driver name",
+    "search-dispatcher": "Dispatcher name",
+    "search-scenery": "Scenery name",
+
+    "sort-mass": "mass",
+    "sort-speed": "speed",
+    "sort-length": "length",
+    "sort-distance": "distance",
+    "sort-timetable": "train no.",
+    "sort-progress": "route progress",
+    "sort-delay": "current delay",
+
+    "sort-total-stops": "total stops",
+    "sort-beginDate": "date",
+    "sort-timetableId": "timetable ID",
+    "sort-timestampFrom": "date",
+    "sort-duration": "duration",
+
+    "filter-comments": "COMMENTS",
+    "filter-twr": "TWR",
+    "filter-skr": "SKR",
+    "filter-passenger": "PASSENGER",
+    "filter-freight": "FREIGHT",
+    "filter-other": "OTHER",
+    "filter-noTimetable": "NO TIMETABLE",
+    "filter-reset": "X RESET",
+
+    "filter-all": "ALL ENTRIES",
+    "filter-abandoned": "ABANDONED",
+    "filter-fulfilled": "FULFILLED",
+    "filter-active": "ACTIVE"
   },
   "filters": {
     "endingStatus": "ENDS SOON",
@@ -116,7 +156,7 @@
     "hour": "h",
     "no-limit": "NO LIMIT",
     "include-selected": "INCLUDE SELECTED",
-    "save": "↵ SAVE FILTERS",
+    "save": "SAVE FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
   },
@@ -150,28 +190,6 @@
     "current-signal": "at signal",
     "current-track": "on track",
 
-    "option-mass": "mass",
-    "option-speed": "speed",
-    "option-length": "length",
-    "option-distance": "distance",
-    "option-timetable": "train no.",
-    "option-progress": "route progress",
-    "option-delay": "current delay",
-    "option-comments": "comments",
-
-    "filter-comments": "comments",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "passenger",
-    "filter-freight": "freight",
-    "filter-other": "other",
-    "filter-noTimetable": "no timetable",
-    "filter-reset": "X RESET",
-
-    "sorter-prefix": "Sort: ",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
-
     "delayed": "Delayed: ",
     "preponed": "Ahead of schedule: ",
     "on-time": "On time",
@@ -205,26 +223,6 @@
     "section-timetables": "TIMETABLES",
     "section-dispatchers": "DISPATCHERS",
 
-    "search": "Search",
-    "search-train": "Train no. / #",
-    "search-driver": "Driver name",
-    "search-dispatcher": "Dispatcher name",
-    "search-station": "Scenery name",
-
-    "sort-prefix": "Sort: ",
-
-    "option-distance": "distance",
-    "option-total-stops": "total stops",
-    "option-beginDate": "date",
-    "option-timetableId": "timetable ID",
-    "option-timestampFrom": "date",
-    "option-duration": "duration",
-
-    "filter-all": "ALL ENTRIES",
-    "filter-abandoned": "ABANDONED",
-    "filter-fulfilled": "FULFILLED",
-    "filter-active": "ACTIVE",
-
     "no-further-data": "No further data for current parameters",
     "loading-further-data": "Loading...",
 
diff --git a/src/locales/pl.json b/src/locales/pl.json
index c3343dc..3aa31b5 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -74,7 +74,48 @@
   },
   "options": {
     "filters": "FILTRY",
-    "donate": "WESPRZYJ"
+    "donate": "WESPRZYJ",
+
+    "search-button": "Szukaj",
+
+    "sort-title": "SORTUJ WG:",
+    "filter-title": "FILTRUJ WG:",
+    "search-title": "SZUKAJ:",
+
+    "search-train-no": "Nr pociągu",
+    "search-train": "Nr pociągu / #",
+    "search-driver": "Nick maszynisty",
+    "search-dispatcher": "Nick dyżurnego",
+    "search-station": "Nazwa scenerii",
+
+    "sort-distance": "kilometraż",
+    "sort-total-stops": "stacje",
+    "sort-beginDate": "data",
+    "sort-timetableId": "ID rozkładu",
+    "sort-timestampFrom": "data",
+    "sort-duration": "czas dyżuru",
+
+    "sort-mass": "masa",
+    "sort-speed": "prędkość",
+    "sort-length": "długość",
+    "sort-timetable": "nr pociągu",
+    "sort-progress": "przebyta trasa",
+    "sort-delay": "opóźnienie",
+    "sort-comments": "uwagi ekspl.",
+
+    "filter-comments": "UWAGI EKSPLOATACYJNE",
+    "filter-twr": "TWR",
+    "filter-skr": "PRZEKR. SKRAJNIA",
+    "filter-passenger": "PASAŻERSKIE",
+    "filter-freight": "TOWAROWE",
+    "filter-other": "INNE",
+    "filter-noTimetable": "BEZ RJ",
+    "filter-reset": "X RESETUJ",
+
+    "filter-all": "WSZYSTKIE",
+    "filter-abandoned": "PORZUCONE",
+    "filter-fulfilled": "WYPEŁNIONE",
+    "filter-active": "AKTYWNE"
   },
   "filters": {
     "endingStatus": "KOŃCZY",
@@ -152,28 +193,6 @@
     "current-signal": "przy semaforze",
     "current-track": "na szlaku",
 
-    "option-mass": "masa",
-    "option-speed": "prędkość",
-    "option-length": "długość",
-    "option-distance": "kilometraż",
-    "option-timetable": "nr pociągu",
-    "option-progress": "przebyta trasa",
-    "option-delay": "opóźnienie",
-    "option-comments": "uwagi ekspl.",
-
-    "filter-comments": "uwagi ekspl.",
-    "filter-twr": "TWR",
-    "filter-skr": "SKR",
-    "filter-passenger": "pasażerskie",
-    "filter-freight": "towarowe",
-    "filter-other": "inne",
-    "filter-noTimetable": "bez RJ",
-    "filter-reset": "X RESETUJ",
-
-    "sorter-prefix": "Sortuj: ",
-    "search-train": "Numer pociągu",
-    "search-driver": "Nick maszynisty",
-
     "delayed": "Opóźniony: ",
     "preponed": "Przed czasem: ",
     "on-time": "Planowo",
@@ -207,26 +226,6 @@
     "section-timetables": "ROZKŁADY JAZDY",
     "section-dispatchers": "DYŻURNI",
 
-    "search": "Szukaj",
-    "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
-    "search-dispatcher": "Nick dyżurnego",
-    "search-station": "Nazwa scenerii",
-
-    "sort-prefix": "Sortuj: ",
-
-    "option-distance": "kilometraż",
-    "option-total-stops": "stacje",
-    "option-beginDate": "data",
-    "option-timetableId": "ID rozkładu",
-    "option-timestampFrom": "data",
-    "option-duration": "czas dyżuru",
-
-    "filter-all": "WSZYSTKIE",
-    "filter-abandoned": "PORZUCONE",
-    "filter-fulfilled": "WYPEŁNIONE",
-    "filter-active": "AKTYWNE",
-
     "no-further-data": "Brak dalszych wyników dla podanych parametrów",
     "loading-further-data": "Ładowanie...",
 
diff --git a/src/scripts/managers/trainFilterManager.ts b/src/scripts/managers/trainFilterManager.ts
index ded5115..920e3ba 100644
--- a/src/scripts/managers/trainFilterManager.ts
+++ b/src/scripts/managers/trainFilterManager.ts
@@ -1,115 +1,115 @@
-import { TrainFilter } from "vue";
-import { TrainFilterType } from "../enums/TrainFilterType";
-import Train from "../interfaces/Train";
-import TrainStop from "../interfaces/TrainStop";
-
-function confirmedPercentage(stops: TrainStop[] | undefined) {
-    if (!stops) return -1;
-
-    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
-
-function currentDelay(stops: TrainStop[] | undefined) {
-    if (!stops) return -Infinity;
-
-    const delay =
-        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-            ?.departureDelay || 0;
-
-    return delay;
-};
-
-function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
-    return trainList.filter(
-        (train) => {
-            const isFiltered = filters.every(f => {
-                if (f.isActive) return true;
-                
-                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
-
-                switch (f.id) {
-                    case TrainFilterType.comments:
-                        return !train.timetableData.followingStops.some(stop => stop.comments);
-                    
-                    case TrainFilterType.twr:
-                        return !train.timetableData.TWR;
-                    
-                    case TrainFilterType.skr:
-                        return !train.timetableData.SKR;
-                    
-                    case TrainFilterType.passenger:
-                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
-                    
-                    case TrainFilterType.freight:
-                        return !train.timetableData.category.startsWith('T');
-                    
-                    case TrainFilterType.other:
-                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
-                    
-                    default:
-                        return true;
-                }
-            })
-
-            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
-        }
-
-    );
-}
-
-function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-    return trainList.sort((a: Train, b: Train) => {
-        switch (sorterActive.id) {
-            case 'mass':
-                if (a.mass > b.mass) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'distance':
-                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'progress':
-                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'delay':
-                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-                    return sorterActive.dir;
-
-                return -sorterActive.dir;
-
-            case 'speed':
-                if (a.speed > b.speed) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'timetable':
-                if (a.trainNo > b.trainNo) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            case 'length':
-                if (a.length > b.length) return sorterActive.dir;
-                return -sorterActive.dir;
-
-            default:
-                break;
-        }
-
-        return 0;
-    });
-}
-
-export function filteredTrainList(
-    trainList: Train[],
-    searchedTrain: string,
-    searchedDriver: string,
-    sorterActive: { id: string; dir: number },
-    filters: TrainFilter[]
-) {
-
-    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
-    return [...sortTrainList(filtered, sorterActive)];
+import { TrainFilter } from "../../types/TrainOptionsTypes";
+import { TrainFilterType } from "../enums/TrainFilterType";
+import Train from "../interfaces/Train";
+import TrainStop from "../interfaces/TrainStop";
+
+function confirmedPercentage(stops: TrainStop[] | undefined) {
+    if (!stops) return -1;
+
+    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+};
+
+function currentDelay(stops: TrainStop[] | undefined) {
+    if (!stops) return -Infinity;
+
+    const delay =
+        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+            ?.departureDelay || 0;
+
+    return delay;
+};
+
+function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
+    return trainList.filter(
+        (train) => {
+            const isFiltered = filters.every(f => {
+                if (f.isActive) return true;
+                
+                if (!train.timetableData) return filters.find(filter => filter.id == TrainFilterType.noTimetable)!.isActive;
+
+                switch (f.id) {
+                    case TrainFilterType.comments:
+                        return !train.timetableData.followingStops.some(stop => stop.comments);
+                    
+                    case TrainFilterType.twr:
+                        return !train.timetableData.TWR;
+                    
+                    case TrainFilterType.skr:
+                        return !train.timetableData.SKR;
+                    
+                    case TrainFilterType.passenger:
+                        return !/^[AMRE]\D{2}$/.test(train.timetableData.category);
+                    
+                    case TrainFilterType.freight:
+                        return !train.timetableData.category.startsWith('T');
+                    
+                    case TrainFilterType.other:
+                        return !/^[PXZL]\D{2}$/.test(train.timetableData.category);
+                    
+                    default:
+                        return true;
+                }
+            })
+
+            return (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+                (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true) && isFiltered
+        }
+
+    );
+}
+
+function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
+    return trainList.sort((a: Train, b: Train) => {
+        switch (sorterActive.id) {
+            case 'mass':
+                if (a.mass > b.mass) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'distance':
+                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'progress':
+                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'delay':
+                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'speed':
+                if (a.speed > b.speed) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'timetable':
+                if (a.trainNo > b.trainNo) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'length':
+                if (a.length > b.length) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            default:
+                break;
+        }
+
+        return 0;
+    });
+}
+
+export function filteredTrainList(
+    trainList: Train[],
+    searchedTrain: string,
+    searchedDriver: string,
+    sorterActive: { id: string; dir: number },
+    filters: TrainFilter[]
+) {
+
+    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);        
+    return [...sortTrainList(filtered, sorterActive)];
 };
\ No newline at end of file
diff --git a/src/types/TrainOptionsTypes.ts b/src/types/TrainOptionsTypes.ts
new file mode 100644
index 0000000..2545f3e
--- /dev/null
+++ b/src/types/TrainOptionsTypes.ts
@@ -0,0 +1,6 @@
+import { TrainFilterType } from "../scripts/enums/TrainFilterType";
+
+export interface TrainFilter {
+  id: TrainFilterType;
+  isActive: boolean;
+}
\ No newline at end of file
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 5e52fa9..2701861 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -2,7 +2,7 @@
   <section class="trains-view">
     <div class="wrapper">
       <div class="options-bar">
-        <train-options />
+        <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
       </div>
 
       <TrainTable :trains="computedTrains" />
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
@@ -19,6 +19,7 @@ import { trainFilters } from '../data/trainOptions';
 import Train from '../scripts/interfaces/Train';
 import { filteredTrainList } from '../scripts/managers/trainFilterManager';
 import { useStore } from '../store/store';
+import { TrainFilter } from '../types/TrainOptionsTypes';
 
 export default defineComponent({
   components: {
@@ -48,7 +49,6 @@ export default defineComponent({
 
     const sorterActive = ref({ id: 'distance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
-    const isTrainOptionsCardVisible = ref(false);
 
     const searchedDriver = ref('');
     const searchedTrain = ref('');
@@ -57,7 +57,6 @@ export default defineComponent({
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
     provide('filterList', filterList);
-    provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       return filteredTrainList(
@@ -82,10 +81,6 @@ export default defineComponent({
       this.searchedTrain = this.train;
       this.searchedDriver = this.driver || '';
     }
-    // if (this.train) {
-    //   this.searchedTrain = this.train;
-    //   if(this.x) this.searchedDriver = this.x;
-    // }
   },
 });
 </script>
@@ -102,5 +97,4 @@ export default defineComponent({
   margin: 1rem auto;
   max-width: 1350px;
 }
-
 </style>
diff --git a/src/vuex.d.ts b/src/vuex.d.ts
index 5d99612..6532360 100644
--- a/src/vuex.d.ts
+++ b/src/vuex.d.ts
@@ -14,11 +14,7 @@ declare module '@vue/runtime-core' {
     $store: Store<State>
   }
 
-  // Train filter for TrainView
-  interface TrainFilter {
-    id: TrainFilterType;
-    isActive: boolean;
-  }
+  
 
   interface JournalFilter {
     id: JournalFilterType;

From a6c0fe86c842f63fac2f16a7506f65f3d551eb5b Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Sep 2022 12:47:30 +0200
Subject: [PATCH 04/15] =?UTF-8?q?Poprawki=20filtr=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TrainsView/TrainOptions.vue | 53 ++++++++++++++--------
 src/styles/global.scss                     |  4 --
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 224827f..94e305c 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -22,15 +22,21 @@
         <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
 
         <div class="options_filters">
-          <button
-            v-for="filter in trainFilterList"
-            class="filter-option btn--option"
-            :class="{ checked: filter.isActive }"
-            :id="filter.id"
-            @click="onFilterChange(filter)"
-          >
-            {{ $t(`options.filter-${filter.id}`) }}
-          </button>
+          <div class="filter-option" v-for="filter in trainFilterList">
+            <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+              {{ $t(`options.filter-${filter.id}`) }}
+            </button>
+          </div>
+        </div>
+
+        <div class="options_filters">
+          <div class="filter-option">
+            <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+          </div>
+
+          <div class="filter-option">
+            <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
+          </div>
         </div>
 
         <h1>{{ $t('options.search-title') }}</h1>
@@ -66,7 +72,6 @@ import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSearchConfirm'],
   mixins: [imageMixin],
 
   props: {
@@ -105,13 +110,24 @@ export default defineComponent({
     onSorterChange(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
-      this.$emit('onSearchConfirm');
     },
 
     onFilterChange(filter: TrainFilter) {
       filter.isActive = !filter.isActive;
     },
 
+    clearAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = false;
+      });
+    },
+
+    resetAllFilters() {
+      this.trainFilterList.forEach((filter) => {
+        filter.isActive = true;
+      });
+    },
+
     onInputClear(id: 'driver' | 'train') {
       if (id == 'driver') this.searchedDriver = '';
       if (id == 'train') this.searchedTrain = '';
@@ -226,16 +242,13 @@ h1 {
 }
 
 .filter-option {
-  &#abandoned {
-    color: salmon;
-  }
+  button {
+    color: white;
+    font-weight: bold;
 
-  &#fulfilled {
-    color: lightgreen;
-  }
-
-  &#active {
-    color: lightblue;
+    &[data-disabled='true'] {
+      color: #888;
+    }
   }
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c976f00..8fe1371 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -230,10 +230,6 @@ button {
     border-radius: 0.25em;
     padding: 0.25em 0.5em;
 
-    &:hover:not(:disabled) {
-      background-color: #3c3c3c;
-    }
-
     &.checked {
       color: var(--clr-primary);
       font-weight: bold;

From 99cdb3442a71e58d84e43123a82adc7fa410cb98 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Sep 2022 23:15:54 +0200
Subject: [PATCH 05/15] =?UTF-8?q?Opcje=20filtr=C3=B3w:=20animacja=20i=20po?=
 =?UTF-8?q?prawki?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 114 +++++++++---------
 src/components/TrainsView/TrainOptions.vue    |  99 +++++++--------
 src/components/TrainsView/TrainTable.vue      |   2 -
 3 files changed, 111 insertions(+), 104 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 674c16c..2ad5fc8 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -7,64 +7,57 @@
       FILTRY
     </button>
 
-    <div class="options_wrapper" v-if="showOptions">
-      <div class="options_content">
-        <h1>SORTUJ WG:</h1>
-
-        <div class="options_sorters">
-          <div v-for="opt in translatedSorterOptions">
-            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-              {{ opt.value.toUpperCase() }}
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1>SORTUJ WG:</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <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(`options.filter-${filter.id}`) }}
             </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(`options.filter-${filter.id}`) }}
-          </button>
-        </div>
-
-        <h1>SZUKAJ:</h1>
-
-        <div class="content_search">
-          <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
-            <input
-              class="search-input"
-              :type="propName == 'search-date' ? 'date' : 'input'"
-              @keydown.enter="onSearchConfirm"
-              :placeholder="$t(`options.${propName}`)"
-              v-model="searchersValues[propName]"
-            />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
-            </button>
+          <h1>SZUKAJ:</h1>
+          <div class="content_search">
+            <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
+              <input
+                class="search-input"
+                :type="propName == 'search-date' ? 'date' : 'input'"
+                @keydown.enter="onSearchConfirm"
+                :placeholder="$t(`options.${propName}`)"
+                v-model="searchersValues[propName]"
+              />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+              </button>
+            </div>
+            <!-- <label for="">Data</label>
+            <div class="search-box">
+              <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" />
+              </button>
+            </div> -->
+            <action-button class="search-button" @click="onSearchConfirm">
+              {{ $t('options.search-button') }}
+            </action-button>
           </div>
-
-          <!-- <label for="">Data</label>
-          <div class="search-box">
-            <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" />
-            </button>
-          </div> -->
-
-          <action-button class="search-button" @click="onSearchConfirm">
-            {{ $t('options.search-button') }}
-          </action-button>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -143,6 +136,19 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.options-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
 .bg {
   position: fixed;
   top: 0;
@@ -155,8 +161,6 @@ export default defineComponent({
 
 .journal-options {
   position: relative;
-
-  margin-bottom: 0.5em;
 }
 
 .options_wrapper {
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 94e305c..d7910c1 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -7,59 +7,51 @@
       FILTRY
     </button>
 
-    <div class="options_wrapper" v-if="showOptions">
-      <div class="options_content">
-        <h1>{{ $t('options.sort-title') }}</h1>
-
-        <div class="options_sorters">
-          <div v-for="opt in translatedSorterOptions">
-            <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
-              {{ opt.value.toUpperCase() }}
-            </button>
+    <transition name="options-anim">
+      <div class="options_wrapper" v-if="showOptions">
+        <div class="options_content">
+          <h1>{{ $t('options.sort-title') }}</h1>
+          <div class="options_sorters">
+            <div v-for="opt in translatedSorterOptions">
+              <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
+                {{ opt.value.toUpperCase() }}
+              </button>
+            </div>
           </div>
-        </div>
-
-        <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
-
-        <div class="options_filters">
-          <div class="filter-option" v-for="filter in trainFilterList">
-            <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
-              {{ $t(`options.filter-${filter.id}`) }}
-            </button>
+          <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
+          <div class="options_filters">
+            <div class="filter-option" v-for="filter in trainFilterList">
+              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+                {{ $t(`options.filter-${filter.id}`) }}
+              </button>
+            </div>
           </div>
-        </div>
-
-        <div class="options_filters">
-          <div class="filter-option">
-            <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+          <div class="options_filters">
+            <div class="filter-option">
+              <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+            </div>
+            <div class="filter-option">
+              <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
+            </div>
           </div>
-
-          <div class="filter-option">
-            <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
-          </div>
-        </div>
-
-        <h1>{{ $t('options.search-title') }}</h1>
-
-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
-            </button>
-          </div>
-
-          <div class="search-box">
-            <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
-
-            <button class="search-exit">
-              <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
-            </button>
+          <h1>{{ $t('options.search-title') }}</h1>
+          <div class="content_search">
+            <div class="search-box">
+              <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
+              </button>
+            </div>
+            <div class="search-box">
+              <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
+              <button class="search-exit">
+                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -145,6 +137,19 @@ export default defineComponent({
 @import '../../styles/search_box.scss';
 @import '../../styles/variables.scss';
 
+.options-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
 .bg {
   position: fixed;
   top: 0;
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index b42ac36..ba1dc09 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -139,8 +139,6 @@ img.train-image {
   &-list {
     overflow: auto;
 
-    margin-top: 1em;
-
     @include smallScreen() {
       width: 100%;
     }

From 3d519e874fef0d39cee3aff2d18b74b9d9b37f28 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 8 Sep 2022 23:24:58 +0200
Subject: [PATCH 06/15] =?UTF-8?q?Opcje=20filtr=C3=B3w:=20t=C5=82umaczenia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue   | 17 +++++++----------
 .../JournalView/JournalTimetables.vue           |  2 +-
 src/components/TrainsView/TrainOptions.vue      |  5 +++--
 src/locales/en.json                             |  7 +++++--
 src/locales/pl.json                             |  5 ++++-
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 2ad5fc8..6f16f2e 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -10,7 +10,8 @@
     <transition name="options-anim">
       <div class="options_wrapper" v-if="showOptions">
         <div class="options_content">
-          <h1>SORTUJ WG:</h1>
+          <h1>{{ $t('options.sort-title') }}</h1>
+
           <div class="options_sorters">
             <div v-for="opt in translatedSorterOptions">
               <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
@@ -18,7 +19,8 @@
               </button>
             </div>
           </div>
-          <h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
+
+          <h1 v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <button
               v-for="filter in filters"
@@ -30,7 +32,8 @@
               {{ $t(`options.filter-${filter.id}`) }}
             </button>
           </div>
-          <h1>SZUKAJ:</h1>
+
+          <h1>{{ $t('options.search-title') }}</h1>
           <div class="content_search">
             <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
               <input
@@ -44,13 +47,7 @@
                 <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
               </button>
             </div>
-            <!-- <label for="">Data</label>
-            <div class="search-box">
-              <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
-              <button class="search-exit">
-                <img :src="getIcon('exit')" alt="exit-icon" />
-              </button>
-            </div> -->
+
             <action-button class="search-button" @click="onSearchConfirm">
               {{ $t('options.search-button') }}
             </action-button>
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 2b7afee..a628a37 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -103,7 +103,7 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-train': '',
       'search-driver': '',
-      // 'search-date': '',
+      'search-date': '',
     } as JournalTimetableSearcher);
 
     const countFromIndex = ref(0);
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index d7910c1..4a29cdb 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -18,6 +18,7 @@
               </button>
             </div>
           </div>
+          
           <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">
@@ -28,10 +29,10 @@
           </div>
           <div class="options_filters">
             <div class="filter-option">
-              <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
+              <button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
             </div>
             <div class="filter-option">
-              <button @click="resetAllFilters">ZRESETUJ FILTRY</button>
+              <button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
             </div>
           </div>
           <h1>{{ $t('options.search-title') }}</h1>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9f954a8..d976578 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -84,7 +84,8 @@
     "search-train": "Train no.",
     "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
-    "search-scenery": "Scenery name",
+    "search-station": "Scenery name",
+    "search-date": "Timetable date",
 
     "sort-mass": "mass",
     "sort-speed": "speed",
@@ -107,7 +108,9 @@
     "filter-freight": "FREIGHT",
     "filter-other": "OTHER",
     "filter-noTimetable": "NO TIMETABLE",
-    "filter-reset": "X RESET",
+
+    "filter-reset": "RESET FILTERS",
+    "filter-clear": "CLEAR FILTERS",
 
     "filter-all": "ALL ENTRIES",
     "filter-abandoned": "ABANDONED",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 3aa31b5..7459d9d 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -87,6 +87,7 @@
     "search-driver": "Nick maszynisty",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii",
+    "search-date": "Data rozkładu jazdy",
 
     "sort-distance": "kilometraż",
     "sort-total-stops": "stacje",
@@ -110,7 +111,9 @@
     "filter-freight": "TOWAROWE",
     "filter-other": "INNE",
     "filter-noTimetable": "BEZ RJ",
-    "filter-reset": "X RESETUJ",
+
+    "filter-reset": "ZRESETUJ FILTRY",
+    "filter-clear": "WYŁĄCZ FILTRY",
 
     "filter-all": "WSZYSTKIE",
     "filter-abandoned": "PORZUCONE",

From 6c83ce90bf876531c3425d76e03b5219d5e95982 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 9 Sep 2022 00:23:18 +0200
Subject: [PATCH 07/15] Dodano filtrowanie po dacie w opcjach

---
 src/components/JournalView/JournalOptions.vue | 26 +++++++++++--------
 .../JournalView/JournalTimetables.vue         |  8 +++---
 src/styles/search_box.scss                    |  9 ++++---
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 6f16f2e..26398ac 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -35,17 +35,21 @@
 
           <h1>{{ $t('options.search-title') }}</h1>
           <div class="content_search">
-            <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
-              <input
-                class="search-input"
-                :type="propName == 'search-date' ? 'date' : 'input'"
-                @keydown.enter="onSearchConfirm"
-                :placeholder="$t(`options.${propName}`)"
-                v-model="searchersValues[propName]"
-              />
-              <button class="search-exit">
-                <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
-              </button>
+            <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
+              <label v-if="propName == 'search-date'">{{ $t('options.search-date') }}</label>
+
+              <div class="search-box">
+                <input
+                  class="search-input"
+                  :type="propName == 'search-date' ? 'date' : 'input'"
+                  @keydown.enter="onSearchConfirm"
+                  :placeholder="$t(`options.${propName}`)"
+                  v-model="searchersValues[propName]"
+                />
+                <button class="search-exit">
+                  <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
+                </button>
+              </div>
             </div>
 
             <action-button class="search-button" @click="onSearchConfirm">
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index a628a37..9c4b973 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -192,12 +192,14 @@ 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();
+
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       if (driver) queries.push(`driverName=${driver}`);
       if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
diff --git a/src/styles/search_box.scss b/src/styles/search_box.scss
index 0fd1b15..e3848d5 100644
--- a/src/styles/search_box.scss
+++ b/src/styles/search_box.scss
@@ -1,6 +1,12 @@
 @import 'responsive.scss';
 
 .search {
+  label {
+    display: block;
+    color: #ccc;
+    margin-bottom: 0.25em;
+  }
+
   &-box {
     position: relative;
 
@@ -9,7 +15,6 @@
     border-radius: 0.5em;
     min-width: 200px;
     margin-right: 0.25em;
-    background-color: #333;
   }
 
   &-input {
@@ -18,7 +23,6 @@
     background-color: #333;
 
     padding: 0.35em 0.5em;
-    margin-right: 0.2em;
     width: 100%;
   }
 
@@ -36,7 +40,6 @@
   &-button {
     width: 80%;
     max-width: 300px;
-
   }
 
   @include smallScreen {

From 387f42985a6a82278f67b3647e377f055da82229 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 15:10:39 +0200
Subject: [PATCH 08/15] =?UTF-8?q?Poprawiono=20filtrowanie=20dat=C4=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalTimetables.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 9c4b973..ec542c0 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -194,7 +194,7 @@ export default defineComponent({
       const train = props.searchers?.['search-train'].trim();
 
       const dateString = props.searchers?.['search-date'].trim();
-      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
       const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       if (driver) queries.push(`driverName=${driver}`);

From 2a131ab1fbefed01a2b88b3a1aca13bae702065e Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 15:14:36 +0200
Subject: [PATCH 09/15] =?UTF-8?q?Poprawiono=20t=C5=82umaczenie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.json | 2 +-
 src/locales/pl.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index d976578..c4f39f5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -85,7 +85,7 @@
     "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name",
-    "search-date": "Timetable date",
+    "search-date": "Timetable date (CEST / GMT+2)",
 
     "sort-mass": "mass",
     "sort-speed": "speed",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 7459d9d..71e7316 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -87,7 +87,7 @@
     "search-driver": "Nick maszynisty",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii",
-    "search-date": "Data rozkładu jazdy",
+    "search-date": "Data rozkładu jazdy (czas polski)",
 
     "sort-distance": "kilometraż",
     "sort-total-stops": "stacje",

From 93aa8894148e0578398c1a9597ca879228dc2e79 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 17:57:43 +0200
Subject: [PATCH 10/15] Cleanup kodu

---
 .../JournalView/JournalDispatchers.vue        |  5 +-
 src/components/JournalView/JournalOptions.vue | 68 +++++++++++++------
 .../JournalView/JournalTimetables.vue         | 14 +++-
 src/components/TrainsView/TrainOptions.vue    |  2 +-
 .../Journal/JournalTimetablesConsts.ts        | 28 ++++++++
 .../Trains/TrainOptionsConsts.ts}             |  8 +--
 src/data/journalFilters.ts                    | 30 --------
 src/locales/en.json                           |  1 +
 src/locales/pl.json                           |  3 +-
 src/scripts/managers/trainFilterManager.ts    |  2 +-
 .../{ => Journal}/JournalDispatcherTypes.ts   |  0
 src/types/Journal/JournalTimetablesTypes.ts   | 11 +++
 src/types/JournalTimetablesTypes.ts           |  3 -
 src/types/{ => Trains}/TrainOptionsTypes.ts   |  2 +-
 src/views/TrainsView.vue                      |  4 +-
 src/vuex.d.ts                                 | 26 -------
 16 files changed, 114 insertions(+), 93 deletions(-)
 create mode 100644 src/constants/Journal/JournalTimetablesConsts.ts
 rename src/{data/trainOptions.ts => constants/Trains/TrainOptionsConsts.ts} (79%)
 delete mode 100644 src/data/journalFilters.ts
 rename src/types/{ => Journal}/JournalDispatcherTypes.ts (100%)
 create mode 100644 src/types/Journal/JournalTimetablesTypes.ts
 delete mode 100644 src/types/JournalTimetablesTypes.ts
 rename src/types/{ => Trains}/TrainOptionsTypes.ts (50%)
 delete mode 100644 src/vuex.d.ts

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index 7623e25..c4e0977 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import ActionButton from '../../components/Global/ActionButton.vue';
@@ -51,8 +51,9 @@ import { URLs } from '../../scripts/utils/apiURLs';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 import JournalDispatchersList from './JournalDispatchersList.vue';
-import { JournalDispatcherSearcher } from '../../types/JournalDispatcherTypes';
+import { JournalDispatcherSearcher } from '../../types/Journal/JournalDispatcherTypes';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 26398ac..c541a6b 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -34,27 +34,44 @@
           </div>
 
           <h1>{{ $t('options.search-title') }}</h1>
-          <div class="content_search">
+          <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date'">{{ $t('options.search-date') }}</label>
+              <label v-if="propName == 'search-date'" for="date">{{ $t('options.search-date') }}</label>
 
               <div class="search-box">
                 <input
+                  v-if="propName == 'search-date'"
+                  class="search-input"
+                  id="date"
+                  type="date"
+                  min="2022-02-01"
+                  @keydown.enter="onSearchConfirm"
+                  v-model="searchersValues[propName]"
+                />
+
+                <input
+                  v-else
                   class="search-input"
-                  :type="propName == 'search-date' ? 'date' : 'input'"
                   @keydown.enter="onSearchConfirm"
                   :placeholder="$t(`options.${propName}`)"
                   v-model="searchersValues[propName]"
                 />
+
                 <button class="search-exit">
                   <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
                 </button>
               </div>
             </div>
 
-            <action-button class="search-button" @click="onSearchConfirm">
-              {{ $t('options.search-button') }}
-            </action-button>
+            <div class="search_actions">
+              <action-button class="search-button" @click="onSearchConfirm">
+                {{ $t('options.search-button') }}
+              </action-button>
+
+              <action-button class="search-button" @click="onResetButtonClick">
+                {{ $t('options.reset-button') }}
+              </action-button>
+            </div>
           </div>
         </div>
       </div>
@@ -63,14 +80,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, JournalFilter, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
 export default defineComponent({
   components: { SelectBox, ActionButton },
-  emits: ['onSearchConfirm'],
+  emits: ['onSearchConfirm', 'onOptionsReset'],
   mixins: [imageMixin],
 
   props: {
@@ -128,6 +146,10 @@ export default defineComponent({
     onSearchConfirm() {
       this.$emit('onSearchConfirm');
     },
+
+    onResetButtonClick() {
+      this.$emit('onOptionsReset');
+    },
   },
 });
 </script>
@@ -218,16 +240,6 @@ h1 {
   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;
@@ -258,6 +270,24 @@ h1 {
   }
 }
 
+.search_content > div {
+  margin: 0.5em auto;
+}
+
+.search_content > button {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.search_actions {
+  display: flex;
+
+  button {
+    margin: 0.25em 0.5em;
+  }
+}
+
 @include smallScreen() {
   h1 {
     text-align: center;
@@ -309,4 +339,4 @@ h1 {
   //   }
   // }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index ec542c0..469ea49 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -7,6 +7,7 @@
     <div class="journal_wrapper">
       <JournalOptions
         @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
       />
@@ -46,12 +47,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, JournalFilter, provide, reactive, Ref, ref } from 'vue';
+import { defineComponent, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import DriverStats from './DriverStats.vue';
 import Loading from '../Global/Loading.vue';
-import { journalTimetableFilters } from '../../data/journalFilters';
+import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -60,10 +61,11 @@ import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData
 import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/store';
 import JournalOptions from './JournalOptions.vue';
-import { JournalTimetableSearcher } from '../../types/JournalTimetablesTypes';
+import { JournalTimetableSearcher } from '../../types/Journal/JournalTimetablesTypes';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import imageMixin from '../../mixins/imageMixin';
 import JournalTimetablesList from './JournalTimetablesList.vue';
+import { journalTimetableFilters } from '../../constants/Journal/JournalTimetablesConsts';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
@@ -150,6 +152,12 @@ export default defineComponent({
       if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
+    resetOptions() {
+      Object.values(this.searchersValues).map((_) => '');
+      this.journalFilterActive = this.journalTimetableFilters[0];
+      this.sorterActive.id = 'timetableId';
+    },
+
     searchHistory() {
       this.fetchHistoryData({
         searchers: this.searchersValues,
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 4a29cdb..1bcd6cb 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -59,7 +59,7 @@
 <script lang="ts">
 import { defineComponent, inject, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
-import { TrainFilter } from '../../types/TrainOptionsTypes';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
diff --git a/src/constants/Journal/JournalTimetablesConsts.ts b/src/constants/Journal/JournalTimetablesConsts.ts
new file mode 100644
index 0000000..1d5702b
--- /dev/null
+++ b/src/constants/Journal/JournalTimetablesConsts.ts
@@ -0,0 +1,28 @@
+import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
+import { JournalFilter } from "../../types/Journal/JournalTimetablesTypes";
+
+export const journalTimetableFilters: JournalFilter[] = [
+  {
+    id: JournalFilterType.all,
+    filterSection: 'timetable-status',
+    isActive: true,
+  },
+
+  {
+    id: JournalFilterType.active,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.fulfilled,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+
+  {
+    id: JournalFilterType.abandoned,
+    filterSection: 'timetable-status',
+    isActive: false,
+  },
+];
diff --git a/src/data/trainOptions.ts b/src/constants/Trains/TrainOptionsConsts.ts
similarity index 79%
rename from src/data/trainOptions.ts
rename to src/constants/Trains/TrainOptionsConsts.ts
index d8aa8e8..641f472 100644
--- a/src/data/trainOptions.ts
+++ b/src/constants/Trains/TrainOptionsConsts.ts
@@ -1,5 +1,5 @@
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
-import { TrainFilter } from "../types/TrainOptionsTypes";
+import { TrainFilterType } from '../../scripts/enums/TrainFilterType';
+import { TrainFilter } from '../../types/Trains/TrainOptionsTypes';
 
 export const trainFilters: TrainFilter[] = [
   {
@@ -56,5 +56,5 @@ export const sorterOptions = [
   {
     id: 'length',
     value: 'długość',
-  }
-];
\ No newline at end of file
+  },
+];
diff --git a/src/data/journalFilters.ts b/src/data/journalFilters.ts
deleted file mode 100644
index 4f1e25e..0000000
--- a/src/data/journalFilters.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { JournalFilter } from "vue";
-import { JournalFilterType } from "../scripts/enums/JournalFilterType";
-
-export const journalTimetableFilters: JournalFilter[] = [
-    {
-        id: JournalFilterType.all,
-        filterSection: "timetable-status",
-        isActive: true
-    },
-
-    {
-        id: JournalFilterType.active,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.fulfilled,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-
-    {
-        id: JournalFilterType.abandoned,
-        filterSection: "timetable-status",
-        isActive: false
-    },
-]
-
-export const journalDispatcherFilters: JournalFilter[] = []
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index c4f39f5..96bc5c4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -75,6 +75,7 @@
     "donate": "DONATE",
 
     "search-button": "Search",
+    "reset-button": "Reset",
 
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 71e7316..c75c24b 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -77,7 +77,8 @@
     "donate": "WESPRZYJ",
 
     "search-button": "Szukaj",
-
+    "reset-button": "Zresetuj",
+    
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",
diff --git a/src/scripts/managers/trainFilterManager.ts b/src/scripts/managers/trainFilterManager.ts
index 920e3ba..a006e96 100644
--- a/src/scripts/managers/trainFilterManager.ts
+++ b/src/scripts/managers/trainFilterManager.ts
@@ -1,4 +1,4 @@
-import { TrainFilter } from "../../types/TrainOptionsTypes";
+import { TrainFilter } from "../../types/Trains/TrainOptionsTypes";
 import { TrainFilterType } from "../enums/TrainFilterType";
 import Train from "../interfaces/Train";
 import TrainStop from "../interfaces/TrainStop";
diff --git a/src/types/JournalDispatcherTypes.ts b/src/types/Journal/JournalDispatcherTypes.ts
similarity index 100%
rename from src/types/JournalDispatcherTypes.ts
rename to src/types/Journal/JournalDispatcherTypes.ts
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
new file mode 100644
index 0000000..37768e8
--- /dev/null
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -0,0 +1,11 @@
+import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
+
+export type JournalTimetableSearcher = {
+  [key in 'search-driver' | 'search-train' | 'search-date']: string;
+};
+
+export interface JournalFilter {
+  id: JournalFilterType;
+  filterSection: string;
+  isActive: boolean;
+}
\ No newline at end of file
diff --git a/src/types/JournalTimetablesTypes.ts b/src/types/JournalTimetablesTypes.ts
deleted file mode 100644
index dd27bc1..0000000
--- a/src/types/JournalTimetablesTypes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type JournalTimetableSearcher = {
-  [key in 'search-driver' | 'search-train' | 'search-date']: string;
-};
diff --git a/src/types/TrainOptionsTypes.ts b/src/types/Trains/TrainOptionsTypes.ts
similarity index 50%
rename from src/types/TrainOptionsTypes.ts
rename to src/types/Trains/TrainOptionsTypes.ts
index 2545f3e..b9db0a3 100644
--- a/src/types/TrainOptionsTypes.ts
+++ b/src/types/Trains/TrainOptionsTypes.ts
@@ -1,4 +1,4 @@
-import { TrainFilterType } from "../scripts/enums/TrainFilterType";
+import { TrainFilterType } from "../../scripts/enums/TrainFilterType";
 
 export interface TrainFilter {
   id: TrainFilterType;
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 2701861..a3225d8 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -15,11 +15,11 @@ import { computed, ComputedRef, defineComponent, provide, reactive, ref } from '
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
-import { trainFilters } from '../data/trainOptions';
+import { trainFilters } from '../constants/Trains/TrainOptionsConsts';
 import Train from '../scripts/interfaces/Train';
 import { filteredTrainList } from '../scripts/managers/trainFilterManager';
 import { useStore } from '../store/store';
-import { TrainFilter } from '../types/TrainOptionsTypes';
+import { TrainFilter } from '../types/Trains/TrainOptionsTypes';
 
 export default defineComponent({
   components: {
diff --git a/src/vuex.d.ts b/src/vuex.d.ts
deleted file mode 100644
index 6532360..0000000
--- a/src/vuex.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ComponentCustomProperties } from 'vue'
-import { Store } from 'vuex'
-import { JournalFilterType } from './scripts/enums/JournalFilterType';
-import { TrainFilterType } from './scripts/enums/TrainFilterType';
-
-declare module '@vue/runtime-core' {
-  // declare your own store states
-  interface State {
-    count: number
-  }
-
-  // provide typings for `this.$store`
-  interface ComponentCustomProperties {
-    $store: Store<State>
-  }
-
-  
-
-  interface JournalFilter {
-    id: JournalFilterType;
-    filterSection: string;
-    isActive: boolean;
-  }
-
-
-}
\ No newline at end of file

From 16618811271129282398b356357637132664057c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 18:12:07 +0200
Subject: [PATCH 11/15] Poprawki w stylach

---
 src/components/JournalView/JournalOptions.vue | 45 ++-----------------
 .../StationsView/StationFilterCard.vue        |  9 ++--
 src/components/TrainsView/TrainOptions.vue    |  4 +-
 src/styles/global.scss                        | 15 +++++--
 4 files changed, 23 insertions(+), 50 deletions(-)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index c541a6b..55da968 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -2,9 +2,9 @@
   <div class="journal-options">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--open" @click="showOptions = !showOptions">
+    <button class="btn--image" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      FILTRY
+      {{ $t('options.filters') }}
     </button>
 
     <transition name="options-anim">
@@ -200,21 +200,6 @@ export default defineComponent({
   z-index: 100;
 }
 
-.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;
@@ -303,7 +288,7 @@ h1 {
     max-width: 100%;
   }
 
-  .btn--open {
+  .btn--image {
     margin: 0 auto;
   }
 
@@ -316,27 +301,5 @@ h1 {
   .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>
\ No newline at end of file
+</style>
diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue
index 95a4fc3..e3fc7f4 100644
--- a/src/components/StationsView/StationFilterCard.vue
+++ b/src/components/StationsView/StationFilterCard.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard">
     <div class="card_btn">
-      <button class="btn btn--option" @click="toggleCard">
-        <img class="button_icon" :src="getIcon('filter2')" alt="icon-filter" />
+      <button class="btn--image" @click="toggleCard">
+        <img class="button_icon" :src="getIcon('filter2')" alt="filter icon" />
         {{ $t('options.filters') }}
       </button>
     </div>
@@ -91,7 +91,6 @@
 </template>
 
 <script lang="ts">
-
 import { defineComponent, inject } from 'vue';
 import inputData from '../../data/options.json';
 import imageMixin from '../../mixins/imageMixin';
@@ -107,7 +106,6 @@ export default defineComponent({
   mixins: [imageMixin],
 
   data: () => ({
-
     inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: 'options_saved',
@@ -263,6 +261,7 @@ export default defineComponent({
   }
 }
 
+
 .card {
   &_btn {
     button {
@@ -389,6 +388,7 @@ export default defineComponent({
     input {
       width: 100%;
       padding: 0.5em;
+      border: 1px solid white;
     }
   }
 
@@ -437,6 +437,7 @@ export default defineComponent({
 
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
+      appearance: none;
 
       height: 20px;
       width: 20px;
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index 1bcd6cb..d015a37 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -4,7 +4,7 @@
 
     <button class="btn--open" @click="showOptions = !showOptions">
       <img :src="getIcon('filter2')" alt="Open filters" />
-      FILTRY
+      {{ $t('options.filters') }}
     </button>
 
     <transition name="options-anim">
@@ -18,7 +18,7 @@
               </button>
             </div>
           </div>
-          
+
           <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8fe1371..db20d16 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -24,7 +24,6 @@
   &-track {
     border-radius: 0.5em;
     background-color: #333;
-
   }
 
   &-thumb {
@@ -217,8 +216,18 @@ button {
   }
 
   &--image {
-    color: white;
-    transition: color 0.3s;
+    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;
+    }
   }
 
   &--option {

From 065143c3592759734738231f14efe77924c50004 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 18:22:00 +0200
Subject: [PATCH 12/15] =?UTF-8?q?JournalTimetables:=20dodano=20resetowanie?=
 =?UTF-8?q?=20filtr=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalTimetables.vue           | 17 +++++++++++------
 src/types/Journal/JournalTimetablesTypes.ts     |  9 +++++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index 469ea49..b530a96 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -52,7 +52,7 @@ import axios from 'axios';
 
 import DriverStats from './DriverStats.vue';
 import Loading from '../Global/Loading.vue';
-import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalFilter, JournalSorter } from '../../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -61,7 +61,7 @@ import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData
 import { URLs } from '../../scripts/utils/apiURLs';
 import { useStore } from '../../store/store';
 import JournalOptions from './JournalOptions.vue';
-import { JournalTimetableSearcher } from '../../types/Journal/JournalTimetablesTypes';
+import { JorunalTimetableSearchType } from '../../types/Journal/JournalTimetablesTypes';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import imageMixin from '../../mixins/imageMixin';
 import JournalTimetablesList from './JournalTimetablesList.vue';
@@ -99,14 +99,14 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive = ref({ id: 'timetableId', dir: -1 });
+    const sorterActive: JournalSorter = reactive({ id: 'timetableId', dir: 1 });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
     const searchersValues = reactive({
       'search-train': '',
       'search-driver': '',
       'search-date': '',
-    } as JournalTimetableSearcher);
+    } as JorunalTimetableSearchType);
 
     const countFromIndex = ref(0);
     const countLimit = 15;
@@ -153,9 +153,14 @@ export default defineComponent({
     },
 
     resetOptions() {
-      Object.values(this.searchersValues).map((_) => '');
+      this.searchersValues['search-date'] = '';
+      this.searchersValues['search-driver'] = '';
+      this.searchersValues['search-train'] = '';
+
       this.journalFilterActive = this.journalTimetableFilters[0];
       this.sorterActive.id = 'timetableId';
+
+      this.searchHistory();
     },
 
     searchHistory() {
@@ -190,7 +195,7 @@ export default defineComponent({
 
     async fetchHistoryData(
       props: {
-        searchers?: JournalTimetableSearcher;
+        searchers?: JorunalTimetableSearchType;
         filter?: JournalFilter;
       } = {}
     ) {
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
index 37768e8..f3ff604 100644
--- a/src/types/Journal/JournalTimetablesTypes.ts
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -1,6 +1,6 @@
 import { JournalFilterType } from '../../scripts/enums/JournalFilterType';
 
-export type JournalTimetableSearcher = {
+export type JorunalTimetableSearchType = {
   [key in 'search-driver' | 'search-train' | 'search-date']: string;
 };
 
@@ -8,4 +8,9 @@ export interface JournalFilter {
   id: JournalFilterType;
   filterSection: string;
   isActive: boolean;
-}
\ No newline at end of file
+}
+
+export interface JournalSorter {
+  id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
+  dir: -1 | 1;
+}

From a81cc4559bc87a77fa5d89ff938f29ad27a00ecb Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 10 Sep 2022 22:49:56 +0200
Subject: [PATCH 13/15] =?UTF-8?q?Poprawki=20w=20filtrach=20i=20ustawieniac?=
 =?UTF-8?q?h=20dziennik=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        | 76 ++++++++++++-------
 src/components/JournalView/JournalOptions.vue | 45 ++++++++---
 .../JournalView/JournalTimetables.vue         | 15 ++--
 .../Journal/JournalTimetablesConsts.ts        |  4 +-
 src/styles/JournalSection.scss                |  7 ++
 src/types/Journal/JournalDispatcherTypes.ts   |  5 ++
 src/types/Journal/JournalTimetablesTypes.ts   |  4 +-
 7 files changed, 107 insertions(+), 49 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index c4e0977..14d0fb4 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -1,37 +1,49 @@
 <template>
   <section class="journal-timetables">
     <div class="journal_wrapper">
-      <JournalOptions @on-search-confirm="searchHistory" :sorter-option-ids="['timestampFrom', 'duration']" />
+      <JournalOptions
+        @on-search-confirm="searchHistory"
+        @on-options-reset="resetOptions"
+        :sorter-option-ids="['timestampFrom', 'duration']"
+        :data-status="dataStatus"
+      />
 
       <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.Initialized || (dataStatus == DataStatus.Loading && historyList.length == 0)"
+        />
 
-            <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 class="journal_warning" v-else-if="historyList.length == 0">
-              {{ $t('app.no-result') }}
-            </div>
+        <div class="journal_warning" v-else-if="historyList.length == 0 && dataStatus != DataStatus.Loading">
+          {{ $t('app.no-result') }}
+        </div>
 
-            <div v-else>
-              <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
+        <div v-else>
+          <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
 
-              <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 && computedHistoryList.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>
+        <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>
@@ -51,9 +63,9 @@ import { URLs } from '../../scripts/utils/apiURLs';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 import JournalDispatchersList from './JournalDispatchersList.vue';
-import { JournalDispatcherSearcher } from '../../types/Journal/JournalDispatcherTypes';
+import { JournalDispatcherSearcher, JournalDispatcherSorter } from '../../types/Journal/JournalDispatcherTypes';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
-import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 
 const DISPATCHERS_API_URL = `${URLs.stacjownikAPI}/api/getDispatchers`;
 
@@ -88,7 +100,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive = ref({ id: 'timestampFrom', dir: -1 });
+    const sorterActive: JournalDispatcherSorter = reactive({ id: 'timestampFrom', dir: -1 });
     const journalFilterActive = ref({});
 
     const searchersValues = reactive({
@@ -152,6 +164,14 @@ export default defineComponent({
       if (scrollTop > elementHeight * 0.85) this.addHistoryData();
     },
 
+    resetOptions() {
+      this.searchersValues['search-station'] = '';
+      this.searchersValues['search-dispatcher'] = '';
+      this.sorterActive.id = 'timestampFrom';
+
+      this.searchHistory();
+    },
+
     searchHistory() {
       this.fetchHistoryData({
         searchers: this.searchersValues,
@@ -184,7 +204,7 @@ export default defineComponent({
     async fetchHistoryData(
       props: {
         searchers?: JournalDispatcherSearcher;
-        filter?: JournalFilter;
+        filter?: JournalTimetableFilter;
       } = {}
     ) {
       this.dataStatus = DataStatus.Loading;
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index 55da968..a02ce28 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -64,25 +64,31 @@
             </div>
 
             <div class="search_actions">
-              <action-button class="search-button" @click="onSearchConfirm">
-                {{ $t('options.search-button') }}
-              </action-button>
-
               <action-button class="search-button" @click="onResetButtonClick">
                 {{ $t('options.reset-button') }}
               </action-button>
+
+              <action-button class="search-button" @click="onSearchConfirm">
+                {{ $t('options.search-button') }}
+              </action-button>
             </div>
           </div>
         </div>
+
+        <div class="data-status">
+          <span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
+          <span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
+        </div>
       </div>
     </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, Prop, PropType } from 'vue';
 import imageMixin from '../../mixins/imageMixin';
-import { JournalFilter } from '../../types/Journal/JournalTimetablesTypes';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { JournalTimetableFilter } from '../../types/Journal/JournalTimetablesTypes';
 import ActionButton from '../Global/ActionButton.vue';
 import SelectBox from '../Global/SelectBox.vue';
 
@@ -98,14 +104,20 @@ export default defineComponent({
     },
 
     filters: {
-      type: Array as PropType<JournalFilter[]>,
+      type: Array as PropType<JournalTimetableFilter[]>,
       default: [],
     },
+
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+      default: DataStatus.Initialized,
+    },
   },
 
   data() {
     return {
       showOptions: false,
+      DataStatus,
     };
   },
 
@@ -113,7 +125,7 @@ export default defineComponent({
     return {
       searchersValues: inject('searchersValues') as { [key: string]: string },
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      journalFilterActive: inject('journalFilterActive') as JournalFilter,
+      journalFilterActive: inject('journalFilterActive') as JournalTimetableFilter,
     };
   },
 
@@ -133,7 +145,7 @@ export default defineComponent({
       this.$emit('onSearchConfirm');
     },
 
-    onFilterChange(filter: JournalFilter) {
+    onFilterChange(filter: JournalTimetableFilter) {
       this.journalFilterActive = filter;
       this.$emit('onSearchConfirm');
     },
@@ -255,7 +267,7 @@ h1 {
   }
 }
 
-.search_content > div {
+.search_content > .search {
   margin: 0.5em auto;
 }
 
@@ -265,14 +277,23 @@ h1 {
   margin: 0 auto;
 }
 
-.search_actions {
+.search_content > .search_actions {
   display: flex;
+  margin: 1em 0 0.5em 0;
 
   button {
     margin: 0.25em 0.5em;
   }
 }
 
+.data-status {
+  display: flex;
+  justify-content: center;
+  font-size: 1.1em;
+
+  height: 1.5em;
+}
+
 @include smallScreen() {
   h1 {
     text-align: center;
@@ -302,4 +323,4 @@ h1 {
     justify-content: center;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/JournalView/JournalTimetables.vue b/src/components/JournalView/JournalTimetables.vue
index b530a96..40557fd 100644
--- a/src/components/JournalView/JournalTimetables.vue
+++ b/src/components/JournalView/JournalTimetables.vue
@@ -10,18 +10,23 @@
         @on-options-reset="resetOptions"
         :sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
         :filters="journalTimetableFilters"
+        :data-status="dataStatus"
       />
 
       <div class="list_wrapper" @scroll="handleScroll">
         <!-- <transition name="warning" mode="out-in"> -->
         <!-- <div :key="dataStatus"> -->
-        <Loading v-if="dataStatus == DataStatus.Loading || dataStatus == DataStatus.Initialized" />
+        <Loading
+          v-if="
+            dataStatus == DataStatus.Initialized || (dataStatus == DataStatus.Loading && timetableHistory.length == 0)
+          "
+        />
 
         <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">
+        <div v-else-if="timetableHistory.length == 0 && dataStatus != DataStatus.Loading" class="journal_warning">
           {{ $t('app.no-result') }}
         </div>
 
@@ -52,7 +57,7 @@ import axios from 'axios';
 
 import DriverStats from './DriverStats.vue';
 import Loading from '../Global/Loading.vue';
-import { JournalFilter, JournalSorter } from '../../types/Journal/JournalTimetablesTypes';
+import { JournalTimetableFilter, JournalTimetableSorter } from '../../types/Journal/JournalTimetablesTypes';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import { DataStatus } from '../../scripts/enums/DataStatus';
@@ -99,7 +104,7 @@ export default defineComponent({
   }),
 
   setup() {
-    const sorterActive: JournalSorter = reactive({ id: 'timetableId', dir: 1 });
+    const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
     const journalFilterActive = ref(journalTimetableFilters[0]);
 
     const searchersValues = reactive({
@@ -196,7 +201,7 @@ export default defineComponent({
     async fetchHistoryData(
       props: {
         searchers?: JorunalTimetableSearchType;
-        filter?: JournalFilter;
+        filter?: JournalTimetableFilter;
       } = {}
     ) {
       this.dataStatus = DataStatus.Loading;
diff --git a/src/constants/Journal/JournalTimetablesConsts.ts b/src/constants/Journal/JournalTimetablesConsts.ts
index 1d5702b..d969b7f 100644
--- a/src/constants/Journal/JournalTimetablesConsts.ts
+++ b/src/constants/Journal/JournalTimetablesConsts.ts
@@ -1,7 +1,7 @@
 import { JournalFilterType } from "../../scripts/enums/JournalFilterType";
-import { JournalFilter } from "../../types/Journal/JournalTimetablesTypes";
+import { JournalTimetableFilter } from "../../types/Journal/JournalTimetablesTypes";
 
-export const journalTimetableFilters: JournalFilter[] = [
+export const journalTimetableFilters: JournalTimetableFilter[] = [
   {
     id: JournalFilterType.all,
     filterSection: 'timetable-status',
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index ea63cb0..bd946df 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -21,6 +21,7 @@
 .list_wrapper {
   overflow-y: scroll;
   height: 90vh;
+  min-height: 550px;
 
   padding-right: 0.2em;
 }
@@ -76,3 +77,9 @@
     flex-wrap: wrap;
   }
 }
+
+@media (orientation: landscape) {
+  .journal_wrapper {
+    font-size: 1em;
+  }
+}
diff --git a/src/types/Journal/JournalDispatcherTypes.ts b/src/types/Journal/JournalDispatcherTypes.ts
index abfd4a3..9de65af 100644
--- a/src/types/Journal/JournalDispatcherTypes.ts
+++ b/src/types/Journal/JournalDispatcherTypes.ts
@@ -1,3 +1,8 @@
 export type JournalDispatcherSearcher = {
   [key in 'search-dispatcher' | 'search-station']: string;
 };
+
+export interface JournalDispatcherSorter {
+  id: 'timestampFrom' | 'duration';
+  dir: -1 | 1;
+}
\ No newline at end of file
diff --git a/src/types/Journal/JournalTimetablesTypes.ts b/src/types/Journal/JournalTimetablesTypes.ts
index f3ff604..c38d3f4 100644
--- a/src/types/Journal/JournalTimetablesTypes.ts
+++ b/src/types/Journal/JournalTimetablesTypes.ts
@@ -4,13 +4,13 @@ export type JorunalTimetableSearchType = {
   [key in 'search-driver' | 'search-train' | 'search-date']: string;
 };
 
-export interface JournalFilter {
+export interface JournalTimetableFilter {
   id: JournalFilterType;
   filterSection: string;
   isActive: boolean;
 }
 
-export interface JournalSorter {
+export interface JournalTimetableSorter {
   id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
   dir: -1 | 1;
 }

From 3a2978bbe30d327a91cc7a0cde27a95af876efb2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 11 Sep 2022 02:00:58 +0200
Subject: [PATCH 14/15] =?UTF-8?q?Usprawniono=20dzia=C5=82anie=20listy=20dz?=
 =?UTF-8?q?iennika=20dy=C5=BCurnych?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchers.vue        |   8 +-
 .../JournalView/JournalDispatchersList.vue    | 108 +++++++++---------
 src/components/JournalView/JournalOptions.vue |   4 +-
 src/components/TrainsView/TrainTable.vue      |   5 +-
 src/types/Journal/JournalDispatcherTypes.ts   |   2 +-
 5 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchers.vue b/src/components/JournalView/JournalDispatchers.vue
index 14d0fb4..368c5c4 100644
--- a/src/components/JournalView/JournalDispatchers.vue
+++ b/src/components/JournalView/JournalDispatchers.vue
@@ -106,6 +106,7 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-dispatcher': '',
       'search-station': '',
+      'search-date': '',
     } as JournalDispatcherSearcher);
 
     const countFromIndex = ref(0);
@@ -211,14 +212,15 @@ export default defineComponent({
 
       const queries: string[] = [];
 
-      // 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 dispatcher = props.searchers?.['search-dispatcher'].trim();
       const station = props.searchers?.['search-station'].trim();
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
       if (station) queries.push(`stationName=${station}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');
diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 60f36f6..f701998 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -1,41 +1,42 @@
 <template>
   <ul class="journal-list">
-    <transition-group name="journal-list-anim">
-      <li v-for="(doc, i) in dispatcherHistory" :key="doc.id">
-        <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-          <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-        </div>
+    <!-- <transition-group name="journal-list-anim"> -->
+    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+      <div v-if="typeof item == 'string'" class="journal_day">
+        {{ item }}
+      </div>
 
-        <div
-          class="journal_item"
-          :class="{ online: doc.isOnline }"
-          @click="navigateToScenery(doc.stationName, doc.isOnline)"
-          @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-          tabindex="0"
-        >
+      <div
+        v-else
+        class="journal_item"
+        :class="{ online: item.isOnline }"
+        @click="navigateToScenery(item.stationName, item.isOnline)"
+        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
+        tabindex="0"
+      >
+        <span>
+          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
+          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
+          <span class="region-badge" :class="item.region">PL1</span>
+        </span>
+
+        <span>
+          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
           <span>
-            <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-            <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-            <span class="region-badge" :class="doc.region">PL1</span>
+            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
           </span>
 
-          <span>
-            <span :data-status="doc.isOnline"> {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
-            <span>
-              {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-            </span>
+          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
 
-            <span v-if="doc.currentDuration && doc.isOnline"> ({{ calculateDuration(doc.currentDuration) }}) </span>
-
-            <span v-if="doc.timestampTo">
-              &gt;
-              {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-              ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.currentDuration!) }})
-            </span>
+          <span v-if="item.timestampTo">
+            &gt;
+            {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+            ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
           </span>
-        </div>
-      </li>
-    </transition-group>
+        </span>
+      </div>
+    </li>
+    <!-- </transition-group> -->
   </ul>
 </template>
 
@@ -54,6 +55,17 @@ export default defineComponent({
 
   mixins: [dateMixin],
 
+  computed: {
+    computedDispatcherHistory() {
+      return this.dispatcherHistory.reduce((acc, historyItem, i) => {
+        if (this.isAnotherDay(i - 1, i)) acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
+        acc.push(historyItem);
+
+        return acc;
+      }, [] as (DispatcherHistory | string)[]);
+    },
+  },
+
   methods: {
     navigateToScenery(name: string, isOnline: boolean) {
       if (!isOnline) return;
@@ -87,6 +99,11 @@ export default defineComponent({
   }
 }
 
+li.sticky {
+  position: sticky;
+  top: 0;
+}
+
 .journal_item {
   display: flex;
   justify-content: space-between;
@@ -108,36 +125,19 @@ export default defineComponent({
 }
 
 .journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
   margin: 1em 0;
+  padding: 0.5em;
+  font-weight: bold;
+
+  background-color: #333;
 
   span {
     position: relative;
-    background-color: #4d4d4d;
+    background-color: inherit;
     z-index: 10;
+    padding-right: 1em;
 
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
+    font-weight: bold;
   }
 }
 
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index a02ce28..9ea25a6 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/src/components/JournalView/JournalOptions.vue
@@ -75,10 +75,10 @@
           </div>
         </div>
 
-        <div class="data-status">
+        <!-- <div class="data-status">
           <span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
           <span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
-        </div>
+        </div> -->
       </div>
     </transition>
   </div>
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index ba1dc09..a68b28b 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -118,11 +118,10 @@ export default defineComponent({
   text-align: center;
 
   padding: 1em 0;
-  margin: 1em 0;
 
   font-size: 1.5em;
 
-  background: #333;
+  background: #1a1a1a;
 }
 
 img.train-image {
@@ -195,4 +194,4 @@ img.train-image {
     text-align: center;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/types/Journal/JournalDispatcherTypes.ts b/src/types/Journal/JournalDispatcherTypes.ts
index 9de65af..2c101e4 100644
--- a/src/types/Journal/JournalDispatcherTypes.ts
+++ b/src/types/Journal/JournalDispatcherTypes.ts
@@ -1,5 +1,5 @@
 export type JournalDispatcherSearcher = {
-  [key in 'search-dispatcher' | 'search-station']: string;
+  [key in 'search-dispatcher' | 'search-station' | 'search-date']: string;
 };
 
 export interface JournalDispatcherSorter {

From 4f5fcb3189033e293ea77d68978a8f4563582563 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 11 Sep 2022 13:59:08 +0200
Subject: [PATCH 15/15] Bump wersji

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7f502d4..bff377b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "private": true,
   "scripts": {
     "dev": "vite",