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

feature: przejścia pomiędzy statusami ładowań

Browse Source
This commit is contained in:
Spythere
2023-01-04 14:01:25 +01:00
parent 1747e15dc8
commit 715e66879f
6 changed files with 77 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchersList.vue
+5 -2
View File
@@ -1,6 +1,10 @@
<template> <template>
<transition-group class="journal-list" tag="ul" name="list-anim"> <transition-group class="journal-list" tag="ul" name="list-anim">
<li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }"> <li
v-for="item in computedDispatcherHistory"
:key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
:class="{ sticky: typeof item == 'string' }"
>
<div v-if="typeof item == 'string'" class="journal_day"> <div v-if="typeof item == 'string'" class="journal_day">
{{ item }} {{ item }}
</div> </div>
@@ -8,7 +12,6 @@
<div <div
v-else v-else
class="journal_item" class="journal_item"
:key="item.timestampFrom + item.dispatcherId"
:class="{ online: item.isOnline }" :class="{ online: item.isOnline }"
@click="navigateToScenery(item.stationName, item.isOnline)" @click="navigateToScenery(item.stationName, item.isOnline)"
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)" @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
src/components/TrainsView/TrainTable.vue
+1 -1
View File
@@ -158,7 +158,7 @@ img.train-image {
.train { .train {
&-list { &-list {
overflow: auto; position: relative;
@include smallScreen() { @include smallScreen() {
width: 100%; width: 100%;
src/styles/JournalSection.scss
+5 -17
View File
@@ -1,21 +1,5 @@
@import 'responsive.scss'; @import 'responsive.scss';
@import 'animations.scss';
// Animations
.warning {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active {
transition: all 150ms 100ms ease-out;
}
&-leave-active {
transition: all 150ms 100ms ease-out;
}
}
//Styles //Styles
.list_wrapper { .list_wrapper {
@@ -26,6 +10,10 @@
padding-right: 0.2em; padding-right: 0.2em;
} }
.journal-list {
position: relative;
}
.journal_wrapper { .journal_wrapper {
max-width: 1350px; max-width: 1350px;
width: 100%; width: 100%;
src/styles/animations.scss
+16
View File
@@ -12,4 +12,20 @@
.list-anim-leave-active { .list-anim-leave-active {
position: absolute; position: absolute;
width: 100%;
}
.status-anim {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active {
transition: all 100ms ease-out;
}
&-leave-active {
transition: all 100ms ease-out;
}
} }
src/views/JournalDispatchers.vue
+24 -24
View File
@@ -12,35 +12,35 @@
/> />
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<!-- <transition name="warning" mode="out-in"> --> <transition name="status-anim" mode="out-in">
<!-- <div :key="dataStatus"> --> <div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline"> <div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }} {{ $t('app.offline') }}
</div> </div>
<Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" /> <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error"> <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div class="journal_warning" v-else-if="historyList.length == 0"> <div class="journal_warning" v-else-if="historyList.length == 0">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<div v-else> <div v-else>
<JournalDispatchersList :dispatcherHistory="computedHistoryList" /> <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
<button <button
class="btn btn--option btn--load-data" class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15" v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
@click="addHistoryData" @click="addHistoryData"
> >
{{ $t('journal.load-data') }} {{ $t('journal.load-data') }}
</button> </button>
</div> </div>
<!-- </div> </div>
</transition> --> </transition>
<div class="journal_warning" v-if="scrollNoMoreData"> <div class="journal_warning" v-if="scrollNoMoreData">
{{ $t('journal.no-further-data') }} {{ $t('journal.no-further-data') }}
src/views/JournalTimetables.vue
+25 -26
View File
@@ -15,35 +15,35 @@
<JournalStats /> <JournalStats />
<div class="list_wrapper" @scroll="handleScroll"> <div class="list_wrapper" @scroll="handleScroll">
<!-- <transition name="warning" mode="out-in"> --> <transition name="status-anim" mode="out-in">
<!-- <div :key="dataStatus"> --> <div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline"> <div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }} {{ $t('app.offline') }}
</div> </div>
<Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" /> <Loading v-else-if="dataStatus == DataStatus.Initialized || dataStatus == DataStatus.Loading" />
<div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error"> <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning"> <div v-else-if="timetableHistory.length == 0" class="journal_warning">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<div v-else> <div v-else>
<JournalTimetablesList :timetableHistory="timetableHistory" /> <JournalTimetablesList :timetableHistory="timetableHistory" />
<button <button
class="btn btn--option btn--load-data" class="btn btn--option btn--load-data"
v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15" v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
@click="addHistoryData" @click="addHistoryData"
> >
{{ $t('journal.load-data') }} {{ $t('journal.load-data') }}
</button> </button>
</div> </div>
<!-- </div> --> </div>
<!-- </transition> --> </transition>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div> <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
<div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div> <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
@@ -146,8 +146,7 @@ export default defineComponent({
watch: { watch: {
currentQueryArray(q: string[]) { currentQueryArray(q: string[]) {
this.currentOptionsActive = this.currentOptionsActive = q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
}, },
}, },