Add gui functionality.

bb96a568 · Andre Julius · 31ed8fc9 · bb96a568 · bb96a568
Commit bb96a568 authored Sep 16, 2017 by Andre Julius 👀
--- a/web/static/main.js
+++ b/web/static/main.js
+function get_index() {
+    var xmlhttp = new XMLHttpRequest();
+    var url = "/";
+
+    xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            var filename_array = JSON.parse(this.responseText);
+            build_list(filename_array);
+        }
+    };
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+}
+
+function enque(filename) {
+    var xmlhttp = new XMLHttpRequest();
+    var url = "/play/" + filename;
+
+    xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            console.log("enqued: " + filename);
+        }
+    };
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+}
+
+
+function build_list(filename_array) {
+    for (var i = 0; i < filename_array.length; i++) {
+        var li_elem = document.createElement("li");
+        li_elem.innerHTML = filename_array[i];
+        li_elem.onclick = function() {
+            enque(this.innerText);
+        };
+        document.getElementById("songlist").appendChild(li_elem);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    get_index();
+});
\ No newline at end of file
--- a/web/templates/gui.html
+++ b/web/templates/gui.html
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+	<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
 	<title>potify gui</title>
 </head>
 <body>