phillip/karaoqueue
1
0
Fork 0
mirror of https://github.com/PhoenixTwoFive/karaoqueue.git synced 2025-05-19 02:51:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add detailed song info view on song select

Browse Source
This commit is contained in:
Phillip Kühne 2023-10-03 19:23:09 +00:00
parent c3603a13dd
commit a1a041c5ce
Signed by: phillip
GPG Key ID: E4C1C4D2F90902AA
2 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/static/css/style.css
View File

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

38
backend/templates/songlist.html
View File

@ -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"
required>
<input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann" 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() {