update js code

2024-01-21 14:55:31 +01:00 · 2024-01-21 14:55:31 +01:00 · d97a33b800
parent 3bdf933493
commit d97a33b800
4 changed files with 114 additions and 32 deletions
--- 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 === "&#x1F534; repeat") {  // TODO: check is never true
+  if (e.target.dataset.state === "on") {  // TODO: check is never true
    e.target.innerHTML = "&#x1F518; repeat";
+    e.target.dataset.state = "off";
  } else {
    e.target.innerHTML = "&#x1F534; repeat";
+    e.target.dataset.state = "on";
  }
  fetch(`${API_URL}/repeat`);
 });
 control_shuffle.addEventListener("click", e => {
-  if (e.target.innerHTML === "&#x1F534; shuffle") {  // TODO: check is never true
+  if (e.target.dataset.state === "on") {  // TODO: check is never true
    e.target.innerHTML = "&#x1F518; shuffle";
+    e.target.dataset.state = "off";
  } else {
    e.target.innerHTML = "&#x1F534; 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 = "&#x1F534; repeat"; // 🔴 Red Circle
+          control_repeat.dataset.state = "on";
        } else {
          control_repeat.innerHTML = "&#x1F518; 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 = "&#x1F534; shuffle"; // 🔴 Red Circle
+          control_shuffle.dataset.state = "on";
        } else {
          control_shuffle.innerHTML = "&#x1F518; 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 = "&#x1F5D1;&#xFE0F;";
-      del.addEventListener("click", e => {
+      // TODO: maybe use a instead of button?
+      const moveUp = document.createElement("button");
+      moveUp.classList.add("borderless");
+      moveUp.innerHTML = "&#x1F53A;"; // 🔺 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 = "&#x1F53B;"; // 🔻 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 = "&#x274C;"; // ❌ 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);
--- a/static/img/expand-collapse.svg
+++ b/static/img/expand-collapse.svg
@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20">
-  <g fill="#fff">
-    <path d="m5 9h4v-4h2v4h4v2h-4v4h-2v-4h-4z"/>
-    <path d="m25 9h10v2h-10z"/>
-  </g>
-</svg>
--- a/static/index.html
+++ b/static/index.html
@ -11,9 +11,8 @@
  <div id="nav">
    <div id="control-admin">
      <button id="connection-state">&#x274C; Disconnected</button> <!-- ❌ Cross Mark -->
-      <button>Login</button>
      <button>Config</button>
-      <button id="control-update-db" disabled="disabled">Update DB</button>
+      <button id="control-update-db" disabled="disabled"><span class="loader"></span> Update DB</button>
    </div><!--/#control-admin-->
    <div>
      <div class="spaced">
@ -22,15 +21,15 @@
        <button id="control-play-pause">&#x23F5;&#xFE0E;</button> <!-- ▶️ Play or ⏸️ Pause Button -->
        <button id="control-next">&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
      </div><!--/.spaced-->
-      <div>
+      <div class="spaced">
        <label for="control-progress"></label>
        <input type="range" id="control-progress" name="progress" min="0" step="1" />
      </div>
    </div>
    <div>
      <div class="spaced">
-        <button id="control-repeat">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
-        <button id="control-shuffle">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
+        <button id="control-repeat" data-state="off">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
+        <button id="control-shuffle" data-state="off">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
      </div><!--/.spaced-->
      <div class="spaced">
        <label for="control-xfade">xfade</label>
@ -46,10 +45,9 @@
        <button id="control-volume-up">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
      </div><!--/.spaced-->
    </div>
-    <div>
-      <p>Now playing:</p>
+    <div class="wide">
      <div>
-        <label for="control-track">Track:</label>
+        <label for="control-track">Now playing:</label>
        <input type="text" id="control-track" name="track" disabled="disabled" />
      </div>
      <div>
--- a/static/style.css
+++ b/static/style.css
@ -1,5 +1,9 @@
 :root {
  --ribbon-width: 160px;
+  --ribbon-height: 80px;
+
+  --background-color: #041936;
+  --text-color: #bbb;
 }

 /* #################### */
@ -16,7 +20,7 @@ main {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 2fr;
-  grid-template-rows: 100px 1fr 1fr;
+  grid-template-rows: var(--ribbon-height) 1fr 1fr;
  gap: 0 0;
  grid-template-areas: "nav nav" "queue queue" "browser result" "footer footer";
 }
@ -31,6 +35,10 @@ main {
  display: flex;
 }

+#nav > div {
+  width: var(--ribbon-width);
+}
+
 #result {
  grid-area: result;
  overflow: auto;
@ -43,7 +51,7 @@ main {
 main footer {
  grid-area: footer;
  overflow: auto;
-  background-color: #041936;
+  background-color: var(--background-color);
  text-align: right;
 }

@ -84,6 +92,23 @@ table {
 /* ### pretty stuff ### */
 /* #################### */

+#control-progress {
+  width: var(--ribbon-width);
+}
+
+#control-volume {
+  width: 80px;
+}
+
+#nav > div.wide {
+  width: 280px;
+}
+
+#nav > div.wide div {
+  display: flex;
+  justify-content: space-between;
+}
+
 /* Disable arrows in input */

 /* Chrome, Safari, Edge, Opera */
@ -155,7 +180,7 @@ table {

 html, body {
  background-color: #09101d;
-  color: #bbb;
+  color: var(--text-color);
  scrollbar-color: #490b00 #09101d;  /* only in firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
@ -163,19 +188,51 @@ html, body {
 }

 a {
-  color: #bbb;
+  color: var(--text-color);
  text-decoration: none;
 }

 button {
  background-color: #28374a;
-  color: #bbb;
+  color: var(--text-color);
  border-top-color: #545454;
  border-right-color: #3a3a3a;
  border-bottom-color: #3a3a3a;
  border-left-color: #545454;
 }

+button[disabled] {
+  color: var(--background-color);
+}
+
+button[disabled] .loader {
+  display: inline-block;
+}
+
+button .loader {
+  display: none;
+}
+
+.loader {
+  width: 10pt;
+  height: 10pt;
+  border: 3px solid var(--text-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* borderless button used in queue */
 .borderless {
  border: none;
@ -185,7 +242,7 @@ button {

 input[type=text] {
  background-color: #28374a;
-  color: white;
+  color: var(--text-color);
  border: 1px solid black;
  border-right-color: #545454;
  border-bottom-color: #545454;
@ -279,7 +336,7 @@ table tr:hover td {
  display: inline-block;
  text-align: center;
  background-color: #28374a;
-  color: #bbb;
+  color: var(--text-color);
  border: 1px solid #545454;
  border-top-left-radius: 5pt;
  border-top-right-radius: 5pt;
@ -287,7 +344,7 @@ table tr:hover td {

 #tabs a.active {
  background-color: #1a1a1a;
-  color: #bbb;
+  color: var(--text-color);
  border-bottom: none;
  /*border-top-color: #1a1a1a;*/
  /*border-right-color: #545454;*/
@ -304,7 +361,7 @@ table tr:hover td {
  font-size: 12pt;
  width: 100%;
  background-color: #28374a;
-  color: white;
+  color: var(--text-color);
  border: 1px solid black;
  border-right-color: #545454;
  border-bottom-color: #545454;
@ -312,7 +369,7 @@ table tr:hover td {
 }

 footer svg {
-  color: white;
+  color: var(--text-color);
  width: 12pt;
  height: 12pt;
 }