update js code

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);

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>

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 class="wide">
       <div>
-      <p>Now playing:</p>
-      <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>

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