Fix routingu widoków i filtrowania scenerii

This commit is contained in:
2022-06-30 01:55:56 +02:00
parent 1a255e933c
commit b1f80104f0
13 changed files with 144 additions and 115 deletions
@@ -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() {
@@ -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() {
@@ -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 {
@@ -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>
@@ -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">
+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;
+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>