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] 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 {