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

chore: removed journal list status animations

Browse Source
This commit is contained in:
Spythere
2024-09-09 14:11:35 +02:00
parent a3d9e68c8a
commit fac8fced3e
6 changed files with 70 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+33 -37
View File
@@ -1,48 +1,44 @@
<template>
<transition name="status-anim" mode="out-in">
<div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }}
</div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }}
</div>
<ul v-else class="journal-list">
<transition-group name="list-anim">
<JournalDispatcherEntry
v-for="entry in dispatcherHistory"
:key="entry.id"
:entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)"
/>
</transition-group>
<div v-else>
<transition-group name="list-anim" class="journal-list" tag="ul">
<JournalDispatcherEntry
v-for="entry in dispatcherHistory"
:key="entry.id"
:entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)"
/>
</transition-group>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</ul>
<AddDataButton
:list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
<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>
</transition>
<div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }}
</div>
</template>
<script lang="ts">
src/components/JournalView/JournalTimetables/EntryDetails.vue
+2 -17
View File
@@ -85,6 +85,7 @@
<div v-if="timetable.stockString || stockHistory.length != 0">
<div class="g-separator"></div>
<b>{{ $t('journal.stock-preview') }}:</b>
<div class="stock-history" v-if="stockHistory.length > 1">
<button
v-for="(sh, i) in stockHistory"
@@ -97,7 +98,7 @@
</button>
</div>
<div v-if="timetable.stockString">
<div v-if="timetable.stockString" style="margin-top: 1em">
<StockList
:trainStockList="
(currentHistoryIndex == 0
@@ -235,22 +236,6 @@ hr {
padding-top: 0.5em;
}
ul.stock-list {
display: flex;
align-items: flex-end;
overflow: auto;
padding-bottom: 0.5em;
li > div {
margin: 1em 0;
text-align: center;
color: #aaa;
font-size: 0.9em;
}
}
@include smallScreen() {
.stock-specs {
justify-content: center;
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+32 -32
View File
@@ -1,41 +1,37 @@
<template>
<div>
<transition name="status-anim" mode="out-in">
<div :key="dataStatus">
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<div class="journal_warning" v-if="store.isOffline">
{{ $t('app.offline') }}
</div>
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<Loading v-else-if="dataStatus == Status.Data.Loading" />
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }}
</div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning">
{{ $t('app.no-result') }}
</div>
<div v-else-if="timetableHistory.length == 0" class="journal_warning">
{{ $t('app.no-result') }}
</div>
<ul v-else class="journal-list">
<transition-group name="list-anim">
<JournalTimetableEntry
v-for="(timetableEntry, i) in timetableHistory"
:key="timetableEntry.id"
:timetableEntry="timetableEntry"
:onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
:showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
/>
</transition-group>
<div v-else>
<transition-group name="list-anim" class="journal-list" tag="ul">
<JournalTimetableEntry
v-for="(timetableEntry, i) in timetableHistory"
:key="timetableEntry.id"
:timetableEntry="timetableEntry"
:onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
:showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
/>
</transition-group>
<AddDataButton
:list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</ul>
</div>
</transition>
<AddDataButton
:list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData"
/>
</div>
<div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
@@ -91,10 +87,14 @@ export default defineComponent({
},
watch: {
timetableHistory: {
'$route.query': {
deep: true,
handler() {
this.extraInfoIndexes.length = 0;
this.$nextTick(() => {
console.log(this.$el.querySelector('ul'));
});
}
}
},