Merge branch 'legacy' into feature/legacy/mariadb_database

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,14 @@
+# 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://karaoqueue:mariadb_karaoqueue_password@127.0.0.1:3306/karaoqueue
+BASIC_AUTH_USERNAME=admin 
+BASIC_AUTH_PASSWORD=change_me
+ENTRY_QUOTA=3
+MAX_QUEUE=20

.gitignore

@@ -138,3 +138,6 @@ node_modules/
 
 # Version identification file
 .version
+
+# Docker secrets
+secrets.yml

.vscode/launch.json

@@ -5,7 +5,7 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "preLaunchTask": "versiondump",
+            "preLaunchTask": "mariadb",
             "name": "Python: Flask",
             "type": "python",
             "cwd": "${workspaceFolder}/backend",
@@ -14,8 +14,9 @@
             "env": {
                 "FLASK_APP": "backend/app.py",
                 "FLASK_ENV": "development",
-                "FLASK_DEBUG": "1"
+                "FLASK_DEBUG": "1", 
             },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger",
@@ -24,7 +25,7 @@
             "jinja": true
         },
         {
-            "preLaunchTask": "versiondump",
+            "preLaunchTask": "mariadb",
             "name": "Python: Flask (with reload)",
             "type": "python",
             "cwd": "${workspaceFolder}/backend",
@@ -35,6 +36,7 @@
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger"
@@ -42,7 +44,7 @@
             "jinja": true
         },
         {
-            "preLaunchTask": "versiondump",
+            "preLaunchTask": "mariadb",
             "name": "Python: Flask (with reload, externally reachable)",
             "type": "python",
             "cwd": "${workspaceFolder}/backend",
@@ -53,6 +55,7 @@
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger",
@@ -61,7 +64,7 @@
             "jinja": true
         },
         {
-            "preLaunchTask": "versiondump",
+            "preLaunchTask": "mariadb",
             "name": "Python: Flask (externally reachable)",
             "type": "python",
             "cwd": "${workspaceFolder}/backend",
@@ -72,6 +75,7 @@
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },
+            "envFile": "${workspaceFolder}/.env.dev",
             "args": [
                 "run",
                 "--no-debugger",

.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

@@ -10,13 +10,11 @@
             "problemMatcher": []
         },
         {
-            "label": "Start Frontend",
+            "label": "mariadb",
-            "type": "npm",
+            "type": "shell",
-            "script": "start",
+            "command": "docker-compose -f docker-compose.yml up --remove-orphans",
-            "path": "frontend/ng-karaoqueue/",
+            "isBackground": true,
-            "problemMatcher": [
+            "activeOnStart": false
-                "$tsc"
-            ]
         }
     ]
 }

Dockerfile

@@ -0,0 +1,5 @@
+FROM tiangolo/uwsgi-nginx-flask:python3.7
+
+COPY ./backend /app
+
+RUN pip install -r /app/requirements.txt

KaraokeWarkeliste.code-workspace

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

backend/app.py

@@ -1,4 +1,5 @@
-from flask import Flask, render_template, Response, abort, request, redirect, send_from_directory
+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
@@ -9,7 +10,7 @@ from helpers import nocache
 app = Flask(__name__, static_url_path='/static')
 
 basic_auth = BasicAuth(app)
-accept_entries = False
+accept_entries = True
 
 @app.route("/")
 def home():
@@ -51,8 +52,8 @@ def enqueue():
                 abort(400)
             name = request.json['name']
             song_id = request.json['id']
-            if database.check_queue_length() < app.config['MAX_QUEUE']:
+            if database.check_queue_length() < int(app.config['MAX_QUEUE']):
-                if database.check_entry_quota(client_id) < app.config['ENTRY_QUOTA']:
+                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:
@@ -81,12 +82,12 @@ def settings():
 def settings_post():
     entryquota = request.form.get("entryquota")
     maxqueue = request.form.get("maxqueue")
-    if entryquota.isnumeric() and int(entryquota) > 0:
+    if entryquota.isnumeric() and int(entryquota) > 0:  # type: ignore
-        app.config['ENTRY_QUOTA'] = int(entryquota)
+        app.config['ENTRY_QUOTA'] = int(entryquota)  # type: ignore
     else:
         abort(400)
