Fix button alignment

There are now two dockerfiles. One for production, one for development.
All configuration is now also handled through dotenv files,
which these dotenv files, as well as the included VSCode launch tasks
use.

.env.dev

@@ -0,0 +1,12 @@
+# MariaDB
+MARIADB_ROOT_PASSWORD=mariadb_root_password
+MARIADB_ROOT_HOST=localhost
+MARIADB_DATABASE=karaoqueue
+MARIADB_USER=karaoqueue
+MARIADB_PASSWORD=mariadb_karaoqueue_password
+
+# Karaoqueue
+DEPLOYMENT_PLATFORM=Docker
+DBSTRING="mysql+pymysql://karaoqueue:mariadb_karaoqueue_password@127.0.0.1:3306/karaoqueue?charset=utf8mb4"
+INITIAL_USERNAME=admin
+INITIAL_PASSWORD=changeme

.gitignore

@@ -131,3 +131,13 @@ dmypy.json
 
 # Test data
 data/
+
+# Node Modules
+
+node_modules/
+
+# Version identification file
+.version
+
+# Docker secrets
+secrets.yml

.vscode/launch.json

@@ -4,43 +4,83 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-
-
-
-        {"name":"Python: Flask","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"backend/app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger","--no-reload"],"jinja":true},
-        {"name":"Python: Flask (with reload)","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"backend/app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger"],"jinja":true},
         {
-            "name": "Python: Flask (with reload, externally reachable)",
+            "preLaunchTask": "mariadb",
+            "name": "Python: Flask",
             "type": "python",
+            "cwd": "${workspaceFolder}/backend",
             "request": "launch",
             "module": "flask",
             "env": {
-                "FLASK_APP": "backend/app/main.py",
+                "FLASK_APP": "backend/app.py",
                 "FLASK_ENV": "development",
-                "FLASK_DEBUG": "1"
+                "FLASK_DEBUG": "1", 
             },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger",
-                "--host='0.0.0.0'"
+                "--no-reload"
             ],
             "jinja": true
         },
         {
-            "name": "Python: Flask (externally reachable)",
+            "preLaunchTask": "mariadb",
+            "name": "Python: Flask (with reload)",
             "type": "python",
+            "cwd": "${workspaceFolder}/backend",
             "request": "launch",
             "module": "flask",
             "env": {
-                "FLASK_APP": "backend/app/main.py",
+                "FLASK_APP": "backend/app.py",
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },
+            "envFile": "${workspaceFolder}/.env.dev",
+            "args": [
+                "run",
+                "--no-debugger"
+            ],
+            "jinja": true
+        },
+        {
+            "preLaunchTask": "mariadb",
+            "name": "Python: Flask (with reload, externally reachable)",
+            "type": "python",
+            "cwd": "${workspaceFolder}/backend",
+            "request": "launch",
+            "module": "flask",
+            "env": {
+                "FLASK_APP": "backend/app.py",
+                "FLASK_ENV": "development",
+                "FLASK_DEBUG": "1"
+            },
+            "envFile": "${workspaceFolder}/.env.dev",
+            "args": [
+                "run",
+                "--no-debugger",
+                "--host=0.0.0.0"
+            ],
+            "jinja": true
+        },
+        {
+            "preLaunchTask": "mariadb",
+            "name": "Python: Flask (externally reachable)",
+            "type": "python",
+            "cwd": "${workspaceFolder}/backend",
+            "request": "launch",
+            "module": "flask",
+            "env": {
+                "FLASK_APP": "backend/app.py",
+                "FLASK_ENV": "development",
+                "FLASK_DEBUG": "1"
+            },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger",
                 "--no-reload",
-                "--host='0.0.0.0'"
+                "--host=0.0.0.0"
             ],
             "jinja": true
         },

.vscode/settings.json

@@ -1,9 +1,3 @@
 {
-    "python.pythonPath": "/usr/bin/python",
+    "python.pythonPath": "/usr/bin/python"
-    "files.exclude": {
-        "**/.classpath": true,
-        "**/.project": true,
-        "**/.settings": true,
-        "**/.factorypath": true
-    }
 }

.vscode/tasks.json

@@ -1,15 +1,20 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558 
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
     // for the documentation about the tasks.json format
     "version": "2.0.0",
     "tasks": [
         {
-            "type": "npm",
+            "label": "versiondump",
-            "script": "start",
+            "type": "shell",
-            "path": "frontend/ng-karaoqueue/",
+            "command": "echo \"$(git rev-parse --abbrev-ref HEAD)-$(git describe)\"> ${workspaceFolder}/backend/.version",
-            "problemMatcher": [
+            "problemMatcher": []
-                "$tsc"
+        },
-            ]
+        {
+            "label": "mariadb",
+            "type": "shell",
+            "command": "docker-compose -f docker-compose.yml up --remove-orphans",
+            "isBackground": true,
+            "activeOnStart": false
         }
     ]
 }

Dockerfile

@@ -0,0 +1,16 @@
+FROM tiangolo/meinheld-gunicorn-flask:python3.9
+
+RUN apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xcbcb082a1bb943db
+RUN curl -LsS https://downloads.mariadb.com/MariaDB/mariadb_repo_setup | bash
+
+RUN apt-get update
+RUN apt-get upgrade -y
+RUN apt-get dist-upgrade
+
+COPY ./backend/requirements.txt /app/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /app/requirements.txt
+
+RUN pip install --no-cache-dir -U meinheld
+
+COPY ./backend /app

KaraokeWarkeliste.code-workspace

@@ -1,13 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "./frontend/ng-karaoqueue"
-		},
-		{
-			"path": "backend"
-		},
-		{
-			"path": "docs"
-		}
-	]
-}

backend/.gcloudignore

@@ -0,0 +1,19 @@
+# This file specifies files that are *not* uploaded to Google Cloud Platform
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Python pycache:
+__pycache__/
+# Ignored by the build system
+/setup.cfg

backend/.vscode/launch.json

@@ -1,24 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch via NPM",
-            "cwd": "${workspaceFolder}/karaoqueue-backend",
-            "runtimeExecutable": "npm",
-            "runtimeArgs": [
-                "run-script",
-                "debug"
-            ],
-            "port": 9229,
-            "skipFiles": [
-                "<node_internals>/**"
-            ],
-            "preLaunchTask": "npm: build - karaoqueue-backend"
-        }
-    ]
-}

backend/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "python.pythonPath": "pyenv/bin/python"
-}

backend/.vscode/tasks.json

@@ -1,59 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "label": "Launch MongoDB",
-            "type": "shell",
-            "command": "docker-compose -f ${workspaceFolder}/docker/docker-compose.dev.yml up",
-            "isBackground": true,
-            "problemMatcher": [
-                {
-                    "pattern": [
-                        {
-                            "regexp": ".",
-                            "file": 1,
-                            "location": 2,
-                            "message": 3
-                        }
-                    ],
-                    "background": {
-                        "activeOnStart": true,
-                        "beginsPattern": ".",
-                        "endsPattern": "."
-                    }
-                }
-            ],
-            "presentation": {
-                "echo": true,
-                "reveal": "always",
-                "focus": false,
-                "panel": "shared",
-                "showReuseMessage": true,
-                "clear": true
-            },
-            "group": "build"
-        },
-        {
-            "label": "Stop MongoDB",
-            "type": "shell",
-            "command": "docker-compose -f ${workspaceFolder}/docker/docker-compose.dev.yml stop"
-        },
-        {
-            "label": "Reset MongoDB",
-            "type": "shell",
-            "command": "docker-compose -f ${workspaceFolder}/docker/docker-compose.dev.yml rm -sf",
-            "problemMatcher": []
-        },
-        {
-            "type": "npm",
-            "script": "build",
-            "path": "karaoqueue-backend/",
-            "group": "build",
-            "problemMatcher": [],
-            "label": "npm: build - karaoqueue-backend",
-            "detail": "tsc"
-        }
-    ]
-}

backend/Procfile

@@ -0,0 +1 @@
+web: gunicorn wsgi:app

backend/app.py

