]> git.example.dev Git - binbsis50-sm.git/commitdiff
projects / binbsis50-sm.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 03ab6fb)
updated: styling and corrected functionality for rooms page
author2weiEmu <saalbach.robert@outlook.de>
Wed, 17 Jun 2026 15:00:57 +0000 (17:00 +0200)
committer2weiEmu <saalbach.robert@outlook.de>
Wed, 17 Jun 2026 15:00:57 +0000 (17:00 +0200)
public/css/index.css patch | blob | blame | history
public/img/reload-icon.png [new file with mode: 0644] patch | blob
public/img/remove-button.png [new file with mode: 0644] patch | blob
public/index.html patch | blob | blame | history
public/js/room.js patch | blob | blame | history
public/rooms.html patch | blob | blame | history
songmanager patch | blob | blame | history

diff --git a/public/css/index.css b/public/css/index.css
index dcb36a34253639770dc440914827515cbc4b1a8e..5cfded840a9d37ba2d1c272c846fdaf90af030eb 100644 (file)
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -185,3 +185,81 @@ button {
 #filler {
        height: 200px;
 }
+
+#listWrapper {
+       display: grid;
+       grid-template-columns: 49% 5px 49%;
+}
+
+#controlWrapper {
+       margin: 0 20% 0 20%;
+       display: flex;
+       justify-content: space-between;
+
+       img {
+               height: 42px;
+       }
+}
+
+#roomSelect {
+       width: 60%;
+
+       background-color: var(--lighter-background);
+       border: none;
+       padding: 12px 24px 12px 24px;
+       border-radius: 15px;
+       color: var(--green-background);
+       font-size: 16px;
+       font-family: "Sansita", sans-serif;
+}
+
+#inRoomList, #outRoomList {
+       padding: 0;
+}
+
+.songElementRooms {
+       display: flex;
+       background-color: var(--lighter-background);
+       margin: 10px 5px 10px 5px;
+       padding: 20px 0 20px 0;
+       border-radius: 10px;
+
+       .songElementBorder {
+               border-right: 5px solid var(--green-background);
+       }
+
+       .presentImage {
+               padding: 0 20px 0 20px;
+       }
+
+       .songElementTitle {
+               font-size: 24px;
+               color: var(--green-foreground);
+       }
+
+       .songElementArtist {
+               font-size: 16px;
+               color: var(--green-background);
+       }
+
+       * {
+               margin: auto 15px auto 15px;
+       }
+
+       p {
+               font-size: 16px;
+       }
+
+       img {
+               height: 42px;
+               width: 42px;
+       }
+
+
+}
+
+#inoutborder {
+       margin: 20px 0px 20px 0;
+       background-color: var(--green-foreground);
+       border-radius: 5px;
+}
diff --git a/public/img/reload-icon.png b/public/img/reload-icon.png
new file mode 100644 (file)
index 0000000..a357fa5
Binary files /dev/null and b/public/img/reload-icon.png differ
diff --git a/public/img/remove-button.png b/public/img/remove-button.png
new file mode 100644 (file)
index 0000000..1d73187
Binary files /dev/null and b/public/img/remove-button.png differ
diff --git a/public/index.html b/public/index.html
index c93e54abb03793c0671edb6e0c72fad50ae4a6f7..3fd052f9fb343dcf8278513080e777f81659b6da 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,6 @@
        </head>
 
        <body>
-
                <h1><a href="/rooms.html">See Rooms →</a></h1>
                <div id="outerSongList">
                        <h1>Songs</h1>
