diff --git a/src/components/StationsView/FilterSlider.vue b/src/components/StationsView/FilterSlider.vue new file mode 100644 index 0000000..d9e59ce --- /dev/null +++ b/src/components/StationsView/FilterSlider.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 51973ea..000b07d 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -137,20 +137,16 @@
-
- - {{ filters[slider.id] }} +
+ + + + {{ filters[sliderOptionsList[sliderGroup][0].id] }} - + {{ filters[sliderOptionsList[sliderGroup][1].id] }} + +
- {{ $t(`filters.sliders.${slider.id}`) }} + {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
@@ -190,13 +186,15 @@ import routerMixin from '../../mixins/routerMixin'; import { useMainStore } from '../../store/mainStore'; import FilterOption from './FilterOption.vue'; +import FilterSlider from './FilterSlider.vue'; import StorageManager from '../../managers/storageManager'; import { filtersSections, - sliderStates, initFilters, - getChangedFilters + sliderGroups, + getChangedFilters, + sliderOptionsList } from '../../managers/stationFilterManager'; import { StationFilterSection } from '../../managers/stationFilterManager'; @@ -206,14 +204,15 @@ import { watch } from 'vue'; const STORAGE_KEY = 'options_saved'; export default defineComponent({ - components: { FilterOption }, + components: { FilterOption, FilterSlider }, mixins: [keyMixin, routerMixin], data: () => ({ saveOptions: false, filtersSections, - sliderStates, + sliderGroups, + sliderOptionsList, minimumHours: 0, @@ -516,7 +515,7 @@ h3.hours-section-header { .section-filters { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5em; margin: 1em 0; } @@ -528,9 +527,11 @@ h3.hours-section-header { -moz-user-select: none; span { + display: flex; + justify-content: center; + align-items: center; + height: 100%; cursor: pointer; - display: inline-block; - width: 100%; text-align: center; padding: 0.25em; font-weight: bold; @@ -588,10 +589,14 @@ h3.hours-section-header { } } -.slider { +.card_sliders { + margin-top: 1em; +} + +.slider-box { display: grid; - grid-template-columns: 1fr 50px 1fr; align-items: center; + grid-template-columns: 250px 100px 1fr; gap: 0.25em; margin-bottom: 1em; @@ -601,88 +606,14 @@ h3.hours-section-header { padding: 0.1em 0.2em; text-align: center; } +} - &-input { - -webkit-appearance: none; - appearance: none; - background: none; - border: none; - outline: none; - - min-width: 25%; - - &:focus-visible ~ * { - color: gold; - } - - &::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - - height: 20px; - width: 20px; - margin-top: -7px; - - border-radius: 50%; - - background: white; - border: 3px solid var(--clr-primary); - background-color: #333; - - @include responsive.smallScreen { - width: 15px; - height: 15px; - margin-top: -5px; - border: 3px solid var(--clr-primary); - } - } - - &::-moz-range-thumb { - height: 1em; - width: 1em; - - border-radius: 50%; - - background: white; - border: 4px solid var(--clr-primary); - - cursor: pointer; - - @include responsive.smallScreen { - width: 1em; - height: 1em; - border: 3px solid var(--clr-primary); - } - } - - &::-webkit-slider-runnable-track { - width: 100%; - height: 5px; - cursor: pointer; - background: #ffffff; - border-radius: 1em; - } - - &::-moz-range-track { - width: 100%; - height: 5px; - cursor: pointer; - background: #ffffff; - border-radius: 1em; - } - - &::-ms-track { - width: 100%; - height: 5px; - cursor: pointer; - background: #ffffff; - border-radius: 1em; - } - } +.slider-value { + text-align: center; } @include responsive.smallScreen { - .slider { + .slider-box { display: flex; flex-wrap: wrap; justify-content: center; diff --git a/src/locales/pl.json b/src/locales/pl.json index 60f66cf..e4b4206 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -247,7 +247,9 @@ "blockades": "BLOKADY LINIOWE", "status": "STATUS ONLINE", "timetables": "AKTYWNE ROZKŁADY JAZDY", - "spawns": "OTWARTE SPAWNY" + "spawns": "OTWARTE SPAWNY", + "externalRoutes": "SZLAKI ZEWNĘTRZNE", + "internalRoutes": "SZLAKI WEWNĘTRZNE" }, "changed-filters-count": "Zmienione filtry:", "no-changed-filters": "Brak zmienionych filtrów", @@ -291,19 +293,27 @@ "withoutActiveTimetables": "BEZ AKTYWNYCH", "junction": "WĘZŁOWE", "nonJunction": "INNE", + + "oneWay": "JEDNOTOROWE NIEZELEKTRYFIKOWANE", + "oneWayCatenary": "JEDNOTOROWE ZELEKTRYFIKOWANE", + "twoWayCatenary": "DWUTOROWE ZELEKTRYFIKOWANE", + "twoWay": "DWUTOROWE NIEZELEKTRYFIKOWANE", + "oneWayCatenaryInt": "JEDNOTOROWE ZELEKTRYFIKOWANE", + "oneWayInt": "JEDNOTOROWE NIEZELEKTRYFIKOWANE", + "twoWayCatenaryInt": "DWUTOROWE ZELEKTRYFIKOWANE", + "twoWayInt": "DWUTOROWE NIEZELEKTRYFIKOWANE", + "sliders": { - "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO", - "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO", - "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA", - "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA", - "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)", - "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)", - "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)", - "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)", - "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)", - "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)", - "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)", - "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)" + "vMax": "PRĘDKOŚĆ SZLAKOWA", + "level": "WYMAGANY POZIOM DYŻURNEGO", + "routeOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR.", + "routeOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR.", + "routeTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR.", + "routeTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR.", + "routeOneWayInternalCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE", + "routeOneWayInternal": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE", + "routeTwoWayInternalCatenary": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE", + "routeTwoWayInternal": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE" }, "sceneries-placeholder": "Wyszukaj scenerię", "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)", diff --git a/src/managers/stationFilterManager.ts b/src/managers/stationFilterManager.ts index dac2b8c..438eaa7 100644 --- a/src/managers/stationFilterManager.ts +++ b/src/managers/stationFilterManager.ts @@ -1,5 +1,24 @@ import StorageManager from './storageManager'; +export type SliderGroup = + | 'vMax' + | 'level' + | 'routeOneWay' + | 'routeOneWayCatenary' + | 'routeOneWayInternal' + | 'routeOneWayInternalCatenary' + | 'routeTwoWay' + | 'routeTwoWayCatenary' + | 'routeTwoWayInternal' + | 'routeTwoWayInternalCatenary'; + +export interface SliderOptions { + id: string; + minRange: number; + maxRange: number; + step: number; +} + export const sections = [ 'status', 'timetables', @@ -10,7 +29,9 @@ export const sections = [ 'control', 'blockades', 'signals', - 'addons' + 'addons', + 'externalRoutes', + 'internalRoutes' ] as const; export const initFilters = { @@ -60,34 +81,111 @@ export const initFilters = { onlineFromHours: 0, minLevel: 0, maxLevel: 20, + oneWay: false, + oneWayCatenary: false, + twoWay: false, + twoWayCatenary: false, + oneWayCatenaryInt: false, + oneWayInt: false, + twoWayInt: false, + twoWayCatenaryInt: false, minOneWay: 0, minOneWayCatenary: 0, - minOneWayInt: 0, minOneWayCatenaryInt: 0, + minOneWayInt: 0, minTwoWay: 0, minTwoWayCatenary: 0, minTwoWayInt: 0, minTwoWayCatenaryInt: 0, + maxOneWay: 5, + maxOneWayCatenary: 5, + maxOneWayInt: 5, + maxOneWayCatenaryInt: 5, + maxTwoWay: 5, + maxTwoWayCatenary: 5, + maxTwoWayInt: 5, + maxTwoWayCatenaryInt: 5, authors: '', projects: '', lines: '' }; -export const sliderStates = [ - { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 }, - { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 }, - { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 }, - { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 }, - { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }, - { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 } +export const sliderGroups: SliderGroup[] = [ + 'vMax', + 'level', + 'routeOneWay', + 'routeOneWayCatenary', + 'routeOneWayInternal', + 'routeOneWayInternalCatenary', + 'routeTwoWay', + 'routeTwoWayCatenary', + 'routeTwoWayInternal', + 'routeTwoWayInternalCatenary' ]; +export const sliderOptionsList: Record = { + vMax: [ + { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 }, + { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 } + ], + level: [ + { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 }, + { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 } + ], + routeOneWay: [ + { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxOneWay', minRange: 0, maxRange: 5, step: 1 } + ], + routeOneWayCatenary: [ + { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxOneWayCatenary', minRange: 0, maxRange: 5, step: 1 } + ], + routeOneWayInternal: [ + { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxOneWayInt', minRange: 0, maxRange: 5, step: 1 } + ], + routeOneWayInternalCatenary: [ + { + id: 'minOneWayCatenaryInt', + minRange: 0, + maxRange: 5, + step: 1 + }, + { + id: 'maxOneWayCatenaryInt', + minRange: 0, + maxRange: 5, + step: 1 + } + ], + routeTwoWay: [ + { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxTwoWay', minRange: 0, maxRange: 5, step: 1 } + ], + routeTwoWayCatenary: [ + { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 } + ], + routeTwoWayInternal: [ + { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }, + { id: 'maxTwoWayInt', minRange: 0, maxRange: 5, step: 1 } + ], + routeTwoWayInternalCatenary: [ + { + id: 'minTwoWayCatenaryInt', + minRange: 0, + maxRange: 5, + step: 1 + }, + { + id: 'maxTwoWayCatenaryInt', + minRange: 0, + maxRange: 5, + step: 1 + } + ] +}; + export type StationFilter = keyof typeof initFilters; export type StationFilterSection = (typeof sections)[number]; @@ -112,7 +210,9 @@ export const filtersSections: Record = { 'manual' ], blockades: ['SBL', 'PBL'], - signals: ['modern', 'semaphores', 'mixed', 'historical'] + signals: ['modern', 'semaphores', 'mixed', 'historical'], + externalRoutes: ['oneWay', 'oneWayCatenary', 'twoWay', 'twoWayCatenary'], + internalRoutes: ['oneWayInt', 'oneWayCatenaryInt', 'twoWayInt', 'twoWayCatenaryInt'] }; export function setupFilters(currentFilters: Record) {