Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: restructured station filters

Browse Source
This commit is contained in:
Spythere
2024-05-21 16:17:23 +02:00
parent 1a8da02ced
commit a5b5df7452
14 changed files with 546 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/FilterOption.vue
+9 -16
View File
@@ -15,7 +15,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { useStationFiltersStore } from '../../store/stationFiltersStore';
interface FilterOption {
id: string;
@@ -40,15 +39,9 @@ export default defineComponent({
emits: ['update:optionValue'],
setup() {
return {
filterStore: useStationFiltersStore()
};
},
watch: {
'option.value'() {
this.filterStore.changeFilterValue(this.option.name, !this.option.value);
// this.filterStore.changeFilterValue(this.option.name, !this.option.value);
}
},
@@ -56,17 +49,17 @@ export default defineComponent({
handleDbClick(e: Event) {
e.preventDefault();
this.filterStore.lastClickedFilterId = this.option.id;
// this.filterStore.lastClickedFilterId = this.option.id;
// this.option.value = true;
this.$emit('update:optionValue', true);
this.filterStore.inputs.options
.filter((option) => {
return option.section == this.option.section && option.id != this.option.id;
})
.forEach((option) => {
option.value = !this.option.value;
});
// this.filterStore.inputs.options
// .filter((option) => {
// return option.section == this.option.section && option.id != this.option.id;
// })
// .forEach((option) => {
// option.value = !this.option.value;
// });
}
}
});
src/components/StationsView/StationFilterCard.vue
+126 -101
View File
@@ -4,7 +4,7 @@
<button class="card-button btn--filled btn--image" @click="toggleCard">
<img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
<p>[F] {{ $t('options.filters') }}</p>
<span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
<span class="active-indicator" v-if="!areFiltersAtDefaultComp"></span>
</button>
<label for="scenery-search">
@@ -36,26 +36,37 @@
<section class="card_options">
<div
class="option-section"
v-for="section in filterStore.inputs.optionSections"
:key="section"
v-for="(sectionFilters, sectionKey) in filtersSections"
:key="sectionKey"
>
<h3 class="text--primary">
{{ $t(`filters.sections.${section}`) }}
{{ $t(`filters.sections.${sectionKey}`) }}
<button @click="filterStore.resetSectionOptions(section)">RESET</button>
<button @click="resetSectionOptions(sectionKey)">RESET</button>
</h3>
<hr />
<div class="section-inputs">
<FilterOption
v-for="(option, i) in filterStore.inputs.options.filter(
(o) => o.section == section
)"
v-model:optionValue="option.value"
:option="option"
:key="i"
/>
<!--
@dblclick="handleDbClick"
-->
<div class="section-filters">
<div
v-for="filter in sectionFilters"
@click="() => (filters[filter] = !filters[filter])"
>
<input
:checked="filters[filter]"
v-model="filters[filter]"
type="checkbox"
:class="sectionKey"
:name="filter"
/>
<span>
{{ $t(`filters.${filter}`) }}
</span>
</div>
</div>
</div>
</section>
@@ -68,7 +79,7 @@
<span>{{
minimumHours == 0
? $t('filters.now')
: minimumHours < 8
: minimumHours < 7
? minimumHours + $t('filters.hour')
: $t('filters.no-limit')
}}</span>
@@ -76,21 +87,21 @@
</span>
</section>
<datalist id="authors">
<option v-for="(author, i) in authors" :key="i" :value="author"></option>
</datalist>
<section class="card_authors-search">
<h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
<datalist id="authors" name="authors">
<option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
</datalist>
<form action="javascript:void(0);" @submit="handleAuthorsInput">
<input
type="text"
id="author"
list="authors"
name="authors"
v-model="authors"
:placeholder="$t('filters.authors-placeholder')"
v-model="authorsInputValue"
@focus="preventKeyDown = true"
@blur="preventKeyDown = false"
/>
@@ -100,19 +111,18 @@
</section>
<section class="card_sliders">
<div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
<div class="slider" v-for="(slider, i) in initSliders" :key="i">
<input
class="slider-input"
type="range"
:name="slider.name"
:name="slider.id"
:id="slider.id"
:min="slider.minRange"
:max="slider.maxRange"
:step="slider.step"
v-model="slider.value"
@change="handleInput"
v-model="filters[slider.id]"
/>
<span class="slider-value">{{ slider.value }}</span>
<span class="slider-value">{{ filters[slider.id] }}</span>
<div class="slider-content">
{{ $t(`filters.sliders.${slider.id}`) }}
</div>
@@ -133,9 +143,9 @@
<button
class="btn--action"
:disabled="areFiltersAtDefaultComp"
:data-disabled="areFiltersAtDefaultComp"
@click="resetFilters"
:disabled="filterStore.areFiltersAtDefault"
:data-disabled="filterStore.areFiltersAtDefault"
>
[R] {{ $t('filters.reset') }}
</button>
@@ -151,12 +161,21 @@
import { defineComponent, inject } from 'vue';
import keyMixin from '../../mixins/keyMixin';
import routerMixin from '../../mixins/routerMixin';
import { useStationFiltersStore } from '../../store/stationFiltersStore';
import { useMainStore } from '../../store/mainStore';
import FilterOption from './FilterOption.vue';
import StorageManager from '../../managers/storageManager';
import {
filtersSections,
initSliders,
initFilters,
areFiltersAtDefault
} from '../../managers/stationFilterManager';
import { StationFilterSection } from '../../managers/stationFilterManager';
import { computed } from 'vue';
export default defineComponent({
components: { FilterOption },
mixins: [keyMixin, routerMixin],
@@ -165,8 +184,11 @@ export default defineComponent({
saveOptions: false,
STORAGE_KEY: 'options_saved',
authorsInputValue: '',
filtersSections,
initSliders,
minimumHours: 0,
authors: '',
currentRegion: { id: '', value: '' },
@@ -180,12 +202,16 @@ export default defineComponent({
setup() {
const isVisible = inject('isFilterCardVisible');
const store = useMainStore();
const filterStore = useStationFiltersStore();
const filters = inject('StationsView_filters') as Record<string, any>;
const areFiltersAtDefaultComp = computed(() => areFiltersAtDefault(filters));
return {
isVisible,
store,
filterStore
filters,
areFiltersAtDefaultComp
};
},
@@ -194,8 +220,6 @@ export default defineComponent({
if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
}
this.currentRegion = this.store.region;
@@ -214,7 +238,7 @@ export default defineComponent({
return true;
},
authors() {
authorsHint() {
return this.store.stationList
.reduce((acc, station) => {
station.generalInfo?.authors?.forEach((author) => {
@@ -258,35 +282,19 @@ export default defineComponent({
this.scrollTop = (e.target as HTMLElement).scrollTop;
},
handleInput(e: Event) {
const target = e.target as HTMLInputElement;
this.filterStore.changeFilterValue(target.name, target.value);
if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
},
handleAuthorsInput() {
this.filterStore.changeFilterValue('authors', this.authorsInputValue);
if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
},
changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
this.filterStore.changeFilterValue(name, value);
if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
this.filters['authors'] = this.authors;
// if (this.saveOptions) StorageManager.setStringValue('authors', target.value);
},
subHour() {
this.minimumHours = this.minimumHours < 1 ? 8 : this.minimumHours - 1;
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
this.minimumHours = this.minimumHours < 1 ? 7 : this.minimumHours - 1;
this.filters['onlineFromHours'] = this.minimumHours;
},
addHour() {
this.minimumHours = this.minimumHours > 7 ? 0 : this.minimumHours + 1;
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
this.minimumHours = this.minimumHours > 6 ? 0 : this.minimumHours + 1;
this.filters['onlineFromHours'] = this.minimumHours;
},
saveFilters() {
@@ -299,20 +307,26 @@ export default defineComponent({
StorageManager.registerStorage(this.STORAGE_KEY);
this.filterStore.inputs.options.forEach((option) =>
StorageManager.setBooleanValue(option.name, !option.value)
);
this.filterStore.inputs.sliders.forEach((slider) =>
StorageManager.setNumericValue(slider.name, slider.value)
);
Object.keys(this.filters).forEach((filterKey) => {
StorageManager.setValue(filterKey, this.filters[filterKey]);
});
},
resetFilters() {
this.authorsInputValue = '';
// Reset local model values
this.minimumHours = 0;
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
this.filterStore.resetFilters();
this.authors = '';
// Reset global filters
Object.keys(this.filters).forEach((filterKey) => {
this.filters[filterKey] = (initFilters as any)[filterKey];
});
},
resetSectionOptions(key: string) {
filtersSections[key as StationFilterSection].forEach((filter) => {
this.filters[filter] = (initFilters as any)[filter];
});
},
closeCard() {
@@ -374,28 +388,6 @@ h3.section-header {
text-align: center;
}
.card_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;
}
}
}
.card_timestamp {
display: flex;
flex-direction: column;
@@ -441,6 +433,52 @@ h3.section-header {
}
}
.section-filters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
margin: 1em 0;
}
.section-filters > div {
position: relative;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
span {
cursor: pointer;
display: inline-block;
width: 100%;
text-align: center;
padding: 0.25em;
font-weight: bold;
background-color: forestgreen;
}
span:hover {
background-color: #22aa22;
}
input[type='checkbox'] {
cursor: pointer;
position: absolute;
opacity: 0;
&:checked + span {
background-color: #444;
&:hover {
background-color: #555;
}
}
&:focus-visible + span {
outline: 1px solid $accentCol;
}
}
}
.card_actions {
padding: 0.5em;
@@ -475,19 +513,6 @@ h3.section-header {
}
}
.section-inputs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
margin: 1em 0;
}
.quick-actions div {
display: flex;
margin: 1em 0;
gap: 1em;
}
.slider {
display: flex;
align-items: center;
src/components/StationsView/StationTable.vue
+34 -28
View File
@@ -1,10 +1,10 @@
<template>
<section class="station_table">
<Loading
v-if="apiStore.dataStatuses.connection == Status.Loading && displayedStations.length == 0"
v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
/>
<div class="table_wrapper" v-else-if="displayedStations.length > 0">
<div class="table_wrapper" v-else-if="filteredStationList.length > 0">
<table>
<thead>
<tr>
@@ -20,8 +20,8 @@
<img
class="sort-icon"
v-if="sorterActive.headerName == headerName"
:src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
v-if="activeSorter.headerName == headerName"
:src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
alt="sort icon"
/>
</span>
@@ -43,8 +43,8 @@
<img
class="sort-icon"
v-if="sorterActive.headerName == headerName"
:src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
v-if="activeSorter.headerName == headerName"
:src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
alt="sort icon"
/>
</span>
@@ -54,7 +54,7 @@
<tbody>
<tr
v-for="station in displayedStations"
v-for="station in filteredStationList"
:class="{ 'last-selected': lastSelectedStationName == station.name }"
:key="station.name"
@click.left="setScenery(station.name)"
@@ -309,20 +309,21 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, inject, computed } from 'vue';
import StationStatusBadge from '../Global/StationStatusBadge.vue';
import dateMixin from '../../mixins/dateMixin';
import styleMixin from '../../mixins/styleMixin';
import { useStationFiltersStore } from '../../store/stationFiltersStore';
import { useMainStore } from '../../store/mainStore';
import Loading from '../Global/Loading.vue';
import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
import StationStatusBadge from '../Global/StationStatusBadge.vue';
import { Station, Status } from '../../typings/common';
import { Status } from '../../typings/common';
import { useApiStore } from '../../store/apiStore';
import { useTooltipStore } from '../../store/tooltipStore';
import { filterStations, sortStations } from '../../scripts/utils/stationFilterUtils';
import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
export default defineComponent({
emits: ['toggleDonationModal'],
components: { Loading, StationStatusBadge },
mixins: [styleMixin, dateMixin],
@@ -332,35 +333,36 @@ export default defineComponent({
lastSelectedStationName: ''
}),
computed: {
sorterActive() {
return this.stationFiltersStore.sorterActive;
},
displayedStations() {
return this.stationFiltersStore.filteredStationList;
}
},
setup() {
const mainStore = useMainStore();
const apiStore = useApiStore();
const tooltipStore = useTooltipStore();
const stationFiltersStore = useStationFiltersStore();
const filters = inject('StationsView_filters') as Record<string, any>;
const activeSorter = inject('StationsView_activeSorter') as ActiveSorter;
const filteredStationList = computed(() =>
mainStore.allStationInfo
.filter((station) => filterStations(station, filters))
.sort((a, b) => sortStations(a, b, activeSorter))
);
// const areFiltersAtDefault = computed(() => {
// })
return {
Status: Status.Data,
stationFiltersStore,
mainStore,
apiStore,
tooltipStore
tooltipStore,
filteredStationList,
activeSorter
};
},
methods: {
setScenery(name: string) {
const station = this.displayedStations.find((station) => station.name === name);
const station = this.filteredStationList.find((station) => station.name === name);
if (!station) return;
@@ -388,10 +390,14 @@ export default defineComponent({
window.open(url, '_blank');
},
changeSorter(headerName: HeadIdsTypes) {
changeSorter(headerName: HeadIdsType) {
if (headerName == 'general') return;
this.stationFiltersStore.changeSorter(headerName);
if (headerName == this.activeSorter.headerName)
this.activeSorter.dir = -1 * this.activeSorter.dir;
else this.activeSorter.dir = 1;
this.activeSorter.headerName = headerName;
}
}
});
src/components/StationsView/typings.ts
+25 -52
View File
@@ -5,56 +5,29 @@ export interface FilterOption {
defaultValue: boolean;
}
export interface Filter {
[key: string]: boolean | number | string;
default: boolean;
notDefault: boolean;
real: boolean;
fictional: boolean;
SPK: boolean;
SCS: boolean;
SPE: boolean;
SUP: boolean;
noSUP: boolean;
ASDEK: boolean;
noASDEK: boolean;
ręczne: boolean;
'ręczne+SPK': boolean;
'ręczne+SCS': boolean;
mechaniczne: boolean;
'mechaniczne+SPK': boolean;
'mechaniczne+SCS': boolean;
SBL: boolean;
PBL: boolean;
współczesna: boolean;
kształtowa: boolean;
historyczna: boolean;
mieszana: boolean;
minLevel: number;
maxLevel: number;
minOneWayCatenary: number;
minOneWay: number;
minTwoWayCatenary: number;
minTwoWay: number;
minVmax: number;
maxVmax: number;
'no-1track': boolean;
'no-2track': boolean;
'include-selected': boolean;
free: boolean;
occupied: boolean;
nonPublic: boolean;
unavailable: boolean;
abandoned: boolean;
endingStatus: boolean;
afkStatus: boolean;
noSpaceStatus: boolean;
unavailableStatus: boolean;
unsignedStatus: boolean;
authors: string;
onlineFromHours: number;
withActiveTimetables: boolean;
withoutActiveTimetables: boolean;
junction: boolean;
nonJunction: boolean;
export const headIds = [
'station',
'min-lvl',
'status',
'dispatcher',
'dispatcher-lvl',
'routes-single',
'routes-double',
'general'
] as const;
export const headIconsIds = [
'user',
'like',
'spawn',
'timetableAll',
'timetableUnconfirmed',
'timetableConfirmed'
] as const;
export type HeadIdsType = (typeof headIds)[number] | (typeof headIconsIds)[number];
export interface ActiveSorter {
headerName: HeadIdsType;
dir: number;
}
src/components/StationsView/utils.ts
View File