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

Dodano animację aktywnych RJ; poprawki

Browse Source
This commit is contained in:
Spythere
2022-10-11 22:16:46 +02:00
parent ceffd8e675
commit fcb8357489
2 changed files with 114 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetable.vue
+112 -102
View File
@@ -29,8 +29,6 @@
</div> </div>
<div class="timetable-list"> <div class="timetable-list">
<!-- <transition name="scenery-timetable-list-anim" mode="out-in"> -->
<!-- <div :key="store.dataStatuses.trains + selectedCheckpoint" class="scenery-timetable-list"> -->
<div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0"> <div style="padding-bottom: 5em" v-if="store.dataStatuses.trains == 0 && computedScheduledTrains.length == 0">
<Loading /> <Loading />
</div> </div>
@@ -43,115 +41,116 @@
{{ $t('scenery.no-timetables') }} {{ $t('scenery.no-timetables') }}
</span> </span>
<div <transition-group name="timetables-anim">
class="timetable-item" <div
v-for="(scheduledTrain, i) in computedScheduledTrains" class="timetable-item"
:key="i + 1" v-for="(scheduledTrain, i) in computedScheduledTrains"
tabindex="0" :key="scheduledTrain.trainId"
@click.prevent.stop="selectModalTrain(scheduledTrain.trainId)" tabindex="0"
@keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)" @click.prevent.stop="selectModalTrain(scheduledTrain.trainId)"
> @keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId)"
<span class="timetable-general"> >
<span class="general-info"> <span class="timetable-general">
<span class="info-number"> <span class="general-info">
<strong>{{ scheduledTrain.category }}</strong> <span class="info-number">
{{ scheduledTrain.trainNo }} <strong>{{ scheduledTrain.category }}</strong>
{{ scheduledTrain.trainNo }}
<span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments"> <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
<img :src="getIcon('warning')" /> <img :src="getIcon('warning')" />
<span class="content" v-html="scheduledTrain.stopInfo.comments"> </span> <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
</span>
</span>
&nbsp;|&nbsp;
<span>
{{ scheduledTrain.driverName }}
</span>
<div class="info-route">
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
</div>
<ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
</span>
</span>
<span class="timetable-schedule">
<span class="schedule-arrival">
<span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
{{ $t('timetables.begins') }}
</span>
<span class="arrival-time" v-else>
<div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
<span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
</div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
}}</s>
</div>
<span>
{{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
</span> </span>
</span>
&nbsp;|&nbsp;
<span>
{{ scheduledTrain.driverName }}
</span>
<div class="info-route">
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
</div> </div>
<ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
</span> </span>
</span> </span>
<span class="schedule-stop"> <span class="timetable-schedule">
<span class="stop-time"> <span class="schedule-arrival">
<span v-if="scheduledTrain.stopInfo.stopTime"> <span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
{{ scheduledTrain.stopInfo.stopTime }} {{ $t('timetables.begins') }}
{{ scheduledTrain.stopInfo.stopType || 'pt' }}
</span> </span>
<span v-else>&nbsp;</span> <span class="arrival-time" v-else>
</span> <div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
<span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
<span class="arrow"></span>
<span class="stop-line">
<span>
{{ scheduledTrain.arrivingLine }}
</span>
<span ></span>
<span>
{{ scheduledTrain.departureLine }}
</span>
</span>
</span>
<span class="schedule-departure">
<span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
{{ $t('timetables.terminates') }}
</span>
<span class="departure-time" v-else>
<div v-if="scheduledTrain.stopInfo.departureDelay == 0">
<span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
</div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToString(scheduledTrain.stopInfo.departureTimestamp)
}}</s>
</div> </div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
}}</s>
</div>
<span> <span>
{{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }} {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : '' ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
}}{{ scheduledTrain.stopInfo.departureDelay }}) }}{{ scheduledTrain.stopInfo.arrivalDelay }})
</span>
</div>
</span>
</span>
<span class="schedule-stop">
<span class="stop-time">
<span v-if="scheduledTrain.stopInfo.stopTime">
{{ scheduledTrain.stopInfo.stopTime }}
{{ scheduledTrain.stopInfo.stopType || 'pt' }}
</span> </span>
</div>
<span v-else>&nbsp;</span>
</span>
<span class="arrow"></span>
<span class="stop-line">
<span>
{{ scheduledTrain.arrivingLine }}
</span>
<span></span>
<span>
{{ scheduledTrain.departureLine }}
</span>
</span>
</span>
<span class="schedule-departure">
<span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
{{ $t('timetables.terminates') }}
</span>
<span class="departure-time" v-else>
<div v-if="scheduledTrain.stopInfo.departureDelay == 0">
<span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
</div>
<div v-else>
<div>
<s style="margin-right: 0.2em" class="text--grayed">{{
timestampToString(scheduledTrain.stopInfo.departureTimestamp)
}}</s>
</div>
<span>
{{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
}}{{ scheduledTrain.stopInfo.departureDelay }})
</span>
</div>
</span>
</span> </span>
</span> </span>
</span> </div>
</div> </transition-group>
</div> </div>
<!-- </transition> -->
</section> </section>
</template> </template>
@@ -169,6 +168,7 @@ import { useStore } from '../../store/store';
import imageMixin from '../../mixins/imageMixin'; import imageMixin from '../../mixins/imageMixin';
import modalTrainMixin from '../../mixins/modalTrainMixin'; import modalTrainMixin from '../../mixins/modalTrainMixin';
import ScheduledTrainStatus from './ScheduledTrainStatus.vue'; import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
import ScheduledTrain from '../../scripts/interfaces/ScheduledTrain';
export default defineComponent({ export default defineComponent({
name: 'SceneryTimetable', name: 'SceneryTimetable',
@@ -273,11 +273,21 @@ export default defineComponent({
@import '../../styles/responsive.scss'; @import '../../styles/responsive.scss';
@import '../../styles/variables.scss'; @import '../../styles/variables.scss';
// .scenery-timetable { .timetables-anim-move,
// height: 85vh; .timetables-anim-enter-active,
// max-height: 900px; .timetables-anim-leave-active {
// min-height: 450px; transition: all 250ms ease;
// } }
.timetables-anim-enter-from,
.timetables-anim-leave-to {
opacity: 0;
transform: translateY(30px);
}
.timetables-anim-leave-active {
position: absolute;
}
.scenery-timetable { .scenery-timetable {
height: 100%; height: 100%;
src/scripts/utils/storeUtils.ts
+2 -2
View File
@@ -136,8 +136,8 @@ export function getScheduledTrain(train: Train, trainStopIndex: number, stationN
} }
} }
let departureLine: string | null = trainStop.departureLine; let departureLine: string | null = null;
let arrivingLine: string | null = trainStop.arrivalLine; let arrivingLine: string | null = null;
for (let i = trainStopIndex; i < followingStops.length; i++) { for (let i = trainStopIndex; i < followingStops.length; i++) {
const currentStop = followingStops[i]; const currentStop = followingStops[i];