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

Zmiana wyglądu listy pociągów

Browse Source
This commit is contained in:
Spythere
2022-01-27 15:01:25 +01:00
parent 76ab722974
commit 2489e680cf
9 changed files with 201 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainTable.vue
+29 -101
View File
@@ -1,9 +1,7 @@
<template>
<div class="train-table">
<train-timetable-card test="test" />
<transition name="train-list-anim" mode="out-in">
<div :key="Number(timetableLoaded) + currentPage">
<transition name="anim" mode="out-in">
<div :key="timetableLoaded">
<div class="traffic-warning" v-if="distanceLimitExceeded">
{{ $t('trains.distance-exceeded') }}
</div>
@@ -15,79 +13,30 @@
<div class="table-info loading" v-if="trains.length == 0 && !timetableLoaded">
{{ $t('trains.loading') }}
</div>
<!--
:ref="(el) => registerReference(el, train.timetableData?.timetableId)"
-->
<ul class="train-list">
<li
class="train-row"
v-for="train in currentTrains"
:key="train.trainNo + train.driverId"
tabindex="0"
@click="showTrainTimetable(train.timetableData?.timetableId)"
@keydown.enter="showTrainTimetable(train.timetableData?.timetableId)"
@click="showTrainTimetable(train)"
@keydown.enter="showTrainTimetable(train)"
>
<TrainInfo :train="train" />
<!-- <TrainSchedule
v-if="train.timetableData?.timetableId == chosenSchedule"
:followingStops="train.timetableData?.followingStops"
/> -->
<TrainInfo :train="train" :simpleView="true" />
</li>
</ul>
</div>
</transition>
<!-- <transition name="train-list-anim">
<div class="paginator" v-if="timetableLoaded && currentTrains.length > 0">
<span
class="paginator_item"
:tabindex="currentPage == 0 ? -1 : 0"
:class="{ disabled: currentPage == 0 }"
@click="changePageTo(0)"
@keydown.enter="changePageTo(0)"
>
1&lt;
</span>
<span
class="paginator_item"
:tabindex="currentPage == 0 ? -1 : 0"
:class="{ disabled: currentPage == 0 }"
@click="changePageTo(currentPage - 1)"
@keydown.enter="changePageTo(currentPage - 1)"
>
&lt;
</span>
<span class="paginator_item page-number">
{{ currentPage + 1 }}
</span>
<span
class="paginator_item"
:tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
:class="{ disabled: currentPage == paginatorPageCount - 1 }"
@click="changePageTo(currentPage + 1)"
@keydown.enter="changePageTo(currentPage + 1)"
>
&gt;
</span>
<span
class="paginator_item"
:tabindex="currentPage == paginatorPageCount - 1 ? -1 : 0"
:class="{ disabled: currentPage == paginatorPageCount - 1 }"
@click="changePageTo(paginatorPageCount - 1)"
@keydown.enter="changePageTo(paginatorPageCount - 1)"
>
&gt;{{ paginatorPageCount }}
</span>
</div>
</transition> -->
<span v-if="chosenTrain">
<train-timetable-card :train="chosenTrain" @close="closeTimetableCard" ref="card" />
</span>
</div>
</template>
<script lang="ts">
import { computed, ComputedRef, defineComponent, inject, Ref, ref, watch } from '@vue/runtime-core';
import { Component, computed, ComputedRef, defineComponent, inject, Ref, ref, watch } from '@vue/runtime-core';
import { useStore } from '@/store';
import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
@@ -124,6 +73,8 @@ export default defineComponent({
},
defaultVehicleIcons: defaultVehicleIconsJSON,
chosenTrain: null as Train | null,
}),
setup(props) {
@@ -134,37 +85,25 @@ export default defineComponent({
const searchedTrain = inject('searchedTrain') as Ref<string>;
const searchedDriver = inject('searchedDriver') as Ref<string>;
const chosenSchedule = ref(0);
// PAGINATION
const PAGE_CAPACITY = 5;
const currentPage = ref(0);
const paginatorPageCount = computed(() => Math.ceil(props.trains.length / PAGE_CAPACITY));
const currentTrains = computed(() => {
return props.trains;
//.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY);
});
watch([searchedTrain, searchedDriver], () => {
currentPage.value = 0;
});
// watch([searchedTrain, searchedDriver], () => {
// currentPage.value = 0;
// });
watch(paginatorPageCount, (value) => {
if (currentPage.value >= value)
currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
});
// watch(paginatorPageCount, (value) => {
// if (currentPage.value >= value)
// currentPage.value = paginatorPageCount.value - 1 < 0 ? 0 : paginatorPageCount.value - 1;
// });
return {
searchedTrain,
searchedDriver,
chosenSchedule,
currentTrains,
paginatorPageCount,
currentPage,
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
@@ -200,20 +139,18 @@ export default defineComponent({
}, 10);
},
showTrainTimetable(timetableId: number | undefined) {
if(!timetableId) return;
showTrainTimetable(train: Train) {
this.chosenTrain = train;
console.log("Gituwa", timetableId);
// if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
// if (!timetableId) return;
// this.searchedTrain =
// this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
// this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
this.$nextTick(() => {
const cardRef = this.$refs.card;
(cardRef as any).$refs['card-inner'].focus();
});
},
changePageTo(index: number) {
this.currentPage = index < 0 ? 0 : index >= this.paginatorPageCount ? this.paginatorPageCount - 1 : index;
closeTimetableCard() {
this.chosenTrain = null;
},
},
});
@@ -222,15 +159,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.unfold-timetable-anim {
&-leave-active,
&-enter-active {
transition: all 150ms ease-out;
overflow: hidden;
}
}
.train-list-anim {
.anim {
&-enter-from,
&-leave-to {
opacity: 0;
@@ -279,7 +208,6 @@ img.train-image {
}
&-row {
padding: 1em;
margin-bottom: 1em;
background-color: var(--clr-secondary);