diff options
Diffstat (limited to 'html/index.html')
| -rw-r--r-- | html/index.html | 140 |
1 files changed, 106 insertions, 34 deletions
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> |