@@ -0,0 +1,278 @@
+from flask import Flask, render_template, abort, request, redirect, send_from_directory, jsonify
+from flask.wrappers import Request, Response
+import helpers
+import database
+import data_adapters
+import os
+import json
+from flask_basicauth import BasicAuth
+from helpers import nocache
+app = Flask(__name__, static_url_path='/static')
+
+basic_auth = BasicAuth(app)
+accept_entries = True
+
+@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("/favicon.ico")
+def favicon():
+    return send_from_directory(os.path.join(app.root_path, 'static'),
+                               'favicon.ico', mimetype='image/vnd.microsoft.icon')
+
+
+@app.route('/api/enqueue', methods=['POST'])
+@nocache
+def enqueue():
+    if not request.json:
+        print(request.data)
+        abort(400)
+    client_id = request.json['client_id']
+    if not helpers.is_valid_uuid(client_id):
+        print(request.data)
+        abort(400)
+    name = request.json['name']
+    song_id = request.json['id']
+    if request.authorization:
+        database.add_entry(name, song_id, client_id)
+        return Response('{"status":"OK"}', mimetype='text/json')
+    else:
+        if helpers.get_accept_entries(app):
+            if not request.json:
+                print(request.data)
+                abort(400)
+            client_id = request.json['client_id']
+            if not helpers.is_valid_uuid(client_id):
+                print(request.data)
+                abort(400)
+            name = request.json['name']
+            song_id = request.json['id']
+            if database.check_queue_length() < int(app.config['MAX_QUEUE']):
+                if database.check_entry_quota(client_id) < int(app.config['ENTRY_QUOTA']):
+                    database.add_entry(name, song_id, client_id)
+                    return Response('{"status":"OK"}', mimetype='text/json')
+                else:
+                    return Response('{"status":"Du hast bereits ' + str(database.check_entry_quota(client_id)) + ' Songs eingetragen, dies ist das Maximum an Einträgen die du in der Warteliste haben kannst."}', mimetype='text/json', status=423)
+            else:
+                return Response('{"status":"Die Warteschlange enthält momentan ' + str(database.check_queue_length()) + ' Einträge und ist lang genug, bitte versuche es noch einmal wenn ein paar Songs gesungen wurden."}', mimetype='text/json', status=423)
+        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("/settings")
+@nocache
+@basic_auth.required
+def settings():
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+
+
+@app.route("/settings", methods=['POST'])
+@nocache
+@basic_auth.required
+def settings_post():
+    entryquota = request.form.get("entryquota")
+    maxqueue = request.form.get("maxqueue")
+    theme = request.form.get("theme")
+    username = request.form.get("username")
+    password = request.form.get("password")
+    changed_credentials = False
+    if entryquota.isnumeric() and int(entryquota) > 0:  # type: ignore
+        app.config['ENTRY_QUOTA'] = int(entryquota)  # type: ignore
+    else:
+        abort(400)
+    if maxqueue.isnumeric and int(maxqueue) > 0:  # type: ignore
+        app.config['MAX_QUEUE'] = int(maxqueue)  # type: ignore
+    else:
+        abort(400)
+    if theme is not None and theme in helpers.get_themes():
+        helpers.set_theme(app,theme)
+    else:
+        abort(400)
+    if username != "" and username != app.config['BASIC_AUTH_USERNAME']:
+        app.config['BASIC_AUTH_USERNAME'] = username
+        changed_credentials = True
+    if password != "":
+        app.config['BASIC_AUTH_PASSWORD'] = password
+        changed_credentials = True
+    helpers.persist_config(app=app)
+    if changed_credentials:
+        return redirect("/")
+    else:
+        return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+
+
+@app.route("/api/queue")
+@nocache
+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")
+@nocache
+@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")
+@nocache
+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")
+@nocache
+@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") # type: ignore
+@nocache
+def get_song_completions(input_string=""):
+    input_string = request.args.get('search', input_string)
+    if input_string != "":
+        print(input_string)
+        result = [list(x) for x in database.get_song_completions(input_string=input_string)]
+        return jsonify(result)
+
+    else:
+        return 400
+
+
+@app.route("/api/entries/delete/<entry_id>")
+@nocache
+@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'])
+@nocache
+@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>")
+@nocache
+@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/mark_transferred/<entry_id>")
+@nocache
+@basic_auth.required
+def mark_transferred(entry_id):
+    if database.toggle_transferred(entry_id):
+        return Response('{"status": "OK"}', mimetype='text/json')
+    else:
+        return Response('{"status": "FAIL"}', mimetype='text/json')
+
+
+@app.route("/api/entries/accept/<value>")
+@nocache
+@basic_auth.required
+def set_accept_entries(value):
+    if (value == '0' or value == '1'):
+        helpers.set_accept_entries(app,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")
+@nocache
+def get_accept_entries():
+    accept_entries = helpers.get_accept_entries(app)
+    return Response('{"status": "OK", "value": '+str(int(accept_entries))+'}', mimetype='text/json')
+
+
+@app.route("/api/played/clear")
+@nocache
+@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")
+@nocache
+@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.load_dbconfig(app)
+    helpers.load_version(app)
+    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()
+    database.create_config_table()
+    helpers.setup_config(app)
+
+
+
+@app.after_request
+def add_header(response):
+    """
+    Add headers to both force latest IE rendering engine or Chrome Frame,
+    and also to cache the rendered page for 10 minutes.
+    """
+    if not 'Cache-Control' in response.headers:
+        response.headers['Cache-Control'] = 'private, max-age=600, no-cache, must-revalidate'
+    return response
+
+@app.context_processor
+def inject_version():
+    return dict(karaoqueue_version=app.config['VERSION'])
+
+
+if __name__ == "__main__":
+    app.run(host='127.0.0.1', port=8080, debug=True)

backend/app.yaml

@@ -0,0 +1,19 @@
+runtime: python39
+
+manual_scaling:
+  # Das ist alles bloß dumm schnell zusammengehackt...
+  instances: 1
+
+handlers:
+  # This configures Google App Engine to serve the files in the app's static
+  # directory.
+- url: /static
+  static_dir: static
+
+  # This handler routes all requests not caught above to your main app. It is
+  # required when static routes are defined, but can be omitted (along with
+  # the entire handlers section) when there are no static files defined.
+- url: /.*
+  script: auto
+  secure: always
+  redirect_http_response_code: 301

backend/data_adapters.py

@@ -0,0 +1,5 @@
+def dict_from_rows(rows):
+    outlist=[]
+    for row in rows:
+        outlist.append(dict(row._mapping))
+    return outlist

backend/database.py

@@ -0,0 +1,262 @@
+# -*- coding: utf_8 -*-
+
+from email.mime import base
+from MySQLdb import Connection
+from sqlalchemy import create_engine, engine, text
+import pandas
+from io import StringIO
+from flask import current_app
+
+song_table = "songs"
+entry_table = "entries"
+index_label = "Id"
+done_table = "done_songs"
+
+sql_engine = None
+
+
+def get_db_engine() -> engine.base.Engine:
+    global sql_engine
+    if (not sql_engine):
+        print(current_app.config.get("DBCONNSTRING"))
+        sql_engine = create_engine(
+            current_app.config.get("DBCONNSTRING"))  # type: ignore
+    return sql_engine
+
+
+def import_songs(song_csv):
+    print("Start importing Songs...")
+    df = pandas.read_csv(StringIO(song_csv), sep=';')
+    with get_db_engine().connect() as conn:
+        df.to_sql(song_table, conn, if_exists='replace',
+                  index=False)
+        cur = conn.execute(text("SELECT Count(Id) FROM songs"))
+        num_songs = cur.fetchone()[0]  # type: ignore
+        conn.commit()
+    print("Imported songs ({} in Database)".format(num_songs))
+    return ("Imported songs ({} in Database)".format(num_songs))
+
+
+def create_entry_table():
+    with get_db_engine().connect() as conn:
+        stmt = text(
+            f'CREATE TABLE IF NOT EXISTS `{entry_table}` (ID INTEGER PRIMARY KEY NOT NULL AUTO_INCREMENT, Song_Id INTEGER NOT NULL, Name VARCHAR(255), Client_Id VARCHAR(36), Transferred INTEGER DEFAULT 0)')
+        conn.execute(stmt)
+        conn.commit()
+
+
+def create_done_song_table():
+    with get_db_engine().connect() as conn:
+        stmt = text(
+            f'CREATE TABLE IF NOT EXISTS `{done_table}` (Song_Id INTEGER PRIMARY KEY NOT NULL,  Plays INTEGER)')
+        conn.execute(stmt)
+        conn.commit()
+
+
+def create_song_table():
+    with get_db_engine().connect() as conn:
+        stmt = text(f"""CREATE TABLE IF NOT EXISTS `{song_table}` (
+        `Id` INTEGER,
+        `Title` TEXT,
+        `Artist` TEXT,
+        `Year` VARCHAR(4),
+        `Duo` BOOLEAN,
+        `Explicit` INTEGER,
+        `Date Added` TIMESTAMP,
+        `Styles` TEXT,
+        `Languages` TEXT
+        )""")
+        conn.execute(stmt)
+        conn.commit()
+
+
+def create_list_view():
+    with get_db_engine().connect() as conn:
+        stmt = text("""CREATE OR REPLACE VIEW `Liste` AS
+                 SELECT Name, Title, Artist, entries.Id AS entry_ID, songs.Id AS song_ID, entries.Transferred
+                 FROM entries, songs
+                 WHERE entries.Song_Id=songs.Id""")
+        conn.execute(stmt)
+        conn.commit()
+
+
+def create_done_song_view():
+    with get_db_engine().connect() as conn:
+        stmt = text("""CREATE OR REPLACE VIEW `Abspielliste` AS
+                 SELECT CONCAT(Artist," - ", Title) AS Song, Plays AS Wiedergaben
+                 FROM songs, done_songs
+                 WHERE done_songs.Song_Id=songs.Id""")
+        conn.execute(stmt)
+        conn.commit()
+
+
+def create_config_table():
+    with get_db_engine().connect() as conn:
+        stmt = text("""CREATE TABLE IF NOT EXISTS `config` (
+        `Key` VARCHAR(50) NOT NULL PRIMARY KEY,
+        `Value` TEXT
+        )""")
+        conn.execute(stmt)
+        conn.commit()
+
+
+def get_list():
+    with get_db_engine().connect() as conn:
+        stmt = text("SELECT * FROM Liste")
+        cur = conn.execute(stmt)
+    return cur.fetchall()
+
+
+def get_played_list():
+    with get_db_engine().connect() as conn:
+        stmt = text("SELECT * FROM Abspielliste")
+        cur = conn.execute(stmt)
+    return cur.fetchall()
+
+
+def get_song_list():
+    with get_db_engine().connect() as conn:
+        stmt = text("SELECT Artist || \" - \" || Title AS Song, Id FROM songs;")
+        cur = conn.execute(stmt)
+    return cur.fetchall()
+
+
+def get_song_completions(input_string):
+    with get_db_engine().connect() as conn:
+        prepared_string = f"%{input_string.upper()}%"
+        stmt = text(
+            "SELECT CONCAT(Artist, ' - ', Title) AS Song, Id FROM songs WHERE CONCAT(Artist, ' - ', Title) LIKE :prepared_string LIMIT 20;")
+        cur = conn.execute(
+            stmt, {"prepared_string": prepared_string})  # type: ignore
+        return cur.fetchall()
+
+
+def add_entry(name, song_id, client_id):
+    with get_db_engine().connect() as conn:
+        stmt = text(
+            "INSERT INTO entries (Song_Id,Name,Client_Id) VALUES (:par_song_id,:par_name,:par_client_id);")
+        conn.execute(stmt, {"par_song_id": song_id, "par_name": name,
+                     "par_client_id": client_id})  # type: ignore
+        conn.commit()
+    return True
+
+
+def add_sung_song(entry_id):
+    with get_db_engine().connect() as conn:
+        stmt = text("SELECT Song_Id FROM entries WHERE Id=:par_entry_id")
+        cur = conn.execute(stmt, {"par_entry_id": entry_id})  # type: ignore
+        song_id = cur.fetchone()[0]  # type: ignore
+        stmt = text(
+            "INSERT INTO done_songs (Song_Id,Plays) VALUES (:par_song_id,1) ON DUPLICATE KEY UPDATE Plays=Plays + 1;")
+        conn.execute(stmt, {"par_song_id": song_id})  # type: ignore
+        conn.commit()
+        delete_entry(entry_id)
+    return True
+
+
+def toggle_transferred(entry_id):
+    with get_db_engine().connect() as conn:
+        cur = conn.execute(text("SELECT Transferred FROM entries WHERE ID = :par_entry_id"),
+                           {"par_entry_id": entry_id})  # type: ignore
+        marked = cur.fetchall()[0][0]
+        if (marked == 0):
+            conn.execute(text("UPDATE entries SET Transferred = 1 WHERE ID = :par_entry_id"),
+                         {"par_entry_id": entry_id})  # type: ignore
+        else:
+            conn.execute(text("UPDATE entries SET Transferred = 0 WHERE ID = :par_entry_id"),
+                         {"par_entry_id": entry_id})  # type: ignore
+        conn.commit()
+    return True
+
+
+def check_entry_quota(client_id):
+    with get_db_engine().connect() as conn:
+        cur = conn.execute(text("SELECT Count(*) FROM entries WHERE entries.Client_Id = :par_client_id"),
+                           {"par_client_id": client_id})  # type: ignore
+    return cur.fetchall()[0][0]
+
+
+def check_queue_length():
+    with get_db_engine().connect() as conn:
+        cur = conn.execute(text("SELECT Count(*) FROM entries"))
+    return cur.fetchall()[0][0]
+
+
+def clear_played_songs():
+    with get_db_engine().connect() as conn:
+        conn.execute(text("DELETE FROM done_songs"))
+        conn.commit()
+    return True
+
+
+def delete_entry(id):
+    with get_db_engine().connect() as conn:
+        conn.execute(text("DELETE FROM entries WHERE id= :par_id"), {
+                     "par_id": id})  # type: ignore
+        conn.commit()
+    return True
+
+
+def delete_entries(ids):
+    idlist = []
+    for x in ids:
+        idlist.append((x,))
+    try:
+        with get_db_engine().connect() as conn:
+            cur = conn.execute(text("DELETE FROM entries WHERE id= :par_id"), {
+                               "par_id": idlist})
+            conn.commit()
+        return cur.rowcount
+    except Exception as error:
+        return -1
+
+
+def delete_all_entries() -> bool:
+    with get_db_engine().connect() as conn:
+        conn.execute(text("DELETE FROM entries"))
+        conn.commit()
+    return True
+
+
+def get_config(key: str) -> str:
+    try:
+        with get_db_engine().connect() as conn:
+            cur = conn.execute(
+                text("SELECT `Value` FROM config WHERE `Key`= :par_key"), {"par_key": key})  # type: ignore
+            conn.commit()
+        return cur.fetchall()[0][0]
+    except IndexError as error:
+        return ""
+
+
+def set_config(key: str, value: str) -> bool:
+    print(f"Setting config {key} to {value}")
+    with get_db_engine().connect() as conn:
+        conn.execute(text(
+            "INSERT INTO config (`Key`, `Value`) VALUES ( :par_key , :par_value) ON DUPLICATE KEY UPDATE `Value`= :par_value"),
+            {"par_key": key, "par_value": value}
+        )  # type: ignore
+        conn.commit()
+    return True
+
+
+def get_config_list() -> dict:
+    with get_db_engine().connect() as conn:
+        cur = conn.execute(text("SELECT * FROM config"))
+        result_dict = {}
+        for row in cur.fetchall():
+            result_dict[row[0]] = row[1]
+    return result_dict
+
+
+def check_config_table() -> bool:
+    with get_db_engine().connect() as conn:
+        if conn.dialect.has_table(conn, 'config'):
+            # type: ignore
+            # type: ignore
+            if (conn.execute(text("SELECT COUNT(*) FROM config")).fetchone()[0] > 0): # type: ignore
+                return True
+            else:
+                return False
+        else:
+            return False

backend/docker/Dockerfile

@@ -1,11 +0,0 @@
-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

backend/docker/docker-compose.dev.yml

@@ -1,14 +0,0 @@
-version: '2'
-services:
-  mongo:
-    extends:
-        file: docker-compose.yml
-        service: mongo
-
-  mongo-express:
-    depends_on:
-        - mongo
-    image: mongo-express
-    restart: always
-    ports:
-      - "8081:8081"

backend/docker/docker-compose.yml

@@ -1,12 +0,0 @@
-version: '2'
-services:
-  mongo:
-    image: mongo
-    restart: always
-    ports:
-      - "27017:27017"
-
-  backend:
-    depends_on:
-      - mongo
-    build: .

backend/helpers.py

@@ -0,0 +1,173 @@
+import requests
+from bs4 import BeautifulSoup
+import json
+import os
+import uuid
+from flask import make_response, Flask
+from functools import wraps, update_wrapper
+from datetime import datetime
+import database
+
+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='Verfügbar in CSV-Format')[0]['href']
+    return url
+
+
+def get_songs(url):
+    r = requests.get(url)
+    return r.text
+
+
+def is_valid_uuid(val):
+    try:
+        uuid.UUID(str(val))
+        return True
+    except ValueError:
+        return False
+
+
+def check_config_exists():
+    return database.check_config_table()
+
+
+def load_version(app: Flask):
+    if os.environ.get("SOURCE_VERSION"):
+        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7]  # type: ignore # noqa: E501
+    elif os.path.isfile(".version"):
+        with open('.version', 'r') as file:
+            data = file.read().replace('\n', '')
+            if data:
+                app.config['VERSION'] = data
+            else:
+                app.config['VERSION'] = ""
+    else:
+        app.config['VERSION'] = ""
+
+
+def load_dbconfig(app: Flask):
+    if os.environ.get("FLASK_ENV") == "development":
+        app.config['DBCONNSTRING'] = os.environ.get("DBSTRING")
+    else:
+        if os.environ.get("DEPLOYMENT_PLATFORM") == "Heroku":
+            if os.environ.get("JAWSDB_MARIA_URL"):
+                app.config['DBCONNSTRING'] = os.environ.get("JAWSDB_MARIA_URL")
+            else:
+                app.config['DBCONNSTRING'] = ""
+        if os.environ.get("DEPLOYMENT_PLATFORM") == "Docker":
+            if os.environ.get("DBSTRING"):
+                app.config['DBCONNSTRING'] = os.environ.get("DBSTRING")
+            else:
+                app.config['DBCONNSTRING'] = ""
+        elif os.path.isfile(".dbconn"):
+            with open('.dbconn', 'r') as file:
+                data = file.read().replace('\n', '')
+                if data:
+                    app.config['DBCONNSTRING'] = data
+                else:
+                    app.config['DBCONNSTRING'] = ""
+        else:
+            exit("No database connection string found. Cannot continue. Please set the environment variable DBSTRING or create a file .dbconn in the root directory of the project.")
+
+# Check if config exists in DB, if not, create it.
+
+
+def setup_config(app: Flask):
+    if check_config_exists() == False:
+        print("No config found, creating new config")
+        initial_username = os.environ.get("INITIAL_USERNAME")
+        initial_password = os.environ.get("INITIAL_PASSWORD")
+        if initial_username is None:
+            print(
+                "No initial username set. Please set the environment variable INITIAL_USERNAME")
+            exit()
+        if initial_password is None:
+            print(
+                "No initial password set. Please set the environment variable INITIAL_PASSWORD")
+            exit()
+        default_config = {'username': initial_username,
+                          'password': initial_password,
+                          'entryquota': 3,
+                          'maxqueue': 20,
+                          'entries_allowed': 1,
+                          'theme': 'default.css'}
+        for key, value in default_config.items():
+            database.set_config(key, value)
+        print("Created new config")
+    config = database.get_config_list()
+    app.config['BASIC_AUTH_USERNAME'] = config['username']
+    app.config['BASIC_AUTH_PASSWORD'] = config['password']
+    app.config['ENTRY_QUOTA'] = config['entryquota']
+    app.config['MAX_QUEUE'] = config['maxqueue']
+    app.config['ENTRIES_ALLOWED'] = bool(config['entries_allowed'])
+    app.config['THEME'] = config['theme']
+
+# set queue admittance
+
+
+def set_accept_entries(app: Flask, allowed: bool):
+    if allowed:
+        app.config['ENTRIES_ALLOWED'] = True
+        database.set_config('entries_allowed', '1')
+    else:
+        app.config['ENTRIES_ALLOWED'] = False
+        database.set_config('entries_allowed', '0')
+
+# get queue admittance
+
+
+def get_accept_entries(app: Flask) -> bool:
+    state = bool(int(database.get_config('entries_allowed')))
+    app.config['ENTRIES_ALLOWED'] = state
+    return state
+
+
+# Write settings from current app.config to DB
+def persist_config(app: Flask):
+    config = {'username': app.config['BASIC_AUTH_USERNAME'], 'password': app.config['BASIC_AUTH_PASSWORD'],
+              'entryquota': app.config['ENTRY_QUOTA'], 'maxqueue': app.config['MAX_QUEUE']}
+    for key, value in config.items():
+        database.set_config(key, value)
+
+# Get available themes from themes directory
+
+
+def get_themes():
+    themes = []
+    for theme in os.listdir('./static/css/themes'):
+        themes.append(theme)
+    return themes
+
+# Set theme
+
+
+def set_theme(app: Flask, theme: str):
+    if theme in get_themes():
+        app.config['THEME'] = theme
+        database.set_config('theme', theme)
+    else:
+        print("Theme not found, not setting theme.")
+
+
+def nocache(view):
+    @wraps(view)
+    def no_cache(*args, **kwargs):
+        response = make_response(view(*args, **kwargs))
+        response.headers['Last-Modified'] = datetime.now()  # type: ignore
+        response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0, max-age=0'
+        response.headers['Pragma'] = 'no-cache'
+        response.headers['Expires'] = '-1'
+        return response
+
+    return update_wrapper(no_cache, view)

