From: 2weiEmu <saalbach.robert@outlook.de>
Date: Tue, 2 Jun 2026 13:58:44 +0000 (+0200)
Subject: updated: song file list some work, not filtered yet
X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=a4f34971c4b5d30abd887b90e9daffcc6cd5c55f;p=binbsis50-sm.git

updated: song file list some work, not filtered yet
---

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 2356cd3..655e49e 100755
Binary files a/songmanager and b/songmanager differ