mirror of
https://github.com/PhoenixTwoFive/karaoqueue.git
synced 2025-07-04 09:11:42 +02:00
restructure for backend/frontend separation
This commit is contained in:
11
backend/Dockerfile
Normal file
11
backend/Dockerfile
Normal file
@ -0,0 +1,11 @@
|
||||
FROM tiangolo/uwsgi-nginx-flask:python3.7
|
||||
|
||||
RUN pip install requests
|
||||
|
||||
RUN pip install pandas
|
||||
|
||||
RUN pip install Flask-BasicAuth
|
||||
|
||||
RUN pip install bs4
|
||||
|
||||
COPY ./app /app
|
||||
8
backend/app/data_adapters.py
Normal file
8
backend/app/data_adapters.py
Normal file
@ -0,0 +1,8 @@
|
||||
def dict_from_row(row):
|
||||
return dict(zip(row.keys(), row))
|
||||
|
||||
def dict_from_rows(rows):
|
||||
outlist=[]
|
||||
for row in rows:
|
||||
outlist.append(dict_from_row(row))
|
||||
return outlist
|
||||
165
backend/app/database.py
Normal file
165
backend/app/database.py
Normal file
@ -0,0 +1,165 @@
|
||||
# -*- coding: utf_8 -*-
|
||||
|
||||
import sqlite3
|
||||
import pandas
|
||||
from io import StringIO
|
||||
|
||||
song_table = "songs"
|
||||
entry_table = "entries"
|
||||
index_label = "Id"
|
||||
done_table = "done_songs"
|
||||
|
||||
def open_db():
|
||||
conn = sqlite3.connect("data/test.db")
|
||||
conn.execute('PRAGMA encoding = "UTF-8";')
|
||||
return conn
|
||||
|
||||
def import_songs(song_csv):
|
||||
print("Start importing Songs...")
|
||||
df = pandas.read_csv(StringIO(song_csv), sep=';')
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
df.to_sql(song_table, conn, if_exists='replace',
|
||||
index=False)
|
||||
cur.execute("SELECT Count(Id) FROM songs")
|
||||
num_songs = cur.fetchone()[0]
|
||||
conn.close()
|
||||
print("Imported songs ({} in Database)".format(num_songs))
|
||||
return("Imported songs ({} in Database)".format(num_songs))
|
||||
|
||||
def create_entry_table():
|
||||
conn = open_db()
|
||||
conn.execute('CREATE TABLE IF NOT EXISTS '+entry_table +
|
||||
' (ID INTEGER PRIMARY KEY NOT NULL, Song_Id INTEGER NOT NULL, Name VARCHAR(255))')
|
||||
conn.close()
|
||||
|
||||
|
||||
def create_done_song_table():
|
||||
conn = open_db()
|
||||
conn.execute('CREATE TABLE IF NOT EXISTS '+done_table +
|
||||
' (Song_Id INTEGER PRIMARY KEY NOT NULL, Plays INTEGER)')
|
||||
conn.close()
|
||||
|
||||
def create_song_table():
|
||||
conn = open_db()
|
||||
conn.execute("CREATE TABLE IF NOT EXISTS \""+song_table+"""\" (
|
||||
"Id" INTEGER,
|
||||
"Title" TEXT,
|
||||
"Artist" TEXT,
|
||||
"Year" INTEGER,
|
||||
"Duo" INTEGER,
|
||||
"Explicit" INTEGER,
|
||||
"Date Added" TEXT,
|
||||
"Styles" TEXT,
|
||||
"Languages" TEXT
|
||||
)""")
|
||||
conn.close()
|
||||
|
||||
def create_list_view():
|
||||
conn = open_db()
|
||||
conn.execute("""CREATE VIEW IF NOT EXISTS [Liste] AS
|
||||
SELECT Name, Title, Artist, entries.Id, songs.Id
|
||||
FROM entries, songs
|
||||
WHERE entries.Song_Id=songs.Id""")
|
||||
conn.close()
|
||||
|
||||
|
||||
def create_done_song_view():
|
||||
conn = open_db()
|
||||
conn.execute("""CREATE VIEW IF NOT EXISTS [Abspielliste] AS
|
||||
SELECT Artist || \" - \" || Title AS Song, Plays AS Wiedergaben
|
||||
FROM songs, done_songs
|
||||
WHERE done_songs.Song_Id=songs.Id""")
|
||||
conn.close()
|
||||
|
||||
def get_list():
|
||||
conn = open_db()
|
||||
conn.row_factory = sqlite3.Row
|
||||
cur = conn.cursor()
|
||||
cur.execute("SELECT * FROM Liste")
|
||||
return cur.fetchall()
|
||||
|
||||
|
||||
def get_played_list():
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("SELECT * FROM Abspielliste")
|
||||
return cur.fetchall()
|
||||
|
||||
def get_song_list():
|
||||
conn =open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("SELECT Artist || \" - \" || Title AS Song, Id FROM songs")
|
||||
return cur.fetchall()
|
||||
|
||||
def get_song_completions(input_string):
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
# Don't look, it burns...
|
||||
cur.execute(
|
||||
"SELECT Title || \" - \" || Artist AS Song, Id FROM songs WHERE Song LIKE REPLACE(REPLACE(REPLACE(REPLACE(UPPER('%"+input_string+"%'),'ö','Ö'),'ü','Ü'),'ä','Ä'),'ß','ẞ') LIMIT 20")
|
||||
return cur.fetchall()
|
||||
|
||||
def add_entry(name,song_id):
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute(
|
||||
"INSERT INTO entries (Song_Id,Name) VALUES(?,?);", (song_id,name))
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return
|
||||
|
||||
def add_sung_song(entry_id):
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("""SELECT Song_Id FROM entries WHERE Id=?""",(entry_id,))
|
||||
song_id = cur.fetchone()[0]
|
||||
cur.execute("""INSERT OR REPLACE INTO done_songs (Song_Id, Plays)
|
||||
VALUES("""+str(song_id)+""",
|
||||
COALESCE(
|
||||
(SELECT Plays FROM done_songs
|
||||
WHERE Song_Id="""+str(song_id)+"), 0) + 1)"
|
||||
)
|
||||
conn.commit()
|
||||
delete_entry(entry_id)
|
||||
conn.close()
|
||||
return True
|
||||
|
||||
def clear_played_songs():
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("DELETE FROM done_songs")
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return True
|
||||
|
||||
def delete_entry(id):
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("DELETE FROM entries WHERE id=?",(id,))
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return True
|
||||
|
||||
|
||||
def delete_entries(ids):
|
||||
idlist = []
|
||||
for x in ids:
|
||||
idlist.append( (x,) )
|
||||
try:
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.executemany("DELETE FROM entries WHERE id=?", idlist)
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return cur.rowcount
|
||||
except sqlite3.Error as error:
|
||||
return -1
|
||||
|
||||
def delete_all_entries():
|
||||
conn = open_db()
|
||||
cur = conn.cursor()
|
||||
cur.execute("DELETE FROM entries")
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return True
|
||||
39
backend/app/helpers.py
Normal file
39
backend/app/helpers.py
Normal file
@ -0,0 +1,39 @@
|
||||
import requests
|
||||
from bs4 import BeautifulSoup
|
||||
import json
|
||||
import os
|
||||
|
||||
data_directory = "data"
|
||||
config_file = data_directory+"/config.json"
|
||||
|
||||
def create_data_directory():
|
||||
if not os.path.exists(data_directory):
|
||||
os.makedirs(data_directory)
|
||||
|
||||
|
||||
def get_catalog_url():
|
||||
r = requests.get('https://www.karafun.de/karaoke-song-list.html')
|
||||
soup = BeautifulSoup(r.content, 'html.parser')
|
||||
url = soup.findAll('a', href=True, text='CSV')[0]['href']
|
||||
return url
|
||||
|
||||
def get_songs(url):
|
||||
r = requests.get(url)
|
||||
return r.text
|
||||
|
||||
def check_config_exists():
|
||||
return os.path.isfile(config_file)
|
||||
|
||||
def setup_config(app):
|
||||
if check_config_exists():
|
||||
config = json.load(open(config_file))
|
||||
with open(config_file, 'r') as handle:
|
||||
config = json.load(handle)
|
||||
print("Loaded existing config")
|
||||
else:
|
||||
config = {'username': 'admin', 'password': 'changeme'}
|
||||
with open(config_file, 'w') as handle:
|
||||
json.dump(config, handle, indent=4, sort_keys=True)
|
||||
print("Wrote new config")
|
||||
app.config['BASIC_AUTH_USERNAME'] = config['username']
|
||||
app.config['BASIC_AUTH_PASSWORD'] = config['password']
|
||||
155
backend/app/main.py
Normal file
155
backend/app/main.py
Normal file
@ -0,0 +1,155 @@
|
||||
from flask import Flask, render_template, Response, abort, request, redirect
|
||||
import helpers
|
||||
import database
|
||||
import data_adapters
|
||||
import os, errno
|
||||
import json
|
||||
from flask_basicauth import BasicAuth
|
||||
app = Flask(__name__, static_url_path='/static')
|
||||
|
||||
basic_auth = BasicAuth(app)
|
||||
accept_entries = False
|
||||
|
||||
@app.route("/")
|
||||
def home():
|
||||
if basic_auth.authenticate():
|
||||
return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate())
|
||||
else:
|
||||
return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate())
|
||||
|
||||
@app.route('/api/enqueue', methods=['POST'])
|
||||
def enqueue():
|
||||
if accept_entries:
|
||||
if not request.json:
|
||||
print(request.data)
|
||||
abort(400)
|
||||
name = request.json['name']
|
||||
song_id = request.json['id']
|
||||
database.add_entry(name, song_id)
|
||||
return Response('{"status":"OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status":"Currently not accepting entries"}', mimetype='text/json',status=423)
|
||||
|
||||
|
||||
@app.route("/list")
|
||||
def songlist():
|
||||
return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate())
|
||||
|
||||
@app.route("/api/queue")
|
||||
def queue_json():
|
||||
list = data_adapters.dict_from_rows(database.get_list())
|
||||
return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
|
||||
|
||||
@app.route("/plays")
|
||||
@basic_auth.required
|
||||
def played_list():
|
||||
return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate())
|
||||
|
||||
@app.route("/api/songs")
|
||||
def songs():
|
||||
list = database.get_song_list()
|
||||
return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
|
||||
|
||||
@app.route("/api/songs/update")
|
||||
@basic_auth.required
|
||||
def update_songs():
|
||||
database.delete_all_entries()
|
||||
status = database.import_songs(helpers.get_songs(helpers.get_catalog_url()))
|
||||
print(status)
|
||||
return Response('{"status": "%s" }' % status, mimetype='text/json')
|
||||
|
||||
|
||||
@app.route("/api/songs/compl")
|
||||
def get_song_completions(input_string=""):
|
||||
input_string = request.args.get('search',input_string)
|
||||
if input_string!="":
|
||||
print(input_string)
|
||||
list = database.get_song_completions(input_string=input_string)
|
||||
return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
|
||||
|
||||
else:
|
||||
return 400
|
||||
|
||||
|
||||
@app.route("/api/entries/delete/<entry_id>")
|
||||
@basic_auth.required
|
||||
def delete_entry(entry_id):
|
||||
if database.delete_entry(entry_id):
|
||||
return Response('{"status": "OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json')
|
||||
|
||||
|
||||
@app.route("/api/entries/delete", methods=['POST'])
|
||||
@basic_auth.required
|
||||
def delete_entries():
|
||||
if not request.json:
|
||||
print(request.data)
|
||||
abort(400)
|
||||
return
|
||||
updates = database.delete_entries(request.json)
|
||||
if updates >= 0:
|
||||
return Response('{"status": "OK", "updates": '+str(updates)+'}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
|
||||
|
||||
|
||||
@app.route("/api/entries/mark_sung/<entry_id>")
|
||||
@basic_auth.required
|
||||
def mark_sung(entry_id):
|
||||
if database.add_sung_song(entry_id):
|
||||
return Response('{"status": "OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json')
|
||||
|
||||
@app.route("/api/entries/accept/<value>")
|
||||
@basic_auth.required
|
||||
def set_accept_entries(value):
|
||||
global accept_entries
|
||||
if (value=='0' or value=='1'):
|
||||
accept_entries=bool(int(value))
|
||||
return Response('{"status": "OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
|
||||
|
||||
|
||||
@app.route("/api/entries/accept")
|
||||
def get_accept_entries():
|
||||
global accept_entries
|
||||
return Response('{"status": "OK", "value": '+str(int(accept_entries))+'}', mimetype='text/json')
|
||||
|
||||
|
||||
@app.route("/api/played/clear")
|
||||
@basic_auth.required
|
||||
def clear_played_songs():
|
||||
if database.clear_played_songs():
|
||||
return Response('{"status": "OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json')
|
||||
|
||||
@app.route("/api/entries/delete_all")
|
||||
@basic_auth.required
|
||||
def delete_all_entries():
|
||||
if database.delete_all_entries():
|
||||
return Response('{"status": "OK"}', mimetype='text/json')
|
||||
else:
|
||||
return Response('{"status": "FAIL"}', mimetype='text/json')
|
||||
|
||||
@app.route("/login")
|
||||
@basic_auth.required
|
||||
def admin():
|
||||
return redirect("/", code=303)
|
||||
|
||||
@app.before_first_request
|
||||
def activate_job():
|
||||
helpers.create_data_directory()
|
||||
database.create_entry_table()
|
||||
database.create_song_table()
|
||||
database.create_done_song_table()
|
||||
database.create_list_view()
|
||||
database.create_done_song_view()
|
||||
helpers.setup_config(app)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(debug=True, host='0.0.0.0')
|
||||
77
backend/app/static/css/style.css
Normal file
77
backend/app/static/css/style.css
Normal file
@ -0,0 +1,77 @@
|
||||
body {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.site {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-bottom: 60px; /* Höhe des Footers */
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: -60px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
/* Set the fixed height of the footer here */
|
||||
/*line-height: 60px; /* Vertically center the text there */
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.topbutton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
table.entries tbody tr:first-child {
|
||||
background-color: #007bff80;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table.entries tbody tr:nth-child(2) {
|
||||
background-color: #007bff40;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
table.entries tbody tr:nth-child(3) {
|
||||
background-color: #007bff20;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
table.entries tbody tr:nth-child(4) {
|
||||
background-color: #007bff10;
|
||||
}
|
||||
|
||||
table td:first-child {
|
||||
max-width: 200px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.topbutton {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.admincontrols {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
16
backend/app/static/manifest.webmanifest
Normal file
16
backend/app/static/manifest.webmanifest
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "KaraoQueue",
|
||||
"short_name": "KaraoQueue",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#343a40",
|
||||
"description": "Eine Karaokewarteliste.",
|
||||
"icons": [{
|
||||
"src": "images/touch/homescreen192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"related_applications": [{
|
||||
"platform": "Web"
|
||||
}]
|
||||
}
|
||||
112
backend/app/templates/base.html
Normal file
112
backend/app/templates/base.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!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">
|
||||
<link rel="manifest" href="/static/manifest.webmanifest">
|
||||
|
||||
<title>{% block title %}{% endblock %} - KaraoQueue</title>
|
||||
|
||||
<!-- Bootstrap-Tables -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<!-- Bootstraptoggle -->
|
||||
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
|
||||
|
||||
</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="/">Warteliste</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/list">Songsuche</a>
|
||||
</li>
|
||||
{% if auth %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/plays">Abspielliste</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</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>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
|
||||
integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
|
||||
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
|
||||
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></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');
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
35
backend/app/templates/main.html
Normal file
35
backend/app/templates/main.html
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Warteliste{% endblock %}
|
||||
{% block content %}
|
||||
<a id="bfb" role="button" class="btn btn-primary btn-lg btn-block mb-2" href="/list">Eintragen</a>
|
||||
<table class="table entries"
|
||||
data-toggle="table"
|
||||
data-url="/api/queue"
|
||||
data-pagination="true"
|
||||
data-classes="table"
|
||||
data-show-refresh="false"
|
||||
data-auto-refresh="true"
|
||||
data-auto-refresh-interval="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="Name">Name</th>
|
||||
<th data-field="Title">Song</th>
|
||||
<th data-field="Artist">Künstler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<a name="end"></a>
|
||||
{% endblock %}
|
||||
{% block extrajs %}
|
||||
<script>
|
||||
$.getJSON("/api/entries/accept", (data) => {
|
||||
if (data["value"]==0) {
|
||||
$("#bfb").addClass("disabled")
|
||||
$("#bfb").prop("aria-disabled",true);
|
||||
$("#bfb").prop("tabindex","-1");
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{% endblock %}
|
||||
191
backend/app/templates/main_admin.html
Normal file
191
backend/app/templates/main_admin.html
Normal file
@ -0,0 +1,191 @@
|
||||
|
||||
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Warteliste-Admin{% endblock %}
|
||||
{% block content %}
|
||||
<style>
|
||||
table td:nth-child(2) {
|
||||
max-width: 450px !important;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div id="toolbar">
|
||||
<button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteSelectedEntries()"><i
|
||||
class="fas fa-trash mr-2"></i>Gewählte Einträge löschen</button>
|
||||
<button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i
|
||||
class="fas fa-file-import mr-2"></i>Song-Datenbank
|
||||
aktualisieren</button>
|
||||
<input id="entryToggle" type="checkbox" class="topbutton" data-toggle="toggle" data-on="Eintragen erlaubt" data-off="Eintragen deaktiviert" data-onstyle="success" data-offstyle="danger">
|
||||
</div>
|
||||
<table class="table entries"
|
||||
id="entrytable"
|
||||
data-toggle="table"
|
||||
data-search="true"
|
||||
data-show-columns="true"
|
||||
data-show-toggle="true"
|
||||
data-multiple-select-row="true"
|
||||
data-click-to-select="true"
|
||||
data-toolbar="#toolbar"
|
||||
data-pagination="true"
|
||||
data-show-extended-pagination="true"
|
||||
data-classes="table table-hover"
|
||||
data-url="/api/queue"
|
||||
data-show-refresh="true"
|
||||
data-auto-refresh="true"
|
||||
data-auto-refresh-interval="10">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="state" data-checkbox="true"></th>
|
||||
<th scope="col" data-field="Name">Name</th>
|
||||
<th scope="col" data-field="Title">Song</th>
|
||||
<th scope="col" data-field="Artist">Künstler</th>
|
||||
<th scope="col" data-formatter="TableActions">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<a name="end"></a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extrajs %}
|
||||
<script>
|
||||
$(function () {
|
||||
$('#entryToggle').change(function() {
|
||||
$.ajax({url: "/api/entries/accept/"+($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000)});
|
||||
})
|
||||
refreshEntryToggle()
|
||||
$("#entrytable").bootstrapTable().on('load-success.bs.table', function() {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
})
|
||||
function confirmDeleteEntry(name, entry_id) {
|
||||
bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){
|
||||
if (result) {
|
||||
deleteEntry(entry_id)
|
||||
}
|
||||
})
|
||||
}
|
||||
function confirmDeleteSelectedEntries() {
|
||||
bootbox.confirm({
|
||||
message: "Wirklich gewählte Eintragungen löschen?",
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Ja',
|
||||
className: 'btn btn-danger'
|
||||
},
|
||||
cancel: {
|
||||
label: 'Nein',
|
||||
className: 'btn btn-secondary'
|
||||
}
|
||||
},
|
||||
callback: function(result){
|
||||
if (result) {
|
||||
DeleteSelectedEntries(getIdSelections())
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
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 refreshEntryToggle() {
|
||||
$.getJSON("/api/entries/accept", (data) => {
|
||||
if (data["value"]!=$('#entryToggle').is(":checked")) {
|
||||
if(data["value"]==1) {
|
||||
$('#entryToggle').bootstrapToggle('on')
|
||||
}
|
||||
else {
|
||||
$('#entryToggle').bootstrapToggle('off')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function deleteEntry(entry_id) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/entries/delete/'+entry_id,
|
||||
contentType: "application/json",
|
||||
dataType: 'json',
|
||||
async: false
|
||||
});
|
||||
$("#entrytable").bootstrapTable('refresh')
|
||||
|
||||
}
|
||||
function markEntryAsSung(entry_id) {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/entries/mark_sung/'+entry_id,
|
||||
contentType: "application/json",
|
||||
dataType: 'json',
|
||||
async: false
|
||||
});
|
||||
$("#entrytable").bootstrapTable('refresh')
|
||||
|
||||
}
|
||||
function DeleteSelectedEntries(ids) {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/api/entries/delete',
|
||||
data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
|
||||
error: function() {
|
||||
bootbox.alert({
|
||||
message: "Fehler beim Löschen der Eintragungen.",
|
||||
})
|
||||
},
|
||||
success: function() {
|
||||
$("#entrytable").bootstrapTable('refresh')
|
||||
|
||||
},
|
||||
contentType: "application/json",
|
||||
dataType: 'json'
|
||||
});
|
||||
}
|
||||
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() {
|
||||
$("#entrytable").bootstrapTable('refresh')
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
function TableActions (value, row, index) {
|
||||
return "<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"markEntryAsSung("+row.ID+")\"><i class=\"fas fa-check\"></i></button> <button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"confirmDeleteEntry('"+row.Name+"',"+row.ID+")\"><i class=\"fas fa-trash\"></i></button>";
|
||||
}
|
||||
function getIdSelections() {
|
||||
return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
|
||||
return row.ID
|
||||
})
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
102
backend/app/templates/played_list.html
Normal file
102
backend/app/templates/played_list.html
Normal file
@ -0,0 +1,102 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Abspielliste{% endblock %}
|
||||
{% block content %}
|
||||
<div id="toolbar">
|
||||
<button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteAllEntries()"><i
|
||||
class="fas fa-trash mr-2"></i>Abspielliste löschen</button>
|
||||
<button type="button" class="topbutton btn btn-primary" onclick="exportPDF()"><i
|
||||
class="fas fa-file-pdf mr-2"></i>Als PDF herunterladen</button>
|
||||
<button type="button" class="topbutton btn btn-secondary" onclick="printPDF()"><i
|
||||
class="fas fa-print mr-2"></i>Drucken</button>
|
||||
</div>
|
||||
<table class="table"
|
||||
id="table"
|
||||
data-toggle="table"
|
||||
data-search="true"
|
||||
data-show-columns="true"
|
||||
data-toolbar="#toolbar"
|
||||
data-pagination="true"
|
||||
data-classes="table table-bordered table-striped"
|
||||
data-show-extended-pagination="true">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Song</th>
|
||||
<th scope="col">Wiedergaben</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for entry in list: %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ entry[0] }}
|
||||
</td>
|
||||
<td>
|
||||
{{ entry[1] }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</table>
|
||||
{% endblock %}
|
||||
{% block extrajs %}
|
||||
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
|
||||
<script src="https://unpkg.com/jspdf-autotable@3.1.1/dist/jspdf.plugin.autotable.js"></script>
|
||||
<script>
|
||||
function confirmDeleteAllEntries() {
|
||||
bootbox.confirm({
|
||||
message: "Wirklich Abspielliste löschen?<br>Stelle sicher, dass du sie vorher zwecks Abrechnung gedruckt und/oder heruntergeladen hast!",
|
||||
buttons: {
|
||||
confirm: {
|
||||
label: 'Ja',
|
||||
className: 'btn btn-danger'
|
||||
},
|
||||
cancel: {
|
||||
label: 'Nein',
|
||||
className: 'btn btn-secondary'
|
||||
}
|
||||
},
|
||||
callback: function(result){
|
||||
if (result) {
|
||||
deleteAllEntries()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
function deleteAllEntries() {
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: '/api/played/clear',
|
||||
contentType: "application/json",
|
||||
dataType: 'json',
|
||||
async: false
|
||||
});
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function exportPDF() {
|
||||
var doc = new jsPDF();
|
||||
doc.autoTable({
|
||||
head: [["Song","Wiedergaben"]],
|
||||
body: createTableArray(),
|
||||
theme: 'grid'
|
||||
});
|
||||
doc.save('Abspielliste.pdf');
|
||||
}
|
||||
|
||||
function printPDF() {
|
||||
var doc = new jsPDF();
|
||||
doc.autoTable({
|
||||
head: [["Song","Wiedergaben"]],
|
||||
body: createTableArray(),
|
||||
theme: 'grid'
|
||||
});
|
||||
doc.autoPrint();
|
||||
doc.output('dataurlnewwindow');
|
||||
}
|
||||
|
||||
function createTableArray() {
|
||||
var data = $("#table").bootstrapTable('getData')
|
||||
out = data.map(x => [x["0"],x["1"]])
|
||||
return out;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
129
backend/app/templates/songlist.html
Normal file
129
backend/app/templates/songlist.html
Normal file
@ -0,0 +1,129 @@
|
||||
{% 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">
|
||||
</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").focus();
|
||||
$("#filter").keyup( function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
//alert(value);
|
||||
if(value.length >= 1) {
|
||||
$.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 enqueueButton'
|
||||
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");
|
||||
entriesAccepted()
|
||||
});
|
||||
} else {
|
||||
$("#songtable").html("")
|
||||
}
|
||||
});
|
||||
|
||||
$("#nameForm").submit( function (e) {
|
||||
e.preventDefault();
|
||||
submitModal();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function enqueue(id,name,success_callback, blocked_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,
|
||||
statusCode: {
|
||||
423: blocked_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';
|
||||
}, function () {
|
||||
bootbox.alert({
|
||||
message: "Es werden leider keine neuen Anmeldungen mehr angenommen. Tut mir leid :(",
|
||||
});
|
||||
$(".enqueueButton").prop("disabled",true);
|
||||
$("#enqueueModal").modal('hide');
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function entriesAccepted() {
|
||||
$.getJSON("/api/entries/accept", (data,out) => {
|
||||
if(data["value"]==0) {
|
||||
$(".enqueueButton").prop("disabled",true)
|
||||
$(".enqueueButton").prop("style","pointer-events: none;")
|
||||
$(".enqueueButton").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='top'></span>" );
|
||||
$(".tooltip-span").prop("title","Eintragungen sind leider nicht mehr möglich.")
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
} else {
|
||||
$(".enqueueButton").prop("disabled",false)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user