updated: song file list some work, not filtered yet

diff --git a/public/css/index.css b/public/css/index.css
index 486003dd3079a180c8c3135df0356fbf9669e487..f4b73747be9c16227289ee3c8866f3cdc6b8bb73 100644 (file)
--- 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 86007f362dd5c0e694dd0748b750bcdcb4dad981..99a803f037a8847ea2cba01a507312d2d4d48e48 100644 (file)
--- 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 473cebcedd241993cd3310e63cbade8043127835..5a2b537fefa6dab96e5416b42888121abcf42f96 100644 (file)
--- 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 (executable)
Binary files a/songmanager and b/songmanager differ