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/Global/VehicleThumbnail.vue
+1 -1
View File
@@ -37,7 +37,7 @@ function onImageLoad() {
imgStatus.value = 'loaded'; imgStatus.value = 'loaded';
} }
imgRef.value!.style.opacity = '1'; if (imgRef.value) imgRef.value.style.opacity = '1';
} }
</script> </script>
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+33 -37
View File
@@ -1,48 +1,44 @@
<template> <template>
<transition name="status-anim" mode="out-in"> <div class="journal_warning" v-if="store.isOffline">
<div :key="dataStatus"> {{ $t('app.offline') }}
<div class="journal_warning" v-if="store.isOffline"> </div>
{{ $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"> <div v-else-if="dataStatus == Status.Data.Error" class="journal_warning error">
{{ $t('app.error') }} {{ $t('app.error') }}
</div> </div>
<div class="journal_warning" v-else-if="dispatcherHistory.length == 0"> <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
{{ $t('app.no-result') }} {{ $t('app.no-result') }}
</div> </div>
<ul v-else class="journal-list"> <div v-else>
<transition-group name="list-anim"> <transition-group name="list-anim" class="journal-list" tag="ul">
<JournalDispatcherEntry <JournalDispatcherEntry
v-for="entry in dispatcherHistory" v-for="entry in dispatcherHistory"
:key="entry.id" :key="entry.id"
:entry="entry" :entry="entry"
:onToggleShowExtraInfo="toggleExtraInfo" :onToggleShowExtraInfo="toggleExtraInfo"
:showExtraInfo="extraInfoIndexes.includes(entry.id)" :showExtraInfo="extraInfoIndexes.includes(entry.id)"
/> />
</transition-group> </transition-group>
<AddDataButton <AddDataButton
:list="dispatcherHistory" :list="dispatcherHistory"
:scrollDataLoaded="scrollDataLoaded" :scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData" :scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData" @addHistoryData="addHistoryData"
/> />
</ul> </div>
<div class="journal_warning" v-if="scrollNoMoreData"> <div class="journal_warning" v-if="scrollNoMoreData">
{{ $t('journal.no-further-data') }} {{ $t('journal.no-further-data') }}
</div> </div>
<div class="journal_warning" v-else-if="!scrollDataLoaded"> <div class="journal_warning" v-else-if="!scrollDataLoaded">
{{ $t('journal.loading-further-data') }} {{ $t('journal.loading-further-data') }}
</div> </div>
</div>
</transition>
</template> </template>
<script lang="ts"> <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 v-if="timetable.stockString || stockHistory.length != 0">
<div class="g-separator"></div> <div class="g-separator"></div>
<b>{{ $t('journal.stock-preview') }}:</b> <b>{{ $t('journal.stock-preview') }}:</b>
<div class="stock-history" v-if="stockHistory.length > 1"> <div class="stock-history" v-if="stockHistory.length > 1">
<button <button
v-for="(sh, i) in stockHistory" v-for="(sh, i) in stockHistory"
@@ -97,7 +98,7 @@
</button> </button>
</div> </div>
<div v-if="timetable.stockString"> <div v-if="timetable.stockString" style="margin-top: 1em">
<StockList <StockList
:trainStockList=" :trainStockList="
(currentHistoryIndex == 0 (currentHistoryIndex == 0
@@ -235,22 +236,6 @@ hr {
padding-top: 0.5em; 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() { @include smallScreen() {
.stock-specs { .stock-specs {
justify-content: center; justify-content: center;
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+32 -32
View File
@@ -1,41 +1,37 @@
<template> <template>
<div> <div>
<transition name="status-anim" mode="out-in"> <div class="journal_warning" v-if="store.isOffline">
<div :key="dataStatus"> {{ $t('app.offline') }}
<div class="journal_warning" v-if="store.isOffline"> </div>
{{ $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"> <div v-else-if="dataStatus == Status.Data.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>
<ul v-else class="journal-list"> <div v-else>
<transition-group name="list-anim"> <transition-group name="list-anim" class="journal-list" tag="ul">
<JournalTimetableEntry <JournalTimetableEntry
v-for="(timetableEntry, i) in timetableHistory" v-for="(timetableEntry, i) in timetableHistory"
:key="timetableEntry.id" :key="timetableEntry.id"
:timetableEntry="timetableEntry" :timetableEntry="timetableEntry"
:onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)" :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
:showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)" :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
/> />
</transition-group> </transition-group>
<AddDataButton <AddDataButton
:list="timetableHistory" :list="timetableHistory"
:scrollDataLoaded="scrollDataLoaded" :scrollDataLoaded="scrollDataLoaded"
:scrollNoMoreData="scrollNoMoreData" :scrollNoMoreData="scrollNoMoreData"
@addHistoryData="addHistoryData" @addHistoryData="addHistoryData"
/> />
</ul> </div>
</div>
</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>
@@ -91,10 +87,14 @@ export default defineComponent({
}, },
watch: { watch: {
timetableHistory: { '$route.query': {
deep: true, deep: true,
handler() { handler() {
this.extraInfoIndexes.length = 0; this.extraInfoIndexes.length = 0;
this.$nextTick(() => {
console.log(this.$el.querySelector('ul'));
});
} }
} }
}, },
src/styles/animations.scss
+2 -2
View File
@@ -41,11 +41,11 @@ $animType: ease-in-out;
} }
&-enter-active { &-enter-active {
transition: all $animDuration ease-out; transition: all $animDuration ease-in-out;
} }
&-leave-active { &-leave-active {
transition: all $animDuration ease-out; transition: all $animDuration ease-in-out;
} }
} }
src/views/JournalTimetables.vue
-8
View File
@@ -306,14 +306,6 @@ export default defineComponent({
this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? ''; this.searchersValues[v as Journal.TimetableSearchKey] = options[v] ?? '';
}); });
// this.searchersValues['search-date'] = options['search-date'] ?? '';
// this.searchersValues['search-driver'] = options['search-driver'] ?? '';
// this.searchersValues['search-train'] = options['search-train'] ?? '';
// this.searchersValues['search-dispatcher'] = options['search-dispatcher'] ?? '';
// this.searchersValues['search-issuedFrom'] = options['search-issuedFrom'] ?? '';
// this.searchersValues['search-via'] = options['search-via'] ?? '';
// this.searchersValues['search-terminatingAt'] = options['search-terminatingAt'] ?? '';
this.sorterActive.id = this.sorterActive.id =
(options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId'; (options['sorter-active'] as Journal.TimetableSorterKey) ?? 'timetableId';