-    if maxqueue.isnumeric and int(maxqueue) > 0:
+    if maxqueue.isnumeric and int(maxqueue) > 0:  # type: ignore
-        app.config['MAX_QUEUE'] = int(maxqueue)
+        app.config['MAX_QUEUE'] = int(maxqueue)  # type: ignore
     else:
         abort(400)
 
@@ -131,8 +132,8 @@ def get_song_completions(input_string=""):
     input_string = request.args.get('search', input_string)
     if input_string != "":
         print(input_string)
-        list = database.get_song_completions(input_string=input_string)
+        result = [list(x) for x in database.get_song_completions(input_string=input_string)]
-        return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
+        return jsonify(result)
 
     else:
         return 400
@@ -229,6 +230,7 @@ def admin():
 
 @app.before_first_request
 def activate_job():
+    helpers.load_dbconfig(app)
     helpers.load_version(app)
     helpers.create_data_directory()
     database.create_entry_table()

backend/database.py

@@ -1,190 +1,166 @@
 # -*- coding: utf_8 -*-
 
-import sqlite3
+from email.mime import base
+from MySQLdb import Connection
+from sqlalchemy import create_engine, engine
 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 open_db():
+
-    conn = sqlite3.connect("/tmp/karaoqueue.db")
+def get_db_engine() -> engine.base.Engine:
-    conn.execute('PRAGMA encoding = "UTF-8";')
+    global sql_engine
-    return conn
+    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=';')
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
         df.to_sql(song_table, conn, if_exists='replace',
                 index=False)
-    cur.execute("SELECT Count(Id) FROM songs")
+        cur = conn.execute("SELECT Count(Id) FROM songs")
-    num_songs = cur.fetchone()[0]
+        num_songs = cur.fetchone()[0] # type: ignore
-    conn.close()
     print("Imported songs ({} in Database)".format(num_songs))
     return("Imported songs ({} in Database)".format(num_songs))
 
 
 def create_entry_table():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
         conn.execute('CREATE TABLE IF NOT EXISTS '+entry_table +
-                 ' (ID INTEGER PRIMARY KEY NOT NULL, Song_Id INTEGER NOT NULL, Name VARCHAR(255), Client_Id VARCHAR(36), Transferred INTEGER DEFAULT 0)')
+                 ' (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.close()
 
 
 def create_done_song_table():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
         conn.execute('CREATE TABLE IF NOT EXISTS '+done_table +
                  ' (Song_Id INTEGER PRIMARY KEY NOT NULL,  Plays INTEGER)')
