updated: added basic song element creation

diff --git a/public/css/index.css b/public/css/index.css
index facd4cc6ef3558b31380967fc9909861cb5dd68c..826e097ee2471ffe0856d04a545f1d2fd15f226e 100644 (file)
--- 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 ea98888d2cd14cb031b523ad9db7d20be4e10c56..62e78153e640f83fec8d76cdb9023437807c3089 100644 (file)
--- 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 46ec43862625ed54212bfd003b341d4d1a7ce19e..cee7e082ff8f04c9565035bd41a5aaeeacef3af8 100755 (executable)
Binary files a/songmanager and b/songmanager differ