From 017ba27ceade0cd7d9db9d4e3cb069389a550795 Mon Sep 17 00:00:00 2001
From: 2weiEmu <saalbach.robert@outlook.de>
Date: Wed, 17 Jun 2026 17:00:57 +0200
Subject: [PATCH] updated: styling and corrected functionality for rooms page

---
 public/css/index.css         |  78 ++++++++++++++++++++++++++++
 public/img/reload-icon.png   | Bin 0 -> 526 bytes
 public/img/remove-button.png | Bin 0 -> 695 bytes
 public/index.html            |   1 -
 public/js/room.js            |  96 ++++++++++++++++++++++++++---------
 public/rooms.html            |  28 +++++-----
 songmanager                  | Bin 11702364 -> 11702364 bytes
 7 files changed, 164 insertions(+), 39 deletions(-)
 create mode 100644 public/img/reload-icon.png
 create mode 100644 public/img/remove-button.png

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 0000000000000000000000000000000000000000..a357fa5d5db56aed7dc7537472f9e48de1660b8f
GIT binary patch
literal 526
zcmeAS@N?(olHy`uVBq!ia0y~yV31&7V36csV_;y=)_xbuz`(#+;1OBOz`!jG!i)^F
z=73Z%76-XIF|0c$^OAvqfhFD1*O7r?V?XzwL{<g{2EG#4h?3y^w370~qErUA%=FyE
zc^juCGcYiAdb&7<R4{Ixx>29SQRLYEQmzsap{on8UiiSi!bB-*YRiQ#x1D!OxmY{v
z9YTaSdtJ1*>{`9fGB6;fg{l4h-E*hzRT%Hy92x)V^xd<wf8LutbM{P*I@c$&&rCEm
z^3Gb~t9P=qGh0ew_6HVqkM0^t;a-z%3q{IYcj<lJEt4F+Niq4KwONo+{VbJK)zIsk
zuBPp;Kal^=E$%`1S<ws2bg!D6w3u}BW|l&|W_8!pzE9N`6X$rP-9G6pFw^VpsdSrT
zMrm9p>z?M?ZJTn8?aoy1-+qpt<C^+5ne6LbH`)19fJx)sg60C>NwG!IDhI7rT{MWi
zD0F7AQ)aepQ@!7YuC7%5i`IYIwLOfQxmV{-@KKJr$z1I_?eYPMFRRU;xJ~7L=kd|f
z&w9($2ii8~i$g1W_N(t+e`24zQZrA~hZ)_D!oOT4Z_j;t_N`OA-cK9l+sp3TRW|)z
zmFM_#v4?4OpNgW*;m!3z5n3}{(u%v9>I-k)`OHvU>GoQqur8%xkN9^FzJ#*R@+TQ3
dTaW)>cia0pcH*B0It&a944$rjF6*2UngGq|-ah~U

literal 0
HcmV?d00001

diff --git a/public/img/remove-button.png b/public/img/remove-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d7318778c29e5f564c786cf82570b26df8a47fe
GIT binary patch
literal 695
zcmeAS@N?(olHy`uVBq!ia0y~yV9)|#4mJh`hNFj1Ml&!la29w(7Bet#3xhBt!>l<H
z3=9m6#X;^)4C~IxykuZtU`coMb!1@J*w6hZk(Gggfv?0hq9iy!t)x7$D3!r2Gd(wP
z-o|Ok3=B+0o-U3d6^w6Z`sdwp5IMI0`+`t0(M?miZ!oQF^gX%gb=hrK)jWakEWG9m
z)K^$KK44qB>xI$VUEM(|xncz#GB4S5H8jN4xHg%~>A{f>2OEz+W@gP3>ujq3{g6Jy
z)${oMIo?ygK}*GE#0yMepU}MZ0%s$e*Gu_?nw2|y`B(qxnxM=fvnTYz^4Hx@g$yrD
zPQG9M`eLs5T`jA=`pyNfasmqkmG21Nth+XS<|3t^bwNj!7HoJWw{?1yxU}BmhcjiE
zM7-C(x_1AJ`G-I3!JZ=enH+lRdd6v@vax@8R)knJ`)b@>CuinVJgckk@xtW|#g<<a
z#81k{{67A!aMHc1i8hV3lh~Fol3PC4YVC@W1%_`#OqYZ{y?E7?`<s{49CeF~O;^6C
z>a<VEGn_H+U|CA-L6*BMPdgSL=eL-CpS^vf@*7w4v*$Xdeb%e^`p0zJ+2{H5i`L(~
z|I2r?@gfy%^<LS8`q$=X<4P`XIN6k7&*?qAKf&@-l6gWU>tC+Zh9~8-mrYIDucT@F
zs95iDRl?6=sh?99_rLMxQe67>P~0U6BiVVU{+Mssvg-1La;2<QTJ7Z<c=QU>XE~i`
z`?Kmc$5z+=hPHRVrY_(7rBd^R?B9Ja1TS-Pxg7gecXloN=UngLjJF#EMIs}EPr7<K
zKa0`dwEWY09~0S!2QPHKk=~MOtzP_IA^msSi@P2^XQR*h_bQa8+VKA`f91oWZPcYY
zFJ#gm&lP4TS6{m?;C)@(sC0JZMIVcDPQRb*A*I_6Ok_-QV_;xl@O1TaS?83{1OS(K
BG64Vp

literal 0
HcmV?d00001

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 @@
 	</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 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 @@
 	</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
GIT binary patch
delta 1037
zcmcb!;1nweZ^+@VFSj%eiE<3I^f1mTFUm+R_46@G);IDB&M_|XHVn;($V)b^2nx+E
zs?ZNDPYJF{F{|{-j&wIINXyOj%+Jv`&MGhsEKW@|@N+XLOsUGvFewRRU}0cj5Mf|o
zU}j)oaQ6#kDBq(I`LtZ~i$r8;cdNq3-CAFDQ}uH)lgv!?n_u&{zvgFbf6dR-{+ge;
z{WU*J`)hvI_SgJu?XUUS+h6l@w7=%(Y=6zq)&82FyZtpkPy1_r-uBo0eC@CKL3#z+
zU-JvLzvdTef6Xu4{+eH;{WZU6`)hu&_SgL4?XUSI+F$caw!h|=YJbfy-Ts<iru{X)
zZ2N0|x%Sum^6jtr7203(E4IJpS89LFuiXBcU#0yuziRtyezo@3{Oawm`8C>K^J})h
z=GSU}&9B}5nqQ~=HNS5AYks}<*ZlhJulWtyU-KKbzvee;f6Z^){+i#U{WZU7`)hu)
z_SgL8?XUSQ+F$cqw!h}LYJbgd-Ts>2ru{X)ZTo9}yY|=o_U*6v9ok>>JGQ^(cWQsl
z@7(^H-=+OEziazzez*45{O;Rd^LuPb6EQb5HZ?Y}&^0hlOfpMLN-;4qNZH;wp+uNj
z16e51z{u3hD9O|^(ZJZqBr!3~*uc`rD9t1>H7R-eyGjp9F7psWV=Gf*D-(-$!77h-
z!79&o!78tI!7A@|!7872!7AT&!79IY!7BfD!K#3E!K%P^!K$Ek!K&bP!K#pU!K%=9
z!K$!!!K(0f!K#RM!K%o1!K$cs!K&zX!K#>c!K&DH!K%1+!K(On!K#FI!K%b|!K$Qo
z!K&nT!K##Y!K&1D!K$=&!K(Cj!K#dQ!K%!5!K$ow!K&<b!K$2g!K&PL!K%D=!K(ar
z!K#9G!K%V`!K$Km!K&izf>k9cVzdZ}>4H@r`t4#<O4`Myl(vgaDQg#-Qr<2$rJ`MI
zN@cs)l&W^IDb?*_Q)=49rqs5JO{r@an^NB{Hl?9mY)WIh*p#Mru_?{%VpCe$#iq2j
zi%n^37n{=FE;gm3U2IBcyV#VjcCjhl?P61U+Qp{ywu?>aYZsf+-!3*~Lc7?MiS1%j
zCbf%AncOZmWlFo)l&S4vQ>L|xO_|;<Hf2V;*p!*=VpC?di%pr`E;eOOyV#Vu?P62r
zwTn%e-!3*~LA%(Lh3#Tf7PX5_S==r*Wl6i(l%?%rQ<k-hO<CS9Hf2S-*p!v+VpCSN
ki%nVGE;eONyV#Vq?P62bwTn$z-!3*~!*;PL8{Pf@0Qg>sW&i*H

delta 1037
zcmcb!;1nweZ^+@VH!sX9i?8%?&vDN&O%E<8PpL34)Heu9Pjkty2usbebSrjB&(<vq
zFxC$(PYJF{F{|{-j&wIINXyOj%+JwxD~t$9$td@;@CuH~3aAQ*O!Tc}U}0cj5Mf|o
zU}j)oaQ6#kXc9X4qO<XE&eSa{TxU-!lAY|W?4h5NnPg_7-~5`t{WU*h`)hut_SgK(
z?XUS++F$dtw!h|QYk$qp-u{}Oqy05MXZve@uJ+gb-0iRVdD>s|^R~a{=WBn>57H~p
z{+eH~{WZT(`)hvT_SgI(?XUSo+h6mGwZG;UZ-31%(f*oWvi&u`RQqdw>Gs$BGVQPV
zW!qo#%eBAemv4W~uh9OQU$Ol)zf${ae&zPp{3`9Q`BmFr^Q*PL=2vfj&9Bk^nqRa1
zHNRH-Ykuwa*Zex|ulaS`U-Rp=zvkC(f6Z^u{+i#g{WZT)`)hvV_SgI-?XUSw+h6mW
zwZG;!Z-32i(f*p>vi&u`Rr_mx>-N|DHtnzZZQEb-+qJ*uw{L&V@6i65-?9BQzf=2b
ze&_br{4VXU`CZ#z^Siab=6B!zn%`qfnuwX9iII_!scy1aYI3S&Vw#1SQR4Q_2_?eJ
z8puK>$%bYoCP_vqiDrpO7AeL?X32?WDJBLMX(^V|-&J}@a+!q~nphbbSs9tO3s!lw
z3s!ly3s!lx3s!lz3s(8G3s(8I3s(8H3s(8J3swcR3swcT3swcS3swcU3s!}+3s!};
z3s!}-3s!}<3syz63syz83syz73syz93s%Ln3s%Lp3s%Lo3s%Lq3sxnx3sxnz3sxny
z3sxn!3s$AH3s$AJ3s$AI3s$AK3sz;c3sz;e3sz;d3sz;f3s&W{3s&W}3s&W|3s&W~
z3sx1h3sx1j3sx1i3sx0x7py8t5u-&&Oc$*3&~F!;QqnFqrL<jaN?E(ul=615DHZKv
zQ!3lVrc||yO{s1dn^My*Hl?;*Y)W0b*p&Kqu_+DhVpAI1#ilg1i%n^67n{=3E;gmL
zU2IBQyV#WWcCjfP?P60p+r_4IwTn&ZZWo)<(=Ilpw_R*XU%S|p{&uk`6WYb5Ol%jM
zGO1l`%H(#jDO1|Trc7-Yn=-9kY|8X@u_-g!#iq<`7n?GxU2MwicCjgQ+Qp{KZ5Nv|
zuU%}){C2S^3);n|ENmB>vZ!5b%HnphDNEYLrYvn2o3gB3Y|8R>u_-Is#ip!m7n`!G
kU2MwgcCjgI+Qp`<Z5Nxeu3c=(`gXA?8@7v0+35BM0KMpot^fc4

-- 
2.54.0