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

Fix routingu widoków i filtrowania scenerii

Browse Source
This commit is contained in:
Spythere
2022-06-30 01:55:56 +02:00
parent 1a255e933c
commit b1f80104f0
13 changed files with 144 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchers.vue
+16 -14
View File
@@ -96,7 +96,7 @@
</template>
<script lang="ts">
import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref } from 'vue';
import { computed, defineComponent, JournalFilter, JournalSearcher, provide, reactive, Ref, ref, watch } from 'vue';
import axios from 'axios';
import SearchBox from '@/components/Global/SearchBox.vue';
@@ -111,6 +111,7 @@ import { URLs } from '@/scripts/utils/apiURLs';
import { useStore } from '@/store/store';
import { DispatcherStatsAPIData } from '@/scripts/interfaces/api/DispatcherStatsAPIData';
import Loading from '../Global/Loading.vue';
import { useRoute, useRouter } from 'vue-router';
const PROD_MODE = process.env.VUE_APP_JORUNAL_DISPATCHERS_DEV != '1' || process.env.NODE_ENV === 'production';
@@ -165,7 +166,11 @@ export default defineComponent({
statsCardOpen: false,
}),
setup() {
setup(props) {
watch(props, (val) => {
console.log(val.dispatcherName);
});
const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> = ref({
status: DataStatus.Loading,
error: null,
@@ -216,23 +221,20 @@ export default defineComponent({
},
},
mounted() {
const query = this.$route.query;
if (query.sceneryName || query.dispatcherName) {
this.searchersValues[1].value = query.sceneryName?.toString() || '';
this.searchersValues[0].value = query.dispatcherName?.toString() || '';
activated() {
if (this.sceneryName || this.dispatcherName) {
this.searchersValues[1].value = this.sceneryName?.toString() || '';
this.searchersValues[0].value = this.dispatcherName?.toString() || '';
this.search();
return;
}
this.fetchHistoryData();
window.addEventListener('scroll', this.handleScroll);
},
activated() {
window.addEventListener('scroll', this.handleScroll);
mounted() {
if (!this.sceneryName && !this.dispatcherName) {
this.search();
}
},
deactivated() {
src/components/JournalView/JournalTimetables.vue
+9 -6
View File
@@ -124,7 +124,7 @@
<b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
<router-link
class="dispatcher-link"
:to="`/journal?view=dispatchers&dispatcherName=${item.authorName}`"
:to="`/journal/dispatchers?dispatcherName=${item.authorName}`"
>{{ item.authorName }}</router-link
>
</div>
@@ -247,14 +247,14 @@ export default defineComponent({
};
},
mounted() {
this.fetchHistoryData();
},
activated() {
window.addEventListener('scroll', this.handleScroll);
},
mounted() {
this.search();
},
deactivated() {
window.removeEventListener('scroll', this.handleScroll);
},
@@ -263,7 +263,10 @@ export default defineComponent({
navigateToTimetable(historyItem: TimetableHistory) {
if (historyItem.terminated) return;
this.navigateToTrain(historyItem.trainNo, historyItem.driverName);
this.navigateTo('/trains', {
trainNo: historyItem.trainNo,
driverName: historyItem.driverName,
});
},
closeCard() {
src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+9 -2
View File
@@ -5,7 +5,12 @@
{{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
</span>
<span class="dispatcher_name">{{ station.onlineInfo.dispatcherName }}</span>
<router-link
class="dispatcher_name"
:to="`/journal/dispatchers?dispatcherName=${station.onlineInfo.dispatcherName}`"
>
{{ station.onlineInfo.dispatcherName }}
</router-link>
<span class="dispatcher_likes text--primary">
<img :src="icons.like" alt="icon-like" />
@@ -34,9 +39,10 @@ import { defineComponent } from 'vue';
import styleMixin from '@/mixins/styleMixin';
import Station from '@/scripts/interfaces/Station';
import dateMixin from '@/mixins/dateMixin';
import routerMixin from '@/mixins/routerMixin';
export default defineComponent({
mixins: [styleMixin, dateMixin],
mixins: [styleMixin, dateMixin, routerMixin],
props: {
station: {
type: Object as () => Station,
@@ -84,6 +90,7 @@ export default defineComponent({
&_name {
margin-right: 0.4em;
cursor: pointer;
}
&_likes {
src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+2 -2
View File
@@ -13,8 +13,8 @@
:class="train.stopStatus"
:key="train.trainNo + i"
tabindex="0"
@click="() => navigateToTrain(train.trainNo, train.driverName)"
@keydown.enter="navigateToTrain(train.trainNo, train.driverName)"
@click="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
@keydown.enter="navigateTo('/trains', { trainNo: train.trainNo, driverName: train.driverName })"
>
<span class="user_train">{{ train.trainNo }}</span>
<span class="user_name">{{ train.driverName }}</span>
src/components/SceneryView/SceneryTimetable.vue
+7 -2
View File
@@ -44,8 +44,13 @@
v-for="(scheduledTrain, i) in computedScheduledTrains"
:key="i + 1"
tabindex="0"
@click="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
@keydown.enter="navigateToTrain(scheduledTrain.trainNo, scheduledTrain.driverName)"
@click="navigateTo('/trains', { trainNo: scheduledTrain.trainNo, driverName: scheduledTrain.driverName })"
@keydown.enter="
navigateTo('/trains', {
trainNo: scheduledTrain.trainNo,
driverName: scheduledTrain.driverName,
})
"
>
<span class="timetable-general">
<span class="general-info">
src/components/TrainsView/TrainInfo.vue
+22 -8
View File
@@ -4,13 +4,23 @@
<span>
<div>
<span>
<!-- <router-link
v-if="train.timetableData"
:to="`/journal/timetables?timetableId=${train.timetableData.timetableId}`"
style="color: #ddd; margin-right: 0.3em"
>
#{{ train.timetableData.timetableId }}
</router-link> -->
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
<span class="timetable_warnings">
<span class="warning twr" v-if="train.timetableData?.TWR">TWR</span>
<span class="warning skr" v-if="train.timetableData?.SKR">SKR</span>
</span>
<strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
<strong>{{ train.trainNo }}</strong>
<span>&nbsp;| {{ train.driverName }}</span>
<span>&nbsp;| {{ train.driverName }}&nbsp;</span>
</span>
<img
@@ -23,8 +33,8 @@
/>
</div>
<div class="timetable_route">
<strong v-if="train.timetableData">{{ train.timetableData.route.replace('|', ' - ') }}</strong>
<div class="timetable_route" v-if="train.timetableData">
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
<img
v-if="getSceneriesWithComments(train.timetableData).length > 0"
class="image-warning"
@@ -61,9 +71,7 @@
</span>
</div>
<div v-if="!train.online" style="color: salmon">
Offline - {{ lastSeenMessage(train.lastSeen) }}
</div>
<div v-if="!train.online" style="color: salmon">Offline - {{ lastSeenMessage(train.lastSeen) }}</div>
<div class="driver_position text--grayed" style="margin-top: 0.25em">
<span v-if="train.currentStationHash">
@@ -169,6 +177,11 @@ export default defineComponent({
text-transform: capitalize;
}
.timetable-id {
margin-right: 0.3em;
color: #d2d2d2;
}
.timetable_stops {
font-size: 0.75em;
}
@@ -184,8 +197,9 @@ export default defineComponent({
color: black;
.warning {
padding: 0.1em 0.5em;
margin-right: 0.2em;
padding: 0.1em 0.3em;
margin-right: 0.3em;
border-radius: 1em;
font-weight: bold;
src/components/TrainsView/TrainTable.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="train-table" @keydown.esc="closeTimetable" v-click-outside="closeTimetable">
<div class="train-table" @keydown.esc="closeTimetable">
<button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
<img :src="icons.arrowAsc" alt="return arrow" />
</button>
src/mixins/routerMixin.ts
+11 -10
View File
@@ -1,12 +1,13 @@
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
navigateToTrain(trainNo: number, driverName: string) {
this.$router.push({
name: 'TrainsView',
query: { trainNo, driverName },
});
}
}
})
methods: {
navigateTo(path: string, query?: {}) {
this.$router.push({
path,
query,
});
},
},
});
src/router/index.ts
+44 -25
View File
@@ -1,46 +1,65 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import JournalDispatchersVue from '@/components/JournalView/JournalDispatchers.vue';
import JournalTimetablesVue from '@/components/JournalView/JournalTimetables.vue';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'StationsView',
component: () => import("@/views/StationsView.vue")
component: () => import('@/views/StationsView.vue'),
},
{
path: "/trains",
name: "TrainsView",
component: () => import("@/views/TrainsView.vue"),
props: route => ({ train: route.query.train, driver: route.query.driver })
path: '/trains',
name: 'TrainsView',
component: () => import('@/views/TrainsView.vue'),
props: (route) => ({ train: route.query.train, driver: route.query.driver }),
},
{
path: "/scenery",
name: "SceneryView",
component: () => import("@/views/SceneryView.vue"),
props: true
path: '/scenery',
name: 'SceneryView',
component: () => import('@/views/SceneryView.vue'),
props: true,
},
{
path: "/journal",
name: "JournalView",
component: () => import("@/views/JournalView.vue")
path: '/journal',
name: 'JournalView',
component: () => import('@/views/JournalView.vue'),
children: [
{
path: '',
redirect: '/journal/timetables',
component: JournalTimetablesVue,
},
{
path: 'dispatchers',
component: JournalDispatchersVue,
props: (route) => ({ sceneryName: route.query.sceneryName, dispatcherName: route.query.dispatcherName }),
},
{
path: 'timetables',
component: JournalTimetablesVue,
props: (route) => ({
trainNo: route.query.trainNo,
driverName: route.query.driverName,
timetableId: route.query.timetableId,
}),
},
],
},
{
path: '/:catchAll(.*)',
redirect: "/"
}
]
redirect: '/',
},
];
const router = createRouter({
scrollBehavior(to, from) {
if (to.name == "SceneryView" && from.name)
return { el: `.app_main` };
if (from.name == "SceneryView" && to.name == "StationsView")
return { el: `.last-selected`, top: 20 }
scrollBehavior(to, from) {
if (to.name == 'SceneryView' && from.name) return { el: `.app_main` };
if (from.name == 'SceneryView' && to.name == 'StationsView') return { el: `.last-selected`, top: 20 };
},
history: createWebHistory(),
routes,
})
});
export default router
export default router;
src/scripts/managers/stationFilterManager.ts
+8 -1
View File
@@ -246,8 +246,15 @@ export default class StationFilterManager {
});
}
getFilteredStationList(stationList: Station[]): Station[] {
getFilteredStationList(stationList: Station[], region: string): Station[] {
return stationList
.map((station) => {
if (station.onlineInfo && station.onlineInfo.region != region) {
delete station.onlineInfo;
}
return station;
})
.filter((station) => filterStations(station, this.filters))
.sort((a, b) => sortStations(a, b, this.sorter));
}
src/views/JournalView.vue
+7 -18
View File
@@ -1,33 +1,22 @@
<template>
<section class="journal-view">
<div class="journal-type-options">
<router-link
class="router-link"
to="/journal?view=timetables"
:class="{ active: activeJournalComponent == 'journalTimetables' }"
>
<router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
{{ $t('journal.section-timetables') }}
</router-link>
&nbsp;&bull;&nbsp;
<router-link
class="router-link"
to="/journal?view=dispatchers"
:class="{ active: activeJournalComponent == 'journalDispatchers' }"
>
<router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
{{ $t('journal.section-dispatchers') }}
</router-link>
</div>
<div class="journal-section">
<keep-alive>
<component :is="activeJournalComponent"></component>
</keep-alive>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.path" />
</keep-alive>
</router-view>
</div>
<!-- <JournalTimetables v-if="journalTypeChosen == 'timetables'" />
<JournalDispatchers
v-else-if="journalTypeChosen == 'dispatchers'"
:sceneryName="$route.query.sceneryName?.toString()"
/> -->
</section>
</template>
src/views/SceneryView.vue
+5 -10
View File
@@ -22,8 +22,7 @@
v-if="!timetableOnly && store.region.id == 'eu' && stationInfo"
class="history-btn btn btn--image"
@click="
navigateTo('/journal', {
view: 'dispatchers',
navigateTo('/journal/dispatchers', {
sceneryName: stationInfo?.name,
})
"
@@ -46,14 +45,17 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
import ActionButton from '@/components/Global/ActionButton.vue';
import { computed, defineComponent, reactive } from '@vue/runtime-core';
import { computed, defineComponent } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { useStore } from '@/store/store';
import routerMixin from '@/mixins/routerMixin';
export default defineComponent({
components: { SceneryInfo, SceneryTimetable, ActionButton, SceneryHeader },
mixins: [routerMixin],
data: () => ({
icons: {
history: require('@/assets/icon-history.svg'),
@@ -92,13 +94,6 @@ export default defineComponent({
setCardViewMode(mode: string) {
this.viewMode = mode;
},
navigateTo(path: string, query?: {}) {
this.$router.push({
path,
query,
});
},
},
});
</script>
src/views/StationsView.vue
+3 -16
View File
@@ -53,17 +53,6 @@ export default defineComponent({
modalHidden: true,
STORAGE_KEY: 'options_saved',
inputs: inputData,
regions: [
{
id: 'eu',
value: 'PL1',
},
{
id: 'ru',
value: 'ENG',
},
],
}),
setup() {
@@ -71,10 +60,9 @@ export default defineComponent({
const filterManager = reactive(new StationFilterManager());
const focusedStationName = '';
const computedStations: ComputedRef<Station[]> = computed(() =>
filterManager
.getFilteredStationList(store.stationList)
.filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
const computedStations: ComputedRef<Station[]> = computed(
() => filterManager.getFilteredStationList(store.stationList, store.region.id)
// .filter((station) => !station.onlineInfo || station.onlineInfo.region == store.region.id)
);
return {
@@ -178,5 +166,4 @@ export default defineComponent({
margin-bottom: 0.5em;
}
</style>