backend/karaoqueue-backend/.example.env

@@ -1,10 +0,0 @@
-# Fixed login Username
-KQUEUE_USERNAME=admin
-# Fixed login Password
-KQUEUE_PASSWORD=pass
-# Port the app is listening on
-KQUEUE_PORT=3000
-# Secret used to sign JSON Web Tokens
-KQUEUE_JWTSECRET=THIS_IS_A_BAD_SECRET_PLEASE_CHANGE
-# Expiry time for the login jwt tokens in minutes
-KQUEUE_JWTEXPIRY=1440 # 24h

backend/karaoqueue-backend/.gitignore

@@ -1,117 +0,0 @@
- 
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*

backend/karaoqueue-backend/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "karaoqueue-backend",
-  "version": "0.0.1",
-  "description": "Backend for KaraoQueue",
-  "main": "index.js",
-  "scripts": {
-    "start": "node dist/index.js",
-    "debug": "node --nolazy dist/index.js",
-    "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Phillip Kühne",
-  "license": "ISC",
-  "devDependencies": {
-    "@types/body-parser": "^1.19.0",
-    "@types/debug": "^4.1.5",
-    "@types/express": "^4.17.6",
-    "@types/multer": "^1.4.3",
-    "@types/node": "^14.0.5",
-    "tslint": "^6.1.2",
-    "typescript": "^3.9.3"
-  },
-  "dependencies": {
-    "@types/mongodb": "^3.5.18",
-    "body-parser": "^1.19.0",
-    "class-transformer": "^0.3.1",
-    "class-validator": "^0.12.2",
-    "cors": "^2.8.5",
-    "debug": "^4.1.1",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "jsonwebtoken": "^8.5.1",
-    "mongodb": "^3.5.7",
-    "multer": "^1.4.2",
-    "reflect-metadata": "^0.1.13",
-    "routing-controllers": "^0.9.0-alpha.1"
-  }
-}

backend/karaoqueue-backend/src/containers/appState.container.ts

@@ -1,14 +0,0 @@
-import AppState from "../models/appState.model";
-import fs from "fs";
-
-const appState = new AppState();
-
-if (fs.existsSync("/tmp/.kqueue_eventlock")) {
-    appState.currentlyInEvent=true;
-} else {
-    appState.currentlyInEvent=false;
-}
-
-appState.registrationEnabled=false;
-
-export default appState;

backend/karaoqueue-backend/src/controllers/auth.controller.ts

@@ -1,34 +0,0 @@
-import { Request, Response } from "express";
-import { Post, BodyParam, Body, Res, Req, JsonController, UseBefore, Get, CookieParam } from "routing-controllers";
-import User from "../interfaces/user.interface";
-import { JwtMiddleware } from "../middleware/jwt.middleware";
-
-@JsonController("/auth")
-export class AuthenticationController {
-
-    @Post("/login")
-    doLogin(@Body() user: User, @Res() res: Response) {
-        if (user.username === process.env.KQUEUE_USERNAME) {
-            if (user.password === process.env.KQUEUE_PASSWORD) {
-                const jwtMiddleware = new JwtMiddleware();
-                const tokenData = jwtMiddleware.createToken(user);
-                res.cookie("jwt",tokenData,);
-                res.status(200);
-                res.send("Welcome.")
-                return res;
-            } else {
-                res.status(401).send("Wrong user or password.");
-                return res;
-            }
-        } else {
-            res.status(401).send("Wrong user or password.");
-            return res;
-        }
-    }
-
-    /* TODO Logout with JWT? */
-    @Get("/logout")
-    doLogout() {
-        return "//TODO logout";
-    }
-}

backend/karaoqueue-backend/src/controllers/queue.controller.ts

