mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-07-06 01:54:30 +02:00
Add Docker, remove test data
This commit is contained in:
92
app/templates/base.html
Normal file
92
app/templates/base.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
|
||||
<title>{% block title %}{% endblock %} - KaraoQueue</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="static/css/style.css" rel="stylesheet">
|
||||
|
||||
<!-- Fontawesome Icons-->
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
|
||||
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="/">KaraoQueue</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
|
||||
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/list">Songsuche</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>-->
|
||||
</div>
|
||||
</nav>
|
||||
<div class="site">
|
||||
<main role="main" class="container">
|
||||
{% block content %}{% endblock %}
|
||||
</main><!-- /.container -->
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container text-center py-3">
|
||||
{% if not auth %}
|
||||
<a href="/login" class="ml-1 mr-1"><i
|
||||
class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
|
||||
{% endif %}
|
||||
<a href="https://github.com/PhoenixTwoFive/karaoqueue"
|
||||
class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
|
||||
<span class="text-muted">KaraoQueue - <span
|
||||
style="display:inline-block;transform: rotate(180deg) translateY(-0.2rem)">©</span> 2019 - Phillip
|
||||
Kühne</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer -->
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
|
||||
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
|
||||
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
|
||||
</script>
|
||||
{% block extrajs %}{% endblock %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// get current URL path and assign 'active' class
|
||||
var pathname = window.location.pathname;
|
||||
$('.navbar-nav > li > a[href="' + pathname + '"]').parent().addClass('active');
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
27
app/templates/main.html
Normal file
27
app/templates/main.html
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Home{% endblock %}
|
||||
{% block content %}
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Song</th>
|
||||
<th scope="col">Künstler</th>
|
||||
</tr>
|
||||
{% for entry in list: %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ entry[0] }}
|
||||
</td>
|
||||
<td>
|
||||
{{ entry[1] }}
|
||||
</td>
|
||||
<td>
|
||||
{{ entry[2] }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<a name="end"></a>
|
||||
{% endblock %}
|
||||
139
app/templates/main_admin.html
Normal file
139
app/templates/main_admin.html
Normal file
@ -0,0 +1,139 @@
|
||||
|
||||
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Home{% endblock %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="card" style="width: 100%">
|
||||
<div class="card-body d-flex flex-row">
|
||||
<button type="button" class="btn btn-danger m-2"
|
||||
onclick="confirmDeleteAllEntries()"><i class="fas fa-trash mr-2"></i>Alle Einträge löschen</button>
|
||||
<button type="button" class="btn btn-danger m-2"
|
||||
onclick="confirmUpdateSongDatabase()"><i class="fas fa-file-import mr-2"></i>Song-Datenbank
|
||||
aktualisieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Song</th>
|
||||
<th scope="col">Künstler</th>
|
||||
<th scope="col">Löschen</th>
|
||||
</tr>
|
||||
{% for entry in list: %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ entry[0] }}
|
||||
</td>
|
||||
<td>
|
||||
{{ entry[1] }}
|
||||
</td>
|
||||
<td>
|
||||
{{ entry[2] }}
|
||||
</td>
|
||||
<td>
|
||||
<button type='button' class='btn btn-danger justify-content-center align-content-between'
|
||||
onclick='confirmDeleteEntry("{{ entry[0] }}",{{ entry[3] }})'><i
|
||||
class="fas fa-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<a name="end"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extrajs %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
|
||||
integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
function confirmDeleteEntry(name, entry_id) {
|
||||
bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){
|
||||
if (result) {
|
||||
deleteEntry(entry_id)
|
||||
}
|
||||
})
|
||||
}
|
||||
function confirmDeleteAllEntries() {
|
||||
bootbox.confirm({
|
||||
message: "Wirklich alle Eintragungen löschen?",
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Ja',
|
||||
className: 'btn btn-danger'
|
||||
},
|
||||
cancel: {
|
||||
label: 'Nein',
|
||||
className: 'btn btn-secondary'
|
||||
}
|
||||
},
|
||||
callback: function(result){
|
||||
if (result) {
|
||||
deleteAllEntries()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function confirmUpdateSongDatabase() {
|
||||
bootbox.confirm({
|
||||
message: "Wirklich die Song-Datenbank aktualisieren?<br>Dies lädt die Aktuelle Song-Liste von <a href='https://www.karafun.de/karaoke-song-list.html'>KaraFun</a> herunter, <b>und wird alle Eintragungen löschen!</b>",
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Ja',
|
||||
className: 'btn-primary'
|
||||
},
|
||||
cancel: {
|
||||
label: 'Nein',
|
||||
className: 'btn btn-secondary'
|
||||
}
|
||||
},
|
||||
callback: function(result){
|
||||
if (result) {
|
||||
var dialog = bootbox.dialog({
|
||||
message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',
|
||||
|
||||
closeButton: false
|
||||
});
|
||||
updateSongDatabase(dialog)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function deleteEntry(entry_id) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/entries/delete/'+entry_id,
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
location.reload();
|
||||
}
|
||||
function deleteAllEntries() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/entries/delete_all',
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
location.reload();
|
||||
}
|
||||
function updateSongDatabase(wait_dialog) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/songs/update',
|
||||
contentType: "application/json",
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
wait_dialog.modal('hide')
|
||||
bootbox.alert({
|
||||
message: data["status"],
|
||||
callback: function() {location.reload()}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
111
app/templates/songlist.html
Normal file
111
app/templates/songlist.html
Normal file
@ -0,0 +1,111 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Songsuche{% endblock %}
|
||||
{% block content %}
|
||||
<input class="form-control" id="filter" type="text" placeholder="Suchen...">
|
||||
<table class="table">
|
||||
<tbody id="songtable">
|
||||
<!--{% for entry in (): %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ entry[0] }}
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-primary"><i class="material-icons">queue_music</i></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}-->
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="modal fade" id="enqueueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Auf Liste setzen</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</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>
|
||||
{% endblock %}
|
||||
{% block extrajs %}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#filter").keyup( function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
//alert(value);
|
||||
if(value.length >= 3) {
|
||||
$.getJSON("/api/songs/compl", { search: value }, function (data) {
|
||||
var items = [];
|
||||
$.each(data, function (key, val) {
|
||||
items.push("<tr><td>"+val[0]+`</td>
|
||||
<td><button type='button'
|
||||
class='btn btn-primary justify-content-center align-content-between'
|
||||
data-toggle='modal'
|
||||
data-target='#enqueueModal' onclick='setSelectedId(`+val[1]+`)'><i
|
||||
class="fas fa-plus"></i></button></td>
|
||||
</tr>`)
|
||||
});
|
||||
|
||||
$("#songtable").html("")
|
||||
$(items.join("")).appendTo("#songtable");
|
||||
});
|
||||
} else {
|
||||
$("#songtable").html("")
|
||||
}
|
||||
});
|
||||
|
||||
$("#nameForm").submit( function (e) {
|
||||
e.preventDefault();
|
||||
submitModal();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function enqueue(id,name,success_callback) {
|
||||
var data = {
|
||||
"name": name,
|
||||
"id": id
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/api/enqueue',
|
||||
data: JSON.stringify(data), // or JSON.stringify ({name: 'jonas'}),
|
||||
success: success_callback,
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
}
|
||||
|
||||
function setSelectedId(id) {
|
||||
$("#selectedId").attr("value",id);
|
||||
}
|
||||
|
||||
function submitModal() {
|
||||
var name = $("#singerNameInput").val();
|
||||
var id = $("#selectedId").attr("value");
|
||||
enqueue(id,name,function(){
|
||||
$("#enqueueModal").modal('hide');
|
||||
window.location.href = '/#end';
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user