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); background-color: var(--copy-highlight-color);
} }
.songinfo {
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
/* Navbar */ /* Navbar */

60
backend/templates/songlist.html
View File

@ -16,23 +16,40 @@
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="form-group"> <div class="songinfo container">
<form id="nameForm"> <div class="row">
<div class="modal-body"> <div class="col">
<label for="singerNameInput">Sängername</label> <h5 id="songTitle"></h5>
<input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann" <p id="songArtist"></p>
required>
<input id="selectedId" name="selectedId" type="hidden" value="">
</div> </div>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <div class="row" id="indicators">
<button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button> <div class="col">
</div> </div>
</form> </div>
<div class="row">
<div class="col-4">
<p></p>
</div>
</div>
</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 id="selectedId" name="selectedId" type="hidden" value="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}
{% block extrajs %} {% block extrajs %}
<script> <script>
@ -94,12 +111,29 @@
function setSelectedId(id) { function setSelectedId(id) {
$("#selectedId").attr("value", 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() { function submitModal() {
var name = $("#singerNameInput").val(); var name = $("#singerNameInput").val();
var id = $("#selectedId").attr("value"); var id = $("#selectedId").attr("value");
enqueue(localStorage.getItem("clientId"),id, name, function (response) { enqueue(localStorage.getItem("clientId"), id, name, function (response) {
console.log(response); console.log(response);
entryID = response["entry_id"]; entryID = response["entry_id"];
toast = { toast = {
@ -115,7 +149,7 @@
window.location.href = '/#end'; window.location.href = '/#end';
}, function (response) { }, function (response) {
bootbox.alert({ bootbox.alert({
message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: "+response.responseJSON.status, message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: " + response.responseJSON.status,
}); });
entriesAccepted(); entriesAccepted();
$("#enqueueModal").modal('hide'); $("#enqueueModal").modal('hide');