removed ws message from waiting modal and display console during action

This commit is contained in:
Axolotle 2020-11-30 16:07:28 +01:00
parent 8e98546190
commit cd4f307b89
2 changed files with 36 additions and 29 deletions

View file

@ -31,16 +31,6 @@
</b-progress>
</b-card-body>
<!-- MESSAGES -->
<b-list-group v-if="messages" flush class="rounded-0">
<b-list-group-item
v-for="({ text, type }, i) in messages" :key="i"
:variant="type"
>
{{ text }}
</b-list-group-item>
</b-list-group>
<b-card-footer v-if="error" class="justify-content-end">
<b-button variant="primary" v-t="'ok'" @click="$store.dispatch('SERVER_RESPONDED', true)" />
</b-card-footer>
@ -66,12 +56,6 @@ export default {
return {
values: progress, max: progress.reduce((sum, value) => (sum + value), 0)
}
},
messages () {
if (!this.lastAction) return null
const messages = this.lastAction.messages
return messages.length > 0 ? this.lastAction.messages : null
}
},
@ -105,16 +89,6 @@ export default {
margin-top: 2rem;
}
.list-group {
max-height: 50vh;
overflow-y: auto;
// Hide all message except the last one if the mouse isn't hovering the list group.
&:not(:hover) .list-group-item:not(:last-of-type) {
display: none;
}
}
.pacman {
width: 24px;
animation: back-and-forth 4s linear infinite;

View file

@ -26,7 +26,10 @@
<!-- ACTION LIST -->
<b-collapse id="console-collapse" v-model="open">
<b-list-group-item class="p-0" id="history" ref="history">
<b-list-group-item
id="history" ref="history"
class="p-0" :class="{ 'show-last': openedByWaiting }"
>
<!-- ACTION -->
<b-list-group v-for="(action, i) in history" :key="i" flush>
<!-- ACTION DESC -->
@ -65,7 +68,8 @@ export default {
data () {
return {
open: false
open: false,
openedByWaiting: false
}
},
@ -82,10 +86,28 @@ export default {
'lastAction.messages' () {
if (!this.open) return
this.$nextTick(this.scrollToLastAction)
},
waiting (value) {
if (value && !this.open) {
// Open the history while waiting for the server's response to display WebSocket messages.
this.open = true
this.openedByWaiting = true
this.$nextTick().then(() => {
this.$refs.history.style.height = null
this.$refs.history.classList.add('with-max')
})
} else if (!value && this.openedByWaiting) {
// Automaticly close the history if it was not opened before the request
setTimeout(() => {
this.open = false
this.openedByWaiting = false
}, 500)
}
}
},
computed: mapGetters(['history', 'lastAction']),
computed: mapGetters(['history', 'lastAction', 'waiting']),
methods: {
scrollToLastAction () {
@ -186,6 +208,17 @@ export default {
&.with-max {
max-height: 30vh;
}
// Used to display only the last message of the last action while an action is triggered
// and console was not opened.
&.show-last {
& > :not(:last-child) {
display: none;
}
& > :last-child > :not(:last-child) {
display: none;
}
}
}
.list-group-item {