mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Dodano filtry do widoku historii rozkładów jazdy
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="journal-options">
|
||||
<div class="options_wrapper">
|
||||
<div class="options_content">
|
||||
<div class="content_select">
|
||||
<select-box
|
||||
:title="$t('journal.option-distance')"
|
||||
:itemList="translatedSorterOptions"
|
||||
:defaultItemIndex="0"
|
||||
@selected="changeSorter"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content_search">
|
||||
<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"
|
||||
/>
|
||||
|
||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
|
||||
</div>
|
||||
|
||||
<action-button class="search-button" @click="search">
|
||||
{{ $t('history.search') }}
|
||||
</action-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import ActionButton from '../Global/ActionButton.vue';
|
||||
import SelectBox from '../Global/SelectBox.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { SelectBox, ActionButton },
|
||||
emits: ['changedOptions'],
|
||||
|
||||
data: () => ({
|
||||
exitIcon: require('@/assets/icon-exit.svg'),
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
|
||||
const sorterOptions = ['distance', 'total-stops'];
|
||||
|
||||
const translatedSorterOptions = computed(() =>
|
||||
sorterOptions.map((id) => ({
|
||||
id,
|
||||
value: t(`journal.option-${id}`),
|
||||
}))
|
||||
);
|
||||
|
||||
return {
|
||||
translatedSorterOptions,
|
||||
|
||||
searchedTrain: inject('searchedTrain') as string,
|
||||
searchedDriver: inject('searchedDriver') as string,
|
||||
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeSorter(item: { id: string | number; value: string }) {
|
||||
this.sorterActive.id = item.id;
|
||||
this.sorterActive.dir = -1;
|
||||
},
|
||||
|
||||
search() {
|
||||
console.log('gituwa');
|
||||
|
||||
this.$emit('changedOptions');
|
||||
},
|
||||
|
||||
clearDriver() {
|
||||
this.searchedDriver = '';
|
||||
this.search();
|
||||
},
|
||||
|
||||
clearTrain() {
|
||||
this.searchedTrain = '';
|
||||
this.search();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive';
|
||||
|
||||
.journal-options {
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
&_wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
@include smallScreen() {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.content_search, .content_select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include smallScreen() {
|
||||
padding: 0 1em;
|
||||
|
||||
.content_select {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content_search {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_search .search {
|
||||
&-box {
|
||||
position: relative;
|
||||
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
min-width: 200px;
|
||||
|
||||
margin: 0.5em 0.5em 0.5em 0;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
border: none;
|
||||
|
||||
min-width: 100%;
|
||||
padding: 0.35em 0.5em;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="filter-option option">
|
||||
<label class="option-label">
|
||||
<label>
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
@@ -10,9 +9,7 @@
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
<span :class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ $t(`filters.${option.id}`) }}
|
||||
</span>
|
||||
</label>
|
||||
@@ -20,7 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
@@ -37,10 +34,10 @@ export default defineComponent({
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["optionChange"],
|
||||
emits: ['optionChange'],
|
||||
methods: {
|
||||
handleChange() {
|
||||
this.$emit("optionChange", {
|
||||
this.$emit('optionChange', {
|
||||
name: this.option.name,
|
||||
value: this.option.value,
|
||||
});
|
||||
@@ -53,6 +50,8 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/option.scss";
|
||||
|
||||
$accessCol: #e03b07;
|
||||
$controlCol: #0085ff;
|
||||
$signalCol: #bf7c00;
|
||||
@@ -60,106 +59,74 @@ $statusCol: #349b32;
|
||||
$saveCol: #28a826;
|
||||
$routesCol: #9049c0;
|
||||
|
||||
.option {
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.5em 0.55em;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
transition: all 0.2s;
|
||||
|
||||
border-radius: 0.5em;
|
||||
|
||||
&:not(.checked) {
|
||||
background-color: #585858;
|
||||
.option span {
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: $accessCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
box-shadow: 0 0 6px 1px $accessCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
&.access {
|
||||
background-color: $accessCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $accessCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.control {
|
||||
background-color: $controlCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $controlCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: $signalCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $signalCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.routes {
|
||||
background-color: $routesCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $routesCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.mode {
|
||||
background-color: lightgreen;
|
||||
color: black;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
&.control {
|
||||
background-color: $controlCol;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 0 6px 1px $controlCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.signals {
|
||||
background-color: $signalCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $signalCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.routes {
|
||||
background-color: $routesCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $routesCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.mode {
|
||||
background-color: lightgreen;
|
||||
color: black;
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user