-    conn.close()
 
 
 def create_song_table():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    conn.execute("CREATE TABLE IF NOT EXISTS \""+song_table+"""\" (
+        conn.execute("CREATE TABLE IF NOT EXISTS `"+song_table+"""` (
-        "Id" INTEGER,
+        `Id` INTEGER,
-        "Title" TEXT,
+        `Title` TEXT,
-        "Artist" TEXT,
+        `Artist` TEXT,
-        "Year" INTEGER,
+        `Year` INTEGER,
-        "Duo" INTEGER,
+        `Duo` INTEGER,
-        "Explicit" INTEGER,
+        `Explicit` INTEGER,
-        "Date Added" TEXT,
+        `Date Added` TEXT,
-        "Styles" TEXT,
+        `Styles` TEXT,
-        "Languages" TEXT
+        `Languages` TEXT
     )""")
-    conn.close()
 
 
 def create_list_view():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    conn.execute("""CREATE VIEW IF NOT EXISTS [Liste] AS
+        conn.execute("""CREATE OR REPLACE VIEW `Liste` AS
-                 SELECT Name, Title, Artist, entries.Id, songs.Id, entries.Transferred
+                 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.close()
 
 
 def create_done_song_view():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    conn.execute("""CREATE VIEW IF NOT EXISTS [Abspielliste] AS
+        conn.execute("""CREATE OR REPLACE VIEW `Abspielliste` AS
-                 SELECT Artist || \" - \" || Title AS Song, Plays AS Wiedergaben
+                 SELECT CONCAT(Artist," - ", Title) AS Song, Plays AS Wiedergaben
                  FROM songs, done_songs
                  WHERE done_songs.Song_Id=songs.Id""")
-    conn.close()
 
 
 def get_list():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    conn.row_factory = sqlite3.Row
+        cur = conn.execute("SELECT * FROM Liste")
-    cur = conn.cursor()
-    cur.execute("SELECT * FROM Liste")
     return cur.fetchall()
 
 
 def get_played_list():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute("SELECT * FROM Abspielliste")
-    cur.execute("SELECT * FROM Abspielliste")
     return cur.fetchall()
 
 
 def get_song_list():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute(
-    cur.execute("SELECT Artist || \" - \" || Title AS Song, Id FROM songs;")
+        "SELECT Artist || \" - \" || Title AS Song, Id FROM songs;")
     return cur.fetchall()
 
 
 def get_song_completions(input_string):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
         # Don't look, it burns...
         prepared_string = "%{0}%".format(
             input_string).upper()  # "Test" -> "%TEST%"
         print(prepared_string)
-    cur.execute(
+        cur = conn.execute(
-        "SELECT Title || \" - \" || Artist AS Song, Id FROM songs WHERE REPLACE(REPLACE(REPLACE(REPLACE(UPPER( SONG ),'ö','Ö'),'ü','Ü'),'ä','Ä'),'ß','ẞ') LIKE (?) LIMIT 20;", (prepared_string,))
+            "SELECT CONCAT(Artist,\" - \",Title) AS Song, Id FROM songs WHERE CONCAT(Artist,\" - \",Title) LIKE (%s) LIMIT 20;", [prepared_string])
     return cur.fetchall()
 
 
 def add_entry(name, song_id, client_id):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        conn.execute(
-    cur.execute(
+        "INSERT INTO entries (Song_Id,Name,Client_Id) VALUES(%s,%s,%s);", (song_id, name, client_id))
-        "INSERT INTO entries (Song_Id,Name,Client_Id) VALUES(?,?,?);", (song_id, name, client_id))
-    conn.commit()
-    conn.close()
     return
 
 
 def add_sung_song(entry_id):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute(
-    cur.execute("""SELECT Song_Id FROM entries WHERE Id=?""", (entry_id,))
+            """SELECT Song_Id FROM entries WHERE Id=%s""", (entry_id,))
-    song_id = cur.fetchone()[0]
+        song_id = cur.fetchone()[0] # type: ignore
-    cur.execute("""INSERT OR REPLACE INTO done_songs (Song_Id, Plays)
+        conn.execute("""INSERT INTO done_songs (Song_Id, Plays) VALUES("""+str(song_id)+""",1) ON DUPLICATE KEY UPDATE Plays=Plays + 1;""")
-                VALUES("""+str(song_id)+""",
-                       COALESCE(
-                           (SELECT Plays FROM done_songs
-                            WHERE Song_Id="""+str(song_id)+"), 0) + 1)"
-                )
-    conn.commit()
         delete_entry(entry_id)
-    conn.close()
     return True
 
 
 def toggle_transferred(entry_id):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute(
-    cur.execute("SELECT Transferred FROM entries WHERE ID =?", (entry_id,))
+            "SELECT Transferred FROM entries WHERE ID =%s", (entry_id,))
         marked = cur.fetchall()[0][0]
         if(marked == 0):
-        cur.execute(
+            conn.execute(
-            "UPDATE entries SET Transferred = 1 WHERE ID =?", (entry_id,))
+                "UPDATE entries SET Transferred = 1 WHERE ID =%s", (entry_id,))
         else:
-        cur.execute(
+            conn.execute(
-            "UPDATE entries SET Transferred = 0 WHERE ID =?", (entry_id,))
+                "UPDATE entries SET Transferred = 0 WHERE ID =%s", (entry_id,))
-    conn.commit()
-    conn.close()
     return True
 
 
 def check_entry_quota(client_id):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute(
-    cur.execute(
+            "SELECT Count(*) FROM entries WHERE entries.Client_Id = %s", (client_id,))
-        "SELECT Count(*) FROM entries WHERE entries.Client_Id = ?", (client_id,))
     return cur.fetchall()[0][0]
 
 
 def check_queue_length():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        cur = conn.execute("SELECT Count(*) FROM entries")
-    cur.execute("SELECT Count(*) FROM entries")
     return cur.fetchall()[0][0]
 
 
 def clear_played_songs():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        conn.execute("DELETE FROM done_songs")
-    cur.execute("DELETE FROM done_songs")
-    conn.commit()
-    conn.close()
     return True
 
 
 def delete_entry(id):
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        conn.execute("DELETE FROM entries WHERE id=%s", (id,))
-    cur.execute("DELETE FROM entries WHERE id=?", (id,))
-    conn.commit()
-    conn.close()
     return True
 
 
@@ -193,20 +169,15 @@ def delete_entries(ids):
     for x in ids:
         idlist.append((x,))
     try:
-        conn = open_db()
+        with get_db_engine().connect() as conn:
-        cur = conn.cursor()
+            cur = conn.execute("DELETE FROM entries WHERE id=%s", idlist)
-        cur.executemany("DELETE FROM entries WHERE id=?", idlist)
+
-        conn.commit()
-        conn.close()
         return cur.rowcount
-    except sqlite3.Error as error:
+    except Exception as error:
         return -1
 
 
 def delete_all_entries():
-    conn = open_db()
+    with get_db_engine().connect() as conn:
-    cur = conn.cursor()
+        conn.execute("DELETE FROM entries")
-    cur.execute("DELETE FROM entries")
-    conn.commit()
-    conn.close()
     return True

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/helpers.py

@@ -37,7 +37,7 @@ def check_config_exists():
 
 def load_version(app):
     if os.environ.get("SOURCE_VERSION"):
-        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7]
+        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7] # type: ignore
     elif os.path.isfile(".version"):
         with open('.version', 'r') as file:
             data = file.read().replace('\n', '')
@@ -48,7 +48,37 @@ def load_version(app):
     else:
         app.config['VERSION'] = ""
         
+def load_dbconfig(app):
+    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:
+            app.config['DBCONNSTRING'] = ""
+
 def setup_config(app):
+    if os.environ.get("DEPLOYMENT_PLATFORM") == "Docker":
+        app.config['BASIC_AUTH_USERNAME'] = os.environ.get('BASIC_AUTH_USERNAME')
+        app.config['BASIC_AUTH_PASSWORD'] = os.environ.get('BASIC_AUTH_PASSWORD')
+        app.config['ENTRY_QUOTA'] = os.environ.get('ENTRY_QUOTA')
+        app.config['MAX_QUEUE'] = os.environ.get('MAX_QUEUE')
+    else:
         if check_config_exists():
             config = json.load(open(config_file))
             with open(config_file, 'r') as handle:
@@ -70,7 +100,7 @@ def nocache(view):
     @wraps(view)
     def no_cache(*args, **kwargs):
         response = make_response(view(*args, **kwargs))
-        response.headers['Last-Modified'] = datetime.now()
+        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'

backend/requirements.txt

@@ -3,3 +3,5 @@ pandas
 Flask-BasicAuth
 bs4
 gunicorn
+SQLAlchemy
+mysqlclient

backend/templates/base.html

@@ -12,7 +12,7 @@
     <title>{% block title %}{% endblock %} - KaraoQueue</title>
 
     <!-- Bootstrap-Tables -->
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
+    <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"
@@ -73,9 +73,9 @@
             {% 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"
+            <a href="https://github.com/PhoenixTwoFive/karaoqueue"
-                class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>-->
+                class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
-            <span class="text-muted">KaraoQueue {{karaoqueue_version}} -&nbsp;<span>&copy</span>&nbsp;2019-21 - Phillip
+            <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-23 - Phillip
                 Kühne</span>
         </div>
     </footer>
@@ -96,9 +96,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
         integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
         </script>
-    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
+    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
     <script
-        src="https://unpkg.com/bootstrap-table@1.15.3/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
+        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>

backend/templates/main_admin.html

@@ -52,10 +52,10 @@ table td:nth-child(2) {
 {% block extrajs %}
 <script>
     $(function () {
+        refreshEntryToggle()
         $('#entryToggle').change(function() {
             $.ajax({url: "/api/entries/accept/"+($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000)});
         })
-        refreshEntryToggle()
         $("#entrytable").bootstrapTable().on('load-success.bs.table', function() {
             $('[data-toggle="tooltip"]').tooltip()
         })
@@ -195,17 +195,19 @@ table td:nth-child(2) {
         });
     }
     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\" onclick=\"markEntryAsTransferred("+row.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=\"markEntryAsSung("+row.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=\"confirmDeleteEntry('"+row.Name+"',"+row.ID+")\"><i class=\"fas fa-trash\"></i></button>";
+            outerHTML = "<button type=\"button\" class=\"btn btn-default\" onclick=\"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=\"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=\"confirmDeleteEntry('"+row.Name+"',"+row.entry_ID+")\"><i class=\"fas fa-trash\"></i></button>";
         } else {
-            outerHTML = "<button type=\"button\" class=\"btn btn-info\" onclick=\"markEntryAsTransferred("+row.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=\"markEntryAsSung("+row.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=\"confirmDeleteEntry('"+row.Name+"',"+row.ID+")\"><i class=\"fas fa-trash\"></i></button>";
+            outerHTML = "<button type=\"button\" class=\"btn btn-info\" onclick=\"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=\"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=\"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.ID
+            return row.entry_ID
         })
     }
 </script>

docker-compose.prod.yml

@@ -0,0 +1,28 @@
+version: "3.9"
+
+secrets:
+  secrets:
+    file: ./secrets.yml
+
+services:
+  karaoqueue:
+    image: "phillipkhne/karaoqueue:latest"
+    restart: always
+    ports:
+      - "127.0.0.1:8081:80" # Please put a reverse proxy in front of this
+    environment:
+      DEPLOYMENT_PLATFORM: Docker
+      DBSTRING: mysql://user:pass@host:3306/database
+      BASIC_AUTH_USERNAME: admin
+      BASIC_AUTH_PASSWORD: changeme
+      ENTRY_QUOTA: 3
+      MAX_QUEUE: 20
+  db:
+    image: mariadb
+    restart: always
+    environment:
+      MARIADB_ROOT_PASSWORD: changeme!
+      MARIADB_ROOT_HOST: localhost
+      MARIADB_DATABASE: karaoqueue
+      MARIADB_USER: karaoqueue
+      MARIADB_PASSWORD: change

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/.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/angular.json

@@ -1,135 +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": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          },
-          "defaultConfiguration": ""
-        },
-        "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": []
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "ng-karaoqueue:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "ng-karaoqueue:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "schematics": {
-    "@schematics/angular:component": {
-      "style": "scss"
-    }
-  }
-}

frontend/ng-karaoqueue/package.json

@@ -1,51 +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": "^14.2.3",
-    "@angular/cdk": "^14.2.2",
-    "@angular/common": "^14.2.3",
-    "@angular/compiler": "^14.2.3",
-    "@angular/core": "^14.2.3",
-    "@angular/forms": "^14.2.3",
-    "@angular/material": "^14.2.2",
-    "@angular/platform-browser": "^14.2.3",
-    "@angular/platform-browser-dynamic": "^14.2.3",
-    "@angular/router": "^14.2.3",
-    "@mdi/angular-material": "^7.0.96",
-    "hammerjs": "^2.0.8",
-    "rxjs": "~7.5.6",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.11.8"
-  },
-  "devDependencies": {
-    "@angular/cli": "^14.2.3",
-    "@angular/compiler-cli": "^14.2.3",
-    "@angular/language-service": "^14.2.3",
-    "@types/jasmine": "~4.3.0",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/node": "~18.7.19",
-    "codelyzer": "^0.0.28",
-    "jasmine-core": "~4.4.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~10.9.1",
-    "tslint": "~6.1.0",
-    "typescript": "~4.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.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/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>

frontend/ng-karaoqueue/src/styles.scss

@@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}

frontend/ng-karaoqueue/tsconfig.app.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/app/app.module.ts",
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}

frontend/ng-karaoqueue/tsconfig.json

@@ -1,32 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-    "compileOnSave": false,
-    "compilerOptions": {
-      "baseUrl": "./",
-      "outDir": "./dist/out-tsc",
-      "forceConsistentCasingInFileNames": true,
-      "strict": true,
-      "noImplicitOverride": true,
-      "noPropertyAccessFromIndexSignature": true,
-      "noImplicitReturns": true,
-      "noFallthroughCasesInSwitch": true,
-      "sourceMap": true,
-      "declaration": false,
-      "downlevelIteration": true,
-      "experimentalDecorators": true,
-      "moduleResolution": "node",
-      "importHelpers": true,
-      "target": "es2020",
-      "module": "es2020",
-      "lib": [
-        "es2020",
-        "dom"
-      ]
-    },
-    "angularCompilerOptions": {
-      "enableI18nLegacyMessageIdFormat": false,
-      "strictInjectionParameters": true,
-      "strictInputAccessModifiers": true,
-      "strictTemplates": true
-    }
-  }

frontend/ng-karaoqueue/tsconfig.spec.json

@@ -1,18 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}