@@ -1,76 +0,0 @@
-import { Request, Response } from "express";
-import { Controller, Get, Res, Post, Delete, Patch, Req, Authorized, CurrentUser } from "routing-controllers";
-import appState from "../containers/appState.container";
-import DataStoredInToken from "../interfaces/dataStoredInToken.interface";
-
-
-@Controller("/queue")
-export class QueueController {
-
-    /*
-     * Fetch entry Queue content
-     */
-    @Get()
-    getQueue(@Req() req: Request, @Res() res: Response) {
-        res.setHeader('Content-Type', 'application/json');
-        res.send(JSON.stringify({ placeholder: "//TODO fetch" }));
-        return res;
-    }
-
-    /*
-     * Add entry to Queue
-     */
-    @Post()
-    addEntry(@Req() req: Request, @Res() res: Response) {
-        res.setHeader('Content-Type', 'application/json');
-        if (appState.registrationEnabled) {
-            res.send(JSON.stringify({ placeholder: "//TODO add" }));
-        } else {
-            res.status(403)
-            res.send("Entry submission is currently not allowed.")
-        }
-        return res;
-    }
-
-    /*
-     *
-     */
-    @Delete()
-    @Authorized()
-    clearQueue(@Req() req: Request, @Res() res: Response) {
-        return "//TODO clear";
-    }
-
-    /*
-     *
-     */
-    @Get("/:entry:id")
-    getEntry(@Req() req: Request, @Res() res: Response) {
-        res.setHeader('Content-Type', 'application/json');
-        res.send(JSON.stringify({ placeholder: "//TODO get" }));
-        return res;
-    }
-
-    /*
-     *
-     */
-    @Patch("/:entry_id")
-    editEntry(@Req() req: Request, @Res() res: Response, @CurrentUser() user?: DataStoredInToken) {
-        if (user) {
-            return "You're "+user._id;
-        } else {
-            /*TODO: Require song-specific auth to modify queue entry */
-            return "You are not logged in."
-        }
-    }
-
-    @Delete("/:entry_id")
-    deleteEntry(@Req() req: Request, @Res() res: Response, @CurrentUser() user?: DataStoredInToken) {
-        if (user) {
-            return "You're " + user._id;
-        } else {
-            /*TODO: Require song-specific auth to delete queue entry */
-            return "You are not logged in."
-        }
-    }
-}

backend/karaoqueue-backend/src/controllers/rpc.controller.ts

@@ -1,67 +0,0 @@
-import { Response } from "express";
-import { Authorized, Controller, Get, Param, QueryParam, Res } from "routing-controllers";
-import appState from "../containers/appState.container";
-import fs from "fs";
-
-@Controller("/rpc")
-@Authorized()
-export class RpcController {
-    @Get("/start_event")
-    doStartEvent() {
-        /* TODO: Wipe state (queue and song playbacks) when starting new event. Maybe also refresh Song database automatically? */
-        appState.currentlyInEvent = true;
-        fs.openSync("/tmp/.kqueue_eventlock", 'w')
-        return 200;
-    }
-
-    @Get("/end_event")
-    doEndEvent() {
-        appState.currentlyInEvent = false;
-        appState.registrationEnabled = false;
-        fs.unlinkSync("/tmp/.kqueue_eventlock");
-        return 200;
-    }
-
-    @Get("/enable_registration")
-    doEnableRegistration(@Res() res: Response) {
-        if (appState.currentlyInEvent) {
-            appState.registrationEnabled = true;
-            return 200;
-        } else {
-            res.status(403).send("No event currently active")
-            return res;
-        }
-    }
-
-    @Get("/disable_registration")
-    doDisableRegistration(@Res() res: Response) {
-        if (appState.currentlyInEvent) {
-            appState.registrationEnabled = false;
-            return 200;
-        } else {
-            res.status(403).send("No event currently active")
-            return res;
-        }
-
-    }
-
-    @Get("/get_state")
-    doGetState() {
-        return appState;
-    }
-
-    @Get("/get_playstats")
-    doGetPlaystats() {
-        return "//TODO get_playstats"
-    }
-
-    @Get("/download_playstats")
-    doDownloadPlaystats() {
-        return "//TODO download_playstats"
-    }
-
-    @Get("/entry_fulfilled")
-    doEntryFulfilled(@QueryParam("entry_id") entryId: string) {
-        return `//TODO entry_fulfilled. entry_id: ${entryId}`
-    }
-}

backend/karaoqueue-backend/src/controllers/songs.controller.ts

@@ -1,16 +0,0 @@
-import { Get, QueryParam, JsonController, Put, Authorized } from "routing-controllers";
-
-
-@JsonController("/songs")
-export class SongController {
-    @Get()
-    searchSongs(@QueryParam("query") query: string, @QueryParam("limit") limit: number) {
-        return {result: "//TODO search"}
-    }
-
-    @Put()
-    @Authorized()
-    updateSongs() {
-        return "//TODO update"
-    }
-}

backend/karaoqueue-backend/src/controllers/statistics.controller.ts

@@ -1,9 +0,0 @@
-import { JsonController, Get } from "routing-controllers";
-
-@JsonController()
-export class StatisticsController {
-    @Get()
-    getStatistics() {
-        return "//TODO statistics"
-    }
-}

backend/karaoqueue-backend/src/exceptions/HttpException.ts

@@ -1,11 +0,0 @@
-class HttpException extends Error {
-    public status: number;
-    public message: string;
-    constructor(status: number, message: string) {
-        super(message);
-        this.status = status;
-        this.message = message;
-    }
-}
-
-export default HttpException;

backend/karaoqueue-backend/src/index.ts

