mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
scenerie: remake filtrów
This commit is contained in:
@@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
|
||||
<button
|
||||
class="btn--action"
|
||||
:class="option.section"
|
||||
:data-selected="option.value"
|
||||
@click="handleLeftClick"
|
||||
@dblclick="handleDbClick"
|
||||
>
|
||||
{{ $t(`filters.${option.id}`) }}
|
||||
</button>
|
||||
</template>
|
||||
@@ -29,20 +35,51 @@ export default defineComponent({
|
||||
filterStore: useStationFiltersStore(),
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
handleLeftClick() {
|
||||
this.option.value = !this.option.value;
|
||||
this.filterStore.lastClickedFilterId = '';
|
||||
|
||||
this.filterStore.changeFilterValue({
|
||||
name: this.option.name,
|
||||
value: !this.option.value,
|
||||
});
|
||||
},
|
||||
|
||||
handleDbClick(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
const lastClicked = this.filterStore.lastClickedFilterId == this.option.id;
|
||||
console.log(this.filterStore.lastClickedFilterId);
|
||||
this.filterStore.lastClickedFilterId = this.option.id;
|
||||
this.option.value = true;
|
||||
|
||||
this.filterStore.changeFilterValue({
|
||||
name: this.option.name,
|
||||
value: !this.option.value,
|
||||
});
|
||||
|
||||
this.filterStore.inputs.options
|
||||
.filter((option) => {
|
||||
return option.section == this.option.section && option.id != this.option.id;
|
||||
})
|
||||
.forEach((option) => {
|
||||
this.filterStore.changeFilterValue({
|
||||
name: option.name,
|
||||
value: this.option.value,
|
||||
});
|
||||
|
||||
option.value = !this.option.value;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$realityCol: #e03b07;
|
||||
$accessCol: #e03b07;
|
||||
$controlCol: #0085ff;
|
||||
$signalCol: #bf7c00;
|
||||
@@ -51,56 +88,60 @@ $saveCol: #28a826;
|
||||
$routesCol: #9049c0;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 0.4em;
|
||||
border-radius: 0.4em;
|
||||
padding: 0.25em;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
&[data-selected='true'] {
|
||||
&.access {
|
||||
background-color: $accessCol;
|
||||
box-shadow: 0 0 6px 1px $accessCol;
|
||||
}
|
||||
// &.reality {
|
||||
// background-color: $realityCol;
|
||||
// box-shadow: 0 0 6px 1px $realityCol;
|
||||
// }
|
||||
|
||||
&.control {
|
||||
background-color: $controlCol;
|
||||
box-shadow: 0 0 6px 1px $controlCol;
|
||||
}
|
||||
// &.access {
|
||||
// background-color: $accessCol;
|
||||
// box-shadow: 0 0 6px 1px $accessCol;
|
||||
// }
|
||||
|
||||
&.signals {
|
||||
background-color: $signalCol;
|
||||
box-shadow: 0 0 6px 1px $signalCol;
|
||||
}
|
||||
// &.control {
|
||||
// background-color: $controlCol;
|
||||
// box-shadow: 0 0 6px 1px $controlCol;
|
||||
// }
|
||||
|
||||
&.routes {
|
||||
background-color: $routesCol;
|
||||
box-shadow: 0 0 6px 1px $routesCol;
|
||||
}
|
||||
// &.signals {
|
||||
// background-color: $signalCol;
|
||||
// box-shadow: 0 0 6px 1px $signalCol;
|
||||
// }
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
// &.routes {
|
||||
// background-color: $routesCol;
|
||||
// box-shadow: 0 0 6px 1px $routesCol;
|
||||
// }
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
// &.status {
|
||||
// background-color: $statusCol;
|
||||
// box-shadow: 0 0 6px 1px $statusCol;
|
||||
// }
|
||||
|
||||
&.troll {
|
||||
background-color: firebrick;
|
||||
box-shadow: 0 0 6px 1px firebrick;
|
||||
}
|
||||
// &.save {
|
||||
// background-color: $saveCol;
|
||||
// box-shadow: 0 0 6px 1px $saveCol;
|
||||
// }
|
||||
|
||||
&.mode {
|
||||
background-color: lightgreen;
|
||||
color: black;
|
||||
// &.troll {
|
||||
// background-color: firebrick;
|
||||
// box-shadow: 0 0 6px 1px firebrick;
|
||||
// }
|
||||
|
||||
font-weight: 500;
|
||||
}
|
||||
// & {
|
||||
background-color: forestgreen;
|
||||
|
||||
font-weight: bold;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -26,15 +26,28 @@
|
||||
<div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
|
||||
<div class="card_content">
|
||||
<div class="card_title flex">{{ $t('filters.title') }}</div>
|
||||
<p class="card_info" v-html="$t('filters.desc')"></p>
|
||||
|
||||
<section class="card_options">
|
||||
<filter-option
|
||||
v-for="(option, i) in filterStore.inputs.options"
|
||||
:option="option"
|
||||
:key="i"
|
||||
@optionChange="handleChange"
|
||||
/>
|
||||
<div class="option-section" v-for="section in filterStore.inputs.optionSections">
|
||||
<h3 class="text--primary">
|
||||
{{ $t(`filters.sections.${section}`) }}
|
||||
|
||||
<button @click="filterStore.resetSectionOptions(section)">RESET</button>
|
||||
</h3>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section-inputs">
|
||||
<filter-option
|
||||
v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
|
||||
:option="option"
|
||||
:key="i"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card_timestamp" style="text-align: center">
|
||||
<div>{{ $t('filters.minimum-hours-title') }}</div>
|
||||
<span class="clock">
|
||||
@@ -80,18 +93,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card_actions">
|
||||
<div class="action-buttons">
|
||||
<button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
|
||||
{{ $t('filters.save') }}
|
||||
</button>
|
||||
|
||||
<button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
|
||||
<button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="card_actions">
|
||||
<div class="action-buttons">
|
||||
<button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
|
||||
{{ $t('filters.save') }}
|
||||
</button>
|
||||
|
||||
<button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
|
||||
<button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</transition>
|
||||
</section>
|
||||
@@ -181,15 +194,6 @@ export default defineComponent({
|
||||
this.isVisible = !this.isVisible;
|
||||
},
|
||||
|
||||
handleChange(change: { name: string; value: boolean }) {
|
||||
this.filterStore.changeFilterValue({
|
||||
name: change.name,
|
||||
value: !change.value,
|
||||
});
|
||||
|
||||
if (this.saveOptions) StorageManager.setBooleanValue(change.name, change.value);
|
||||
},
|
||||
|
||||
handleInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
|
||||
@@ -281,6 +285,14 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
|
||||
&_info {
|
||||
background-color: #111;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
&_controls {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
@@ -292,13 +304,13 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&_content {
|
||||
padding: 0.5em;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 1em;
|
||||
|
||||
max-height: 90vh;
|
||||
|
||||
padding: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&_title {
|
||||
@@ -309,18 +321,6 @@ export default defineComponent({
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&_options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 0.5em;
|
||||
|
||||
@include smallScreen() {
|
||||
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&_regions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -391,6 +391,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&_actions {
|
||||
width: 100%;
|
||||
padding: 0.25em;
|
||||
|
||||
.filter-option {
|
||||
max-width: 50%;
|
||||
margin: 0 auto;
|
||||
@@ -417,6 +420,35 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.card_options {
|
||||
.option-section h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
gap: 0.5em;
|
||||
|
||||
button {
|
||||
padding: 0.15em;
|
||||
color: coral;
|
||||
}
|
||||
}
|
||||
|
||||
.section-inputs {
|
||||
display: grid;
|
||||
// flex-wrap: wrap;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
// grid-template-rows: repeat(3, 1fr);
|
||||
gap: 0.5em;
|
||||
margin: 1em 0;
|
||||
|
||||
// @include smallScreen() {
|
||||
// grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
|
||||
// grid-template-rows: auto;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user