diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 19b7ac4..2a6d822 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -4,7 +4,7 @@ [F] {{ $t('options.filters') }} - + @@ -33,6 +33,12 @@ {{ $t('filters.title') }} + + {{ $t('filters.changed-filters-count') }} {{ changedFilters.length }} + + + {{ $t('filters.no-changed-filters') }} + + {{ $t(`filters.sections.${sectionKey}`) }} - - RESET + RESET - - (filters[filter] = !filters[filter])" + (filters[filterKey] = !filters[filterKey])" + @dblclick="setSingleSectionFilter(sectionKey, filterKey)" + :for="filterKey" > - {{ $t(`filters.${filter}`) }} + {{ $t(`filters.${filterKey}`) }} - + @@ -143,8 +147,8 @@ [R] {{ $t('filters.reset') }} @@ -170,11 +174,14 @@ import { filtersSections, initSliders, initFilters, - areFiltersAtDefault + getChangedFilters } from '../../managers/stationFilterManager'; import { StationFilterSection } from '../../managers/stationFilterManager'; import { computed } from 'vue'; +import { watch } from 'vue'; + +const STORAGE_KEY = 'options_saved'; export default defineComponent({ components: { FilterOption }, @@ -182,7 +189,6 @@ export default defineComponent({ data: () => ({ saveOptions: false, - STORAGE_KEY: 'options_saved', filtersSections, initSliders, @@ -205,18 +211,27 @@ export default defineComponent({ const filters = inject('StationsView_filters') as Record; - const areFiltersAtDefaultComp = computed(() => areFiltersAtDefault(filters)); + const changedFilters = computed(() => getChangedFilters(filters)); + + // Save filters to persistent storage + watch(filters, (value) => { + if (!StorageManager.isRegistered(STORAGE_KEY)) return; + + Object.keys(value).forEach((filterKey) => { + StorageManager.setValue(filterKey, filters[filterKey]); + }); + }); return { isVisible, store, filters, - areFiltersAtDefaultComp + changedFilters }; }, mounted() { - this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY); + this.saveOptions = StorageManager.isRegistered(STORAGE_KEY); if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) { this.minimumHours = StorageManager.getNumericValue('onlineFromHours'); @@ -301,11 +316,11 @@ export default defineComponent({ this.saveOptions = !this.saveOptions; if (!this.saveOptions) { - StorageManager.unregisterStorage(this.STORAGE_KEY); + StorageManager.unregisterStorage(STORAGE_KEY); return; } - StorageManager.registerStorage(this.STORAGE_KEY); + StorageManager.registerStorage(STORAGE_KEY); Object.keys(this.filters).forEach((filterKey) => { StorageManager.setValue(filterKey, this.filters[filterKey]); @@ -323,9 +338,21 @@ export default defineComponent({ }); }, - resetSectionOptions(key: string) { - filtersSections[key as StationFilterSection].forEach((filter) => { - this.filters[filter] = (initFilters as any)[filter]; + areSectionFiltersDefault(sectionKey: StationFilterSection) { + return filtersSections[sectionKey].every((filterKey) => { + return this.filters[filterKey] == initFilters[filterKey]; + }); + }, + + resetSectionFilters(sectionKey: StationFilterSection) { + filtersSections[sectionKey].forEach((filterKey) => { + this.filters[filterKey] = initFilters[filterKey]; + }); + }, + + setSingleSectionFilter(sectionKey: StationFilterSection, chosenKey: string) { + filtersSections[sectionKey].forEach((filterKey) => { + if (filterKey != chosenKey) this.filters[filterKey] = initFilters[filterKey]; }); }, @@ -360,6 +387,11 @@ h3.section-header { padding: 0.5em; } +.changed-filters { + background-color: #111; + padding: 0.5em; +} + .card_controls { display: flex; gap: 0.5em; @@ -440,7 +472,7 @@ h3.section-header { margin: 1em 0; } -.section-filters > div { +.section-filters > label { position: relative; user-select: none; -webkit-user-select: none; @@ -516,19 +548,15 @@ h3.section-header { .slider { display: flex; align-items: center; + gap: 0.25em; margin-bottom: 1em; &-value { color: $accentCol; - margin-right: 0.5em; padding: 0.1em 0.2em; } - &-content { - flex-grow: 2; - } - &-input { -webkit-appearance: none; appearance: none; @@ -537,7 +565,6 @@ h3.section-header { outline: none; min-width: 25%; - max-width: 120px; &:focus-visible ~ * { color: gold; @@ -612,5 +639,14 @@ h3.section-header { .card_controls > button.card-button > p { display: none; } + + .slider { + flex-wrap: wrap; + justify-content: center; + + &-input { + width: 90%; + } + } } diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index c9877a5..81ad005 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -302,8 +302,13 @@ - {{ $t('sceneries.no-stations') }} (region: {{ mainStore.region.name }}) + + {{ $t('sceneries.no-stations') }} (region: {{ mainStore.region.name }}) + + + {{ $t('sceneries.active-filters') }} + @@ -311,15 +316,16 @@
[F] {{ $t('options.filters') }}