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

Zmiany w designie dziennika rozkładów jazdy

Browse Source
This commit is contained in:
Spythere
2022-09-01 01:56:16 +02:00
parent 951afcedeb
commit 76d0ff88f1
3 changed files with 236 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalTimetables.vue
+78 -52
View File
@@ -46,6 +46,25 @@
<span class="text--grayed">#{{ item.timetableId }}</span> <span class="text--grayed">#{{ item.timetableId }}</span>
</span> </span>
&bull;
<b
class="journal_item-status"
:class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled,
active: !item.terminated,
}"
>
{{
!item.terminated
? $t('journal.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('journal.timetable-fulfilled')
: $t('journal.timetable-abandoned')
}}
</b>
<div> <div>
<b>{{ item.route.replace('|', ' - ') }}</b> <b>{{ item.route.replace('|', ' - ') }}</b>
</div> </div>
@@ -58,49 +77,30 @@
:key="scenery.name" :key="scenery.name"
:class="{ confirmed: scenery.confirmed }" :class="{ confirmed: scenery.confirmed }"
> >
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }} <span v-if="i > 0"> &gt;</span>
</span> {{ scenery.name }}
</div>
<div class="schedule-dates"> <!-- Data odjazdu ze stacji początkowej -->
<!-- Data odjazdu ze stacji początkowej --> <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
<b>{{ item.route.split('|')[0] }}:</b>
<s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
{{ localeTime(item.beginDate, $i18n.locale) }}
</s>
<span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
<!-- Data przyjazdu na stację końcową / porzucenia --> <!-- Data porzucenia rozkładu jazdy -->
<b v-if="(item.fulfilled && item.terminated) || !item.terminated"> <span
{{ item.route.split('|').slice(-1)[0] }}: v-if="
</b> !item.fulfilled &&
<i v-else>{{ $t('journal.timetable-abandoned') }} </i> item.terminated &&
scenery.confirmed &&
!getSceneryList(item)[i + 1]?.confirmed
"
style="color: salmon"
v-html="scenery.abandonedDateHTML"
>
</span>
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed"> <!-- Data przyjazdu do stacji końcowej -->
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }} <span v-if="i == getSceneryList(item).length - 1" v-html="scenery.endDateHTML"> </span>
</s>
<span
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
</span> </span>
</div> </div>
</span> </span>
<b
class="journal_item-status"
:class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled,
active: !item.terminated,
}"
>
{{
!item.terminated
? $t('journal.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('journal.timetable-fulfilled')
: $t('journal.timetable-abandoned')
}}
</b>
</div> </div>
<div style="margin-top: 1em"> <div style="margin-top: 1em">
@@ -120,17 +120,21 @@
</div> </div>
<div style="margin-top: 1em"> <div style="margin-top: 1em">
<div> <span>
<b>{{ $t('journal.route-length') }}</b> <b>{{ $t('journal.route-length') }}</b>
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }} {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
{{ item.routeDistance }} km {{ item.routeDistance }} km
</div> </span>
&bull;
<div> <span>
<b>{{ $t('journal.station-count') }}</b> <b>{{ $t('journal.station-count') }}</b>
{{ item.confirmedStopsCount }} / {{ item.confirmedStopsCount }} /
{{ item.allStopsCount }} {{ item.allStopsCount }}
</div> </span>
</div>
<div v-if="item.stockString">
<!-- {{ item.stockString }} -->
</div> </div>
</li> </li>
</transition-group> </transition-group>
@@ -266,10 +270,35 @@ export default defineComponent({
this.statsCardOpen = false; this.statsCardOpen = false;
}, },
getSceneryList(historyItem: TimetableHistory) { getSceneryList(item: TimetableHistory) {
return historyItem.sceneriesString return item.sceneriesString.split('%').map((name, i) => {
.split('%') const beginDateHTML =
.map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount })); ' (o. ' +
(item.beginDate != item.scheduledBeginDate
? `<s class='text--grayed'>${this.localeTime(item.beginDate, this.$i18n.locale)}</s> `
: '') +
`<span>${this.localeTime(item.scheduledBeginDate, this.$i18n.locale)}</span>)`;
const endDateHTML =
' (p. ' +
(item.endDate != item.scheduledEndDate && item.fulfilled
? `<s class='text--grayed'>${this.localeTime(
item.fulfilled ? item.endDate : item.scheduledEndDate,
this.$i18n.locale
)}</s> `
: '') +
`<span>${this.localeTime(
item.fulfilled || (item.terminated && !item.fulfilled) ? item.scheduledEndDate : item.endDate,
this.$i18n.locale
)}</span>)`;
const abandonedDateHTML = ` (porz. ${this.localeTime(
item.fulfilled ? item.scheduledEndDate : item.endDate,
this.$i18n.locale
)})`;
return { name, confirmed: i < item.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
});
}, },
handleScroll() { handleScroll() {
@@ -408,12 +437,9 @@ export default defineComponent({
padding: 0.2em 0; padding: 0.2em 0;
.scenery-list { .scenery-list {
span { color: #adadad;
color: #adadad; span.confirmed {
color: #a3eba3;
&.confirmed {
color: #a3eba3;
}
} }
} }
} }
src/components/SceneryView/SceneryTimetablesHistory.vue
+118 -118
View File
@@ -1,118 +1,118 @@
<template> <template>
<section class="scenery-timetables-history scenery-section"> <section class="scenery-timetables-history scenery-section">
<Loading v-if="dataStatus != 2" /> <Loading v-if="dataStatus != 2" />
<div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div> <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
<ul class="history-list" v-else> <ul class="history-list" v-else>
<li class="list-item" v-for="historyItem in sceneryHistoryList"> <li class="list-item" v-for="historyItem in sceneryHistoryList">
<div> <div>
<b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b> <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
{{ localeTime(historyItem.beginDate, $i18n.locale) }} {{ localeTime(historyItem.beginDate, $i18n.locale) }}
</div> </div>
<div> <div>
<router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`"> <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
<span class="text--grayed"> #{{ historyItem.timetableId }} </span> <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
<b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b> <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
<div>{{ historyItem.driverName }}</div> <div>{{ historyItem.driverName }}</div>
</router-link> </router-link>
</div> </div>
<div>{{ historyItem.route.replace('|', ' -> ') }}</div> <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
<!-- <div>{{ historyItem.routeDistance }} km</div> --> <!-- <div>{{ historyItem.routeDistance }} km</div> -->
<div> <div>
{{ $t('scenery.timetable-author-title') }}: {{ $t('scenery.timetable-author-title') }}:
<b v-if="historyItem.authorName">{{ historyItem.authorName }}</b> <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
<i v-else>{{ $t('scenery.timetable-author-unknown') }}</i> <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
</div> </div>
<!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> --> <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
</li> </li>
</ul> </ul>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import axios from 'axios'; import axios from 'axios';
import { defineComponent, PropType } from 'vue'; import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin'; import dateMixin from '../../mixins/dateMixin';
import { DataStatus } from '../../scripts/enums/DataStatus'; import { DataStatus } from '../../scripts/enums/DataStatus';
import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData'; import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
import Station from '../../scripts/interfaces/Station'; import Station from '../../scripts/interfaces/Station';
import { URLs } from '../../scripts/utils/apiURLs'; import { URLs } from '../../scripts/utils/apiURLs';
import Loading from '../Global/Loading.vue'; import Loading from '../Global/Loading.vue';
export default defineComponent({ export default defineComponent({
name: 'SceneryTimetablesHistory', name: 'SceneryTimetablesHistory',
mixins: [dateMixin], mixins: [dateMixin],
props: { props: {
station: { station: {
type: Object as PropType<Station>, type: Object as PropType<Station>,
required: true, required: true,
}, },
}, },
data() { data() {
return { return {
sceneryHistoryList: [] as TimetableHistory[], sceneryHistoryList: [] as TimetableHistory[],
dataStatus: DataStatus.Loading, dataStatus: DataStatus.Loading,
}; };
}, },
mounted() { mounted() {
this.fetchAPIData(); this.fetchAPIData();
}, },
methods: { methods: {
async fetchAPIData(countFrom = 0, countLimit = 15) { async fetchAPIData(countFrom = 0, countLimit = 15) {
try { try {
const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`; const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data; const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
this.sceneryHistoryList = historyAPIData.sceneryTimetables; this.sceneryHistoryList = historyAPIData.sceneryTimetables;
this.dataStatus = DataStatus.Loaded; this.dataStatus = DataStatus.Loaded;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}, },
}, },
components: { Loading }, components: { Loading },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
@import '../../styles/SceneryView/styles.scss'; @import '../../styles/SceneryView/styles.scss';
.list-warning { .list-warning {
padding: 1em 0.5em; padding: 1em 0.5em;
background-color: #444; background-color: #444;
font-size: 1.2em; font-size: 1.2em;
} }
.history-list { .history-list {
padding: 0 0.5em; padding: 0 0.5em;
} }
.list-item { .list-item {
display: grid; display: grid;
grid-template-columns: 1fr 2fr 2fr 1fr; grid-template-columns: 1fr 2fr 2fr 1fr;
gap: 1em; gap: 1em;
align-items: center; align-items: center;
background-color: #353535; background-color: #353535;
padding: 0.5em; padding: 0.5em;
margin: 0.5em 0; margin: 0.5em 0;
line-height: 1.5em; line-height: 1.5em;
} }
@include smallScreen { @include smallScreen {
.history-list { .history-list {
font-size: 1.1em; font-size: 1.1em;
} }
.list-item { .list-item {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
font-size: 1.05em; font-size: 1.05em;
} }
} }
</style> </style>
src/scripts/interfaces/api/TimetablesAPIData.ts
+40 -35
View File
@@ -1,35 +1,40 @@
export interface TimetableHistory { export interface TimetableHistory {
timetableId: number; timetableId: number;
trainNo: number; trainNo: number;
trainCategoryCode: string; trainCategoryCode: string;
driverId: number; driverId: number;
driverName: string; driverName: string;
route: string; route: string;
twr: number; twr: number;
skr: number; skr: number;
sceneriesString: string; sceneriesString: string;
routeDistance: number; routeDistance: number;
currentDistance: number; currentDistance: number;
confirmedStopsCount: number; confirmedStopsCount: number;
allStopsCount: number; allStopsCount: number;
beginDate: string; beginDate: string;
endDate: string; endDate: string;
scheduledBeginDate: string; scheduledBeginDate: string;
scheduledEndDate: string; scheduledEndDate: string;
terminated: boolean; terminated: boolean;
fulfilled: boolean; fulfilled: boolean;
authorName?: string; authorName?: string;
authorId?: number; authorId?: number;
}
stockString?: string;
export interface SceneryTimetableHistory { stockMass?: number;
sceneryTimetables: TimetableHistory[]; stockLength?: number;
totalCount: number; maxSpeed?: number;
sceneryName: string; }
}
export interface SceneryTimetableHistory {
sceneryTimetables: TimetableHistory[];
totalCount: number;
sceneryName: string;
}