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

Poprawki w infinite scrollu

Browse Source
This commit is contained in:
Spythere
2022-05-17 12:10:28 +02:00
parent 86b646e59e
commit 02eacf14a9
1 changed files with 99 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/JournalView.vue
+99 -84
View File
@@ -21,95 +21,98 @@
</div> </div>
<ul v-else> <ul v-else>
<li v-for="(item, i) in historyList" :key="item.timetableId" :style="`--delay: ${i * 50}ms`"> <transition-group name="history-list-anim">
<div class="history_item-top"> <li v-for="(item, i) in historyList" :key="item.timetableId">
<span> <div class="history_item-top">
<span @click="navigateToTrain(!item.terminated ? item.trainNo : null)" style="cursor: pointer"> <span>
<b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b> <span @click="navigateToTrain(!item.terminated ? item.trainNo : null)" style="cursor: pointer">
<b>{{ item.trainNo }}</b> <b class="text--primary">{{ item.trainCategoryCode }}&nbsp;</b>
| <span>{{ item.driverName }}</span> | <span class="text--grayed">#{{ item.timetableId }}</span> <b>{{ item.trainNo }}</b>
| <span>{{ item.driverName }}</span> |
<span class="text--grayed">#{{ item.timetableId }}</span>
</span>
<div>
<b>{{ item.route.replace('|', ' - ') }}</b>
</div>
<hr style="margin: 0.25em 0" />
<div class="scenery-list">
<span
v-for="(scenery, i) in getSceneryList(item)"
:key="scenery.name"
:class="{ confirmed: scenery.confirmed }"
>
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
</span>
</div>
<div class="schedule-dates">
<!-- Data odjazdu ze stacji początkowej -->
<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 -->
<b v-if="(item.fulfilled && item.terminated) || !item.terminated">
{{ item.route.split('|').slice(-1)[0] }}:
</b>
<i v-else>{{ $t('history.timetable-abandoned') }} </i>
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
</s>
<span
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
</span>
</div>
</span> </span>
<b
class="history_item-status"
:class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled,
active: !item.terminated,
}"
>
{{
!item.terminated
? $t('history.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('history.timetable-fulfilled')
: $t('history.timetable-abandoned')
}}
</b>
</div>
<div style="margin-top: 1em;">
<div>{{ $t('history.timetable-day') }} {{ localeDay(item.beginDate, $i18n.locale) }}</div>
<!-- Nick dyżurnego -->
<div v-if="item.authorName" class="text--grayed">
<b>{{ $t('history.dispatcher-name') }} {{ item.authorName }}</b>
</div>
</div>
<div style="margin-top: 1em;">
<div> <div>
<b>{{ item.route.replace('|', ' - ') }}</b> <b>{{ $t('history.route-length') }}</b>
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
{{ item.routeDistance }} km
</div> </div>
<hr style="margin: 0.25em 0" /> <div>
<b>{{ $t('history.station-count') }}</b>
<div class="scenery-list"> {{ item.confirmedStopsCount }} /
<span {{ item.allStopsCount }}
v-for="(scenery, i) in getSceneryList(item)"
:key="scenery.name"
:class="{ confirmed: scenery.confirmed }"
>
{{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
</span>
</div> </div>
<div class="schedule-dates">
<!-- Data odjazdu ze stacji początkowej -->
<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 -->
<b v-if="(item.fulfilled && item.terminated) || !item.terminated">
{{ item.route.split('|').slice(-1)[0] }}:
</b>
<i v-else>{{ $t('history.timetable-abandoned') }} </i>
<s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
{{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
</s>
<span
>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
</span>
</div>
</span>
<b
class="history_item-status"
:class="{
fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
terminated: item.terminated && !item.fulfilled,
active: !item.terminated,
}"
>
{{
!item.terminated
? $t('history.timetable-active')
: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
? $t('history.timetable-fulfilled')
: $t('history.timetable-abandoned')
}}
</b>
</div>
<div style="margin-top: 1em;">
<div>{{ $t('history.timetable-day') }} {{ localeDay(item.beginDate, $i18n.locale) }}</div>
<!-- Nick dyżurnego -->
<div v-if="item.authorName" class="text--grayed">
<b>{{ $t('history.dispatcher-name') }} {{ item.authorName }}</b>
</div> </div>
</div> </li>
</transition-group>
<div style="margin-top: 1em;">
<div>
<b>{{ $t('history.route-length') }}</b>
{{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
{{ item.routeDistance }} km
</div>
<div>
<b>{{ $t('history.station-count') }}</b>
{{ item.confirmedStopsCount }} /
{{ item.allStopsCount }}
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</transition> </transition>
@@ -118,7 +121,6 @@
<div class="history_warning" v-if="scrollNoMoreData">Brak dalszych wyników dla podanych parametrów</div> <div class="history_warning" v-if="scrollNoMoreData">Brak dalszych wyników dla podanych parametrów</div>
<div class="history_warning" v-else-if="!scrollDataLoaded">Pobieranie kolejnych wyników...</div> <div class="history_warning" v-else-if="!scrollDataLoaded">Pobieranie kolejnych wyników...</div>
</div> </div>
</section> </section>
</template> </template>
@@ -265,7 +267,7 @@ export default defineComponent({
const element = this.$refs.scrollElement as HTMLElement; const element = this.$refs.scrollElement as HTMLElement;
if ( if (
element.getBoundingClientRect().bottom * 0.9 < window.innerHeight && element.getBoundingClientRect().bottom * 0.85 < window.innerHeight &&
this.scrollDataLoaded && this.scrollDataLoaded &&
!this.scrollNoMoreData !this.scrollNoMoreData
) )
@@ -385,6 +387,7 @@ export default defineComponent({
@import '../styles/responsive.scss'; @import '../styles/responsive.scss';
@import '../styles/option.scss'; @import '../styles/option.scss';
// Animations
.warning { .warning {
&-enter-from, &-enter-from,
&-leave-to { &-leave-to {
@@ -400,6 +403,18 @@ export default defineComponent({
} }
} }
.history-list-anim {
&-enter-active,
&-leave-active {
transition: all 0.5s ease;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
}
.history-view { .history-view {
height: 100%; height: 100%;