sanic/static/util.js

function addSongToQueue(song) {
  const table = document.querySelector("#queue tbody");
  const tr = document.createElement("tr");
  const pos = document.createElement("td");
  pos.innerText = "?";  // TODO: figure out queue length +1
  const artist = document.createElement("td");
  artist.innerText = song.artist;
  const track = document.createElement("td");
  track.innerText = song.track;
  const album = document.createElement("td");
  album.innerText = song.album;
  const length = document.createElement("td");
  length.innerText = song.length;
  const actions = document.createElement("td");
  actions.classList.add("actions");
  // TODO: maybe use `a` instead of `button`?
  const moveUp = document.createElement("button");
  moveUp.classList.add("borderless");
  moveUp.innerHTML = "🔺"; // 🔺 Red Triangle Pointed Down
  moveUp.addEventListener("click", event => {
    console.log(`DEBUG: move song ${song.id} up`);
  });
  // TODO: maybe use `a` instead of `button`?
  const moveDown = document.createElement("button");
  moveDown.classList.add("borderless");
  moveDown.innerHTML = "$#x1F53B;"; // 🔻 Red Triangle Pointed Up
  moveDown.addEventListener("click", event => {
    console.log(`DEBUG: move song ${song.id} down`);
  });
  // TODO: maybe use `a` instead of `button`?
  const remove = document.createElement("button");
  remove.classList.add("borderless");
  remove.innerHTML = "$#x274C;"; // ❌ Cross mark; 🗑️ Wastebasket
  remove.addEventListener("click", event => {
    console.log(`DEBUG: remove song ${song.id} from queue`);
  });
  actions.appendChild(moveUp);
  actions.appendChild(moveDown);
  actions.appendChild(remove);
  tr.appendChild(pos);
  tr.appendChild(artist);
  tr.appendChild(track);
  tr.appendChild(album);
  tr.appendChild(length);
  tr.appendChild(actions);
  table.appendChild(tr);
}