Filtrowanie po max. poziomie; poprawki dostępności

This commit is contained in:
2021-06-20 14:49:35 +02:00
parent 311471d120
commit d19aacfe0e
7 changed files with 76 additions and 66 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="pl">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
+36 -18
View File
@@ -1,13 +1,20 @@
<template> <template>
<section class="card"> <section class="card">
<div class="card-exit" @click="exit"> <div
class="card-exit"
@click="exit"
>
<!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> --> <!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
</div> </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="card-options">
<div class="option" v-for="(option, i) in inputs.options" :key="i"> <div
class="option"
v-for="(option, i) in inputs.options"
:key="i"
>
<label class="option-label"> <label class="option-label">
<input <input
class="option-input" class="option-input"
@@ -21,14 +28,17 @@
<span <span
class="option-content" class="option-content"
:class="option.section + (option.value ? ' checked' : '')" :class="option.section + (option.value ? ' checked' : '')"
>{{ $t(`filters.${option.id}`) }}</span >{{ $t(`filters.${option.id}`) }}</span>
>
</label> </label>
</div> </div>
</div> </div>
<div class="card-sliders"> <div class="card-sliders">
<div class="slider" v-for="(slider, i) in inputs.sliders" :key="i"> <div
class="slider"
v-for="(slider, i) in inputs.sliders"
:key="i"
>
<input <input
class="slider-input" class="slider-input"
type="range" type="range"
@@ -51,8 +61,15 @@
<div class="card-save"> <div class="card-save">
<div class="option"> <div class="option">
<label> <label>
<input type="checkbox" v-model="saveOptions" @change="saveFilters" /> <input
<span class="save" :class="{ checked: saveOptions }"> type="checkbox"
v-model="saveOptions"
@change="saveFilters"
/>
<span
class="save"
:class="{ checked: saveOptions }"
>
{{ $t("filters.save") }} {{ $t("filters.save") }}
</span> </span>
</label> </label>
@@ -60,10 +77,16 @@
</div> </div>
<div class="card-actions flex"> <div class="card-actions flex">
<action-button class="outlined" @click.native="resetFilters"> <action-button
class="outlined"
@click.native="resetFilters"
>
{{ $t("filters.reset") }} {{ $t("filters.reset") }}
</action-button> </action-button>
<action-button class="outlined" @click.native="exit">{{ <action-button
class="outlined"
@click.native="exit"
>{{
$t("filters.close") $t("filters.close")
}}</action-button> }}</action-button>
</div> </div>
@@ -301,23 +324,18 @@ $saveCol: #28a826;
.slider { .slider {
display: flex; display: flex;
align-items: center;
margin: 1em 0; margin: 1em 0;
&-value { &-value {
display: flex;
justify-content: center;
align-items: center;
color: $accentCol; color: $accentCol;
margin-right: 0.3em; margin-right: 0.5em;
padding: 0.1em 0.2em; padding: 0.1em 0.2em;
border-radius: 0.2em;
} }
&-content { &-content {
display: flex; flex-grow: 2;
align-items: center;
} }
&-input { &-input {
+28 -40
View File
@@ -6,8 +6,7 @@
"iconName": "td2", "iconName": "td2",
"section": "access", "section": "access",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "W PACZCE"
}, },
{ {
"id": "not-default", "id": "not-default",
@@ -15,8 +14,7 @@
"iconName": "", "iconName": "",
"section": "access", "section": "access",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "POZA PACZKĄ"
}, },
{ {
"id": "real", "id": "real",
@@ -24,8 +22,7 @@
"iconName": "lock", "iconName": "lock",
"section": "access", "section": "access",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "REALNA"
}, },
{ {
"id": "fictional", "id": "fictional",
@@ -33,8 +30,7 @@
"iconName": "user", "iconName": "user",
"section": "access", "section": "access",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "FIKCYJNA"
}, },
{ {
@@ -43,8 +39,7 @@
"iconName": "SPK", "iconName": "SPK",
"section": "control", "section": "control",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "SPK"
}, },
{ {
"id": "SCS", "id": "SCS",
@@ -52,8 +47,7 @@
"iconName": "SCS", "iconName": "SCS",
"section": "control", "section": "control",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "SCS"
}, },
{ {
"id": "SPE", "id": "SPE",
@@ -61,8 +55,7 @@
"iconName": "SPE", "iconName": "SPE",
"section": "control", "section": "control",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "SPE"
}, },
{ {
"id": "manual", "id": "manual",
@@ -70,8 +63,7 @@
"iconName": "ręczne", "iconName": "ręczne",
"section": "control", "section": "control",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "RĘCZNE"
}, },
{ {
"id": "mechanical", "id": "mechanical",
@@ -79,8 +71,7 @@
"iconName": "mechaniczne", "iconName": "mechaniczne",
"section": "control", "section": "control",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "MECHANICZNE"
}, },
{ {
@@ -89,8 +80,7 @@
"iconName": "współczesna", "iconName": "współczesna",
"section": "signals", "section": "signals",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "WSPÓŁCZESNA"
}, },
{ {
"id": "semaphores", "id": "semaphores",
@@ -98,8 +88,7 @@
"iconName": "kształtowa", "iconName": "kształtowa",
"section": "signals", "section": "signals",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "KSZTAŁTOWA"
}, },
{ {
"id": "mixed", "id": "mixed",
@@ -107,8 +96,7 @@
"iconName": "mieszana", "iconName": "mieszana",
"section": "signals", "section": "signals",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "MIESZANA"
}, },
{ {
"id": "historical", "id": "historical",
@@ -116,8 +104,7 @@
"iconName": "historyczna", "iconName": "historyczna",
"section": "signals", "section": "signals",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "HISTORYCZNA"
}, },
{ {
@@ -127,8 +114,7 @@
"section": "status", "section": "status",
"value": false, "value": false,
"defaultValue": false, "defaultValue": false
"content": "WOLNA"
}, },
{ {
"id": "occupied", "id": "occupied",
@@ -137,8 +123,7 @@
"section": "status", "section": "status",
"value": true, "value": true,
"defaultValue": true, "defaultValue": true
"content": "ZAJĘTA"
} }
], ],
"sliders": [ "sliders": [
@@ -148,8 +133,15 @@
"minRange": 0, "minRange": 0,
"maxRange": 20, "maxRange": 20,
"value": 0, "value": 0,
"defaultValue": 0, "defaultValue": 0
"content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO" },
{
"id": "max-lvl",
"name": "maxLevel",
"minRange": 0,
"maxRange": 20,
"value": 20,
"defaultValue": 20
}, },
{ {
"id": "routes-1t-cat", "id": "routes-1t-cat",
@@ -157,8 +149,7 @@
"minRange": 0, "minRange": 0,
"maxRange": 5, "maxRange": 5,
"value": 0, "value": 0,
"defaultValue": 0, "defaultValue": 0
"content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
}, },
{ {
"id": "routes-1t-other", "id": "routes-1t-other",
@@ -166,8 +157,7 @@
"minRange": 0, "minRange": 0,
"maxRange": 5, "maxRange": 5,
"value": 0, "value": 0,
"defaultValue": 0, "defaultValue": 0
"content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
}, },
{ {
"id": "routes-2t-cat", "id": "routes-2t-cat",
@@ -175,8 +165,7 @@
"minRange": 0, "minRange": 0,
"maxRange": 5, "maxRange": 5,
"value": 0, "value": 0,
"defaultValue": 0, "defaultValue": 0
"content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
}, },
{ {
"id": "routes-2t-other", "id": "routes-2t-other",
@@ -184,8 +173,7 @@
"minRange": 0, "minRange": 0,
"maxRange": 5, "maxRange": 5,
"value": 0, "value": 0,
"defaultValue": 0, "defaultValue": 0
"content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
} }
] ]
} }
+6 -5
View File
@@ -65,11 +65,12 @@
"free": "FREE", "free": "FREE",
"occupied": "OCCUPIED", "occupied": "OCCUPIED",
"sliders": { "sliders": {
"min-lvl": "MINIMUM REQUIRED DISPATCHER LEVEL", "min-lvl": "MIN. REQUIRED DISPATCHER LEVEL",
"routes-1t-cat": "MINIMUM CATENARY SINGLE TRACK ROUTES", "max-lvl": "MAX. REQUIRED DISPATCHER LEVEL",
"routes-1t-other": "MINIMUM OTHER SINGLE TRACK ROUTES", "routes-1t-cat": "MIN. CATENARY SINGLE TRACK ROUTES",
"routes-2t-cat": "MINIMUM CATENARY DOUBLE TRACK ROUTES", "routes-1t-other": "MIN. OTHER SINGLE TRACK ROUTES",
"routes-2t-other": "MINIMUM OTHER DOUBLE TRACK ROUTES" "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
"routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
}, },
"save": "SAVE FILTERS", "save": "SAVE FILTERS",
"reset": "RESET FILTERS", "reset": "RESET FILTERS",
+2 -1
View File
@@ -65,7 +65,8 @@
"free": "WOLNA", "free": "WOLNA",
"occupied": "ZAJĘTA", "occupied": "ZAJĘTA",
"sliders": { "sliders": {
"min-lvl": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO", "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
"max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
"routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)", "routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
"routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)", "routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
"routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)", "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
+1
View File
@@ -13,6 +13,7 @@ export default interface Filter {
historyczna: boolean; historyczna: boolean;
mieszana: boolean; mieszana: boolean;
minLevel: number; minLevel: number;
maxLevel: number;
minOneWayCatenary: number; minOneWayCatenary: number;
minOneWay: number; minOneWay: number;
minTwoWayCatenary: number; minTwoWayCatenary: number;
+2 -1
View File
@@ -2,7 +2,6 @@ import Station from '@/scripts/interfaces/Station';
import Filter from '@/scripts/interfaces/Filter'; import Filter from '@/scripts/interfaces/Filter';
const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => { const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
switch (sorter.index) { switch (sorter.index) {
case 1: case 1:
const aLevel = a.reqLevel == "" ? -1 : parseInt(a.reqLevel); const aLevel = a.reqLevel == "" ? -1 : parseInt(a.reqLevel);
@@ -70,6 +69,7 @@ const filterStations = (station: Station, filters: Filter) => {
if (station.reqLevel == '-1') return true; if (station.reqLevel == '-1') return true;
if (parseInt(station.reqLevel) < filters['minLevel']) return false; if (parseInt(station.reqLevel) < filters['minLevel']) return false;
if (parseInt(station.reqLevel) >= filters['maxLevel']) return false;
if (filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false; 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-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
@@ -112,6 +112,7 @@ export default class StationFilterManager {
historyczna: false, historyczna: false,
mieszana: false, mieszana: false,
minLevel: 0, minLevel: 0,
maxLevel: 20,
minOneWayCatenary: 0, minOneWayCatenary: 0,
minOneWay: 0, minOneWay: 0,
minTwoWayCatenary: 0, minTwoWayCatenary: 0,