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

chore: added saving the routes visibility state in localStorage

Browse Source
This commit is contained in:
Spythere
2025-03-23 16:27:56 +01:00
parent b56e114ef9
commit 829059d35b
1 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryInfo/SceneryInfoRoutes.vue
+33 -10
View File
@@ -3,12 +3,12 @@
<div class="routes one-way" v-if="oneWayRoutes.length > 0"> <div class="routes one-way" v-if="oneWayRoutes.length > 0">
<button <button
class="routes-btn" class="routes-btn"
@click="showInternalSingle = !showInternalSingle" @click="toggleRoutesVisibility('single')"
data-tooltip-type="BaseTooltip" data-tooltip-type="BaseTooltip"
:data-tooltip-content="`${showInternalSingle ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`" :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
> >
<b>{{ $t('scenery.one-way-routes') }}</b> <b>{{ $t('scenery.one-way-routes') }}</b>
<i class="fa-solid" :class="`${showInternalSingle ? 'fa-eye' : 'fa-eye-slash'}`"></i> <i class="fa-solid" :class="`${showInternalSingleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
</button> </button>
<ul class="routes-list"> <ul class="routes-list">
@@ -30,12 +30,12 @@
<div class="routes two-way" v-if="twoWayRoutes.length > 0"> <div class="routes two-way" v-if="twoWayRoutes.length > 0">
<button <button
class="routes-btn" class="routes-btn"
@click="showInternalDouble = !showInternalDouble" @click="toggleRoutesVisibility('double')"
data-tooltip-type="BaseTooltip" data-tooltip-type="BaseTooltip"
:data-tooltip-content="`${showInternalDouble ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`" :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
> >
<b>{{ $t('scenery.two-way-routes') }}</b> <b>{{ $t('scenery.two-way-routes') }}</b>
<i class="fa-solid" :class="`${showInternalDouble ? 'fa-eye' : 'fa-eye-slash'}`"></i> <i class="fa-solid" :class="`${showInternalDoubleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
</button> </button>
<ul class="routes-list"> <ul class="routes-list">
@@ -57,6 +57,7 @@
<script lang="ts"> <script lang="ts">
import { PropType, defineComponent } from 'vue'; import { PropType, defineComponent } from 'vue';
import { Station } from '../../../typings/common'; import { Station } from '../../../typings/common';
import StorageManager from '../../../managers/storageManager';
export default defineComponent({ export default defineComponent({
props: { props: {
@@ -68,16 +69,38 @@ export default defineComponent({
data() { data() {
return { return {
showInternalSingle: false, showInternalSingleRoutes: false,
showInternalDouble: false showInternalDoubleRoutes: false
}; };
}, },
mounted() {
if (StorageManager.getBooleanValue('showInternalDoubleRoutes')) {
this.showInternalDoubleRoutes = StorageManager.getBooleanValue('showInternalDoubleRoutes');
}
if (StorageManager.getBooleanValue('showInternalSingleRoutes')) {
this.showInternalSingleRoutes = StorageManager.getBooleanValue('showInternalSingleRoutes');
}
},
methods: {
toggleRoutesVisibility(type: 'single' | 'double') {
if (type == 'double') {
this.showInternalDoubleRoutes = !this.showInternalDoubleRoutes;
StorageManager.setBooleanValue('showInternalDoubleRoutes', this.showInternalDoubleRoutes);
} else {
this.showInternalSingleRoutes = !this.showInternalSingleRoutes;
StorageManager.setBooleanValue('showInternalSingleRoutes', this.showInternalSingleRoutes);
}
}
},
computed: { computed: {
oneWayRoutes() { oneWayRoutes() {
return ( return (
this.station.generalInfo?.routes.single this.station.generalInfo?.routes.single
.filter((r) => !r.isInternal || r.isInternal == this.showInternalSingle) .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
.sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? [] .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
); );
}, },
@@ -85,7 +108,7 @@ export default defineComponent({
twoWayRoutes() { twoWayRoutes() {
return ( return (
this.station.generalInfo?.routes.double this.station.generalInfo?.routes.double
.filter((r) => !r.isInternal || r.isInternal == this.showInternalDouble) .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
.sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? [] .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
); );
} }