From a4f34971c4b5d30abd887b90e9daffcc6cd5c55f Mon Sep 17 00:00:00 2001
From: 2weiEmu <saalbach.robert@outlook.de>
Date: Tue, 2 Jun 2026 15:58:44 +0200
Subject: [PATCH] updated: song file list some work, not filtered yet

---
 public/css/index.css |   9 +++++++++
 public/index.html    |  12 +++++++++++-
 public/js/index.js   |  44 +++++++++++++++++++++++++++++++++++++++++--
 songmanager          | Bin 11691100 -> 11691100 bytes
 4 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index 486003d..f4b7374 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2,6 +2,11 @@
 	font-family: sans-serif;
 }
 
+#innerSongList, #innerSongFileList {
+	max-height: 50vh;
+	overflow-y: scroll;
+}
+
 
 .songElement {
 	display: flex;
@@ -32,6 +37,10 @@
 	}
 }
 
+.songFileElement {
+	display: flex;
+}
+
 #editMenu {
 	top: 10vh;
 	left: 25vw;
diff --git a/public/index.html b/public/index.html
index 86007f3..99a803f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,9 +19,19 @@
 				<input id="songFilterInDB" type="checkbox">In DB</input>
 				<button id="" onclick="getSongList()">Update Songs</button>
 			</div>
-			<div id="innerSongList">
 
+			<div>
+				<button>Create New Song</button> <!-- TODO -->
+				<button>Upload Song File</button> <!-- TODO -->
+			</div>
+			<div id="innerSongList">
 			</div>
+
+		</div>
+		<div id="songFileFilterInputs">
+			<input placeholder="File name..." id="songFileFilterName"></input>
+		</div>
+		<div id="innerSongFileList">
 		</div>
 	</body>
 
