mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-04 13:58:12 +00:00
Dodano filtrowanie po dacie w opcjach
This commit is contained in:
@@ -35,17 +35,21 @@
|
|||||||
|
|
||||||
<h1>{{ $t('options.search-title') }}</h1>
|
<h1>{{ $t('options.search-title') }}</h1>
|
||||||
<div class="content_search">
|
<div class="content_search">
|
||||||
<div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
|
<div class="search" v-for="(_, propName) in searchersValues" :key="propName">
|
||||||
<input
|
<label v-if="propName == 'search-date'">{{ $t('options.search-date') }}</label>
|
||||||
class="search-input"
|
|
||||||
:type="propName == 'search-date' ? 'date' : 'input'"
|
<div class="search-box">
|
||||||
@keydown.enter="onSearchConfirm"
|
<input
|
||||||
:placeholder="$t(`options.${propName}`)"
|
class="search-input"
|
||||||
v-model="searchersValues[propName]"
|
:type="propName == 'search-date' ? 'date' : 'input'"
|
||||||
/>
|
@keydown.enter="onSearchConfirm"
|
||||||
<button class="search-exit">
|
:placeholder="$t(`options.${propName}`)"
|
||||||
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
|
v-model="searchersValues[propName]"
|
||||||
</button>
|
/>
|
||||||
|
<button class="search-exit">
|
||||||
|
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<action-button class="search-button" @click="onSearchConfirm">
|
<action-button class="search-button" @click="onSearchConfirm">
|
||||||
|
|||||||
@@ -193,11 +193,13 @@ export default defineComponent({
|
|||||||
const driver = props.searchers?.['search-driver'].trim();
|
const driver = props.searchers?.['search-driver'].trim();
|
||||||
const train = props.searchers?.['search-train'].trim();
|
const train = props.searchers?.['search-train'].trim();
|
||||||
|
|
||||||
// TODO: dodanie możliwości sortowania timestampem z API
|
const dateString = props.searchers?.['search-date'].trim();
|
||||||
// const date = 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 (driver) queries.push(`driverName=${driver}`);
|
||||||
if (train) queries.push(train.startsWith('#') ? `timetableId=${train.replace('#', '')}` : `trainNo=${train}`);
|
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'];
|
// Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
|
||||||
if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
|
if (this.sorterActive.id == 'distance') queries.push('sortBy=routeDistance');
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
@import 'responsive.scss';
|
@import 'responsive.scss';
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
color: #ccc;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
&-box {
|
&-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@@ -9,7 +15,6 @@
|
|||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
margin-right: 0.25em;
|
margin-right: 0.25em;
|
||||||
background-color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-input {
|
&-input {
|
||||||
@@ -18,7 +23,6 @@
|
|||||||
background-color: #333;
|
background-color: #333;
|
||||||
|
|
||||||
padding: 0.35em 0.5em;
|
padding: 0.35em 0.5em;
|
||||||
margin-right: 0.2em;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,7 +40,6 @@
|
|||||||
&-button {
|
&-button {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include smallScreen {
|
@include smallScreen {
|
||||||
|
|||||||
Reference in New Issue
Block a user