feat: add loading state and voice channel validation to queue restoration and update uploads panel header

This commit is contained in:
mmacierzanka committed 2026-09-13 16:18:18 +02:00
1 parent 210f03b0d3
commit 8f1395117a
2 files changed
+44 -5

No files matched your search

+43 -4
View File
@@ -79,12 +79,25 @@ const setPlays = (id: string, plays: number) =>
const warnInvalidPlays = () => notify('Wartość musi być z przedziału 1-999', 'error') const warnInvalidPlays = () => notify('Wartość musi być z przedziału 1-999', 'error')
const restoreQueue = () => const restoring = ref(false)
run(
async function restoreQueue() {
if (restoring.value) return
if (!props.status?.active_voice_channel) {
notify('Bot musi być połączony z kanałem głosowym!', 'error')
return
}
restoring.value = true
try {
await run(
() => api.restoreQueue(), () => api.restoreQueue(),
'Przywrócono ostatnią kolejkę', 'Przywrócono ostatnią kolejkę',
'Nie udało się przywrócić ostatniej kolejki', 'Nie udało się przywrócić ostatniej kolejki',
) )
} finally {
restoring.value = false
}
}
</script> </script>
<template> <template>
@@ -146,11 +159,14 @@ const restoreQueue = () =>
</div> </div>
<button <button
class="btn btn-secondary btn-block restore-queue-button" class="btn btn-secondary btn-block restore-queue-button"
:disabled="!savedQueueAvailable" :class="{ loading: restoring }"
:disabled="!savedQueueAvailable || restoring"
title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem" title="Przywróć kolejkę zapisaną przed ostatnim zatrzymaniem lub rozłączeniem"
@click="restoreQueue" @click="restoreQueue"
> >
<RotateCcw /> Przywróć ostatnią kolejkę <LoaderCircle v-if="restoring" class="restore-spinner" />
<RotateCcw v-else />
<span>{{ restoring ? 'Przywracanie kolejki…' : 'Przywróć ostatnią kolejkę' }}</span>
</button> </button>
</div> </div>
</template> </template>
@@ -158,6 +174,29 @@ const restoreQueue = () =>
<style scoped> <style scoped>
.restore-queue-button { .restore-queue-button {
margin-top: 14px; margin-top: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.restore-queue-button.loading {
opacity: 0.9;
cursor: wait;
border-color: var(--primary, #f59e0b);
color: var(--primary, #f59e0b);
box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.restore-queue-button:disabled:not(.loading) {
opacity: 0.45;
cursor: not-allowed;
}
.restore-spinner {
animation: spin 0.8s linear infinite;
flex-shrink: 0;
} }
.queue-item-pending { .queue-item-pending {
+1 -1
View File
@@ -35,7 +35,7 @@ function play(filename: string) {
<div class="glass-card uploads-panel"> <div class="glass-card uploads-panel">
<div class="queue-header"> <div class="queue-header">
<h2 class="card-title"> <h2 class="card-title">
<FolderUp /> Serwerowa baza plików <FolderUp /> Pliki serwera
</h2> </h2>
<span class="queue-count">{{ filesLabel(files.length) }}</span> <span class="queue-count">{{ filesLabel(files.length) }}</span>
</div> </div>