@@ -1,74 +0,0 @@
-import "reflect-metadata";
-import { Request, Response, Application } from "express";
-import { Action, createExpressServer } from "routing-controllers";
-import { QueueController } from "./controllers/queue.controller";
-import { SongController } from "./controllers/songs.controller";
-import { StatisticsController } from "./controllers/statistics.controller";
-import { AuthenticationController } from "./controllers/auth.controller";
-import { RpcController } from "./controllers/rpc.controller";
-import jwt from "jsonwebtoken";
-import appState from "./containers/appState.container";
-
-
-import * as dotenv from "dotenv";
-import DataStoredInToken from "./interfaces/dataStoredInToken.interface";
-dotenv.config();
-
-const app: Application = createExpressServer({
-    routePrefix: "/api",
-    cors: true,
-    /* HACK. This definitely needs to be cleaned up... */
-    authorizationChecker: async (action: Action) => {
-        const req: Request = action.request;
-        const secret = process.env.KQUEUE_JWTSECRET;
-        // tslint:disable-next-line: no-string-literal
-        const token = parseCookies(req.headers.cookie)['jwt'];
-        if (token) {
-            try {
-                const verificationResponse = jwt.verify(token, secret);
-                if (verificationResponse) {
-                    return true;
-                } else {
-                    return false;
-                }
-            } catch (error) {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    },
-    /* HACK. This definitely needs to be cleaned up... */
-    currentUserChecker: async (action: Action) => {
-        const req: Request = action.request;
-        const secret = process.env.KQUEUE_JWTSECRET;
-        // tslint:disable-next-line: no-string-literal
-        const token = parseCookies(req.headers.cookie)['jwt'];
-        if (token) {
-            try {
-                const verificationResponse = jwt.verify(token, secret);
-                if (verificationResponse) {
-                    return verificationResponse as DataStoredInToken;
-                } else {
-                    return false;
-                }
-            } catch (error) {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    },
-    controllers: [QueueController, SongController, StatisticsController, AuthenticationController, RpcController]
-});
-app.listen(process.env.KQUEUE_PORT);
-
-/* HACK. This definitely needs to be cleaned up... */
-function parseCookies(str) {
-    const rx = /([^;=\s]*)=([^;]*)/g;
-    const obj = {};
-    // tslint:disable-next-line: no-conditional-assignment
-    for (let m; m = rx.exec(str);)
-        obj[m[1]] = decodeURIComponent(m[2]);
-    return obj;
-}

backend/karaoqueue-backend/src/interfaces/dataStoredInToken.interface.ts

@@ -1,5 +0,0 @@
-interface DataStoredInToken {
-    _id: string;
-}
-
-export default DataStoredInToken;

backend/karaoqueue-backend/src/interfaces/user.interface.ts

@@ -1,6 +0,0 @@
-interface User {
-    username: string;
-    password: string;
-}
-
-export default User;

backend/karaoqueue-backend/src/middleware/jwt.middleware.ts

@@ -1,15 +0,0 @@
-import DataStoredInToken from "../interfaces/dataStoredInToken.interface";
-import User from "../interfaces/user.interface";
-import * as jwt from 'jsonwebtoken';
-
-export class JwtMiddleware {
-    public createToken(user: User): string {
-        /* expiresIn is in seconds. We take the env value which is in minutes and multiply it by 60.*/
-        const expiresIn = parseInt(process.env.KQUEUE_JWTEXPIRY,10) * 60;
-        const secret = process.env.KQUEUE_JWTSECRET;
-        const dataStoredInToken: DataStoredInToken = {
-            _id: user.username,
-        };
-        return jwt.sign(dataStoredInToken, secret, { expiresIn });
-    }
-}

backend/karaoqueue-backend/src/models/appState.model.ts

@@ -1,6 +0,0 @@
-class AppState {
-    registrationEnabled: boolean;
-    currentlyInEvent: boolean;
-}
-
-export default AppState;

backend/karaoqueue-backend/tsconfig.json

@@ -1,17 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es2017",
-        "module": "commonjs",
-        "outDir": "dist",
-        "sourceMap": true,
-        "esModuleInterop": true,
-        "emitDecoratorMetadata": true,
-        "experimentalDecorators": true,
-    },
-    "include": [
-        "src/**/*.ts"
-    ],
-    "exclude": [
-        "node_modules"
-    ]
-}

backend/karaoqueue-backend/tslint.json

@@ -1,13 +0,0 @@
-{
-    "defaultSeverity": "error",
-    "extends": [
-        "tslint:recommended"
-    ],
-    "jsRules": {},
-    "rules": {
-        "trailing-comma": [
-            false
-        ]
-    },
-    "rulesDirectory": []
-}

backend/main.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == "__main__":
+        app.run()

backend/requirements.txt

@@ -0,0 +1,30 @@
+autopep8
+beautifulsoup4
+bs4
+certifi
+charset-normalizer
+click
+Flask
+Flask-BasicAuth
+greenlet
+gunicorn
+idna
+itsdangerous
+Jinja2
+mariadb
+MarkupSafe
+mysql
+mysqlclient
+numpy
+pandas
+pycodestyle
+PyMySQL
+python-dateutil
+pytz
+requests
+six
+soupsieve
+SQLAlchemy
+toml
+urllib3
+Werkzeug

backend/static/css/style.css

@@ -0,0 +1,194 @@
+:root {
+    /* Navbar */
+    --navbar-background-color: #343a40;
+    --navbar-text-color: rgba(255, 255, 255, .5);
+    --navbar-text-color-hover: rgba(255, 255, 255, .75);
+    --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+    /* Common */
+    --background-color: #ffffff;
+    --background-color-var: #f5f5f5;
+    --text-color: #212529;
+    --text-color-var: #343a40;
+
+    /* Modals */
+    --modal-background-color: #ffffff;
+    --modal-separator-color: #dee2e6;
+    --modal-close-color: #212529;
+
+    /* Tables */
+    --table-border-color: #dee2e6;
+
+    /* Input */
+    --input-background-color: #ffffff;
+}
+
+
+body {
+    padding-top: 5rem;
+    background-color: var(--background-color);
+}
+
+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: var(--background-color-var);
+}
+
+.topbutton {
+    width: 100%;
+}
+
+table td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+table.entries tbody tr[data-index="0"] {
+    background-color: #007bff80;
+    font-weight: 600;
+}
+
+table.entries tbody tr[data-index="1"] {
+    background-color: #007bff40;
+    font-weight: 500;
+}
+
+table.entries tbody tr[data-index="2"] {
+    background-color: #007bff20;
+    font-weight: 400;
+}
+
+table.entries tbody tr[data-index="3"] {
+    background-color: #007bff10;
+}
+
+table td:first-child {
+    max-width: 200px !important;
+}
+
+.fa-solid {
+    vertical-align: auto;
+}
+
+@media (min-width: 768px) {
+    .topbutton {
+        width: auto;
+    }
+}
+
+@media print {
+    body {
+        font-size: 1.3em;
+    }
+
+    .footer {
+        display: none !important;
+    }
+
+    .admincontrols {
+        display: none;
+    }
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.footer {
+    background-color: var(--background-color-var);
+}
+
+.modal-content {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.modal-header {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.modal-footer {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.form-control {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.form-control:focus {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.table td,
+.table th {
+    border-color: var(--table-border-color)
+}
+
+.table thead th {
+    border-color: var(--table-border-color)
+}
+
+table td.buttoncell {
+    text-align: end;
+}
+
+.close {
+    color: var(--text-color)
+}
+
+pre {
+    color: var(--text-color-var)
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Navbar */
+        --navbar-background-color: #343a40;
+        --navbar-text-color: rgba(255, 255, 255, .5);
+        --navbar-text-color-hover: rgba(255, 255, 255, .75);
+        --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+        /* Common */
+        --background-color: #121212;
+        --background-color-var: #232323;
+        --text-color: #f5f5f5;
+        --text-color-var: #a2a2a2;
+
+        /* Modals */
+        --modal-background-color: #121212;
+        --modal-separator-color: #232323;
+        --modal-close-color: #f5f5f5;
+
+        /* Tables */
+        --table-border-color: #232323;
+
+        /* Input */
+        --input-background-color: #343434;
+    }
+}

backend/static/css/themes/stuk.css

@@ -0,0 +1,91 @@
+.navbar {
+    background: #090a28 !important;
+}
+
+.navbar .navbar-toggle:hover,
+.navbar .navbar-toggle:focus {
+    background-color: #900000 !important;
+}
+
+.navbar .navbar-toggle {
+    border: none;
+}
+
+.navbar .navbar-nav>.open>a,
+.navbar .navbar-nav>.open>a:hover,
+.navbar .navbar-nav>.open>a:focus {
+    color: #CF2323 !important;
+    background-color: #050515 !important;
+}
+
+.btn-primary {
+    background-color: #15175b;
+    border-color: #15175b;
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    background-color: #0e103e;
+    background-position: 0 -15px;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+    background-color: #0e103e;
+    border-color: #0e103e;
+}
+
+.btn-primary.disabled,
+.btn-primary:disabled,
+.btn-primary[disabled] {
+    background-color: #0e103e;
+    background-image: none;
+}
+
+.dropdown-menu>li>a:hover,
+.dropdown-menu>li>a:focus {
+    color: #8A0711;
+}
+
+.dropdown-menu>.active>a,
+.dropdown-menu>.active>a:hover,
+.dropdown-menu>.active>a:focus {
+    background-color: #2e6da4;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+    background-repeat: repeat-x;
+}
+
+.navbar .navbar-nav>li>a:hover {
+    color: #b60000;
+}
+
+.form-control:focus {
+    border-color: rgba(21, 23, 91, 0.8);
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    0 0 8px rgba(21, 23, 91, 0.6);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset,
+    0 0 8px rgba(21, 23, 91, 0.6);
+}
+
+a {
+    color: #900000;
+}
+
+a:hover,
+a:focus {
+    color: #670000;
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand > img {
+    height: 4rem;
+}

backend/static/manifest.webmanifest

@@ -0,0 +1,17 @@
+{
+    "name": "KaraoQueue",
+    "short_name": "KaraoQueue",
+    "start_url": "/",
+    "url": "https://karaoqueue-323511.appspot.com/",
+    "display": "standalone",
+    "background_color": "#343a40",
+    "description": "Eine Karaokewarteliste.",
+    "icons": [{
+        "src": "images/touch/homescreen512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+    }],
+    "related_applications": [{
+        "platform": "Web"
+    }]
+}

backend/templates/base.html

@@ -0,0 +1,136 @@
+<!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="">
+    <meta name="color-scheme" content="light dark" />
+    <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.21.2/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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <!-- Bootstraptoggle -->
+    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
+
+    <!-- Active Theme -->
+    <link href="static/css/themes/{{config['THEME']}}" 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>
+                <li class="nav-item">
+                    <a class="nav-link" href="/settings">Einstellungen</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_version}} -&nbsp;2019-23 - 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.21.2/dist/bootstrap-table.min.js"></script>
+    <script
+        src="https://unpkg.com/bootstrap-table@1.21.2/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 () {
+            loadOrGenerateClientId()
+            // 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()
+        })
+
+        function create_UUID() {
+            var dt = new Date().getTime();
+            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = (dt + Math.random() * 16) % 16 | 0;
+                dt = Math.floor(dt / 16);
+                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+            });
+            return uuid;
+        }
+
+        function loadOrGenerateClientId() {
+            if (!localStorage.getItem("clientId")) {
+                localStorage.setItem("clientId", create_UUID())
+            }
+        }
+    </script>
+</body>
+
+</html>

backend/templates/main.html

@@ -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 %}

backend/templates/main_admin.html

@@ -0,0 +1,205 @@
+{% extends 'base.html' %}
+{% block title %}Warteliste-Admin{% endblock %}
+{% block content %}
+<style>
+    table td:nth-child(2) {
+        overflow-y: hidden;
+        overflow-x: auto;
+        text-overflow: clip;
+        max-width: 200px !important;
+    }
+</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 () {
+        refreshEntryToggle()
+        $('#entryToggle').change(function () {
+            $.ajax({ url: "/api/entries/accept/" + ($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000) });
+        })
+        $("#entrytable").bootstrapTable().on('load-success.bs.table', function () {
+            $('[data-toggle="tooltip"]').tooltip()
+        })
+        $('[data-toggle="tooltip"]').tooltip({
+            trigger: 'hover'
+        })
+    })
+    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').data('bs.toggle').on('true')
+                }
+                else {
+                    $('#entryToggle').data('bs.toggle').off('true')
+                }
+            }
+        })
+    }
+    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 markEntryAsTransferred(entry_id) {
+        $.ajax({
+            type: 'GET',
+            url: '/api/entries/mark_transferred/' + 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) {
+        console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
+        console.log(row)
+        let outerHTML = ""
+        if (row.Transferred == 1) {
+            outerHTML = "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Markierung zurückziehen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-backward\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry('" + row.Name + "'," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
+        } else {
+            outerHTML = "<button type=\"button\" class=\"btn btn-info\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als übertragen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-exchange-alt\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry('" + row.Name + "'," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
+        }
+        return outerHTML;
+    }
+
+    function getIdSelections() {
+        return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
+            return row.entry_ID
+        })
+    }
+</script>
+{% endblock %}

backend/templates/played_list.html

@@ -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://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
+<script src="https://unpkg.com/jspdf-autotable@3.0.10/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 %}

backend/templates/settings.html

@@ -0,0 +1,41 @@
+{% extends 'base.html' %}
+{% block title %}Einstellungen{% endblock %}
+{% block content %}
+<form method="post">
+    <p>
+        <label for="entryquota">Maximale Anzahl an Einträgen pro Nutzer</label>
+        <input type="number" class="form-control" id="entryquota" name="entryquota" min=1 value={{app.config['ENTRY_QUOTA']}}>
+    </p>
+    <p>
+        <label for="maxqueue">Maximale Anzahl an Einträgen Insgesamt</label>
+        <input type="number" class="form-control" id="maxqueue" name="maxqueue" min=1 value={{app.config['MAX_QUEUE']}}>
+    </p>
+    <p>
+        <label for="theme">Aktives Theme</label>
+        <select class="form-control" id="theme" name="theme">
+            {% for theme in themes %}
+            <option value="{{theme}}" {% if theme == config['THEME'] %}selected{% endif %}>{{theme}}</option>
+            {% endfor %}
+        </select>
+    </p>
+    <div class="alert alert-warning" role="alert">
+        <i class="fas fa-exclamation-triangle mr-1"></i>
+        <strong>Warnung:</strong> Änderungen an den folgenden Einstellungen führen zu einer sofortigen Abmeldung!
+    </div>
+    <p>
+        <label for="username">Benutzername</label>
+        <input type="text" class="form-control" id="username" name="username" value={{app.config['BASIC_AUTH_USERNAME']}}>
+    </p>
+    <p>
+        <label for="password">Passwort ändern</label>
+        <input type="password" class="form-control" id="password" name="password">
+    </p>
+    <input type="submit" class="btn btn-primary mr-1 mb-2" value="Einstellungen anwenden">
+</form>
+<details>
+    <summary>Current config:</summary>
+    <pre>{% for key, val in config.items() %}{{key}}: {{val}}<br>{% endfor %}</pre>
+</details>
+{% endblock %}
+{% block extrajs %}
+{% endblock %}

backend/templates/songlist.html

@@ -0,0 +1,136 @@
+{% 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">&times;</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 class='buttoncell'><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(client_id, id, name, success_callback, blocked_callback) {
+        var data = {
+            "name": name,
+            "id": id,
+            "client_id": client_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(localStorage.getItem("clientId"),id, name, function () {
+            $("#enqueueModal").modal('hide');
+            window.location.href = '/#end';
+        }, function (response) {
+            bootbox.alert({
+                message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: "+response.responseJSON.status,
+            });
+            entriesAccepted();
+            $("#enqueueModal").modal('hide');
+
+        });
+
+
+    }
+
+    {% if not auth %}
+    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)
+            }
+
+        })
+    }
+    {% else %}
+    function entriesAccepted() {
+        $(".enqueueButton").prop("disabled", false)
+    }
+    {% endif %}
+
+</script>
+{% endblock %}

docker-compose.prod.yml

@@ -0,0 +1,23 @@
+version: "3.9"
+
+secrets:
+  secrets:
+    file: ./secrets.yml
+
+services:
+  karaoqueue:
+    image: "ghcr.io/phoenixtwofive/karaoqueue:v2023.03.1"
+    build: .
+    restart: always
+    ports:
+      - "127.0.0.1:8081:80" # Please put a reverse proxy in front of this
+    env_file: .env
+  db:
+    image: mariadb
+    restart: always
+    env_file: .env 
+    volumes:
+    - karaoqueue-db:/var/lib/mysql
+
+volumes:
+  karaoqueue-db:

docker-compose.yml

