From d97a33b800071e2d582038dd7ab4b0ee22684918 Mon Sep 17 00:00:00 2001 From: "Ricardo (XenGi) Band" Date: Sun, 21 Jan 2024 14:55:31 +0100 Subject: [PATCH] update js code --- static/controls.js | 48 +++++++++++++++++---- static/img/expand-collapse.svg | 7 ---- static/index.html | 14 +++---- static/style.css | 77 +++++++++++++++++++++++++++++----- 4 files changed, 114 insertions(+), 32 deletions(-) delete mode 100644 static/img/expand-collapse.svg diff --git a/static/controls.js b/static/controls.js index 7d373d2..8a5a390 100644 --- a/static/controls.js +++ b/static/controls.js @@ -69,6 +69,7 @@ control_update_db.addEventListener("click", e => { if (r.status === 200) { const job_id = await r.text(); console.log(`Update started (Job ID: ${job_id})`) + e.target.disabled = true; } else { console.error(`API returned ${r.status}: ${r.statusText}`) } @@ -94,18 +95,22 @@ control_progress.addEventListener("change", e => { fetch(`${API_URL}/seek/${e.target.value}`) }); control_repeat.addEventListener("click", e => { - if (e.target.innerHTML === "🔴 repeat") { // TODO: check is never true + if (e.target.dataset.state === "on") { // TODO: check is never true e.target.innerHTML = "🔘 repeat"; + e.target.dataset.state = "off"; } else { e.target.innerHTML = "🔴 repeat"; + e.target.dataset.state = "on"; } fetch(`${API_URL}/repeat`); }); control_shuffle.addEventListener("click", e => { - if (e.target.innerHTML === "🔴 shuffle") { // TODO: check is never true + if (e.target.dataset.state === "on") { // TODO: check is never true e.target.innerHTML = "🔘 shuffle"; + e.target.dataset.state = "off"; } else { e.target.innerHTML = "🔴 shuffle"; + e.target.dataset.state = "on"; } fetch(`${API_URL}/random`); }); @@ -194,8 +199,10 @@ socket.addEventListener("message", (e) => { if ("repeat" in msg.mpd_status) { if (msg.mpd_status.repeat === "1") { control_repeat.innerHTML = "🔴 repeat"; // πŸ”΄ Red Circle + control_repeat.dataset.state = "on"; } else { control_repeat.innerHTML = "🔘 repeat"; // πŸ”˜ Radio Button + control_repeat.dataset.state = "off"; } } @@ -203,8 +210,10 @@ socket.addEventListener("message", (e) => { if ("random" in msg.mpd_status) { if (msg.mpd_status.random === "1") { control_shuffle.innerHTML = "🔴 shuffle"; // πŸ”΄ Red Circle + control_shuffle.dataset.state = "on"; } else { control_shuffle.innerHTML = "🔘 shuffle"; // πŸ”˜ Radio Button + control_shuffle.dataset.state = "off"; } } @@ -254,14 +263,39 @@ socket.addEventListener("message", (e) => { const duration_seconds = Math.floor(elem.duration - duration_hours * 3600 - duration_minutes * 60); length.innerText = `${duration_hours}:${duration_minutes.toString().padStart(2, '0')}:${duration_seconds.toString().padStart(2, '0')}`; const actions = document.createElement("td"); - const del = document.createElement("button"); - del.innerHTML = "🗑️"; - del.addEventListener("click", e => { + // 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 ${elem.Pos} up`); + // fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => { + // console.log(r.text()); + // }); + }); + // TODO: maybe use a instead of button? + const moveDown = document.createElement("button"); + moveDown.classList.add("borderless"); + moveDown.innerHTML = "🔻"; // πŸ”» Red Triangle Pointed Up + moveDown.addEventListener("click", event => { + console.log(`DEBUG: move song ${elem.Pos} down`); + // fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => { + // console.log(r.text()); + // }); + }); + // TODO: maybe use a instead of button? + const remove = document.createElement("button"); + remove.classList.add("borderless"); + remove.innerHTML = "❌"; // ❌ Cross mark + remove.addEventListener("click", event => { + console.log(`DEBUG: remove song ${elem.Pos} from queue`); fetch(`${API_URL}/queue_del/${elem.Pos}`).then(r => { console.log(r.text()); - }) + }); }); - actions.appendChild(del); + actions.appendChild(moveUp); + actions.appendChild(moveDown); + actions.appendChild(remove); tr.appendChild(pos); tr.appendChild(artist); tr.appendChild(track); diff --git a/static/img/expand-collapse.svg b/static/img/expand-collapse.svg deleted file mode 100644 index f34809c..0000000 --- a/static/img/expand-collapse.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/static/index.html b/static/index.html index 4b5b6f1..a616edf 100644 --- a/static/index.html +++ b/static/index.html @@ -11,9 +11,8 @@