added: images and top part of the page now looks right

diff --git a/public/css/index.css b/public/css/index.css
index df176b8116ab9d820d99028b4ad91dea54f0be25..8b745d400ddb60facc22e6966cda3a41805be9c5 100644 (file)
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -20,9 +20,11 @@ h1, a {
 input {
        background-color: var(--lighter-background);
        border: none;
-       padding: 12px;
+       padding: 12px 24px 12px 24px;
        border-radius: 15px;
        color: var(--green-background);
+       font-size: 16px;
+       font-family: "Sansita", sans-serif;
 }
 
 input:focus {
@@ -32,10 +34,17 @@ input:focus {
 
 #songFilterInputs {
        display: flex;
+       justify-content: space-between;
+       margin: 0 0 20px 0;
+
+       input {
+               width: 33%;
+       }
 }
 
-#songFilterInputs * {
-       margin: 10px;
+#filterDBImage, #updateSongsButton, #addSongButton {
+       height: 42px;
+       width: 42px;
 }
 
 
@@ -43,8 +52,6 @@ input:focus {
        overflow-y: scroll;
        height: 50vh;
        max-width: 50vw;
-       border: 1px solid grey;
-       border-radius: 10px;
 }
 
 

diff --git a/public/img/add-song-button.png b/public/img/add-song-button.png
new file mode 100644 (file)
index 0000000..09ebd13
Binary files /dev/null and b/public/img/add-song-button.png differ

diff --git a/public/img/music-not-present.png b/public/img/music-not-present.png
new file mode 100644 (file)
index 0000000..4a18c82
Binary files /dev/null and b/public/img/music-not-present.png differ

diff --git a/public/img/music-present.png b/public/img/music-present.png
new file mode 100644 (file)
index 0000000..14ce296
Binary files /dev/null and b/public/img/music-present.png differ

diff --git a/public/img/reload-button.png b/public/img/reload-button.png
new file mode 100644 (file)
index 0000000..f2e9566
Binary files /dev/null and b/public/img/reload-button.png differ

diff --git a/public/index.html b/public/index.html
index 288b9ec116160061b60f8ee0b5c653028ea93484..77c5e71aaa1872ef261a4f8740c37f258ff1de4c 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -19,18 +19,16 @@
 
                        <div id="songFilterInputs">
                                <input placeholder="Song Name..." id="songFilterName"></input>
-                               <input placeholder="Aritst Name..." id="songFilterArtist"></input>
-                               <input id="songFilterInDB" type="checkbox">In DB</input>
-                               <input id="songFilterNotInDB" type="checkbox">Not In DB</input>
-                               <button id="" onclick="getSongList()">Update Songs</button>
-                               <button onclick="openCreationMenu()">Create New Song</button>
+                               <input placeholder="Artist Name..." id="songFilterArtist"></input>
+                               <img id="filterDBImage" src="/img/music-present.png"></img>
+                               <img id="updateSongsButton" src="/img/reload-button.png"></img>
+                               <img id="addSongButton" src="/img/add-song-button.png"></img>
                        </div>
 
                        <div id="innerSongList">
                        </div>
 
                </div>
-               <hr>
                <div>
                        <h1><u>File List</u></h1>
                        <div id="songFileFilterInputs">

diff --git a/public/js/index.js b/public/js/index.js
index 84586d429aba44c2c7b27b439d7fb83bae1226aa..88888e7f5f150eea221f50f638c0f9e5b670f66a 100644 (file)
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -203,7 +203,8 @@ function getSongList() {
        })
 }
 
-
+let updateSongsButton = document.getElementById("updateSongsButton")
+updateSongsButton.addEventListener("click", (_) => { getSongList() } )
 
 /**
  * SONG FILTERING LOGIC
@@ -215,8 +216,10 @@ let songFilterInput = document.getElementById("songFilterInput")
  **/
 let songFilterName = document.getElementById("songFilterName")
 let songFilterArtist = document.getElementById("songFilterArtist")
-let songFilterInDB = document.getElementById("songFilterInDB")
-let songFilterNotInDB = document.getElementById("songFilterNotInDB")
+
+let filterDBImage = document.getElementById("filterDBImage")
+let dbFilterState = "inDB"
+
 
 /**
  * Get the current state of filters, with fields NameFilter, ArtistFilter, DBFilter
@@ -227,8 +230,8 @@ function getFilterStates() {
 
        filterStates.NameFilter = songFilterName.value.toLowerCase()
        filterStates.ArtistFilter = songFilterArtist.value.toLowerCase()
-       filterStates.DBFilter = songFilterInDB.checked
-       filterStates.NotDBFilter = songFilterNotInDB.checked
+       filterStates.DBFilter = dbFilterState == "inDB"
+       filterStates.NotDBFilter = dbFilterState == "notInDB"
 
        return filterStates
 }
@@ -273,8 +276,20 @@ function updateSongListWithFilter(_) {
 
 songFilterName.oninput = (event) => {updateSongListWithFilter(event)}
 songFilterArtist.oninput = (event) => {updateSongListWithFilter(event)}
-songFilterInDB.oninput = (event) => {updateSongListWithFilter(event)}
-songFilterNotInDB.oninput = (event) => {updateSongListWithFilter(event)}
+
+filterDBImage.addEventListener("click", (_) => {
+       if (dbFilterState == "inDB") {
+               dbFilterState = "notInDB" 
+               filterDBImage.src = "/img/music-not-present.png"
+       }
+       else { 
+               dbFilterState = "inDB"
+               filterDBImage.src = "/img/music-present.png"
+       }
+
+       updateSongListWithFilter(_)
+})
+
 
 /**
  * EDIT MENU FOR SONGS
@@ -382,6 +397,10 @@ let createSongDisplayArtistNames = document.getElementById("createSongDisplayArt
 let createSongDisplayTrackName = document.getElementById("createSongDisplayTrackName")
 let createSongCreateButton = document.getElementById("createSongCreateButton")
 
+let addSongButton = document.getElementById("addSongButton")
+
+addSongButton.addEventListener("click", (_) => { openCreationMenu() })
+
 // making a song -> I want to make clear that there is a strong lack of formatting checking anywhere
 async function createNewSong() {
 

diff --git a/songmanager b/songmanager
index 7551edf1a0d107c7208bd09959d8ceeaaba3cb94..54aed9c501787f3e8cf77b4d18aa869962065dbe 100755 (executable)
Binary files a/songmanager and b/songmanager differ