From aea26fa53822243c7707aa778eb84a03ed0cf260 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 27 Nov 2025 21:04:55 +0100 Subject: [PATCH] chore: groupped station filters inputs to the top of the card; added project filter --- .../StationsView/StationFilterCard.vue | 145 ++++++++++-------- src/components/StationsView/utils.ts | 9 +- src/locales/en.json | 7 +- src/locales/pl.json | 9 +- src/managers/stationFilterManager.ts | 20 ++- 5 files changed, 113 insertions(+), 77 deletions(-) diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 42c039a..2509f18 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -21,9 +21,7 @@ -
-

{{ $t('filters.sceneries-search') }}

- +
-
- + - -
+ +
+ +
+ + + + + + + +
+ +
+ + + + + + +
@@ -97,29 +137,6 @@
-
-

{{ $t('filters.authors-search') }}

- - - - - -
- - - -
-
-
(s1.name > s2.name ? 1 : -1)); }, - currentOptionsActive() { - return true; - }, - - authorsHint() { + authorsOptions() { return this.store.stationList .reduce((acc, station) => { station.generalInfo?.authors?.forEach((author) => { @@ -270,6 +284,17 @@ export default defineComponent({ return acc; }, [] as string[]) .sort((a, b) => a.localeCompare(b)); + }, + + projectsOptions() { + return this.store.stationList + .reduce((acc, station) => { + if (!station.generalInfo || !station.generalInfo.project) return acc; + if (!acc.includes(station.generalInfo.project)) acc.push(station.generalInfo.project); + + return acc; + }, [] as string[]) + .sort((a, b) => a.localeCompare(b)); } }, @@ -294,8 +319,12 @@ export default defineComponent({ this.scrollTop = (e.target as HTMLElement).scrollTop; }, - handleAuthorsInput() { - this.filters['authors'] = this.authors; + resetAuthorsInput() { + this.filters['authors'] = this.authorSearchFilter; + }, + + resetProjectsInput() { + this.filters['projects'] = this.projectSearchFilter; }, handleSceneriesInput() { @@ -340,7 +369,7 @@ export default defineComponent({ // Reset local model values this.minimumHours = 0; - this.authors = ''; + this.authorSearchFilter = ''; // Reset global filters Object.keys(this.filters).forEach((filterKey) => { @@ -456,27 +485,23 @@ h3.section-header { } } -.card_authors-search, -.card_sceneries-search { - margin: 1em 0; +.card_input-search { display: flex; - flex-direction: column; align-items: center; + gap: 0.5em; - form { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 0.5em; - width: 100%; - margin-top: 1em; + button { + height: 100%; } input { - width: 70%; - max-width: 400px; + width: 100%; padding: 0.5em; - outline: 1px solid white; + border: 1px solid #aaa; + } + + &.authors { + margin-top: 1em; } } diff --git a/src/components/StationsView/utils.ts b/src/components/StationsView/utils.ts index b32ee90..91ab7f1 100644 --- a/src/components/StationsView/utils.ts +++ b/src/components/StationsView/utils.ts @@ -146,10 +146,11 @@ function filterSliderValues(filters: Record, generalInfo: StationGe function filterInputValues(filters: Record, generalInfo: StationGeneralInfo) { return ( - filters['authors'].length > 3 && - !generalInfo.authors - ?.map((a) => a.toLocaleLowerCase()) - .includes(filters['authors'].toLocaleLowerCase()) + (filters['authors'].length > 3 && + !generalInfo.authors + ?.map((a) => a.toLocaleLowerCase()) + .includes(filters['authors'].toLocaleLowerCase())) || + (filters['projects'].length > 0 && generalInfo.project != filters['projects']) ); } diff --git a/src/locales/en.json b/src/locales/en.json index 4e74fd5..3ee0ab0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -305,10 +305,9 @@ "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES", "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES" }, - "sceneries-search": "SCENERY SEARCH:", - "sceneries-placeholder": "Enter scenery name...", - "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):", - "authors-placeholder": "Enter the author nickname...", + "sceneries-placeholder": "Search for scenery", + "authors-placeholder": "Scenery author (other filters apply)", + "projects-placeholder": "Scenery project (other filters apply)", "search-button-title": "SEARCH", "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:", "now": "NOW", diff --git a/src/locales/pl.json b/src/locales/pl.json index 630b627..d1f1548 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -303,10 +303,9 @@ "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)", "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)" }, - "sceneries-search": "WYSZUKAJ SCENERIĘ:", - "sceneries-placeholder": "Wpisz nazwę scenerii...", - "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):", - "authors-placeholder": "Wpisz nick autora...", + "sceneries-placeholder": "Wyszukaj scenerię", + "authors-placeholder": "Autor scenerii (uwzględnia inne filtry)", + "projects-placeholder": "Projekt scenerii (uwzględnia inne filtry)", "search-button-title": "SZUKAJ", "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:", "now": "TERAZ", @@ -595,4 +594,4 @@ "history": { "title": "DZIENNIK ROZKŁADÓW JAZDY" } -} \ No newline at end of file +} diff --git a/src/managers/stationFilterManager.ts b/src/managers/stationFilterManager.ts index 2c33518..c94ce07 100644 --- a/src/managers/stationFilterManager.ts +++ b/src/managers/stationFilterManager.ts @@ -68,7 +68,8 @@ export const initFilters = { minTwoWayCatenary: 0, minTwoWayInt: 0, minTwoWayCatenaryInt: 0, - authors: '' + authors: '', + projects: '' }; export const sliderStates = [ @@ -83,7 +84,7 @@ export const sliderStates = [ { 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 }, + { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 } ]; export type StationFilter = keyof typeof initFilters; @@ -97,7 +98,18 @@ export const filtersSections: Record = { stationType: ['junction', 'nonJunction'], access: ['nonPublic', 'unavailable', 'abandoned'], addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'], - control: ['SPK', 'SCS', 'SPE', 'SCS-SPK', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'], + control: [ + 'SPK', + 'SCS', + 'SPE', + 'SCS-SPK', + 'SPK-M', + 'SCS-M', + 'mechanical', + 'SPK-R', + 'SCS-R', + 'manual' + ], blockades: ['SBL', 'PBL'], signals: ['modern', 'semaphores', 'mixed', 'historical'] }; @@ -118,7 +130,7 @@ export function setupFilters(currentFilters: Record) { }); } -export function getChangedFilters(currentFilters: Record): string[] { +export function getChangedFilters(currentFilters: Record): string[] { return ( Object.keys(currentFilters).filter( (filterKey) =>