@@ -0,0 +1,15 @@
+# This Compose file is for development only. It is not intended for production use.
+# It only starts auxiliary services, such as a database, that are required for the
+# application to run. The application itself is started separately, using the
+# command "python -m flask run" or your favorite IDE.
+# Useful for attaching a debugger to the application.
+
+version: "3.9"
+
+services:
+  db:
+    image: mariadb
+    restart: always
+    env_file: .env.dev
+    ports:
+      - "3306:3306"

docs/swagger.yaml

@@ -1,392 +0,0 @@
-openapi: 3.0.2
-info:
-  title: Karaoqueue API
-  version: '0.0.1'
-servers:
-  - url: 'http://localhost:3000/api'
-    description: Local Test sever instance
-  - url: 'https://karaoke.phillipathome.dynv6.net/api'
-    description: Production API    
-
-paths:
-  /queue:
-    get:
-      summary: 'Fetch entry Queue content'
-      description: 'Fetch entry Queue'
-      parameters:
-        - name: index
-          in: query
-          description: Position from which on to return results
-          required: false
-          schema: 
-            type: integer
-        - name: limit
-          in: query
-          description: How many items to return at one time (max 100, default 20)
-          required: false
-          schema:
-            type: integer
-      responses:
-        '200':
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/QueueEntry'
-        '400':
-          description: Invalid request. Check your parameters.
-        '404':
-          description: No Entries found in specified range.
-        '5XX':
-          description: Unexpected error.
-    post:
-      description: 'Add entry to Queue'
-      summary: 'Add entry to Queue'
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                singer_name:
-                  type: string
-                song_id:
-                  type: integer
-      responses:
-        '200':
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  entry_id:
-                    type: string
-                    format: bson.ObjectID
-                    pattern: '/^[a-f\d]{24}$/i'
-                  entry_auth:
-                    type: string
-        '400':
-          description: Malformed request.
-        '405':
-          description: Currently not accepting entries.
-    delete:
-      summary: 'Clear queue'
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK. Successfully cleared Queue
-        '401':
-          description: Not Authorized
-      
-      description: clear queue
-  /queue/{entry_id}:
-    get:
-      summary: GET single queue entry
-      parameters:
-        - in: path
-          name: entry_id
-          schema:
-            type: integer
-          required: true
-          description: ID of the Entry to get
-      responses:
-        '200':
-          description: OK
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/QueueEntry'
-    patch:
-      summary: Change entry
-      security:
-        - cookieAuth: []      
-      parameters:
-        - in: path
-          name: entry_id
-          schema:
-            type: string
-            format: bson.ObjectID
-            pattern: '/^[a-f\d]{24}$/i'
-          required: true
-          description: >
-            ID of the entry to modify. One of the following is needed:
-              - Proper Bearer-Token authorization
-              - The entry_auth string corresponding to the entry
-      requestBody:
-        required: false
-        content:
-          application/json:
-            schema: 
-              type: object
-              required:
-                - entry_auth
-              properties:
-                singer_name:
-                  type: string
-                song_id:
-                  type: integer
-                entry_auth:
-                  type: string
-      responses:
-        '200':
-          description: OK
-        '404':
-          description: Entry not found
-        '405':
-          description: Method not allowed. Check your entry_auth or authorization.
-    delete:
-      summary: 'Delete entry'
-      security:
-        - cookieAuth: []
-      parameters:
-        - in: path
-          name: entry_id
-          schema:
-            type: string
-            format: bson.ObjectID
-            pattern: '/^[a-f\d]{24}$/i'
-          required: true
-          description: >
-            ID of the entry to modify.  One of the following is needed:
-              - Proper Bearer-Token authorization
-              - The entry_auth string corresponding to the entry
-      requestBody:
-        required: false
-        content:
-          application/json:
-            schema:
-              type: object
-              required:
-                - entry_auth
-              properties:
-                entry_auth:
-                  type: string
-      responses:
-        '200':
-          description: OK
-        '404':
-          description: Entry not found
-        '405':
-          description: Method not allowed. Check your entry_auth or authorization.
-
-
-  /songs:
-    get:
-      summary: Search in Songs
-      parameters:
-        - in: query
-          name: query
-          schema:
-            type: string
-          required: true
-        - name: limit
-          in: query
-          description: How many items to return at one time (max 100, default 20)
-          required: false
-          schema:
-            type: integer
-      responses:
-        '200':
-          description: OK. An array of Songs according to the Query string.
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  $ref: '#/components/schemas/SongEntry'
-        '400':
-          description: Malformed Request
-    put:
-      summary: Update Song Database
-      description: >
-        Trigger an update of the database using the source CSV defined
-        in the config.
-      security:
-        - cookieAuth: []
-      responses:
-        '200': 
-          description: OK. Songs have been updated
-        '401':
-          description: Authorization required. Check your auth.
-  /statistics:
-    get:
-      summary: Statistics about the Database
-      responses:
-        '200':
-          description: Statistics as JSON
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  num_songs:
-                    type: integer
-                  num_entries:
-                    type: integer
-
-  /auth/login:
-    post:
-      summary: Logs in and returns the authentication  cookie
-      requestBody:
-        required: true
-        description: A JSON object containing the login and password.
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/LoginRequest'
-      security: []    # no authentication
-      responses:
-        '200':
-          description: >
-            Successfully authenticated.
-            The session ID is returned in a cookie named `jwt`. You need to include this cookie in subsequent requests.
-          headers: 
-            Set-Cookie:
-              schema: 
-                type: string
-                example: jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiJhZG1pbiIsImlhdCI6MTYwMTY1MDYwNSwiZXhwIjoxNjAxNjU0MjA1fQ.uGvOlBAZdbPT8U9s7jEt5PUWyxLrpgaf02EoPVC_Zlsd; Path=/; HttpOnly
-  /auth/logout:
-    get:
-      summary: Logs the user out and invalidates the session on the server
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-        '401':
-          description: Authorization required.
-
-  /rpc/end_event:
-    get:
-      summary: End the current event
-      description: Locks entries and does not allow reopening without reset
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-        
-  /rpc/start_event:
-    get:
-      summary: Start new event. Clears entries and stats.
-      description: Sets up a clean state.
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-  
-  /rpc/enable_registration:
-    get:
-      summary: Enables registration in the queue
-      description: Makes it possible for guests to register in the queue.
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-      
-    
-  /rpc/disable_registration:
-    get:
-      summary: Disables registration in the queue
-      description: Makes it impossible for guests to register in the queue.
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-
-  /rpc/get_playstats:
-    get:
-      summary: Get stats of played songs in the current event.
-      description: Returns the stats for the current evening as JSON
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-
-  /rpc/download_playstats:
-    get:
-      summary: Get stats of played songs in the current event for download.
-      description: Returns the stats for the current evening as PDF (for example for GEMA)
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-
-  /rpc/entry_fulfilled:
-    get:
-      summary: Mark an entry as fulfilled.
-      description:  Mark an entry as fulfilled. This adds it to the statistics.
-      security:
-        - cookieAuth: []
-      responses:
-        '200':
-          description: OK.
-      parameters:
-        - in: query
-          name: entry_id
-          schema:
-            type: string
-          description: The id of the entry to mark as done.
-
-
-
-components:
-  securitySchemes:
-    cookieAuth:         # arbitrary name for the security scheme; will be used in the "security" key later
-      type: apiKey
-      in: cookie
-      name: jwt  # cookie name
-  schemas:
-    QueueEntry:
-      type: object
-      properties:
-        _id:
-          type: string
-          format: bson.ObjectID
-          pattern: '/^[a-f\d]{24}$/i'
-        singer_name:
-          type: string
-        song_id:
-          type: integer
-    SongEntry:
-      type: object
-      properties:
-        id:
-          type: integer
-        title:
-          type: string
-        artist:
-          type: string
-        year:
-          type: integer
-        duet:
-          type: boolean
-        explicit:
-          type: boolean
-        styles:
-          type: array
-          items:
-            type: string
-        languages:
-          type: array
-          items:
-            type: string
-    LoginRequest:
-      type: object
-      properties:
-        username:
-          type: string
-        password:
-          type: string
-          format: password
-        

frontend/ng-karaoqueue/.editorconfig

@@ -1,13 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

frontend/ng-karaoqueue/.gitignore

@@ -1,46 +0,0 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events*.json
-speed-measure-plugin*.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db

frontend/ng-karaoqueue/.vscode/launch.json

@@ -1,25 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-      {
-        "type": "firefox",
-        "request": "launch",
-        "reAttach": true,
-        "name": "Launch Firefox against localhost",
-        "url": "http://localhost:4200",
-        "webRoot": "${workspaceFolder}"
-      },
-
-      {
-          "type": "chrome",
-          "request": "launch",
-          "name": "Launch Chrome against localhost",
-          "url": "http://localhost:4200",
-          "webRoot": "${workspaceFolder}",
-          "runtimeExecutable": "/usr/bin/chromium"
-      }
-    ]
-}

frontend/ng-karaoqueue/.vscode/tasks.json

@@ -1,26 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "type": "npm",
-            "script": "start",
-            "group": "build",
-            "problemMatcher": []
-        },
-        {
-            "type": "npm",
-            "script": "build",
-            "group": "build",
-            "problemMatcher": []
-        },
-        {
-            "type": "npm",
-            "script": "serve",
-            "problemMatcher": [
-                "$tsc"
-            ]
-        }
-    ]
-}

frontend/ng-karaoqueue/README.md

@@ -1,27 +0,0 @@
-# NgKaraoqueue
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.20.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

frontend/ng-karaoqueue/angular.json

@@ -1,143 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ng-karaoqueue": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/ng-karaoqueue",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": false,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-               {
-                 "glob": "mdi.svg",
-                 "input": "node_modules/@mdi/angular-material/",
-                 "output": "/assets/"
-               }
-            ],
-            "styles": [
-              "src/custom-theme.scss",
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "ng-karaoqueue:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "ng-karaoqueue:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "ng-karaoqueue:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              {
-                "glob": "mdi.svg",
-                "input": "node_modules/@mdi/angular-material/",
-                "output": "/assets/"
-              }
-            ],
-            "styles": [
-              "./app/custom-theme.scss",
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "ng-karaoqueue:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "ng-karaoqueue:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "ng-karaoqueue",
-  "schematics": {
-    "@schematics/angular:component": {
-      "styleext": "scss"
-    }
-  }
-}

frontend/ng-karaoqueue/browserslist

@@ -1,12 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.

frontend/ng-karaoqueue/e2e/protractor.conf.js

@@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    browserName: 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

frontend/ng-karaoqueue/e2e/src/app.e2e-spec.ts

@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('ng-karaoqueue app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});

frontend/ng-karaoqueue/e2e/src/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
-  }
-}

frontend/ng-karaoqueue/e2e/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

frontend/ng-karaoqueue/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/ng-karaoqueue'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

