Add detailed song info view on song select

backend/static/css/style.css

@@ -173,6 +173,10 @@ pre {
   background-color: var(--copy-highlight-color);
 }
 
+.songinfo {
+  
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     /* Navbar */

backend/templates/songlist.html

@@ -16,12 +16,29 @@
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
+            <div class="songinfo container">
+                <div class="row">
+                    <div class="col">
+                        <h5 id="songTitle"></h5>
+                        <p id="songArtist"></p>
+                    </div>
+                </div>
+                <div class="row" id="indicators">
+                    <div class="col">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-4">
+                        <p></p>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="form-group">
             <form id="nameForm">
                 <div class="modal-body">
                     <label for="singerNameInput">Sängername</label>
-                        <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
+                    <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann" required>
-                            required>
                     <input id="selectedId" name="selectedId" type="hidden" value="">
                 </div>
                 <div class="modal-footer">
@@ -94,6 +111,23 @@
 
     function setSelectedId(id) {
         $("#selectedId").attr("value", id);
+        $.getJSON("/api/songs/details/" + id, function (data) {
+            console.log(data);
+            $("#songTitle").html(data["title"]);
+            $("#songArtist").html(data["artist"]);
+            if(data["duo"] == 1){
+                let duoindicator = document.createElement("i");
+                duoindicator.classList.add("fas");
+                duoindicator.classList.add("fa-user-friends");
+                $("#indicators")[0].children[0].appendChild(duoindicator)
+            }
+            if(data["explicit"] == 1){
+                let explicitindicator = document.createElement("i");
+                explicitindicator.classList.add("fas");
+                explicitindicator.classList.add("fa-e");
+                $("#indicators")[0].children[0].appendChild(explicitindicator)
+            }
+        });
     }
 
     function submitModal() {