From: 2weiEmu Date: Wed, 17 Jun 2026 15:00:57 +0000 (+0200) Subject: updated: styling and corrected functionality for rooms page X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=017ba27ceade0cd7d9db9d4e3cb069389a550795;p=binbsis50-sm.git updated: styling and corrected functionality for rooms page --- diff --git a/public/css/index.css b/public/css/index.css index dcb36a3..5cfded8 100644 --- 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 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 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 c93e54a..3fd052f 100644 --- a/public/index.html +++ b/public/index.html @@ -12,7 +12,6 @@ -

See Rooms →

Songs

diff --git a/public/js/room.js b/public/js/room.js index f73ffa4..c63e890 100644 --- 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 fd2d994..0c157e1 100644 --- a/public/rooms.html +++ b/public/rooms.html @@ -11,20 +11,22 @@ - Home - - - - - +

← Home

-
- - +

Rooms

+
+ + + +
+
+
    +
+
+
    +
+
+
diff --git a/songmanager b/songmanager index 0758ad0..3c7f942 100755 Binary files a/songmanager and b/songmanager differ