From 472cbf21e567c0c65c124f96cebe717cdef901fb Mon Sep 17 00:00:00 2001
From: Roland Reichwein <mail@reichwein.it>
Date: Sun, 12 Jan 2025 23:08:08 +0100
Subject: Play MIDI

---
 html/index.html | 140 ++++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 106 insertions(+), 34 deletions(-)

(limited to 'html')

diff --git a/html/index.html b/html/index.html
index a27b654..ac85aa1 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,42 +9,108 @@
 	height: 150px;
 	font-size: 20px;
 }
+
+.selected{
+  color: #FF8080;
+}
+
+.normal{
+  color: #000000;
+}
 </style>
 <script type="text/javascript">
-	function playbutton_clicked()
-	{
-		var element = document.getElementById("playbutton");
-		if (element.innerHTML == "Play") {
-			element.innerHTML = "Stop";
-		} else {
-			element.innerHTML = "Play";
-		}
-
-          var xhr = new XMLHttpRequest();
-
-          xhr.onreadystatechange = function() {
-                        if (this.readyState != 4) {
-                                return;
-                        }
-                        if (this.status != 200) {
-                                document.getElementById("status").innerHTML = "HTTP error";
-                        } else {
-                          var xml = xhr.responseXML;
-                          var value = xml.getElementsByTagName("value1")[0].childNodes[0].nodeValue;
-                          document.getElementById("songlist").innerHTML = value;
-                        }
-          }
-
-          xhr.open("POST", "midiplay.fcgi" + "?command=list", true);
-          xhr.setRequestHeader("Content-type", "text/xml");
-          xhr.send("<data><value1>3</value1></data>");
-	}
-
-	function startup() {
-		document.getElementById("playbutton").onclick = playbutton_clicked;
-
-		document.getElementById("songlist").innerHTML = "01 Locked Out Of Heaven";
-	}
+  function get_filelist(){
+    var xhr = new XMLHttpRequest();
+
+    xhr.onreadystatechange = function() {
+      if (this.readyState != 4) {
+        return;
+      }
+      if (this.status != 200) {
+        document.getElementById("status").innerHTML = "HTTP error";
+      } else {
+        var xml = xhr.responseXML;
+        var selected_file = xml.getElementsByTagName("selected")[0].childNodes[0].nodeValue;
+        var list = xml.getElementsByTagName("list")[0].getElementsByTagName("filename");
+        var n = list.length;
+        var value = "";
+        for (var i = 0; i < n; ++i) {
+          var filename = list[i].childNodes[0].nodeValue;
+          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\">" + filename + "</span><br/>"
+        }
+
+        document.getElementById("songlist").innerHTML = value;
+      }
+    }
+
+    xhr.open("POST", "midiplay.fcgi" + "?command=getlist", true);
+    xhr.setRequestHeader("Content-type", "text/xml");
+    xhr.send("");
+  }
+
+  function playbutton_clicked()
+  {
+    var action = "start";
+    var element = document.getElementById("playbutton");
+    if (element.innerHTML == "Play") {
+      element.innerHTML = "Stop";
+    } else {
+      element.innerHTML = "Play";
+      action = "stop";
+    }
+
+    var xhr = new XMLHttpRequest();
+
+    xhr.onreadystatechange = function() {
+      if (this.readyState != 4) {
+        return;
+      }
+      if (this.status != 200) {
+        document.getElementById("status").innerHTML = "HTTP error";
+      } else {
+        var xml = xhr.responseXML;
+        var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue;
+
+        document.getElementById("status").innerHTML = message;
+      }
+    }
+
+    xhr.open("POST", "midiplay.fcgi" + "?command=" + action, true);
+    xhr.setRequestHeader("Content-type", "text/xml");
+    xhr.send("");
+  }
+
+  function songlist_clicked()
+  {
+    var xhr = new XMLHttpRequest();
+
+    xhr.onreadystatechange = function() {
+      if (this.readyState != 4) {
+        return;
+      }
+      if (this.status != 200) {
+        document.getElementById("status").innerHTML = "HTTP error";
+      } else {
+        var xml = xhr.responseXML;
+        var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue;
+
+        document.getElementById("status").innerHTML = message;
+
+        get_filelist(); // trigger reload
+      }
+    }
+
+    xhr.open("POST", "midiplay.fcgi" + "?command=setfile", true);
+    xhr.setRequestHeader("Content-type", "text/xml");
+    xhr.send("<data><value>magic.midi</value></data>");
+  }
+
+  function startup() {
+    document.getElementById("playbutton").onclick = playbutton_clicked;
+    document.getElementById("songlist").onclick = songlist_clicked;
+
+    get_filelist();
+  }
 
 </script>
 	</head>
@@ -54,10 +120,16 @@ MIDIPLAY
 <br/>
 <br/>
 <div id="songlist">
+(Loading Songlist...)
 </div>
 <br/>
 <br/>
 <button id="playbutton" class="button">Play</button>
 
+<br>
+<div>
+  Status: <span id="status">ok</span>
+</div>
+
 	</body>
 </html>
-- 
cgit v1.2.3