diff --git a/public/js/room.js b/public/js/room.js
index f73ffa4db0a736f65e5166dc030b0b80cf84fcc1..c63e8901525ab2a6942406fff2e9984d7b73443d 100644 (file)
--- a/public/js/room.js
+++ b/public/js/room.js
@@ -49,7 +49,7 @@ let outRoomList = document.getElementById("outRoomList")
 
 async function removeSongFromRoom(event) {
        // first make the request
-       let changeId = event.target.parentElement.id.replace("song:", "")
+       let changeId = event.target.parentElement.parentElement.id.replace("song:", "")
        console.log(changeId)
 
        let response = await fetch("/api/rooms/remove/" + currentRoom, {
@@ -63,12 +63,15 @@ async function removeSongFromRoom(event) {
        }
 
        // then we just manually move elements
-       outRoomList.appendChild(event.target.parentElement)
+       event.target.src = "/img/add-song-button.png"
+       event.target.removeEventListener("click", removeSongFromRoom)
+       event.target.addEventListener("click", addSongToRoom)
+       outRoomList.appendChild(event.target.parentElement.parentElement)
 }
 
 async function addSongToRoom(event) {
        // first make the request
-       let changeId = event.target.parentElement.id.replace("song:", "")
+       let changeId = event.target.parentElement.parentElement.id.replace("song:", "")
 
        let response = await fetch("/api/rooms/add/" + currentRoom, {
                method: "PUT",
@@ -81,7 +84,10 @@ async function addSongToRoom(event) {
        }
 
        // then we just manually move elements
-       inRoomList.appendChild(event.target.parentElement)
+       event.target.src = "/img/remove-button.png"
+       event.target.removeEventListener("click", addSongToRoom)
+       event.target.addEventListener("click", removeSongFromRoom)
+       inRoomList.appendChild(event.target.parentElement.parentElement)
 }
 
 /**
@@ -107,38 +113,78 @@ async function getSongList() {
  **/
 
 function makeInListElementWithSong(song) {
-       let el = document.createElement("div")
-       el.id = song.Key // should be unique on page
+       let wrapper = document.createElement("div")
+       wrapper.classList = "songElementRooms"
+       wrapper.id = song.Key
 
-       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"
+       let borderWrapper = document.createElement("div")
+       borderWrapper.classList = "songElementBorder"
+
+       let presentImage = document.createElement("img")
+       presentImage.classList = "presentImage"
+       presentImage.src = "/img/remove-button.png"
+       borderWrapper.appendChild(presentImage)
+
+       let artwork = document.createElement("img")
+       artwork.src = song.ArtworkURL60
+
+       let titleWrapper = document.createElement("div")
+       let songTitle = document.createElement("p")
+       songTitle.classList = "songElementTitle"
+       songTitle.innerText = song.DisplayTrackName
+
+       let songArtist = document.createElement("p")
+       songArtist.classList = "songElementArtist"
+       songArtist.innerText = song.DisplayArtistNames
+
+       titleWrapper.appendChild(songTitle)
+       titleWrapper.appendChild(songArtist)
 
-       el.appendChild(text)
-       el.appendChild(removeButton)
+       wrapper.appendChild(borderWrapper)
+       wrapper.appendChild(artwork)
+       wrapper.appendChild(titleWrapper)
 
-       return el
+       presentImage.addEventListener("click", removeSongFromRoom)
+
+       return wrapper
 }
 
 
 function makeOutListElementWithSong(song) {
-       let el = document.createElement("div")
-       el.id = song.Key // should be unique on page
+       let wrapper = document.createElement("div")
+       wrapper.classList = "songElementRooms"
+       wrapper.id = song.Key
+
+       let borderWrapper = document.createElement("div")
+       borderWrapper.classList = "songElementBorder"
+
+       let presentImage = document.createElement("img")
+       presentImage.classList = "presentImage"
+       presentImage.src = "/img/add-song-button.png"
+       borderWrapper.appendChild(presentImage)
+
+       let artwork = document.createElement("img")
+       artwork.src = song.ArtworkURL60
+
+       let titleWrapper = document.createElement("div")
+       let songTitle = document.createElement("p")
+       songTitle.classList = "songElementTitle"
+       songTitle.innerText = song.DisplayTrackName
+
+       let songArtist = document.createElement("p")
+       songArtist.classList = "songElementArtist"
+       songArtist.innerText = song.DisplayArtistNames
 
-       let text = document.createElement("p")
-       text.innerText = song.DisplayTrackName + " by " + song.DisplayArtistNames
+       titleWrapper.appendChild(songTitle)
+       titleWrapper.appendChild(songArtist)
 
-       let addButton = document.createElement("button")
-       addButton.addEventListener("click", (e) => { addSongToRoom(e) })
-       addButton.innerText = "Add"
+       wrapper.appendChild(borderWrapper)
+       wrapper.appendChild(artwork)
+       wrapper.appendChild(titleWrapper)
 
-       el.appendChild(text)
-       el.appendChild(addButton)
+       presentImage.addEventListener("click", addSongToRoom)
 
-       return el
+       return wrapper
 }
 
 
diff --git a/public/rooms.html b/public/rooms.html
index fd2d994a18b0c8dafb49ec827a6bc2d95997ff55..0c157e16fbd36e4d678ce9cbad760ae207b27b97 100644 (file)
--- a/public/rooms.html
+++ b/public/rooms.html
@@ -11,20 +11,22 @@
        </head>
 
        <body>
-               <a href="/">Home</a>
-               <button id="restartButton">Restart (should update rooms)</button>
-               <button id="createRoomButton">Make a New Room</button>
-               <label for="rooms">Select a Room to View</label>
-               <select name="rooms" id="roomSelect">
-                       
-               </select>
-               <ul id="inRoomList">
-               </ul>
+               <h1><a href="/">← Home</a></h1>
 
-               <hr>
-
-               <ul id="outRoomList">
-               </ul>
+               <h1>Rooms</h1>
+               <div id="controlWrapper">
+                       <select name="rooms" id="roomSelect"></select>
+                       <img src="/img/reload-button.png" id="restartButton"></img>
+                       <img src="/img/add-song-button.png" id="createRoomButton"></img>
+               </div>
+               <div id="listWrapper">
+                       <ul id="inRoomList">
+                       </ul>
+                       <div id="inoutborder"></div>
+                       <ul id="outRoomList">
+                       </ul>
+               </div>
+               <div id="filler"></div>
        </body>
 
        <script src="/js/room.js"></script>
diff --git a/songmanager b/songmanager
index 0758ad0080edc54694507519de2f239b6bbdba4d..3c7f9423964d00b28478bab5d121309621309462 100755 (executable)
Binary files a/songmanager and b/songmanager differ
Unnamed repository; edit this file 'description' to name the repository.