tubearchivist/tubearchivist/static/progress.js

/**
 * Handle multi channel notifications
 *
 */

'use strict';

checkMessages();

// 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'],
};

// start to look for messages
function checkMessages() {
  let notifications = document.getElementById('notifications');
  if (notifications) {
    let dataOrigin = notifications.getAttribute('data');
    getMessages(dataOrigin);
  }
}

// get messages for page on timer
function getMessages(dataOrigin) {
  fetch('/progress/')
    .then(response => {
      return response.json();
    })
    .then(responseData => {
      let messages = buildMessage(responseData, dataOrigin);
      if (messages.length > 0) {
        // restart itself
        setTimeout(function () {
          getMessages(dataOrigin);
        }, 3000);
      }
    });
}

// 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']);
  }, 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'];
    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);
    messageBox.classList.add(messageData['level'], 'notification');
    notificationDiv.appendChild(messageBox);
    if (messageStatus === 'message:download') {
      checkDownloadIcons();
    }
  }
  // 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);
  }
}

// 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;
}