diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index c664778..ad7f89a 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -60,8 +60,9 @@ -
-
{{ $t('filters.minimum-hours-title') }}
+
+

{{ $t('filters.minimum-hours-title') }}

+ {{ @@ -75,16 +76,27 @@
+ + + +
@@ -196,6 +208,19 @@ export default defineComponent({ currentOptionsActive() { return true; + }, + + authors() { + return this.store.stationList + .reduce((acc, station) => { + station.generalInfo?.authors?.forEach((author) => { + if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase())) + acc.push(author.toLocaleLowerCase()); + }); + + return acc; + }, [] as string[]) + .sort((a, b) => a.localeCompare(b)); } }, @@ -230,12 +255,12 @@ export default defineComponent({ if (this.saveOptions) StorageManager.setStringValue(target.name, target.value); }, - handleAuthorsInput(e: Event) { - clearTimeout(this.delayInputTimer); + handleAuthorsInput() { + console.log(this.authorsInputValue); - this.delayInputTimer = window.setTimeout(() => { - this.handleInput(e); - }, 400); + this.filterStore.changeFilterValue('authors', this.authorsInputValue); + + if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue); }, changeNumericFilterValue(name: string, value: number, saveToStorage = false) { @@ -297,136 +322,139 @@ export default defineComponent({ @import '../../styles/card.scss'; @import '../../styles/animations.scss'; +h3.section-header { + text-align: center; + margin: 0.5em 0; +} + .card { display: grid; grid-template-rows: 1fr auto; +} - &_info { - background-color: #111; - padding: 0.5em; +.card_info { + background-color: #111; + padding: 0.5em; +} + +.card_controls { + display: flex; + gap: 0.5em; + + input { + border-radius: 0.5em 0.5em 0 0; + height: 100%; + } +} + +.card_content { + padding: 1em 0.5em; + + display: flex; + flex-direction: column; + + gap: 1em; + overflow: auto; +} + +.card_title { + font-size: 2em; + font-weight: 700; + color: $accentCol; + + text-align: center; +} + +.card_regions { + display: flex; + justify-content: center; + + label > input { + display: none; } - &_controls { + label > span { + padding: 0.25em 0.5em; + margin: 0 0.25em; + + cursor: pointer; + + background-color: gray; + + &.checked { + background-color: seagreen; + } + } +} + +.card_timestamp { + display: flex; + flex-direction: column; + justify-content: center; + + .clock { + display: flex; + align-items: center; + justify-content: center; + + font-size: 1.2em; + text-align: center; + + span { + min-width: 120px; + font-weight: bold; + color: $accentCol; + } + + button { + padding: 0.2em 0.6em; + } + } +} + +.card_authors-search { + margin: 1em 0; + + form { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.5em; + width: 100%; + margin-top: 1em; + } + + input { + width: 70%; + max-width: 400px; + padding: 0.5em; + outline: 1px solid white; + } +} + +.card_actions { + width: 100%; + padding: 0.5em; + + .filter-option { + max-width: 50%; + margin: 0 auto; + } + + .action-buttons { display: flex; gap: 0.5em; - - input { - border-radius: 0.5em 0.5em 0 0; - height: 100%; - } - } - - &_content { - padding: 1em 0.5em; - - display: flex; - flex-direction: column; - - gap: 1em; - overflow: auto; - } - - &_title { - font-size: 2em; - font-weight: 700; - color: $accentCol; - - text-align: center; - } - - &_regions { - display: flex; - justify-content: center; - - label > input { - display: none; - } - - label > span { - padding: 0.25em 0.5em; - margin: 0 0.25em; - - cursor: pointer; - - background-color: gray; - - &.checked { - background-color: seagreen; - } - } - } - - &_timestamp { - display: flex; - flex-direction: column; - justify-content: center; - - .clock { - display: flex; - align-items: center; - justify-content: center; - - font-size: 1.2em; - margin-top: 0.5em; - - span { - min-width: 120px; - font-weight: bold; - color: $accentCol; - } - - button { - padding: 0.2em 0.6em; - } - } - } - - &_modes { - display: flex; - justify-content: center; - - .option { - margin: 0 1em; - } - } - - &_authors-search { - display: inline-block; - margin: 0 auto; - width: 60%; - min-width: 240px; - - input { - width: 100%; - padding: 0.5em; - border: 1px solid white; - } - } - - &_actions { width: 100%; - padding: 0.5em; - .filter-option { - max-width: 50%; + margin-top: 0.5em; + + button { + width: 50%; margin: 0 auto; - } + padding: 0.5em; - .action-buttons { - display: flex; - gap: 0.5em; - width: 100%; - - margin-top: 0.5em; - - button { - width: 50%; - margin: 0 auto; - padding: 0.5em; - - &[data-selected='true'] { - background-color: forestgreen; - } + &[data-selected='true'] { + background-color: forestgreen; } } } diff --git a/src/locales/en.json b/src/locales/en.json index 5792dcb..2a4a4f5 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -227,7 +227,10 @@ "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES", "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES" }, - "authors-search": "Search by author (other filters apply)", + "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):", + "authors-placeholder": "Enter the author nickname...", + "authors-button-title": "Search", + "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:", "now": "NOW", "hour": "h", diff --git a/src/locales/pl.json b/src/locales/pl.json index 348abb4..c54b56d 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -218,7 +218,9 @@ "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)" }, - "authors-search": "Szukaj autora (uwzględnia inne filtry)", + "authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):", + "authors-placeholder": "Wpisz nick autora...", + "authors-button-title": "Szukaj", "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:", "now": "TERAZ", "hour": " godz.",