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

Nowe filtry scenerii

Browse Source
This commit is contained in:
Spythere
2021-11-15 17:29:31 +01:00
parent cc8715da67
commit 94901bf99b
10 changed files with 157 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationFilterCard.vue
+33 -98
View File
@@ -37,15 +37,21 @@
<section class="card_options">
<filter-option v-for="(option, i) in inputs.options" :option="option" :key="i" @optionChange="handleChange" />
</section>
<!--
<section class="card_timestamp" style="text-align: center">
<div>POKAZUJ SCENERIE DOSTĘPNE MINIMUM DO GODZINY:</div>
<div>{{ $t('filters.minimum-hours-title') }}</div>
<span class="clock">
<button @click="subHour">-</button>
<span>{{ minimumTimeString }}</span>
<span>{{
minimumHours == 0
? $t('filters.now')
: minimumHours < 8
? minimumHours + $t('filters.hour')
: $t('filters.no-limit')
}}</span>
<button @click="addHour">+</button>
</span>
</section> -->
</section>
<section class="card_sliders">
<div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
@@ -102,46 +108,6 @@ import StorageManager from '@/scripts/managers/storageManager';
import ActionButton from '../Global/ActionButton.vue';
import FilterOption from './FilterOption.vue';
/*
Do JSONa
{
"id": "endingStatus",
"name": "endingStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "afkStatus",
"name": "afkStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "noSpaceStatus",
"name": "noSpaceStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "unavailableStatus",
"name": "unavailableStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
}
*/
export default defineComponent({
components: { ActionButton, FilterOption },
emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
@@ -153,6 +119,8 @@ export default defineComponent({
saveOptions: false,
STORAGE_KEY: 'options_saved',
minimumHours: 0,
currentRegion: { id: '', value: '' },
}),
@@ -161,14 +129,18 @@ export default defineComponent({
return {
isVisible,
minimumTimeString: ref('BEZ LIMITU'),
};
},
mounted() {
this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
}
this.currentRegion = this.$store.getters[GETTERS.currentRegion];
},
@@ -200,64 +172,25 @@ export default defineComponent({
this.closeCard();
},
subHour() {
if (this.minimumTimeString == 'BEZ LIMITU') {
const prevHour = new Date().getHours() + 7;
this.minimumTimeString = `${prevHour < 10 ? '0' : ''}${prevHour}:00`;
const prevDate = new Date();
prevDate.setHours(prevHour, 0, 0);
this.$emit('changeFilterValue', {
name: 'onlineToTimestamp',
value: prevDate.getTime(),
});
return;
}
const prevHour = Number(this.minimumTimeString.split(':')[0]) - 1;
if (prevHour < new Date().getHours() + 1) return;
this.minimumTimeString = `${prevHour < 10 ? '0' : ''}${prevHour}:00`;
const prevDate = new Date();
prevDate.setHours(prevHour, 0, 0);
console.log(prevDate);
changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
this.$emit('changeFilterValue', {
name: 'onlineToTimestamp',
value: prevDate.getTime(),
name,
value,
});
if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
},
subHour() {
this.minimumHours = this.minimumHours < 1 ? 8 : this.minimumHours - 1;
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
},
addHour() {
if (this.minimumTimeString == 'BEZ LIMITU') return;
this.minimumHours = this.minimumHours > 7 ? 0 : this.minimumHours + 1;
const nextHour = Number(this.minimumTimeString.split(':')[0]) + 1;
if (nextHour > new Date().getHours() + 7) {
this.minimumTimeString = 'BEZ LIMITU';
this.$emit('changeFilterValue', {
name: 'onlineToTimestamp',
value: -1,
});
return;
}
this.minimumTimeString = `${nextHour < 10 ? '0' : ''}${nextHour}:00`;
const nextDate = new Date();
nextDate.setHours(nextHour, 0, 0);
this.$emit('changeFilterValue', {
name: 'onlineToTimestamp',
value: nextDate.getTime(),
});
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
},
invertFilters() {
@@ -295,6 +228,8 @@ export default defineComponent({
StorageManager.setNumericValue(slider.name, slider.value);
});
this.minimumHours = 0;
this.$emit('resetFilters');
},
src/data/options.json
+45 -1
View File
@@ -31,6 +31,14 @@
"value": true,
"defaultValue": true
},
{
"id": "non-public",
"name": "nonPublic",
"iconName": "user",
"section": "access",
"value": true,
"defaultValue": true
},
{
"id": "unavailable",
"name": "unavailable",
@@ -138,7 +146,43 @@
"section": "status",
"value": true,
"defaultValue": true
}
},
{
"id": "endingStatus",
"name": "endingStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "afkStatus",
"name": "afkStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "noSpaceStatus",
"name": "noSpaceStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
},
{
"id": "unavailableStatus",
"name": "unavailableStatus",
"iconName": "",
"section": "status",
"value": true,
"defaultValue": true
}
],
"sliders": [{
"id": "min-lvl",
src/data/stationData.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/locales/en.json
+5
View File
@@ -61,6 +61,7 @@
"real": "REAL",
"fictional": "FICTIONAL",
"unavailable": "UNSUPPORTED",
"non-public": "NON-PUBLIC",
"SPK": "SPK",
"SCS": "SCS",
@@ -82,6 +83,10 @@
"routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
"routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
},
"minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
"now": "NOW",
"hour": "h",
"no-limit": "NO LIMIT",
"include-selected": "INCLUDE SELECTED",
"save": "SAVE FILTERS",
"reset": "RESET FILTERS",
src/locales/pl.json
+6
View File
@@ -61,6 +61,8 @@
"real": "REALNA",
"fictional": "FIKCYJNA",
"unavailable": "NIEDOSTĘPNA",
"non-public": "NIEPUBLICZNA",
"SPK": "SPK",
"SCS": "SCS",
"SPE": "SPE",
@@ -81,6 +83,10 @@
"routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
"routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
},
"minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
"now": "TERAZ",
"hour": " godz.",
"no-limit": "BEZ LIMITU",
"include-selected": "POKAŻ ZAZNACZONE",
"save": "ZAPISZ FILTRY",
"reset": "RESETUJ FILTRY",
src/scripts/interfaces/Filter.ts
+1 -1
View File
@@ -34,5 +34,5 @@ export default interface Filter {
unavailableStatus: boolean;
unsignedStatus: boolean;
onlineToTimestamp: number;
onlineFromHours: number;
}
src/scripts/managers/stationFilterManager.ts
+26 -3
View File
@@ -1,5 +1,6 @@
import Station from '@/scripts/interfaces/Station';
import Filter from '@/scripts/interfaces/Filter';
import StorageManager from './storageManager';
const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
switch (sorter.index) {
@@ -60,7 +61,14 @@ const filterStations = (station: Station, filters: Filter) => {
if (station.online && station.statusID == 'ending' && filters['ending']) return returnMode;
if (filters['onlineToTimestamp'] != -1 && station.online && station.statusTimestamp <= filters['onlineToTimestamp']) return returnMode;
if (station.online
&& station.statusTimestamp != 0
&& filters['onlineFromHours'] < 8
&& station.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000)
return returnMode;
if (filters['onlineFromHours'] > 0 && station.statusTimestamp == 0) return returnMode;
if (filters['onlineFromHours'] == 8 && station.statusID != 'no-limit') return returnMode;
if (station.statusID == 'ending' && filters['endingStatus']) return returnMode;
if ((station.statusID == 'not-signed' || station.statusID == 'unavailable') && filters['unavailableStatus']) return returnMode;
@@ -105,7 +113,6 @@ const filterStations = (station: Station, filters: Filter) => {
if (filters['SBL'] && station.SBL) return returnMode;
return true;
}
@@ -145,13 +152,29 @@ export default class StationFilterManager {
unavailableStatus: false,
unsignedStatus: false,
onlineToTimestamp: -1
onlineFromHours: 0
};
private filters: Filter = { ...this.filterInitStates };
private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
checkFilters() {
if (!StorageManager.isRegistered("options_saved")) return;
Object.keys(this.filterInitStates).forEach(filterKey => {
if (StorageManager.isRegistered(filterKey)) return;
const filterType = typeof this.filterInitStates[filterKey];
if (filterType === "boolean")
StorageManager.setBooleanValue(filterKey, !this.filterInitStates[filterKey] as boolean);
if (filterType === "number")
StorageManager.setNumericValue(filterKey, this.filterInitStates[filterKey] as number);
});
}
getFilteredStationList(stationList: Station[]): Station[] {
return stationList
.filter(station => filterStations(station, this.filters))
src/views/StationsView.vue
+38 -42
View File
@@ -35,22 +35,22 @@
</template>
<script lang="ts">
import Station from "@/scripts/interfaces/Station";
import Station from '@/scripts/interfaces/Station';
import StorageManager from "@/scripts/managers/storageManager";
import StationFilterManager from "@/scripts/managers/stationFilterManager";
import StorageManager from '@/scripts/managers/storageManager';
import StationFilterManager from '@/scripts/managers/stationFilterManager';
import inputData from "@/data/options.json";
import inputData from '@/data/options.json';
import StationTable from "@/components/StationsView/StationTable.vue";
import FilterCard from "@/components/StationsView/StationFilterCard.vue";
import SelectBox from "@/components/Global/SelectBox.vue";
import StationTable from '@/components/StationsView/StationTable.vue';
import FilterCard from '@/components/StationsView/StationFilterCard.vue';
import SelectBox from '@/components/Global/SelectBox.vue';
import { StoreData } from "@/scripts/interfaces/StoreData";
import { DataStatus } from "@/scripts/enums/DataStatus";
import { computed, ComputedRef, defineComponent, reactive } from "vue";
import { useStore } from "@/store";
import { GETTERS } from "@/constants/storeConstants";
import { StoreData } from '@/scripts/interfaces/StoreData';
import { DataStatus } from '@/scripts/enums/DataStatus';
import { computed, ComputedRef, defineComponent, reactive } from 'vue';
import { useStore } from '@/store';
import { GETTERS } from '@/constants/storeConstants';
export default defineComponent({
components: {
@@ -59,22 +59,22 @@ export default defineComponent({
SelectBox,
},
data: () => ({
trainIcon: require("@/assets/icon-train.svg"),
timetableIcon: require("@/assets/icon-timetable.svg"),
dolarIcon: require("@/assets/icon-dolar.svg"),
trainIcon: require('@/assets/icon-train.svg'),
timetableIcon: require('@/assets/icon-timetable.svg'),
dolarIcon: require('@/assets/icon-dolar.svg'),
filterCardOpen: false,
modalHidden: true,
STORAGE_KEY: "options_saved",
STORAGE_KEY: 'options_saved',
inputs: inputData,
regions: [
{
id: "eu",
value: "PL1",
id: 'eu',
value: 'PL1',
},
{
id: "ru",
value: "ENG",
id: 'ru',
value: 'ENG',
},
],
}),
@@ -82,36 +82,28 @@ export default defineComponent({
setup() {
const store = useStore();
const filterManager = reactive(new StationFilterManager());
const focusedStationName = "";
const focusedStationName = '';
const data: ComputedRef<StoreData> = computed(
() => store.getters[GETTERS.allData]
);
const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
const computedStations: ComputedRef<Station[]> = computed(() => {
return filterManager.getFilteredStationList(
store.getters[GETTERS.stationList]
);
return filterManager.getFilteredStationList(store.getters[GETTERS.stationList]);
});
const getStatusClass = computed(() => {
if (data.value.dataConnectionStatus == DataStatus.Loading)
return "loading";
if (data.value.dataConnectionStatus == DataStatus.Error) return "error";
return "success";
if (data.value.dataConnectionStatus == DataStatus.Loading) return 'loading';
if (data.value.dataConnectionStatus == DataStatus.Error) return 'error';
return 'success';
});
const timetableDataStatusClass = computed(() => {
if (data.value.timetableDataStatus == DataStatus.Loading)
return "loading";
if (data.value.timetableDataStatus == DataStatus.Error) return "error";
return "success";
if (data.value.timetableDataStatus == DataStatus.Loading) return 'loading';
if (data.value.timetableDataStatus == DataStatus.Error) return 'error';
return 'success';
});
const focusedStationInfo = computed(() =>
computedStations.value.find(
(station) => station.stationName === focusedStationName
)
computedStations.value.find((station) => station.stationName === focusedStationName)
);
return {
@@ -126,11 +118,15 @@ export default defineComponent({
},
mounted() {
if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
this.filterManager.checkFilters();
this.inputs.options.forEach((option) => {
const value = StorageManager.getBooleanValue(option.name);
this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
option.value = value;
});
this.inputs.sliders.forEach((slider) => {
const value = StorageManager.getNumericValue(slider.name);
this.changeFilterValue({ name: slider.name, value });
@@ -139,7 +135,7 @@ export default defineComponent({
},
methods: {
toggleCardsState(name: string): void {
if (name == "filter") {
if (name == 'filter') {
this.filterCardOpen = !this.filterCardOpen;
}
},
@@ -159,15 +155,15 @@ export default defineComponent({
this.filterCardOpen = false;
},
setFocusedStation(name: string) {
this.focusedStationName = this.focusedStationName == name ? "" : name;
this.focusedStationName = this.focusedStationName == name ? '' : name;
},
},
});
</script>
<style lang="scss" scoped>
@import "../styles/variables.scss";
@import "../styles/responsive.scss";
@import '../styles/variables.scss';
@import '../styles/responsive.scss';
@keyframes blinkAnim {
0%,