frontend/ng-karaoqueue/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "ng-karaoqueue",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "serve": "ng serve --host=0.0.0.0",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "~9.0.5",
-    "@angular/cdk": "~9.1.2",
-    "@angular/common": "~9.0.5",
-    "@angular/compiler": "~9.0.5",
-    "@angular/core": "~9.0.5",
-    "@angular/forms": "~9.0.5",
-    "@angular/material": "^9.1.2",
-    "@angular/platform-browser": "~9.0.5",
-    "@angular/platform-browser-dynamic": "~9.0.5",
-    "@angular/router": "~9.0.5",
-    "@mdi/angular-material": "^5.0.45",
-    "@ngx-pwa/local-storage": "^9.0.3",
-    "hammerjs": "^2.0.8",
-    "runtime-config-loader": "^2.0.0",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.11.1",
-    "zone.js": "~0.10.2"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.5",
-    "@angular/cli": "~9.0.5",
-    "@angular/compiler-cli": "~9.0.5",
-    "@angular/language-service": "~9.0.5",
-    "@types/jasmine": "~3.5.9",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "~13.9.0",
-    "codelyzer": "^5.2.1",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.2",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.6.2",
-    "tslint": "~6.0.0",
-    "typescript": "~3.8.3"
-  }
-}

frontend/ng-karaoqueue/src/app/app-routing.module.ts

@@ -1,16 +0,0 @@
-import { EntryListingComponent } from './entry-listing/entry-listing.component';
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { SongSearchComponent } from './song-search/song-search.component';
-
-
-const routes: Routes = [
-  {path: '', component: EntryListingComponent },
-  {path: 'songs', component: SongSearchComponent}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

frontend/ng-karaoqueue/src/app/app.component.html

@@ -1,11 +0,0 @@
-<div>
-  <mat-toolbar color="primary" class="mat-elevation-z6">
-    <span>KaraoQueue</span>
-    <span>&nbsp;</span>
-    <a mat-button routerLink="/" [routerLinkActive]="['is-active']">Warteschlange</a>
-    <a mat-button routerLink="/songs" [routerLinkActive]="['is-active']">Songs</a>
-    <div class="spacer"></div>
-    <a mat-stroked-button>Login</a>
-  </mat-toolbar>
-</div>
-<router-outlet></router-outlet>

frontend/ng-karaoqueue/src/app/app.component.scss

@@ -1,7 +0,0 @@
-.spacer {
-  flex: 1 1 auto;
-}
-
-.is-active {
-  background-color: rgba(255,255,255,0.1);
-}

frontend/ng-karaoqueue/src/app/app.component.spec.ts

@@ -1,35 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'ng-karaoqueue'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('ng-karaoqueue');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('ng-karaoqueue app is running!');
-  });
-});

frontend/ng-karaoqueue/src/app/app.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { RuntimeConfigLoaderService } from 'runtime-config-loader';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent implements OnInit{
-
-  constructor(private configSvc: RuntimeConfigLoaderService) {}
-  ngOnInit(): void {
-    console.log("API at ",this.configSvc.getConfigObjectKey("api"));
-  }
-  title = 'KaraoQueue';
-}

frontend/ng-karaoqueue/src/app/app.module.ts

@@ -1,107 +0,0 @@
-import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatTreeModule } from '@angular/material/tree';
-
-import { HttpClientModule } from '@angular/common/http';
-
-
-import { EntryListingComponent } from './entry-listing/entry-listing.component';
-import { SongSearchComponent } from './song-search/song-search.component';
-
-import { debounceTime, distinctUntilChanged } from "rxjs/operators";
-
-import { RuntimeConfigLoaderModule } from 'runtime-config-loader';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    EntryListingComponent,
-    SongSearchComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatAutocompleteModule,
-    MatBadgeModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatChipsModule,
-    MatStepperModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatExpansionModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatTableModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatTreeModule,
-    HttpClientModule,
-    RuntimeConfigLoaderModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {
-  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
-    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
-  }
-}

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.html