diff --git a/public/js/index.js b/public/js/index.js
index 473cebc..5a2b537 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -8,8 +8,45 @@ function sleep(ms) {
 /**
  * SONG FILE LIST SECTION
  */
-
 let songFileList = []
+let innerSongFileList = document.getElementById("innerSongFileList")
+
+function renameSongFile(songFileName) {
+
+}
+
+/**
+ * Create a new song file element (simply the name, with a rename button)
+ * <div fileName="{FILENAME}" class="songFileElement">
+ *	<p>SONG_FILE_NAME</p>
+ *	<button onclick="renameSongFile(this.parentElement.fileName)">Rename</button>
+ * </div>
+ **/
+function NewSongFileElement(songFileName) {
+	let songFileElement = document.createElement("div")
+	songFileElement.classList = "songFileElement"
+	songFileElement.fileName = songFileName
+	
+	let songFileNameP = document.createElement("p")
+	songFileNameP.innerText = songFileName
+
+	let renameButtonSongFiles = document.createElement("button")
+	renameButtonSongFiles.innerText = "Rename"
+	renameButtonSongFiles.addEventListener("click", (_) => { renameSongFile(songFileName) })	
+
+	songFileElement.appendChild(songFileNameP)
+	songFileElement.appendChild(renameButtonSongFiles)
+
+	return songFileElement
+}
+
+
+function makeSongFileList(songFiles, appendElement) {
+	for (let i = 0; i < songFiles.length; i++) {
+		appendElement.appendChild(NewSongFileElement(songFiles[i]))
+	}
+}
+
 /**
  * Get the list of all named song files (raw filenames) using the API
  * The API endpoint is /api/files/get
@@ -18,10 +55,12 @@ async function getSongFileList() {
 	await fetch("/api/files/get", {'Accept': 'application/json', 'Content-type': 'application/json'}).then(async (response) => {
 		let body = await response.json()
 		songFileList = body
+
+		innerSongFileList.innerHTML = ""
+		makeSongFileList(songFileList, innerSongFileList)
 	})
 }
 
-getSongFileList()
 let innerSongList = document.getElementById("innerSongList")
 
 /**
@@ -283,6 +322,7 @@ async function updateSongUsingEditMenu() {
 /**
  * SETUP / RUN AT START SECTION
  **/
+getSongFileList()
 getSongList()
 
 // ==============================================================
diff --git a/songmanager b/songmanager
index 2356cd3f43cc9c7b24c2702b74d5c94344736b79..655e49eb710815f295b2fc9ad105a266446d6fde 100755
GIT binary patch
delta 1031
zcmca};v_2wZ^+@V&j~P1c1q7G_A@RGcd^iQ3iNRE(yuaijjGJ>$qCeT_cr!R$*u4(
zNz*S5@(VMK$VfKI%gd>9G_K5!EYHz5H_!G<EHcgU_Kv7D2@cMy$}M(bU}0cj5Mf|o
zU}j)oaQ6#kxNgkU!+3x5;}W6vE$=!!3+-NI2k7TyCYhP&H^1g@f6dR>{+geu{WU*x
z`)hud_SgKZ?XUUS+F$dtx4-7+Xn)Pm+5VcJtNk@Ucl&F8p7z)LyzQ^~`PyIegY*it
zzvdTgf6Xt{{+eI7{WZTx`)hvD_SgJk?XUU8+h6lbw7=$;Y=6x!)&81ay8Si3O#5qo
z+4k4`a_z7A<=bELE407nS8RXHuhjmUU%CA?ze@XSe%1EZ{A%s5`PJKB^J}!f=GSb0
z&9Bw|nqRy9HNQ^#YkuAK*Zg|zule=cU-KKZzvee=f6Z^y{+i#o{WZTy`)hvF_SgJo
z?XUUG+h6lrw7=%JY=6yf)&82_y8Si3P5Wzp+xFM|cI~hE?b~1TJG8&%cWi&n@6`U9
z-?{xYzf1dTe%JQb{BG^9`Q5j_=JyZ{6*e+7F*Y#OO-eCNNij@HvM{nR-`?3!BFwCT
zEM$^sl9FVQW@u@Ulx&b<nrLico@`)bVrXEQY&_jB!$X?G$k58f*vi1Py)eV0y)eVG
zy)eV8y)eVOy)eV4y)eVKy)eVCy)eVSy)Yx7y)YxNy)YxFy)YxVy)YxBy)YxRy)YxJ
zy)YxZy)Yx9y)YxPy)YxHy)YxXy)YxDy)YxTy)YxLy)Yxby)Yx8y)YxOy)YxGy)YxW
zy)YxCy)YxSy)YxKy)Yxay)YxAy)YxQy)YxIy)YxYy)YxEy)YxUy)YxMy)Yxcy)dJo
zy)dJ&y)dJwy)dJAdtpWis|3}9VR~VPhkm<QOG&#}OKH1UOIf>EOL@CkOGUd_OJ%!Q
zOI5pAOLe<gOHI32OKrPYOI^EIOMSaoOGCR@OJloOOH;d8OLMzeOG~?0OKZDWOIy2G
zOMAOmOGmp{OJ}=SOIN#COLx0iOHaF4OK-baOJBQKOMkmq%Y=5ZmWl0REtA^CS|+!P
zwM=OjYnj?E)-tVKtYvz;Sj&udv6h+bVlA`U#ad>!i?z&Y7i*c@F4i)yU94q(yI9MD
zcCnU)?P4v9+QnKHw~MtbX%}l*+Ah|ztX-^SdAnH4igvM<mF;3JtJ=j{R=10_tZ5f(
ZS=%nwvaVgMWqrF?%ZBY@EgRh)007&Gj?@4E

delta 1031
zcmca};v_2wZ^+@VcPfw1aq&(`H?cG_DD+4*EX<4W(N77Bii+~9D$g&kvd9k3a59fH
z&ebmt@(VMK$VfKI%gd>9G_K5!EYHz5_o%AOj|xoBsdUK?&NhgzOieXqU}0cj5Mf|o
zU}j)oaQ6#kDC>@TKV$KkQ_crBFuEITlP$EAP1n!KOfoakZ+^|+{+ge${WU*R`)hvY
z_SgI@?XUS++h6muwZG<PZ-33t(f*pBv;8$cSNm&z?)KOGJngUfdD~y}^R>U`2k8}P
zf6Xu0{+eH?{WZUE`)huY_SgKP?XUU8+F$dFx4-6>Xn)Nw+5Vbes{J*;bo*<5nfBNG
zvhA<=<=S8K%eTMgS7?9Duh{;YU#a~yzjFI)ewFsu{HpD*`PJHA^Q*VN=GSO{&9B-1
znqRB^HNSTIYkr;f*ZjKeule=bU-Rp?zvee+f6Z^${+i#Y{WZUF`)hua_SgKT?XUUG
z+F$dVx4-7MXn)Ob+5Vc}s{J*;b^B|6oA%fIw(YO^?b=`S+qb{wcW8gj@7VsD->LmI
zzjOO*ewX&w{I2b<`Q6%I^Sf_<&F>)^Dr{(BYGGudYnGB`l4P1_k(g#;vc0pRM3`9v
zSt!Naz|_px!ra`zz$nquI5{oZIK|k&FgZCfC2_i6hKDqVp@o&Hg_V&-dtru0dtruW
zdtruGdtrumdtru8dtruedtruOdtruudtpXEdtpXkdtpXUdtpX!dtpXMdtpXsdtpXc
zdtpX+dtpXIdtpXodtpXYdtpX&dtpXQdtpXwdtpXgdtpX=dtpXGdtpXmdtpXWdtpX$
zdtpXOdtpXudtpXedtpX;dtpXKdtpXqdtpXadtpX)dtpXSdtpXydtpXidtpX?dtpXF
zdtpXldtpXVdtpZL_QH%3Rtc&H!}P)o5B+wrmXda{meO{yma=xSmhyJ7mWp<<mdbXq
zma2BKmg;t~mYR04mfCi)mb!Mamil(FmWFn*md19mmZo;GmgaV`mX>z0mezK$mbP}W
zmiBhBmX3C@md<vumacZOmhN`3mY#O8mfm);mcDkemi~6JmI>`*Efd?tS|+uNwM=do
zYnjq6)-ttStYuoeSj+Twv6dO_Vl6Y<#ad>yi?z&d7i*c*F4i))U94qZyI9NocCnTP
z?P4tp+r?TIwTrbZZWn7=(k|Arv|X%aS-V)v@^-P7742dzE8E3dR<(<@tZo-;S<^1o
ZvbJ5UWnH^i%ldY)mJQp*S~j{p0068tkURhY

-- 
2.54.0