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

Dodano animację dla listy historii dyżurnych

Browse Source
This commit is contained in:
Spythere
2022-01-10 19:26:48 +01:00
parent b70cbc8d62
commit 47d6d63d68
1 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryHistory.vue
+46 -34
View File
@@ -2,49 +2,47 @@
<div class="scenery-history"> <div class="scenery-history">
<h2>{{ $t('journal.title') }}</h2> <h2>{{ $t('journal.title') }}</h2>
<ul> <transition name="history-list-anim" mode="out-in">
<li v-if="!isLoaded"> <ul :key="dispatcherTimeline.length">
<h3>{{ $t('journal.loading') }}</h3> <li v-if="!isLoaded">
</li> <h3>{{ $t('journal.loading') }}</h3>
</li>
<li v-if="isLoaded && dispatcherTimeline.length == 0"> <li v-if="isLoaded && dispatcherTimeline.length == 0">
<h3>{{ $t('journal.no-history') }}</h3> <h3>{{ $t('journal.no-history') }}</h3>
</li> </li>
<li v-for="(timeline, i) in dispatcherTimeline" :key="i"> <li v-for="(timeline, i) in dispatcherTimeline" :key="i">
<h3 <h3
@click="toggleTimeline(i)" @click="toggleTimeline(i)"
@keydown.enter="toggleTimeline(i)" @keydown.enter="toggleTimeline(i)"
@keydown.space="toggleTimeline(i)" @keydown.space="toggleTimeline(i)"
tabindex="0" tabindex="0"
> >
{{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" /> {{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" />
</h3> </h3>
<span v-if="timeline.showTimeline"> <span v-if="timeline.showTimeline">
<div v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom"> <div v-for="dispatcher in timeline.dispatchers" :key="dispatcher.dispatcherFrom">
<span> <span>
<span class="dispatcher-from text--primary"> <span class="dispatcher-from text--primary">
{{ timestampToString(dispatcher.dispatcherFrom, true) }} {{ timestampToString(dispatcher.dispatcherFrom, true) }}
</span>
>
<span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span>
</span> </span>
> <b>{{ dispatcher.dispatcherName }}</b>
<span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span> </div>
</span> </span>
</li>
<b>{{ dispatcher.dispatcherName }}</b> </ul>
</div> </transition>
</span>
</li>
</ul>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { GETTERS } from '@/constants/storeConstants';
import { useStore } from '@/store';
import axios from 'axios'; import axios from 'axios';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
interface DispatcherTimeline { interface DispatcherTimeline {
date: string; date: string;
@@ -146,6 +144,20 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.history-list-anim {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active {
transition: all 100ms ease-out;
}
&-leave-active {
transition: all 100ms ease-out 100ms;
}
}
.scenery-history { .scenery-history {
height: 600px; height: 600px;
overflow-y: hidden; overflow-y: hidden;