@@ -1 +0,0 @@
-<p>entry-listing works!</p>

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EntryListingComponent } from './entry-listing.component';
-
-describe('EntryListingComponent', () => {
-  let component: EntryListingComponent;
-  let fixture: ComponentFixture<EntryListingComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EntryListingComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EntryListingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-entry-listing',
-  templateUrl: './entry-listing.component.html',
-  styleUrls: ['./entry-listing.component.scss']
-})
-export class EntryListingComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { EntryServiceService } from './entry-service.service';
-
-describe('EntryServiceService', () => {
-  let service: EntryServiceService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(EntryServiceService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

frontend/ng-karaoqueue/src/app/entry-service.service.ts

@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { RuntimeConfigLoaderService } from 'runtime-config-loader';
-import { Entry } from './models/entry.model';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class EntryServiceService {
-
-  private api: string;
-  constructor(
-    private http: HttpClient,
-    private configSvc: RuntimeConfigLoaderService
-  ) {
-    this.api = configSvc.getConfigObjectKey("api");
-  }
-
-  getEntries(): Observable<Array<Entry>> {
-      return null; // TODO
-  }
-
-
-}

frontend/ng-karaoqueue/src/app/models/artist.model.ts

@@ -1,10 +0,0 @@
-export class Artist {
-
-  constructor(id: number, name: string) {
-    this.id = id;
-    this.name = name;
-  }
-
-  id: number;
-  name: string;
-}

frontend/ng-karaoqueue/src/app/models/entry.model.ts

@@ -1,12 +0,0 @@
-export class Entry {
-
-  constructor(singer_name: string, song: string, auth_cookie?: string) {
-    this.singer_name=singer_name;
-    this.song=song;
-    this.auth_cookie = auth_cookie;
-  }
-
-  singer_name: string;
-  song: string; //Actually the ID of the Song
-  auth_cookie?: string; //The "cookie" to authenticate for changing an entry. Null otherwise
-}

frontend/ng-karaoqueue/src/app/models/genre.model.ts

@@ -1,16 +0,0 @@
-export class Genre {
-
-  constructor(id: number, name: string) {
-    this.id = id;
-    this._name = name;
-  }
-
-
-  public get name() : string {
-    return this._name;
-  }
-
-
-  id: number;
-  _name: string;
-}

frontend/ng-karaoqueue/src/app/models/language.model.ts

@@ -1,10 +0,0 @@
-export class Language {
-
-  constructor(id: number, name: string) {
-    this.id = id;
-    this.name = name;
-  }
-
-  id: number;
-  name: string;
-}

frontend/ng-karaoqueue/src/app/models/song.model.ts

@@ -1,26 +0,0 @@
-import { Genre } from './genre.model';
-import { Language } from './language.model';
-import { Artist } from './artist.model';
-
-export class Song {
-
-  constructor(title: string, artist: Artist, karafun_id: number, duet: boolean, explicit: boolean, id: number, genres: Array<String>, languages: Array<String>) {
-    this.title=title;
-    this.artist=artist;
-    this.karafun_id=karafun_id;
-    this.duet=duet;
-    this.explicit=explicit;
-    this.id=id;
-    this.genres=genres;
-    this.languages=languages;
-  }
-
-  title: string;
-  artist: Artist;
-  karafun_id: number;
-  duet: boolean;
-  explicit: boolean;
-  id: number;
-  genres: Array<String>;
-  languages: Array<String>;
-}

frontend/ng-karaoqueue/src/app/song-search/song-search.component.html

@@ -1,48 +0,0 @@
-<div class="content">
-  <mat-form-field class="search-input">
-    <mat-label>Suche...</mat-label>
-    <mat-icon matSuffix svgIcon="magnify"></mat-icon>
-    <input type="text" matInput placeholder="Tippe einen Künstler oder Song..."
-    (keyup)="applyFilter($event.target.value)">
-  </mat-form-field>
-  </div>
-  <div class="resultcontainer">
-    <mat-list *ngFor="let song of songs">
-        <mat-card class="result">
-          <div class="card-left">
-            <mat-card-title>{{song.artist}} - {{song.title}}</mat-card-title>
-            <div class="song-info">
-              <div class="info-icons">
-                <ng-template [ngIf]="song.duet==true" [ngIfElse]="nonduet">
-                  <mat-icon svgIcon="account-multiple"></mat-icon>
-                </ng-template>
-                <ng-template #nonduet>
-                  <mat-icon svgIcon="account"></mat-icon>
-                </ng-template>
-                <ng-template [ngIf]="song.explicit==true" [ngIfElse]="nonexplicit">
-                  <mat-icon svgIcon="alpha-e-box"></mat-icon>
-                </ng-template>
-                <ng-template #nonexplicit>
-                  <mat-icon svgIcon="alpha-e-box" class="icon-disabled"></mat-icon>
-                </ng-template>
-              </div>
-              <div class="genre-list">
-                <mat-icon svgIcon="music-circle"></mat-icon>
-                <mat-chip-list *ngFor="let genre of song.genres">
-                  <mat-chip>{{genre}}</mat-chip>
-                </mat-chip-list>
-              </div>
-              <div class="language-list">
-                <mat-icon svgIcon="account-voice"></mat-icon>
-                <mat-chip-list *ngFor="let language of song.languages">
-                  <mat-chip>{{language}}</mat-chip>
-                </mat-chip-list>
-              </div>
-            </div>
-          </div>
-          <button mat-flat-button color="accent" class="add-button">
-            <mat-icon svgIcon="playlist-plus"></mat-icon>
-          </button>
-        </mat-card>
-    </mat-list>
-  </div>

frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss

@@ -1,120 +0,0 @@
-.search-input {
-  width: 95%;
-  margin-top: 1rem;
-}
-
-.add-button {
-  height: 3rem;
-}
-
-.content {
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-}
-
-.resultcontainer {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.result {
-  margin-left: auto;
-  margin-right: auto;
-  width: 90%;
-  margin-top: 0.2rem;
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.card-left {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.song-info {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.song-info > * {
-  margin-right: 0.5rem;
-}
-
-.icon-disabled {
-  opacity: 0.1;
-}
-
-.genre-list > mat-icon {
-  padding-right: 0.25rem;
-}
-
-.genre-list mat-chip-list {
-  margin-right: 0.15rem;
-}
-
-.genre-list {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 0.25rem;
-  align-items: center;
-  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
-  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
-  -ms-overflow-style: none;
-}
-
-.language-list > mat-icon {
-  padding-right: 0.25rem;
-}
-
-.language-list mat-chip-list {
-  margin-right: 0.15rem;
-}
-
-.genre-list::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-  display: none;
-}
-
-.language-list {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 0.25rem;
-  align-items: center;
-  -ms-overflow-style: none;
-}
-
-
-
-.language-list::-webkit-scrollbar {
-  display: none;
-}
-
-
-$breakpoint-tablet: 768px;
-@media (min-width: $breakpoint-tablet) {
-  .result {
-    flex-direction: row;
-
-  }
-
-  .add-button {
-    height: 6.5rem;
-    width: 4rem;
-    align-self: center;
-  }
-}

frontend/ng-karaoqueue/src/app/song-search/song-search.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SongSearchComponent } from './song-search.component';
-
-describe('SongSearchComponent', () => {
-  let component: SongSearchComponent;
-  let fixture: ComponentFixture<SongSearchComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SongSearchComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SongSearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts

@@ -1,43 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SongServiceService } from "../song-service.service";
-import { Song } from '../models/song.model';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-song-search',
-  templateUrl: './song-search.component.html',
-  styleUrls: ['./song-search.component.scss']
-})
-export class SongSearchComponent implements OnInit {
-
-  private searchSub$ = new Subject<string>();
-
-  constructor(private songServiceService: SongServiceService) { }
-
-  songs: Array<Song> = new Array<Song>();
-
-  updateSongs(text: string) {
-    this.songServiceService.searchSongByText(text).subscribe(x => {
-      console.log(x);
-      this.songs = x;
-    });
-  }
-
-  applyFilter(filterValue: string) {
-    this.searchSub$.next(filterValue)
-  }
-
-  ngOnInit(): void {
-    this.searchSub$.pipe(
-      debounceTime(400),
-      distinctUntilChanged()
-    ).subscribe((filterValue: string) => {
-      this.updateSongs(filterValue);
-    });
-
-    //Für Testzwecke
-    this.updateSongs("Test");
-  }
-
-}

frontend/ng-karaoqueue/src/app/song-service.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SongServiceService } from './song-service.service';
-
-describe('SongServiceService', () => {
-  let service: SongServiceService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(SongServiceService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

frontend/ng-karaoqueue/src/app/song-service.service.ts

@@ -1,42 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { Song } from './models/song.model';
-import { Artist } from './models/artist.model';
-import { Genre } from './models/genre.model';
-import { Language } from './models/language.model';
-import { RuntimeConfigLoaderService } from 'runtime-config-loader';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SongServiceService {
-
-  private api: string;
-  constructor(
-    private http: HttpClient,
-    private configSvc: RuntimeConfigLoaderService
-  ) {
-    this.api=configSvc.getConfigObjectKey("api");
-  }
-
-  searchSongByText(text: string): Observable<Array<Song>> {
-
-
-    let out = new Array<Song>();
-
-    this.http.get(this.api +"/songs/compl?search="+text).subscribe((data: Observable<JSON>) => {
-      data.forEach(element => {
-        out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],element["styles"],element["languages"]));
-      });
-    });
-
-    const observable = new Observable<Array<Song>>( subscriber => {
-      subscriber.next(out);
-    })
-
-
-    return observable;
-  }
-
-}

frontend/ng-karaoqueue/src/assets/config.json

@@ -1,3 +0,0 @@
-{
-  "api":"http://localhost:5000/api"
-}

frontend/ng-karaoqueue/src/custom-theme.scss

@@ -1,280 +0,0 @@
-/**
-* Generated theme by Material Theme Generator
-* https://materialtheme.arcsine.dev
-*/
-
-@import '~@angular/material/theming';
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-
-// Fonts
-@import 'https://fonts.googleapis.com/css?family=Material+Icons';
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
-
-$fontConfig: (
-  display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
-  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
-  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
-  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
-  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
-  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
-  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
-  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
-  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
-);
-
-// Foreground Elements
-
-// Light Theme Text
-$dark-text: #000000;
-$dark-primary-text: rgba($dark-text, 0.87);
-$dark-accent-text: rgba($dark-primary-text, 0.54);
-$dark-disabled-text: rgba($dark-primary-text, 0.38);
-$dark-dividers: rgba($dark-primary-text, 0.12);
-$dark-focused: rgba($dark-primary-text, 0.12);
-
-$mat-light-theme-foreground: (
-  base:              black,
-  divider:           $dark-dividers,
-  dividers:          $dark-dividers,
-  disabled:          $dark-disabled-text,
-  disabled-button:   rgba($dark-text, 0.26),
-  disabled-text:     $dark-disabled-text,
-  elevation:         black,
-  secondary-text:    $dark-accent-text,
-  hint-text:         $dark-disabled-text,
-  accent-text:       $dark-accent-text,
-  icon:              $dark-accent-text,
-  icons:             $dark-accent-text,
-  text:              $dark-primary-text,
-  slider-min:        $dark-primary-text,
-  slider-off:        rgba($dark-text, 0.26),
-  slider-off-active: $dark-disabled-text,
-);
-
-// Dark Theme text
-$light-text: #ffffff;
-$light-primary-text: $light-text;
-$light-accent-text: rgba($light-primary-text, 0.7);
-$light-disabled-text: rgba($light-primary-text, 0.5);
-$light-dividers: rgba($light-primary-text, 0.12);
-$light-focused: rgba($light-primary-text, 0.12);
-
-$mat-dark-theme-foreground: (
-  base:              $light-text,
-  divider:           $light-dividers,
-  dividers:          $light-dividers,
-  disabled:          $light-disabled-text,
-  disabled-button:   rgba($light-text, 0.3),
-  disabled-text:     $light-disabled-text,
-  elevation:         black,
-  hint-text:         $light-disabled-text,
-  secondary-text:    $light-accent-text,
-  accent-text:       $light-accent-text,
-  icon:              $light-text,
-  icons:             $light-text,
-  text:              $light-text,
-  slider-min:        $light-text,
-  slider-off:        rgba($light-text, 0.3),
-  slider-off-active: rgba($light-text, 0.3),
-);
-
-// Background config
-// Light bg
-$light-background:    #fafafa;
-$light-bg-darker-5:   darken($light-background, 5%);
-$light-bg-darker-10:  darken($light-background, 10%);
-$light-bg-darker-20:  darken($light-background, 20%);
-$light-bg-darker-30:  darken($light-background, 30%);
-$light-bg-lighter-5:  lighten($light-background, 5%);
-$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
-$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
-$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);
-
-$mat-light-theme-background: (
-  background:               $light-background,
-  status-bar:               $light-bg-darker-20,
-  app-bar:                  $light-bg-darker-5,
-  hover:                    $dark-bg-alpha-4,
-  card:                     $light-bg-lighter-5,
-  dialog:                   $light-bg-lighter-5,
-  tooltip:                  $dark-bg-tooltip,
-  disabled-button:          $dark-bg-alpha-12,
-  raised-button:            $light-bg-lighter-5,
-  focused-button:           $dark-focused,
-  selected-button:          $light-bg-darker-20,
-  selected-disabled-button: $light-bg-darker-30,
-  disabled-button-toggle:   $light-bg-darker-10,
-  unselected-chip:          $light-bg-darker-10,
-  disabled-list-option:     $light-bg-darker-10,
-);
-
-// Dark bg
-$dark-background:     #2c2c2c;
-$dark-bg-lighter-5:   lighten($dark-background, 5%);
-$dark-bg-lighter-10:  lighten($dark-background, 10%);
-$dark-bg-lighter-20:  lighten($dark-background, 20%);
-$dark-bg-lighter-30:  lighten($dark-background, 30%);
-$light-bg-alpha-4:    rgba(#fafafa, 0.04);
-$light-bg-alpha-12:   rgba(#fafafa, 0.12);
-
-// Background palette for dark themes.
-$mat-dark-theme-background: (
-  background:               $dark-background,
-  status-bar:               $dark-bg-lighter-20,
-  app-bar:                  $dark-bg-lighter-5,
-  hover:                    $light-bg-alpha-4,
-  card:                     $dark-bg-lighter-5,
-  dialog:                   $dark-bg-lighter-5,
-  tooltip:                  $dark-bg-lighter-20,
-  disabled-button:          $light-bg-alpha-12,
-  raised-button:            $dark-bg-lighter-5,
-  focused-button:           $light-focused,
-  selected-button:          $dark-bg-lighter-20,
-  selected-disabled-button: $dark-bg-lighter-30,
-  disabled-button-toggle:   $dark-bg-lighter-10,
-  unselected-chip:          $dark-bg-lighter-20,
-  disabled-list-option:     $dark-bg-lighter-10,
-);
-
-// Compute font config
-@include mat-core($fontConfig);
-
-// Theme Config
-
-body {
-  --primary-color: #090a28;
-  --primary-lighter-color: #b5b6bf;
-  --primary-darker-color: #050518;
-  --text-primary-color: #{$light-primary-text};
-  --text-primary-lighter-color: #{$dark-primary-text};
-  --text-primary-darker-color: #{$light-primary-text};
-}
-
-$mat-primary: (
-  main: #090a28,
-  lighter: #b5b6bf,
-  darker: #050518,
-  200: #090a28, // For slide toggle,
-  contrast : (
-    main: $light-primary-text,
-    lighter: $dark-primary-text,
-    darker: $light-primary-text,
-  )
-);
-$theme-primary: mat-palette($mat-primary, main, lighter, darker);
-
-body {
-  --accent-color: #b70000;
-  --accent-lighter-color: #e9b3b3;
-  --accent-darker-color: #9f0000;
-  --text-accent-color: #{$light-primary-text};
-  --text-accent-lighter-color: #{$dark-primary-text};
-  --text-accent-darker-color: #{$light-primary-text};
-}
-
-$mat-accent: (
-  main: #b70000,
-  lighter: #e9b3b3,
-  darker: #9f0000,
-  200: #b70000, // For slide toggle,
-  contrast : (
-    main: $light-primary-text,
-    lighter: $dark-primary-text,
-    darker: $light-primary-text,
-  )
-);
-$theme-accent: mat-palette($mat-accent, main, lighter, darker);
-
-body {
-  --warn-color: #ffc600;
-  --warn-lighter-color: #ffeeb3;
-  --warn-darker-color: #ffb100;
-  --text-warn-color: #{$dark-primary-text};
-  --text-warn-lighter-color: #{$dark-primary-text};
-  --text-warn-darker-color: #{$dark-primary-text};
-}
-
-$mat-warn: (
-  main: #ffc600,
-  lighter: #ffeeb3,
-  darker: #ffb100,
-  200: #ffc600, // For slide toggle,
-  contrast : (
-    main: $dark-primary-text,
-    lighter: $dark-primary-text,
-    darker: $dark-primary-text,
-  )
-);
-$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
-
-$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
-$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
-
-// Theme Init
-@include angular-material-theme($theme);
-
-.theme-alternate {
-  @include angular-material-theme($altTheme);
-}
-
-// Specific component overrides, pieces that are not in line with the general theming
-
-// Handle buttons appropriately, with respect to line-height
-.mat-raised-button, .mat-stroked-button, .mat-flat-button {
-  padding: 0 1.15em;
-  margin: 0 .65em;
-  min-width: 3em;
-  line-height: 36.4px
-}
-
-.mat-standard-chip {
-  padding: .5em .85em;
-  min-height: 2.5em;
-}
-
-.material-icons {
-  font-size: 24px;
-  font-family: 'Material Icons', 'Material Icons';
-  .mat-badge-content {
-    font-family: 'Roboto';
-  }
-}
-
-mat-form-field.mat-form-field {
-&.mat-focused {
-  .mat-form-field-label {
-      color: $light-text;
-  }
-  .mat-form-field-ripple {
-      background-color: $light-text !important;
-  }
-}
-.mat-form-field-label.mat-focused,
-.mat-form-field.mat-focused.matform-field-should-float {
-    color: $light-text;
-}
-
-.mat-form-field-underline, .mat-form-field-label {
-  color: $light-accent-text;
-}
-
-.mat-form-field-underline.mat-focused {
-    background-color: $light-text;
-  }
-}
-
-button.mat-menu-item {
-  line-height: 24px !important;
-}
-a.mat-menu-item > mat-icon {
-  margin-bottom: 14px;
-}
-.mat-icon svg {
-  height: 24px;
-  width: 24px;
-}

frontend/ng-karaoqueue/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

frontend/ng-karaoqueue/src/environments/environment.ts

@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

frontend/ng-karaoqueue/src/index.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>NgKaraoqueue</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="mat-typography mat-app-background">
-  <app-root></app-root>
-</body>
-</html>