mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Zmiany w karcie filtrów stacji
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="filter-option option">
|
||||
<label class="option-label">
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
:id="option.id"
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ $t(`filters.${option.id}`) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
name: string;
|
||||
section: string;
|
||||
value: boolean;
|
||||
defaultValue: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
option: {
|
||||
type: Object as () => FilterOption,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["optionChange"],
|
||||
methods: {
|
||||
handleChange() {
|
||||
this.$emit("optionChange", {
|
||||
name: this.option.name,
|
||||
value: this.option.value,
|
||||
});
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$accessCol: #e03b07;
|
||||
$controlCol: #0085ff;
|
||||
$signalCol: #bf7c00;
|
||||
$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;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+73
-174
@@ -1,47 +1,26 @@
|
||||
<template>
|
||||
<section
|
||||
class="card"
|
||||
v-if="showCard"
|
||||
>
|
||||
<div
|
||||
class="card-exit"
|
||||
@click="exit"
|
||||
>
|
||||
<section class="card" v-if="showCard">
|
||||
<div class="card_exit" @click="exit">
|
||||
<!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
|
||||
</div>
|
||||
|
||||
<div class="card-title flex">{{ $t("filters.title") }}</div>
|
||||
<div class="card_title flex">{{ $t("filters.title") }}</div>
|
||||
|
||||
<div class="card-options">
|
||||
<div
|
||||
class="option"
|
||||
<section class="card_options">
|
||||
<filter-option
|
||||
v-for="(option, i) in inputs.options"
|
||||
:option="option"
|
||||
:key="i"
|
||||
>
|
||||
<label class="option-label">
|
||||
<input
|
||||
class="option-input"
|
||||
type="checkbox"
|
||||
:name="option.name"
|
||||
:defaultValue="option.defaultValue"
|
||||
:id="option.id"
|
||||
v-model="option.value"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<span
|
||||
class="option-content"
|
||||
:class="option.section + (option.value ? ' checked' : '')"
|
||||
>{{ $t(`filters.${option.id}`) }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@optionChange="handleChange"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div class="card-sliders">
|
||||
<div
|
||||
class="slider"
|
||||
v-for="(slider, i) in inputs.sliders"
|
||||
:key="i"
|
||||
>
|
||||
<!-- <section class="card_modes">
|
||||
<filter-option :option="inputs.modes[0]" @optionChange="invertFilters" />
|
||||
</section> -->
|
||||
|
||||
<section class="card_sliders">
|
||||
<div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
|
||||
<input
|
||||
class="slider-input"
|
||||
type="range"
|
||||
@@ -59,40 +38,37 @@
|
||||
{{ $t(`filters.sliders.${slider.id}`) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card-save">
|
||||
<div class="option">
|
||||
<section class="card_save">
|
||||
<filter-option
|
||||
@optionChange="saveFilters"
|
||||
:option="{
|
||||
id: 'save',
|
||||
name: 'save',
|
||||
section: 'mode',
|
||||
value: saveOptions,
|
||||
defaultValue: true,
|
||||
}"
|
||||
/>
|
||||
<!-- <div class="option">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="saveOptions"
|
||||
@change="saveFilters"
|
||||
/>
|
||||
<span
|
||||
class="save"
|
||||
:class="{ checked: saveOptions }"
|
||||
>
|
||||
<input type="checkbox" v-model="saveOptions" @change="saveFilters" />
|
||||
<span class="save" :class="{ checked: saveOptions }">
|
||||
{{ $t("filters.save") }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
|
||||
<div class="card-actions flex">
|
||||
<action-button
|
||||
class="outlined"
|
||||
@click="resetFilters"
|
||||
>
|
||||
<section class="card_actions flex">
|
||||
<action-button class="outlined" @click="resetFilters">
|
||||
{{ $t("filters.reset") }}
|
||||
</action-button>
|
||||
<action-button
|
||||
class="outlined"
|
||||
@click="exit"
|
||||
>{{
|
||||
<action-button class="outlined" @click="exit">{{
|
||||
$t("filters.close")
|
||||
}}</action-button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -102,10 +78,12 @@ import inputData from "@/data/options.json";
|
||||
import StorageManager from "@/scripts/managers/storageManager";
|
||||
import { defineComponent } from "@vue/runtime-core";
|
||||
import ActionButton from "../Global/ActionButton.vue";
|
||||
import FilterOption from "./FilterOption.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { ActionButton },
|
||||
components: { ActionButton, FilterOption },
|
||||
props: ["showCard", "exit"],
|
||||
emits: ["changeFilterValue", "invertFilters", "resetFilters"],
|
||||
|
||||
data: () => ({
|
||||
inputs: { ...inputData },
|
||||
@@ -118,15 +96,14 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
|
||||
handleChange(change: { name: string; value: boolean }) {
|
||||
this.$emit("changeFilterValue", {
|
||||
name: target.name,
|
||||
value: !target.checked,
|
||||
name: change.name,
|
||||
value: !change.value,
|
||||
});
|
||||
|
||||
if (this.saveOptions)
|
||||
StorageManager.setBooleanValue(target.name, target.checked);
|
||||
StorageManager.setBooleanValue(change.name, change.value);
|
||||
},
|
||||
|
||||
handleInput(e: Event) {
|
||||
@@ -140,7 +117,18 @@ export default defineComponent({
|
||||
StorageManager.setStringValue(target.name, target.value);
|
||||
},
|
||||
|
||||
saveFilters() {
|
||||
invertFilters() {
|
||||
this.inputs.options.forEach((option) => {
|
||||
option.value = !option.value;
|
||||
StorageManager.setBooleanValue(option.name, option.value);
|
||||
});
|
||||
|
||||
this.$emit("invertFilters");
|
||||
},
|
||||
|
||||
saveFilters(change: { value }) {
|
||||
this.saveOptions = change.value;
|
||||
|
||||
if (!this.saveOptions) {
|
||||
StorageManager.unregisterStorage(this.STORAGE_KEY);
|
||||
return;
|
||||
@@ -182,14 +170,12 @@ export default defineComponent({
|
||||
@import "../../styles/responsive";
|
||||
@import "../../styles/card";
|
||||
|
||||
$accessCol: #e03b07;
|
||||
$controlCol: #0085ff;
|
||||
$signalCol: #bf7c00;
|
||||
$statusCol: #349b32;
|
||||
$saveCol: #28a826;
|
||||
|
||||
.card {
|
||||
&-title {
|
||||
> section {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
&_title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
color: $accentCol;
|
||||
@@ -199,7 +185,7 @@ $saveCol: #28a826;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-options {
|
||||
&_options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
@@ -211,19 +197,20 @@ $saveCol: #28a826;
|
||||
}
|
||||
}
|
||||
|
||||
&-sliders {
|
||||
margin-top: 1em;
|
||||
}
|
||||
&_modes {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&-actions {
|
||||
margin-top: 0.7em;
|
||||
|
||||
button {
|
||||
margin: 0 0.3em;
|
||||
.option {
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-save {
|
||||
&_actions button {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
|
||||
&_save {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -232,101 +219,13 @@ $saveCol: #28a826;
|
||||
}
|
||||
}
|
||||
|
||||
&-exit {
|
||||
&_exit {
|
||||
img {
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
&.status {
|
||||
background-color: $statusCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $statusCol;
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-color: $saveCol;
|
||||
|
||||
&::before {
|
||||
box-shadow: 0 0 6px 1px $saveCol;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -68,8 +68,8 @@
|
||||
:style="calculateExpStyle(station.reqLevel)"
|
||||
>
|
||||
{{
|
||||
station.reqLevel && station.reqLevel > -1
|
||||
? parseInt(station.reqLevel) >= 2
|
||||
station.reqLevel && Number(station.reqLevel) > -1
|
||||
? Number(station.reqLevel) >= 2
|
||||
? station.reqLevel
|
||||
: "L"
|
||||
: "?"
|
||||
@@ -162,21 +162,21 @@
|
||||
|
||||
<img
|
||||
v-if="station.SBL && station.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
:src="SBLIcon"
|
||||
alt="SBL"
|
||||
:title="$t('desc.SBL') + `${station.SBL}`"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="station.nonPublic || !station.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
:src="lockIcon"
|
||||
alt="non-public"
|
||||
:title="$t('desc.non-public')"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="station.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
:src="unavailableIcon"
|
||||
alt="icon-unavailable"
|
||||
:title="$t('desc.unavailable')"
|
||||
/>
|
||||
@@ -240,12 +240,12 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
sorterActive: {
|
||||
type: Object as () => { id: string; dir: number },
|
||||
type: Object as () => { index: number; dir: number },
|
||||
required: true,
|
||||
},
|
||||
|
||||
setFocusedStation: Function,
|
||||
changeSorter: Function,
|
||||
setFocusedStation: { type: Function, required: true },
|
||||
changeSorter: { type: Function, required: true },
|
||||
},
|
||||
|
||||
mixins: [styleMixin],
|
||||
@@ -256,6 +256,9 @@ export default defineComponent({
|
||||
timetableIcon: require("@/assets/icon-timetable.svg"),
|
||||
userIcon: require("@/assets/icon-user.svg"),
|
||||
trainIcon: require("@/assets/icon-train.svg"),
|
||||
SBLIcon: require("@/assets/icon-SBL.svg"),
|
||||
lockIcon: require("@/assets/icon-lock.svg"),
|
||||
unavailableIcon: require("@/assets/icon-unavailable.svg"),
|
||||
|
||||
ascIcon: require("@/assets/icon-arrow-asc.svg"),
|
||||
descIcon: require("@/assets/icon-arrow-desc.svg"),
|
||||
|
||||
+28
-8
@@ -1,6 +1,5 @@
|
||||
{
|
||||
"options": [
|
||||
{
|
||||
"options": [{
|
||||
"id": "default",
|
||||
"name": "default",
|
||||
"iconName": "td2",
|
||||
@@ -49,7 +48,7 @@
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
{
|
||||
"id": "SPE",
|
||||
"name": "SPE",
|
||||
"iconName": "SPE",
|
||||
@@ -73,7 +72,14 @@
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": "SBL",
|
||||
"name": "SBL",
|
||||
"iconName": "SBL",
|
||||
"section": "routes",
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"id": "modern",
|
||||
"name": "współczesna",
|
||||
@@ -126,8 +132,7 @@
|
||||
"defaultValue": true
|
||||
}
|
||||
],
|
||||
"sliders": [
|
||||
{
|
||||
"sliders": [{
|
||||
"id": "min-lvl",
|
||||
"name": "minLevel",
|
||||
"minRange": 0,
|
||||
@@ -175,5 +180,20 @@
|
||||
"value": 0,
|
||||
"defaultValue": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"modes": [{
|
||||
"id": "include-selected",
|
||||
"name": "include-selected",
|
||||
"iconName": "",
|
||||
"section": "mode",
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
}, {
|
||||
"id": "save",
|
||||
"name": "save",
|
||||
"iconName": "",
|
||||
"section": "mode",
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
}]
|
||||
}
|
||||
+3
-1
@@ -58,6 +58,7 @@
|
||||
"SPE": "SPE",
|
||||
"manual": "MANUAL",
|
||||
"mechanical": "MECHANICAL",
|
||||
"SBL": "SBL",
|
||||
"modern": "MODERN",
|
||||
"semaphores": "SEMAPHORES",
|
||||
"mixed": "MIXED",
|
||||
@@ -72,6 +73,7 @@
|
||||
"routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
|
||||
"routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
|
||||
},
|
||||
"include-selected": "INCLUDE SELECTED",
|
||||
"save": "SAVE FILTERS",
|
||||
"reset": "RESET FILTERS",
|
||||
"close": "CLOSE FILTERS"
|
||||
@@ -147,4 +149,4 @@
|
||||
"search-train": "Search by train number",
|
||||
"search-driver": "Search by driver name"
|
||||
}
|
||||
}
|
||||
}
|
||||
+3
-1
@@ -57,6 +57,7 @@
|
||||
"SCS": "SCS",
|
||||
"SPE": "SPE",
|
||||
"manual": "RĘCZNE",
|
||||
"SBL": "SBL",
|
||||
"mechanical": "MECHANICZNE",
|
||||
"modern": "WSPÓŁCZESNA",
|
||||
"semaphores": "KSZTAŁTOWA",
|
||||
@@ -72,6 +73,7 @@
|
||||
"routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
|
||||
"routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
},
|
||||
"include-selected": "POKAŻ ZAZNACZONE",
|
||||
"save": "ZAPISZ FILTRY",
|
||||
"reset": "RESETUJ FILTRY",
|
||||
"close": "ZAMKNIJ FILTRY"
|
||||
@@ -147,4 +149,4 @@
|
||||
"search-train": "Szukaj nr pociągu",
|
||||
"search-driver": "Szukaj maszynisty"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@ export default interface Filter {
|
||||
"SPE": boolean;
|
||||
ręczne: boolean;
|
||||
mechaniczne: boolean;
|
||||
"SBL": boolean;
|
||||
współczesna: boolean;
|
||||
kształtowa: boolean;
|
||||
historyczna: boolean;
|
||||
@@ -21,6 +22,7 @@ export default interface Filter {
|
||||
minTwoWay: number;
|
||||
'no-1track': boolean;
|
||||
'no-2track': boolean;
|
||||
'include-selected': boolean;
|
||||
free: boolean;
|
||||
occupied: boolean;
|
||||
ending: boolean;
|
||||
|
||||
@@ -54,44 +54,48 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
|
||||
}
|
||||
|
||||
const filterStations = (station: Station, filters: Filter) => {
|
||||
if ((station.nonPublic || !station.reqLevel) && filters['nonPublic']) return false;
|
||||
const returnMode = false;
|
||||
|
||||
if (station.online && station.statusID == 'ending' && filters['ending']) return false;
|
||||
if ((station.nonPublic || !station.reqLevel) && filters['nonPublic']) return returnMode;
|
||||
|
||||
if (station.online && filters['occupied']) return false;
|
||||
if (!station.online && filters['free']) return false;
|
||||
if (station.online && station.statusID == 'ending' && filters['ending']) return returnMode;
|
||||
|
||||
if (station.default && filters['default']) return false;
|
||||
if (!station.default && filters['notDefault']) return false;
|
||||
if (station.online && filters['occupied']) return returnMode;
|
||||
if (!station.online && filters['free']) return returnMode;
|
||||
|
||||
if (filters['real'] && station.stationLines != '') return false;
|
||||
if (filters['fictional'] && station.stationLines == '') return false;
|
||||
if (station.default && filters['default']) return returnMode;
|
||||
if (!station.default && filters['notDefault']) return returnMode;
|
||||
|
||||
if (filters['real'] && station.stationLines != '') return returnMode;
|
||||
if (filters['fictional'] && station.stationLines == '') return returnMode;
|
||||
|
||||
if (station.reqLevel == '-1') return true;
|
||||
if (parseInt(station.reqLevel) < filters['minLevel']) return false;
|
||||
if (parseInt(station.reqLevel) > filters['maxLevel']) return false;
|
||||
if (parseInt(station.reqLevel) < filters['minLevel']) return returnMode;
|
||||
if (parseInt(station.reqLevel) > filters['maxLevel']) return returnMode;
|
||||
|
||||
if (filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
|
||||
if (filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
|
||||
if (filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return returnMode;
|
||||
if (filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return returnMode;
|
||||
|
||||
if (station.routes.oneWay.catenary < filters['minOneWayCatenary']) return false;
|
||||
if (station.routes.oneWay.noCatenary < filters['minOneWay']) return false;
|
||||
if (station.routes.oneWay.catenary < filters['minOneWayCatenary']) return returnMode;
|
||||
if (station.routes.oneWay.noCatenary < filters['minOneWay']) return returnMode;
|
||||
|
||||
if (station.routes.twoWay.catenary < filters['minTwoWayCatenary']) return false;
|
||||
if (station.routes.twoWay.noCatenary < filters['minTwoWay']) return false;
|
||||
if (station.routes.twoWay.catenary < filters['minTwoWayCatenary']) return returnMode;
|
||||
if (station.routes.twoWay.noCatenary < filters['minTwoWay']) return returnMode;
|
||||
|
||||
if (filters[station.controlType]) return false;
|
||||
if (filters[station.signalType]) return false;
|
||||
if (filters[station.controlType]) return returnMode;
|
||||
if (filters[station.signalType]) return returnMode;
|
||||
|
||||
if (filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
|
||||
if (filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
|
||||
if (filters['SPE'] && (station.controlType === 'SPE' || station.controlType.includes('+SPE'))) return false;
|
||||
if (filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return returnMode;
|
||||
if (filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return returnMode;
|
||||
if (filters['SPE'] && (station.controlType === 'SPE' || station.controlType.includes('+SPE'))) return returnMode;
|
||||
|
||||
if (filters['SCS'] && filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
|
||||
if (filters['SCS'] && filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return returnMode;
|
||||
|
||||
if (filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
|
||||
if (filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return returnMode;
|
||||
|
||||
if (filters['ręczne'] && station.controlType.includes('ręczne')) return false;
|
||||
if (filters['ręczne'] && station.controlType.includes('ręczne')) return returnMode;
|
||||
|
||||
if (filters['SBL'] && station.SBL) return returnMode;
|
||||
|
||||
return true;
|
||||
}
|
||||
@@ -111,12 +115,14 @@ export default class StationFilterManager {
|
||||
kształtowa: false,
|
||||
historyczna: false,
|
||||
mieszana: false,
|
||||
SBL: false,
|
||||
minLevel: 0,
|
||||
maxLevel: 20,
|
||||
minOneWayCatenary: 0,
|
||||
minOneWay: 0,
|
||||
minTwoWayCatenary: 0,
|
||||
minTwoWay: 0,
|
||||
'include-selected': false,
|
||||
'no-1track': false,
|
||||
'no-2track': false,
|
||||
free: true,
|
||||
@@ -143,6 +149,24 @@ export default class StationFilterManager {
|
||||
this.filters = { ...this.filterInitStates };
|
||||
}
|
||||
|
||||
invertFilters() {
|
||||
Object.keys(this.filters).forEach(prop => {
|
||||
if(typeof this.filters[prop] !== "boolean") return;
|
||||
|
||||
this.filters[prop] = !this.filters[prop];
|
||||
|
||||
})
|
||||
|
||||
// for(let prop in this.filters) {
|
||||
// if(typeof prop !== "boolean") continue;
|
||||
|
||||
// this.filters[prop] = !this.filterInitStates[prop];
|
||||
|
||||
// console.log("inverted!");
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
changeSorter(index: number) {
|
||||
if (index > 4 && index < 7) return;
|
||||
|
||||
|
||||
@@ -4,11 +4,7 @@
|
||||
<div class="body">
|
||||
<div class="options-bar">
|
||||
<action-button @click="() => toggleCardsState('filter')">
|
||||
<img
|
||||
class="button_icon"
|
||||
:src="require('@/assets/icon-filter2.svg')"
|
||||
alt="icon-filter"
|
||||
/>
|
||||
<img class="button_icon" :src="filterIcon" alt="icon-filter" />
|
||||
<p>{{ $t("options.filters") }}</p>
|
||||
</action-button>
|
||||
|
||||
@@ -37,6 +33,7 @@
|
||||
:showCard="filterCardOpen"
|
||||
:exit="() => toggleCardsState('filter')"
|
||||
@changeFilterValue="changeFilterValue"
|
||||
@invertFilters="invertFilters"
|
||||
@resetFilters="resetFilters"
|
||||
/>
|
||||
</transition>
|
||||
@@ -52,8 +49,9 @@ import StationFilterManager from "@/scripts/managers/stationFilterManager";
|
||||
import inputData from "@/data/options.json";
|
||||
|
||||
import StationTable from "@/components/StationsView/StationTable.vue";
|
||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||
import FilterCard from "@/components/StationsView/StationFilterCard.vue";
|
||||
import ActionButton from "@/components/Global/ActionButton.vue";
|
||||
|
||||
import { StoreData } from "@/scripts/interfaces/StoreData";
|
||||
import { DataStatus } from "@/scripts/enums/DataStatus";
|
||||
import { computed, ComputedRef, defineComponent, reactive } from "vue";
|
||||
@@ -70,6 +68,7 @@ export default defineComponent({
|
||||
trainIcon: require("@/assets/icon-train.svg"),
|
||||
timetableIcon: require("@/assets/icon-timetable.svg"),
|
||||
dolarIcon: require("@/assets/icon-dolar.svg"),
|
||||
filterIcon: require("@/assets/icon-filter2.svg"),
|
||||
filterCardOpen: false,
|
||||
modalHidden: true,
|
||||
STORAGE_KEY: "options_saved",
|
||||
@@ -148,6 +147,9 @@ export default defineComponent({
|
||||
resetFilters() {
|
||||
this.filterManager.resetFilters();
|
||||
},
|
||||
invertFilters() {
|
||||
this.filterManager.invertFilters();
|
||||
},
|
||||
closeCard() {
|
||||
this.focusedStationName = "";
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user