added: more room visualisation, adding and removing soon

diff --git a/public/js/room.js b/public/js/room.js
index 279129b45643936c1e9da9567fb77b89beda2ee1..b34396a03e0191b23ff992e5d077396c33f4e433 100644 (file)
--- a/public/js/room.js
+++ b/public/js/room.js
@@ -1,3 +1,17 @@
+/**
+ * ADD / REMOVE FROM ROOMS
+ **/
+let currentRoom = ""
+
+
+function removeSongFromRoom(event) {
+
+}
+
+function addSongToRoom(event) {
+
+}
+
 /**
  * SONG LIST
  **/
@@ -20,13 +34,37 @@ async function getSongList() {
  * LIST ELEMENTS
  **/
 
-function makeListElementWithSong(song) {
+function makeInListElementWithSong(song) {
        let el = document.createElement("div")
        el.id = song.Key // should be unique on page
 
        let text = document.createElement("p")
        text.innerText = song.DisplayTrackName + " by " + song.DisplayArtistNames
+       
+       let removeButton = document.createElement("button")
+       removeButton.addEventListener("click", (e) => { removeSongFromRoom(e) })
+       removeButton.innerText = "Remove"
+
+       el.appendChild(text)
+       el.appendChild(removeButton)
+
+       return el
+}
+
+
+function makeOutListElementWithSong(song) {
+       let el = document.createElement("div")
+       el.id = song.Key // should be unique on page
+
+       let text = document.createElement("p")
+       text.innerText = song.DisplayTrackName + " by " + song.DisplayArtistNames
+
+       let addButton = document.createElement("button")
+       addButton.addEventListener("click", (e) => { addSongToRoom(e) })
+       addButton.innerText = "Add"
+
        el.appendChild(text)
+       el.appendChild(addButton)
 
        return el
 }
@@ -78,6 +116,7 @@ roomSelect.addEventListener("change", async (event) => {
                return
        }
        let ids = await response.json()
+       currentRoom = room
 
        // now that we have the songs and their ID's we can arrange the lists correctly
        let inList = songList.filter((v, _i, _a) => { return ids.includes(v.Key.replace("song:", "")) })
@@ -85,7 +124,7 @@ roomSelect.addEventListener("change", async (event) => {
        inRoomList.innerHTML = ""
        for (let i = 0; i < inList.length; i++) {
                let song = inList[i]
-               inRoomList.appendChild(makeListElementWithSong(song))
+               inRoomList.appendChild(makeInListElementWithSong(song))
        }
 
        let outList = songList.filter((v, _i, _a) => { return !ids.includes(v.Key.replace("song:", "")) })
@@ -93,7 +132,7 @@ roomSelect.addEventListener("change", async (event) => {
        outRoomList.innerHTML = ""
        for (let i = 0; i < outList.length; i++) {
                let song = outList[i]
-               outRoomList.appendChild(makeListElementWithSong(song))
+               outRoomList.appendChild(makeOutListElementWithSong(song))
        }
 })