From 16862df71e8b32c7c173edb42531395e93d7c047 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 19 Mar 2023 17:26:09 +0700 Subject: [PATCH] update progress frontend to use api --- tubearchivist/static/css/style.css | 8 ++- tubearchivist/static/progress.js | 106 +++++++++++------------------ tubearchivist/static/script.js | 20 ++++++ 3 files changed, 67 insertions(+), 67 deletions(-) diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css index dbf76f90..03de4ed5 100644 --- a/tubearchivist/static/css/style.css +++ b/tubearchivist/static/css/style.css @@ -395,6 +395,10 @@ button:hover { position: relative; /* needed for modal */ } +#notifications { + position: relative; +} + .notifications { text-align: center; width: 80%; @@ -473,7 +477,8 @@ video:-webkit-full-screen { align-items: center; } -.video-progress-bar { +.video-progress-bar, +.notification-progress-bar { position: absolute; background-color: var(--accent-font-dark); height: 7px; @@ -1044,6 +1049,7 @@ video:-webkit-full-screen { /* status message */ .notification { + position: relative; background-color: var(--highlight-bg); text-align: center; padding: 30px 0 15px 0; diff --git a/tubearchivist/static/progress.js b/tubearchivist/static/progress.js index 87f5e192..c2d51a92 100644 --- a/tubearchivist/static/progress.js +++ b/tubearchivist/static/progress.js @@ -5,16 +5,9 @@ 'use strict'; -checkMessages(); +/* globals apiRequest animate */ -// page map to notification status -const messageTypes = { - download: ['message:download', 'message:add', 'message:rescan', 'message:playlistscan'], - channel: ['message:subchannel'], - channel_id: ['message:playlistscan'], - playlist: ['message:subplaylist'], - setting: ['message:setting'], -}; +checkMessages(); // start to look for messages function checkMessages() { @@ -25,82 +18,63 @@ function checkMessages() { } } -// get messages for page on timer function getMessages(dataOrigin) { - fetch('/progress/') - .then(response => response.json()) - .then(responseData => { - const messages = buildMessage(responseData, dataOrigin); - if (messages.length > 0) { - // restart itself - setTimeout(() => getMessages(dataOrigin), 500); - } - }); + let apiEndpoint = '/api/notification/'; + let responseData = apiRequest(apiEndpoint, 'GET'); + let messages = buildMessage(responseData, dataOrigin); + if (messages.length > 0) { + // restart itself + setTimeout(() => getMessages(dataOrigin), 500); + } } -// make div for all messages, return relevant function buildMessage(responseData, dataOrigin) { - // filter relevan messages - let allMessages = responseData['messages']; - let messages = allMessages.filter(function (value) { - return messageTypes[dataOrigin].includes(value['status']); + // filter relevant messages + let messages = responseData.filter(function (value) { + return value.status.startsWith(dataOrigin); }, dataOrigin); - // build divs let notificationDiv = document.getElementById('notifications'); let nots = notificationDiv.childElementCount; notificationDiv.innerHTML = ''; + for (let i = 0; i < messages.length; i++) { - let messageData = messages[i]; - let messageStatus = messageData['status']; + const messageData = messages[i]; let messageBox = document.createElement('div'); - let title = document.createElement('h3'); - title.innerHTML = messageData['title']; - let message = document.createElement('p'); - message.innerHTML = messageData['message']; - messageBox.appendChild(title); - messageBox.appendChild(message); + let progress = messageData?.progress * 100 || 0; messageBox.classList.add(messageData['level'], 'notification'); + messageBox.innerHTML = ` +

${messageData.title}

+

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

+
`; notificationDiv.appendChild(messageBox); - if (messageStatus === 'message:download') { - checkDownloadIcons(); + if (messageData.status.startsWith('download:')) { + animateIcons(messageData.status); } } - // reload page when no more notifications if (nots > 0 && messages.length === 0) { location.reload(); } + return messages; } -// check if download icons are needed -function checkDownloadIcons() { - let iconBox = document.getElementById('downloadControl'); - if (iconBox.childElementCount === 0) { - let downloadIcons = buildDownloadIcons(); - iconBox.appendChild(downloadIcons); +function animateIcons(status) { + let rescanIcon = document.getElementById('rescan-icon'); + let dlIcon = document.getElementById('download-icon'); + switch (status) { + case 'download:scan': + if (rescanIcon && !rescanIcon.classList.contains('rotate-img')) { + animate('rescan-icon', 'rotate-img'); + } + break; + + case 'download:run': + if (dlIcon && !dlIcon.classList.contains('bounce-img')) { + animate('download-icon', 'bounce-img'); + } + break; + + default: + break; } } - -// add dl control icons -function buildDownloadIcons() { - let downloadIcons = document.createElement('div'); - downloadIcons.classList = 'dl-control-icons'; - // stop icon - let stopIcon = document.createElement('img'); - stopIcon.setAttribute('id', 'stop-icon'); - stopIcon.setAttribute('title', 'Stop Download Queue'); - stopIcon.setAttribute('src', '/static/img/icon-stop.svg'); - stopIcon.setAttribute('alt', 'stop icon'); - stopIcon.setAttribute('onclick', 'stopQueue()'); - // kill icon - let killIcon = document.createElement('img'); - killIcon.setAttribute('id', 'kill-icon'); - killIcon.setAttribute('title', 'Kill Download Queue'); - killIcon.setAttribute('src', '/static/img/icon-close.svg'); - killIcon.setAttribute('alt', 'kill icon'); - killIcon.setAttribute('onclick', 'killQueue()'); - // stich together - downloadIcons.appendChild(stopIcon); - downloadIcons.appendChild(killIcon); - return downloadIcons; -} diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js index ff8e8cc5..8753d52f 100644 --- a/tubearchivist/static/script.js +++ b/tubearchivist/static/script.js @@ -250,6 +250,10 @@ function manualImport() { let toReplace = document.getElementById('manual-import'); toReplace.innerHTML = ''; toReplace.appendChild(message); + setTimeout(function () { + location.replace('#notifications'); + checkMessages(); + }, 200); } function reEmbed() { @@ -261,6 +265,10 @@ function reEmbed() { let toReplace = document.getElementById('re-embed'); toReplace.innerHTML = ''; toReplace.appendChild(message); + setTimeout(function () { + location.replace('#notifications'); + checkMessages(); + }, 200); } function dbBackup() { @@ -272,6 +280,10 @@ function dbBackup() { let toReplace = document.getElementById('db-backup'); toReplace.innerHTML = ''; toReplace.appendChild(message); + setTimeout(function () { + location.replace('#notifications'); + checkMessages(); + }, 200); } function dbRestore(button) { @@ -284,6 +296,10 @@ function dbRestore(button) { let toReplace = document.getElementById(fileName); toReplace.innerHTML = ''; toReplace.appendChild(message); + setTimeout(function () { + location.replace('#notifications'); + checkMessages(); + }, 200); } function fsRescan() { @@ -295,6 +311,10 @@ function fsRescan() { let toReplace = document.getElementById('fs-rescan'); toReplace.innerHTML = ''; toReplace.appendChild(message); + setTimeout(function () { + location.replace('#notifications'); + checkMessages(); + }, 200); } function resetToken() {