From: 2weiEmu <saalbach.robert@outlook.de>
Date: Fri, 22 May 2026 14:29:52 +0000 (+0200)
Subject: updated: added basic song element creation
X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=2b4108bf164c19a4ead259e957de984257bba492;p=binbsis50-sm.git

updated: added basic song element creation
---

diff --git a/public/css/index.css b/public/css/index.css
index facd4cc..826e097 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2,19 +2,7 @@
 	font-family: sans-serif;
 }
 
-#editElement {
-}
 
-ul {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-}
+.songElement {
 
-#editElement {
-	padding: 20px;
-	border-radius: 5px;
-	background-color: #d9d9d9;
-	border: 1px solid gray;
-	box-shadow: 5px 5px 5px 5px #d9d9d9;
 }
diff --git a/public/js/index.js b/public/js/index.js
index ea98888..62e7815 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -1,7 +1,21 @@
+let songFileList = []
+/**
+ * Get the list of all named song files (raw filenames) using the API
+ * The API endpoint is /api/files/get
+ */
+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
+		console.log(body)
+	})
+}
+
+getSongFileList()
+
 let songList = []
 let innerSongList = document.getElementById("innerSongList")
 
-
 /**
  * MAIN SONG ELEMENT
  **/
@@ -16,22 +30,68 @@ let innerSongList = document.getElementById("innerSongList")
 </div>
 */
 function NewSongElement(exists, songName, artistName, imageUrl, id) {
+	let wrapper = document.createElement("div")
+	wrapper.classList = "songElement"
+	wrapper.id = id
+	wrapper.songId = id.replace("song:", "")
+
+	let check = document.createElement("p")
+	check.innerText = "❌"
+	if (exists) {
+		check.innerText = "✅"
+	}
+
+	let songNameP = document.createElement("p")
+	songNameP.innerText = songName
 
+	let artistNameP = document.createElement("p")
+	artistNameP.innerText = artistName
+
+	let image = document.createElement("img")
+	image.src = imageUrl
+
+	let editButton = document.createElement("button")
+	editButton.innerText = "Edit"
+	
+	let idP = document.createElement("p")
+	idP.innerText = id
+
+	wrapper.appendChild(check)
+	wrapper.appendChild(songNameP)
+	wrapper.appendChild(artistNameP)
+	wrapper.appendChild(image)
+	wrapper.appendChild(editButton)
+	wrapper.appendChild(idP)
+
+	return wrapper
 }
 
+/**
+ * Check if the songs exists, withtout trying to download the full file
+ */
+function SongURLExists(url) {
+	console.log(url)
+	return songFileList.indexOf(url) != -1
+}
 
 /**
  * Get all the songs
  **/
-async function getSongList() {
+function getSongList() {
 	// Empty the List
 	innerSongList.innerHTML = ""
 
 	fetch("/api/songs/get", {'Accept': 'application/json', 'Content-type': 'application/json'}).then(async (response) => {
-		body = await response.json()
+		let body = await response.json()
 		console.log(body)
 
 		for (let i = 0; i < body.length; i++) {
+			let song = body[i]
+			let fileAvailable = SongURLExists(song.PreviewURL)
+
+			innerSongList.appendChild(NewSongElement(
+				fileAvailable, song.DisplayTrackName, song.DisplayArtistNames, song.ArtworkURL60, song.Key
+			))
 		}
 
 		// using the elements in the body, create all the new songs in the list
diff --git a/songmanager b/songmanager
index 46ec438..cee7e08 100755
Binary files a/songmanager and b/songmanager differ