diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index ec0a27da..41199466 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -1025,7 +1025,6 @@ video:-webkit-full-screen { .task-control-icons { display: flex; justify-content: center; - padding-bottom: 10px; } .task-control-icons img { diff --git a/tubearchivist/static/progress.js b/tubearchivist/static/progress.js index e26002c2..36e7ede8 100644 --- a/tubearchivist/static/progress.js +++ b/tubearchivist/static/progress.js @@ -33,42 +33,56 @@ function buildMessage(responseData, dataOrigin) { let messages = responseData.filter(function (value) { return value.group.startsWith(dataOrigin); }, dataOrigin); - let notificationDiv = document.getElementById('notifications'); - let nots = notificationDiv.childElementCount; - notificationDiv.innerHTML = ''; + let notifications = document.getElementById('notifications'); + let currentNotifications = notifications.childElementCount; for (let i = 0; i < messages.length; i++) { const messageData = messages[i]; - let messageBox = document.createElement('div'); - let progress = messageData?.progress * 100 || 0; - messageBox.classList.add(messageData['level'], 'notification'); - messageBox.innerHTML = ` -

${messageData.title}

-

${messageData.messages.join('
')}

`; - let taskControlIcons = document.createElement('div'); - taskControlIcons.classList = 'task-control-icons'; - if ('api-stop' in messageData) { - taskControlIcons.appendChild(buildStopIcon(messageData.id)); - } - if ('api-kill' in messageData) { - taskControlIcons.appendChild(buildKillIcon(messageData.id)); + if (!document.getElementById(messageData.id)) { + let messageBox = buildPlainBox(messageData); + notifications.appendChild(messageBox); } - if (taskControlIcons.hasChildNodes()) { - messageBox.appendChild(taskControlIcons); - } - messageBox.innerHTML = `${messageBox.innerHTML}
`; - notificationDiv.appendChild(messageBox); + updateMessageBox(messageData); if (messageData.group.startsWith('download:')) { animateIcons(messageData.group); } } - if (nots > 0 && messages.length === 0) { + clearNotifications(responseData); + if (currentNotifications > 0 && messages.length === 0) { location.reload(); } - return messages; } +function buildPlainBox(messageData) { + let messageBox = document.createElement('div'); + messageBox.classList.add(messageData.level, 'notification'); + messageBox.id = messageData.id; + messageBox.innerHTML = ` +

+

+
+
`; + return messageBox; +} + +function updateMessageBox(messageData) { + let messageBox = document.getElementById(messageData.id); + let children = messageBox.children; + children[0].textContent = messageData.title; + children[1].innerHTML = messageData.messages.join('
'); + if ( + !messageBox.querySelector('#stop-icon') && + messageData['api-stop'] && + messageData.command !== 'STOP' + ) { + children[2].appendChild(buildStopIcon(messageData.id)); + } + if (messageData.progress) { + children[3].style.width = `${messageData.progress * 100 || 0}%`; + } +} + function animateIcons(group) { let rescanIcon = document.getElementById('rescan-icon'); let dlIcon = document.getElementById('download-icon'); @@ -111,3 +125,14 @@ function buildKillIcon(taskId) { killIcon.setAttribute('onclick', 'killTask(this)'); return killIcon; } + +function clearNotifications(responseData) { + let allIds = Array.from(responseData, x => x.id); + let allBoxes = document.getElementsByClassName('notification'); + for (let i = 0; i < allBoxes.length; i++) { + const notificationBox = allBoxes[i]; + if (!allIds.includes(notificationBox.id)) { + notificationBox.remove(); + } + } +} diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index b39551b7..9ffd7594 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -232,14 +232,14 @@ function stopTask(icon) { let taskId = icon.getAttribute('data'); let apiEndpoint = `/api/task-id/${taskId}/`; apiRequest(apiEndpoint, 'POST', { command: 'stop' }); - document.getElementById('stop-icon').remove(); + icon.remove(); } function killTask(icon) { let taskId = icon.getAttribute('data'); let apiEndpoint = `/api/task-id/${taskId}/`; apiRequest(apiEndpoint, 'POST', { command: 'kill' }); - document.getElementById('kill-icon').remove(); + icon.remove(); } // settings page buttons