From 2b4108bf164c19a4ead259e957de984257bba492 Mon Sep 17 00:00:00 2001 From: 2weiEmu Date: Fri, 22 May 2026 16:29:52 +0200 Subject: [PATCH] updated: added basic song element creation --- public/css/index.css | 14 +-------- public/js/index.js | 66 +++++++++++++++++++++++++++++++++++++++++-- songmanager | Bin 11691100 -> 11691100 bytes 3 files changed, 64 insertions(+), 16 deletions(-) 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") */ 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 46ec43862625ed54212bfd003b341d4d1a7ce19e..cee7e082ff8f04c9565035bd41a5aaeeacef3af8 100755 GIT binary patch delta 1096 zcmca};v_2wZ@9t6B)~F#;idxN&2QQ2IqIGK$_)d|3xdpZU4lzJ{1em7Q%&`A4Rf7y zLJ~_Y+=6o>EptlUEPR~wb4!bhOH0BEe6xKrJOhl%4U0-D^pm`EobrpEvrGcYO(Q)l z{lm)&3K>`!7#Ktt7#Nrt7#Q6BLK$Xw&h^{&?Z5l8igkfU&;H^*Zt^8rKPNNE%tXKW zHGlhSe#Z9K{7mhy`I*~a^Ru+S=4Wkx&Ck~UnxDP>H9trDYkto5*Zf@Vulc##U-R>{ zzvky{f6dR={+b`8SD^hhzhL`oexdf){KD<8`9<1a^NY5><`-*!%`e{mnqQ**HNRy0 zYksNr*Zk7$ulZ%#U-Qehzvh=~f6Xu7{+eH*{WZU0`)hus_SgK%?XUS&+F$dlw!h|A zYk$qJ-u{|jqy06%X8UV?t@hXa+U>9Tb=qI^>$bn<*K2>xuiyTf-=O_9zhV1pexvr+ z{KoCC`Ayni^P9H6<~M79&2QfRn%|=RHNR#1YksTt*ZkJ)ula4-U-R3xzvj1Vf6Z^- z{+i#R{WZU1`)huu_SgK*?XUS=+F$d#w!h|gYk$q}zWp`7hghhPsiCE*g>G7sL7HW< zrFm*{n&I~Th7w+84P+rxvlPR`6hlixLsR246SE{!Q)5$eL*t|*0}IpXeiA?*t?LfaQ)gtafo2yb7I5z)RNBeH!#MpXNPjOg|S z88Ph(GGf~oWW=>E$cS%Wkde^7AS1DTK}J&hf{f($1sN&r3o=sM7i6ThFUUx5UyzZ} zz91vBeL+T6`+|(@_5~R^?F%w;+ZSZywJ*rXZ(op6(7qs}uzf*BQTu|7;_VAEN~VZ2 zU1OhqAjQLxreUKv`2izqyFyDzyFyE8yFyFZc7>L5jZci%+C9rE+C9rE+da#w+C9sv z+da!_+C9r^+da$b+C9ta+daz~+C9q}+da#g+C9sf+da!#+C9r!+da$L+C9tK+da!V z+C9rU+da#=+C9s<+da#A+C9s9+da$r+C9tq+da!Bw0o9KZ1*gi)b3d}x!tpDO1o#- z)OOFZY3-h6)7w4EX0&^j&20B9o7L`FHoM)kY)-pp+1z%|vU%;EW%JuT%NDeImMv`e zEL+s>S+=;{vusJbXW7zr&$4Cho@LA1JI4y>RuK_QKU`+Y48(YcE{AzP)huhV6x`H@@Bh0NiK73IG5A delta 1115 zcmca};v_2wZ@9t6q`)$L;idxN&2QQ2IqK6aJu4F}@&eOBvUB4@^PDqss{-|lLQS1~ zGox}#%S{SB3agBrD$Bg}b4!bhOH0BEe6xKrJOhl%4U0-D^fR;ajD0R znxD7*H9uebYkrVkf%ez@g6*&Qh1y^93%9@K7ioXZFWUZ^U#$H#zj*s=eu?(i{F3dj z`K8)l^GmnC=9g)I%`e;jnqRK{HNSlOYkr0H*Zhj@ulbeQU-K)szvfqIf6cGj{+eH{ z{WZUO`)huU_SgKH?XUT@+F$c)x4-7sX@AYH+y0tgul+T@e*0^FgZ9__hV8HUjoM%H z8@IpaH)(&(Z`%Hv->m&Lzj^y>ev9_k{Fd#n`K{Vt^INyS=C^5o&2QWOn%}PdHNSoP zYkr6J*Zhv{ulb$YU-LV+zvg#of6edO{+i#d{WZV)_SgI#VxbZyrbed5x(0?OhGt17 zM#dJYY1%27MJ1KnI~z)PnKh6lEDen?~6HU$2rtfPm zkzqHnGBvU?HJ<*kxkOa7q^LBN>!*>kVVi_P5kr%cfTP%rPwlfaJlbbxc(%{Z@M@o( z;oUwv!>4_AhHv}q48Qi-8UF3FGXmOYX9Tv-&IoFsoe|tVJ0qlhc1CFX?2NGX*%{&O zvoj*vXJFu*KGTLWnWVX-F$ZDURk=;H!Bd2|KMsEA;jJ)>Q8TswAGYZ;g zXB4*2&M0c1ol(4fc1Foeai-hs(+{M0IMOb(m`jREr~hg$QEXReDQQ<|DQ#D1Dci2l zQm*ld@pijsSw*{NS!KItSyj7dS#`T-SxviVS#7&#SzWtlS$(@_Swp*LS!26rSyQ`b zS#!H*SxdWTS!=szSzEhjS$n%@Sx38PS!cUvSy#JfS$DfuXS#P^%Szo(nS%14{ z*@Sk_vWe}UWs}-H%Oec#;3hjlfSGO0gUejKUHgftJk*|uHLY{aP`L5 FI{@wv#fbm_ -- 2.54.0