2 files changed, 61 insertions, 23 deletions
diff --git a/index.js b/index.js
index a3bd2d8..521a28d 100644
--- a/index.js
+++ b/index.js
@@ -166,36 +166,28 @@ server.get('/', async (req, res) => {
         margin-left: 2em;
         font-style: italic;
     }
+    span.time {
+        font-style: italic;
+    }
     div.container {
         display: flex;
         flex-wrap: wrap;
     }
-  </style>
-  <script>
-    function enqueue(ids){
-        ids.forEach(id => {
-            fetch("/"+id)
-        })
+    h2 {
+        margin: 0;
+        font-size: 16px;
+        display: inline;
+        margin-right: 1em;
     }
-    function random(){
-        fetch("/random")
+    li {
+        border: 1px solid gray;
+        margin: 0.5em;
     }
-    function playlist(){
-      var intervalId = setInterval(function() {
-        fetch("/playlist").then(res => res.json()).then(res => {
-            let el = document.getElementById("playlist")
-            el.innerHTML = ''
-            res.items.forEach(song => {
-                var li = document.createElement("li");
-                let text = song.title + " (" + (song.duration/60).toFixed(2) + " minutes)"
-                li.appendChild(document.createTextNode(text))
-                el.appendChild(li)
-            })
-        })
-      }, 5000);
+    li button {
+        float: right;
     }
-    window.addEventListener('load', event => playlist());
-  </script>
+  </style>
+  <script src="/main.js"></script>
   <div>
     <h1>Now playling</h1>
     <ol id="playlist"><ol>
@@ -251,6 +243,20 @@ server.get('/playlist', async (req, res, next) => {
   res.send(playlist_items)
 })
 
+server.get('/main.js', async (req, res, next) => {
+  res.sendFile(__dirname + "/main.js")
+})
+
+server.get('/delete/:id', async (req, res, next) => {
+  fetch(`${config.baseURL}/post`, {
+      "credentials": "include",
+      "headers": headers(),
+      "body": `delete_music=${req.params.id}`,
+      "method": "POST",
+  })
+  res.send("ok")
+})
+
 server.get('/:id', async (req, res, next) => {
   enqueue(req.params.id)
   res.send("ok")
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..2fc0098
--- /dev/null
+++ b/main.js
@@ -0,0 +1,32 @@
+function enqueue(ids){
+    ids.forEach(id => {
+        fetch("/"+id)
+    })
+}
+function delete_item(index){
+    fetch(`/delete/${index}`)
+}
+function random(){
+    fetch("/random")
+}
+function playlist(){
+  function f(){
+    fetch("/playlist").then(res => res.json()).then(res => {
+        let el = document.getElementById("playlist")
+        el.innerHTML = ''
+        res.items.forEach((song, i) => {
+            var li = document.createElement("li");
+            let time = "(" + (song.duration/60).toFixed(2) + " minutes)"
+            let my_html = `<div><h2>${song.title}</h2>
+                  <span class="time">${time}</span>
+                  <button onclick="delete_item(${i})">X</button>
+                </div>`
+            li.innerHTML = my_html
+            el.appendChild(li)
+        })
+    })
+  }
+  var intervalId = setInterval(f, 5000);
+  f()
+}
+window.addEventListener('load', event => playlist());