Update Everything

Angular CLI update for packages - @angular/material@14
Update
2025-07-01 15:51:41 +02:00 · 2022-09-24 03:07:39 +02:00 · 2022-09-24 03:05:13 +02:00 · 2022-09-24 03:04:03 +02:00 · 2022-09-24 02:56:05 +02:00 · 2022-09-24 02:56:01 +02:00
64 changed files with 14010 additions and 1564 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -1,40 +0,0 @@
-{
-  "image": "mcr.microsoft.com/devcontainers/universal:2",
-  "hostRequirements": {
-    "cpus": 4
-  },
-  "waitFor": "onCreateCommand",
-  "onCreateCommand": "curl -LsS https://r.mariadb.com/downloads/mariadb_repo_setup | sudo bash && sudo apt install -y libmariadb3 libmariadb-dev",
-  "updateContentCommand": "pip install -r backend/requirements.txt",
-  "portsAttributes": {
-    "5000": {
-      "label": "Application",
-      "onAutoForward": "openPreview"
-    }
-  },
-  "customizations": {
-    "codespaces": {
-      "openFiles": [
-        "templates/index.html"
-      ]
-    },
-    "vscode": {
-      "extensions": [
-		"ms-python.python",
-		"batisteo.vscode-django",
-		"ms-python.flake8",
-		"ms-python.isort",
-		"ms-python.vscode-pylance",
-		"redhat.vscode-yaml",
-		"ms-azuretools.vscode-docker",
-		"donjayamanne.python-extension-pack"
-	]
-    }
-  },
-"forwardPorts": [
-  5000
-],
-"features": {
-  "ghcr.io/devcontainers-contrib/features/angular-cli:2": {}
-}
-}
--- a/.editorconfig
+++ b/.editorconfig
@ -1,36 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = false
-
-[*.md]
-trim_trailing_whitespace = true
-
-[*.py]
-indent_size = 4
-
-[*.js]
-indent_size = 2
-
-[*.html]
-indent_size = 2
-
-[*.css]
-indent_size = 2
-
-[*.scss]
-indent_size = 2
-
-[*.yaml]
-indent_size = 2
-
-[*.yml]
-indent_size = 2
--- a/.env.dev
+++ b/.env.dev
@ -1,12 +0,0 @@
-# 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
--- a/.flake8
+++ b/.flake8
@ -1,3 +0,0 @@
-[flake8]
-ignore = E501
-max-line-length = 120
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@ -1,23 +0,0 @@
-name: Lint
-
-on: [pull_request]
-
-jobs:
-  flake8_py3:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Setup Python
-        uses: actions/setup-python@v4.6.0
-        with:
-          python-version: '3.10'
-          architecture: x64
-      - name: Checkout PyTorch
-        uses: actions/checkout@master
-      - name: Install flake8
-        run: pip install flake8
-      - name: Run flake8
-        uses: suo/flake8-github-action@releases/v1
-        with:
-          checkName: 'flake8_py3'   # NOTE: this needs to be the same as the job name
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -87,7 +87,7 @@ ipython_config.py
 #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 #   install all needed dependencies.
-Pipfile.lock
+#Pipfile.lock

 # celery beat schedule file
 celerybeat-schedule
@ -137,7 +137,4 @@ data/
 node_modules/

 # Version identification file
-.version
-
-# Docker secrets
-secrets.yml
+.version
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -5,7 +5,7 @@
    "version": "0.2.0",
    "configurations": [
        {
-            "preLaunchTask": "mariadb",
+            "preLaunchTask": "versiondump",
            "name": "Python: Flask",
            "type": "python",
            "cwd": "${workspaceFolder}/backend",
@ -14,9 +14,8 @@
            "env": {
                "FLASK_APP": "backend/app.py",
                "FLASK_ENV": "development",
-                "FLASK_DEBUG": "1", 
+                "FLASK_DEBUG": "1"
            },
-            "envFile": "${workspaceFolder}/.env.dev",
            "args": [
                "run",
                "--no-debugger",
@ -25,7 +24,7 @@
            "jinja": true
        },
        {
-            "preLaunchTask": "mariadb",
+            "preLaunchTask": "versiondump",
            "name": "Python: Flask (with reload)",
            "type": "python",
            "cwd": "${workspaceFolder}/backend",
@ -36,7 +35,6 @@
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
-            "envFile": "${workspaceFolder}/.env.dev",
            "args": [
                "run",
                "--no-debugger"
@ -44,7 +42,7 @@
            "jinja": true
        },
        {
-            "preLaunchTask": "mariadb",
+            "preLaunchTask": "versiondump",
            "name": "Python: Flask (with reload, externally reachable)",
            "type": "python",
            "cwd": "${workspaceFolder}/backend",
@ -55,7 +53,6 @@
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
-            "envFile": "${workspaceFolder}/.env.dev",
            "args": [
                "run",
                "--no-debugger",
@ -64,7 +61,7 @@
            "jinja": true
        },
        {
-            "preLaunchTask": "mariadb",
+            "preLaunchTask": "versiondump",
            "name": "Python: Flask (externally reachable)",
            "type": "python",
            "cwd": "${workspaceFolder}/backend",
@ -75,7 +72,6 @@
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "1"
            },
-            "envFile": "${workspaceFolder}/.env.dev",
            "args": [
                "run",
                "--no-debugger",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,17 +1,9 @@
 {
    "python.pythonPath": "/usr/bin/python",
-    "python.testing.unittestArgs": [
-        "-v",
-        "-s",
-        "./backend/tests",
-        "-p",
-        "*test.py"
-    ],
-    "python.testing.pytestEnabled": false,
-    "python.testing.unittestEnabled": true,
-    "python.linting.pylintEnabled": false,
-    "python.linting.flake8Enabled": true,
-    "emmet.includeLanguages": {
-        "django-html": "html"
+    "files.exclude": {
+        "**/.classpath": true,
+        "**/.project": true,
+        "**/.settings": true,
+        "**/.factorypath": true
    }
 }
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -1,5 +1,5 @@
 {
-    // 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": [
@ -10,11 +10,13 @@
            "problemMatcher": []
        },
        {
-            "label": "mariadb",
-            "type": "shell",
-            "command": "docker-compose -f docker-compose.yml up --remove-orphans",
-            "isBackground": true,
-            "activeOnStart": false
+            "label": "Start Frontend",
+            "type": "npm",
+            "script": "start",
+            "path": "frontend/ng-karaoqueue/",
+            "problemMatcher": [
+                "$tsc"
+            ]
        }
    ]
 }
--- a/23
+++ b/23
@ -1,23 +0,0 @@
-FROM tiangolo/meinheld-gunicorn-flask:python3.9
-
-# Currently unusable, mariadb is not available through installer for debian 12
-# 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
-
-# In the meantime, acquire the mariadb packages through apt
-RUN apt-get install -y libmariadb3 libmariadb-dev
-
-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
-
-ARG SOURCE_VERSION
-ENV SOURCE_VERSION ${SOURCE_VERSION:-unknown}
-
-COPY ./backend /app
--- a/KaraokeWarkeliste.code-workspace
+++ b/KaraokeWarkeliste.code-workspace
@ -0,0 +1,13 @@
+{
+	"folders": [
+		{
+			"path": "./frontend/ng-karaoqueue"
+		},
+		{
+			"path": "backend"
+		},
+		{
+			"path": "docs"
+		}
+	]
+}
--- a/backend/Pipfile
+++ b/backend/Pipfile
@ -1,48 +0,0 @@
-[[source]]
-url = "https://pypi.org/simple"
-verify_ssl = true
-name = "pypi"
-
-[packages]
-autopep8 = "==2.0.2"
-beautifulsoup4 = "==4.12.0"
-bs4 = "==0.0.1"
-certifi = "==2022.12.7"
-charset-normalizer = "==3.1.0"
-click = "==8.1.3"
-flake8 = "==6.0.0"
-flask = "==2.2.3"
-flask-basicauth = "==0.2.0"
-greenlet = "==2.0.2"
-gunicorn = "==20.1.0"
-idna = "==3.4"
-itsdangerous = "==2.1.2"
-jinja2 = "==3.1.2"
-mariadb = "==1.1.6"
-markupsafe = "==2.1.2"
-mccabe = "==0.7.0"
-mysql = "==0.0.3"
-mysqlclient = "==2.1.1"
-numpy = "==1.24.2"
-packaging = "==23.0"
-pandas = "==1.5.3"
-pycodestyle = "==2.10.0"
-pyflakes = "==3.0.1"
-pymysql = "==1.0.3"
-python-dateutil = "==2.8.2"
-pytz = "==2023.3"
-requests = "==2.28.2"
-six = "==1.16.0"
-soupsieve = "==2.4"
-sqlalchemy = "==2.0.7"
-toml = "==0.10.2"
-tomli = "==2.0.1"
-typing-extensions = "==4.5.0"
-urllib3 = "==1.26.15"
-werkzeug = "==2.2.3"
-
-[dev-packages]
-
-[requires]
-python_version = "3.9"
-python_full_version = "3.9.17"
--- a/backend/app.py
+++ b/backend/app.py
@ -1,5 +1,4 @@
-from flask import Flask, render_template, abort, request, redirect, send_from_directory, jsonify
-from flask.wrappers import Response
+from flask import Flask, render_template, Response, abort, request, redirect, send_from_directory
 import helpers
 import database
 import data_adapters
@ -10,15 +9,14 @@ from helpers import nocache
 app = Flask(__name__, static_url_path='/static')

 basic_auth = BasicAuth(app)
-accept_entries = True
-
+accept_entries = False

@app.route("/")
 def home():
    if basic_auth.authenticate():
-        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
+        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(), debug=app.config['DEBUG'])
+        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate())


@app.route("/favicon.ico")
@ -37,13 +35,13 @@ def enqueue():
    if not helpers.is_valid_uuid(client_id):
        print(request.data)
        abort(400)
-    name = request.json['name'].strip()
+    name = request.json['name']
    song_id = request.json['id']
    if request.authorization:
-        entry_id = database.add_entry(name, song_id, client_id)
-        return Response(f"""{{"status":"OK", "entry_id":{entry_id}}}""", mimetype='text/json')
+        database.add_entry(name, song_id, client_id)
+        return Response('{"status":"OK"}', mimetype='text/json')
    else:
-        if helpers.get_accept_entries(app):
+        if accept_entries:
            if not request.json:
                print(request.data)
                abort(400)
@ -53,10 +51,10 @@ def enqueue():
                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']):
-                    entry_id = database.add_entry(name, song_id, client_id)
-                    return Response(f"""{{"status":"OK", "entry_id":{entry_id}}}""", mimetype='text/json')
+            if database.check_queue_length() < app.config['MAX_QUEUE']:
+                if database.check_entry_quota(client_id) < 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:
@ -67,14 +65,14 @@ def enqueue():

@app.route("/list")
 def songlist():
-    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
+    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(), debug=app.config['DEBUG'])
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate())


@app.route("/settings", methods=['POST'])
@ -83,33 +81,16 @@ def settings():
 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
+    if entryquota.isnumeric() and int(entryquota) > 0:
+        app.config['ENTRY_QUOTA'] = int(entryquota)
    else:
        abort(400)
-    if maxqueue.isnumeric and int(maxqueue) > 0:  # type: ignore
-        app.config['MAX_QUEUE'] = int(maxqueue)  # type: ignore
+    if maxqueue.isnumeric and int(maxqueue) > 0:
+        app.config['MAX_QUEUE'] = int(maxqueue)
    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(), debug=app.config['DEBUG'])
+
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate())


@app.route("/api/queue")
@ -123,7 +104,7 @@ def queue_json():
@nocache
@basic_auth.required
 def played_list():
-    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
+    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate())


@app.route("/api/songs")
@ -138,70 +119,29 @@ def songs():
@basic_auth.required
 def update_songs():
    database.delete_all_entries()
-    helpers.reset_current_event_id(app)
    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
+@app.route("/api/songs/compl")
@nocache
 def get_song_completions(input_string=""):
    input_string = request.args.get('search', input_string)
    if input_string != "":
-        result = [list(x) for x in database.get_song_completions(input_string=input_string)]
-        return jsonify(result)
+        print(input_string)
+        list = database.get_song_completions(input_string=input_string)
+        return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')

    else:
        return 400


-@app.route("/api/songs/search")
-@nocache
-def query_songs_with_details(input_string=""):
-    input_string = request.args.get("q", input_string)
-    if input_string == "":
-        return Response(status=400)
-    result = []
-    for x in database.get_songs_with_details(input_string):
-        # Turn row into dict. Add field labels.
-        result.append(dict(zip(['karafun_id', 'title', 'artist', 'year', 'duo', 'explicit', 'styles', 'languages'], x)))
-    return jsonify(result)
-
-
-@app.route("/api/songs/details/<song_id>")
-def get_song_details(song_id):
-    result = database.get_song_details(song_id)
-    if result is None:
-        abort(404)
-    else:
-        return jsonify(dict(zip(['karafun_id', 'title', 'artist', 'year', 'duo', 'explicit', 'styles', 'languages'], result[0])))
-
-
-@app.route("/api/entries/delete/<entry_id>", methods=['GET'])
+@app.route("/api/entries/delete/<entry_id>")
@nocache
@basic_auth.required
-def delete_entry_admin(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/<entry_id>", methods=['POST'])
-@nocache
-def delete_entry_user(entry_id):
-    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)
-    if database.get_raw_entry(entry_id)[3] != client_id:  # type: ignore
-        print(request.data)
-        abort(403)
+def delete_entry(entry_id):
    if database.delete_entry(entry_id):
        return Response('{"status": "OK"}', mimetype='text/json')
    else:
@ -218,7 +158,7 @@ def delete_entries():
        return
    updates = database.delete_entries(request.json)
    if updates >= 0:
-        return Response('{"status": "OK", "updates": ' + str(updates) + '}', mimetype='text/json')
+        return Response('{"status": "OK", "updates": '+str(updates)+'}', mimetype='text/json')
    else:
        return Response('{"status": "FAIL"}', mimetype='text/json', status=400)

@ -232,7 +172,6 @@ def mark_sung(entry_id):
    else:
        return Response('{"status": "FAIL"}', mimetype='text/json')

-
@app.route("/api/entries/mark_transferred/<entry_id>")
@nocache
@basic_auth.required
@ -247,8 +186,9 @@ def mark_transferred(entry_id):
@nocache
@basic_auth.required
 def set_accept_entries(value):
+    global accept_entries
    if (value == '0' or value == '1'):
-        helpers.set_accept_entries(app, bool(int(value)))
+        accept_entries = bool(int(value))
        return Response('{"status": "OK"}', mimetype='text/json')
    else:
        return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
@ -257,8 +197,8 @@ def set_accept_entries(value):
@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')
+    global accept_entries
+    return Response('{"status": "OK", "value": '+str(int(accept_entries))+'}', mimetype='text/json')


@app.route("/api/played/clear")
@ -276,7 +216,6 @@ def clear_played_songs():
@basic_auth.required
 def delete_all_entries():
    if database.delete_all_entries():
-        helpers.reset_current_event_id(app)
        return Response('{"status": "OK"}', mimetype='text/json')
    else:
        return Response('{"status": "FAIL"}', mimetype='text/json')
@ -288,23 +227,17 @@ def admin():
    return redirect("/", code=303)


-@app.route("/api/events/current")
-@nocache
-def get_current_event():
-    return Response('{"status": "OK", "event": "' + helpers.get_current_event_id(app) + '"}', mimetype='text/json')
-
-
+@app.before_first_request
 def activate_job():
-    with app.app_context():
-        helpers.load_dbconfig(app)
-        helpers.load_version(app)
-        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)
+    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()
+    helpers.setup_config(app)
+


@app.after_request
@ -313,15 +246,14 @@ 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 'Cache-Control' not in response.headers:
-        response.headers['Cache-Control'] = 'private, max-age=600, no-cache, must-revalidate'
+    if not 'Cache-Control' in response.headers:
+        response.headers['Cache-Control'] = 'private, max-age=600'
    return response

-
@app.context_processor
 def inject_version():
    return dict(karaoqueue_version=app.config['VERSION'])


-# Perform setup here so it will be executed when the module is imported by the WSGI server.
-activate_job()
+if __name__ == "__main__":
+    app.run(host='127.0.0.1', port=8080, debug=True)
--- a/backend/data_adapters.py
+++ b/backend/data_adapters.py
@ -1,5 +1,8 @@
+def dict_from_row(row):
+    return dict(zip(row.keys(), row))
+
 def dict_from_rows(rows):
-    outlist = []
+    outlist=[]
    for row in rows:
-        outlist.append(dict(row._mapping))
-    return outlist
+        outlist.append(dict_from_row(row))
+    return outlist
--- a/backend/database.py
+++ b/backend/database.py
@ -1,261 +1,190 @@
 # -*- coding: utf_8 -*-

-from sqlalchemy import create_engine, engine, text
+import sqlite3
 import pandas
 from io import StringIO
-from flask import current_app
-import uuid

 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):
-        sql_engine = create_engine(
-            current_app.config.get("DBCONNSTRING"))  # type: ignore
-    return sql_engine
+def open_db():
+    conn = sqlite3.connect("/tmp/karaoqueue.db")
+    conn.execute('PRAGMA encoding = "UTF-8";')
+    return conn


 def import_songs(song_csv):
    print("Start importing Songs...")
    df = pandas.read_csv(StringIO(song_csv), sep=';')
-    with get_db_engine().connect() as conn:
-        df.to_sql(song_table, conn, if_exists='replace',
-                  index=False)
-        try:
-            cur = conn.execute(text("ALTER TABLE songs ADD FULLTEXT(Title,Artist)"))
-            conn.commit()
-        except Exception:
-            pass
-        cur = conn.execute(text("SELECT Count(Id) FROM songs"))
-        num_songs = cur.fetchone()[0]  # type: ignore
-        conn.commit()
+    conn = open_db()
+    cur = conn.cursor()
+    df.to_sql(song_table, conn, if_exists='replace',
+              index=False)
+    cur.execute("SELECT Count(Id) FROM songs")
+    num_songs = cur.fetchone()[0]
+    conn.close()
    print("Imported songs ({} in Database)".format(num_songs))
-    return ("Imported songs ({} in Database)".format(num_songs))
+    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()
+    conn = open_db()
+    conn.execute('CREATE TABLE IF NOT EXISTS '+entry_table +
+                 ' (ID INTEGER PRIMARY KEY NOT NULL, Song_Id INTEGER NOT NULL, Name VARCHAR(255), Client_Id VARCHAR(36), Transferred INTEGER DEFAULT 0)')
+    conn.close()


 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()
+    conn = open_db()
+    conn.execute('CREATE TABLE IF NOT EXISTS '+done_table +
+                 ' (Song_Id INTEGER PRIMARY KEY NOT NULL,  Plays INTEGER)')
+    conn.close()


 def create_song_table():
-    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,
-        PRIMARY KEY (`Id`),
-        FULLTEXT KEY (`Title`,`Artist`)
-        )""")
-        conn.execute(stmt)
-        conn.commit()
+    conn = open_db()
+    conn.execute("CREATE TABLE IF NOT EXISTS \""+song_table+"""\" (
+        "Id" INTEGER,
+        "Title" TEXT,
+        "Artist" TEXT,
+        "Year" INTEGER,
+        "Duo" INTEGER,
+        "Explicit" INTEGER,
+        "Date Added" TEXT,
+        "Styles" TEXT,
+        "Languages" TEXT
+    )""")
+    conn.close()


 def create_list_view():
-    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
+    conn = open_db()
+    conn.execute("""CREATE VIEW IF NOT EXISTS [Liste] AS
+                 SELECT Name, Title, Artist, entries.Id, songs.Id, entries.Transferred
                 FROM entries, songs
-                 WHERE entries.Song_Id=songs.Id
-                 ORDER BY entries.Id ASC
-                 """)
-        conn.execute(stmt)
-        conn.commit()
+                 WHERE entries.Song_Id=songs.Id""")
+    conn.close()


 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
+    conn = open_db()
+    conn.execute("""CREATE VIEW IF NOT EXISTS [Abspielliste] AS
+                 SELECT Artist || \" - \" || Title AS Song, Plays AS Wiedergaben
                 FROM songs, done_songs
                 WHERE done_songs.Song_Id=songs.Id""")
-        conn.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()
+    conn.close()


 def get_list():
-    with get_db_engine().connect() as conn:
-        stmt = text("SELECT * FROM Liste")
-        cur = conn.execute(stmt)
+    conn = open_db()
+    conn.row_factory = sqlite3.Row
+    cur = conn.cursor()
+    cur.execute("SELECT * FROM Liste")
    return cur.fetchall()


 def get_played_list():
-    with get_db_engine().connect() as conn:
-        stmt = text("SELECT * FROM Abspielliste")
-        cur = conn.execute(stmt)
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("SELECT * FROM Abspielliste")
    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)
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("SELECT Artist || \" - \" || Title AS Song, Id FROM songs;")
    return cur.fetchall()


 def get_song_completions(input_string):
-    with get_db_engine().connect() as conn:
-        prepared_string = f"{input_string}"
-        prepared_string_with_wildcard = f"%{input_string}%"
-        stmt = text(
-            """
-            SELECT CONCAT(Artist, ' - ', Title) AS Song, Id FROM songs
-            WHERE MATCH(Artist, Title)
-            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
-            LIMIT 20;
-            """)
-        cur = conn.execute(
-            stmt, {"prepared_string": prepared_string, "prepared_string_with_wildcard": prepared_string_with_wildcard})  # type: ignore
-        return cur.fetchall()
-
-
-def get_songs_with_details(input_string: str):
-    with get_db_engine().connect() as conn:
-        prepared_string = f"%{input_string}"
-        stmt = text(
-            """
-            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
-            WHERE MATCH(Artist, Title)
-            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
-            LIMIT 20;
-            """
-        )
-        cur = conn.execute(
-            stmt, {"prepared_string": prepared_string})
-        return cur.fetchall()
-
-
-def get_song_details(song_id: int):
-    with get_db_engine().connect() as conn:
-        stmt = text(
-            """
-            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
-            WHERE Id = :song_id;
-            """
-        )
-        cur = conn.execute(
-            stmt, {"song_id": song_id})
-        return cur.fetchall()
+    conn = open_db()
+    cur = conn.cursor()
+    # Don't look, it burns...
+    prepared_string = "%{0}%".format(
+        input_string).upper()  # "Test" -> "%TEST%"
+    print(prepared_string)
+    cur.execute(
+        "SELECT Title || \" - \" || Artist AS Song, Id FROM songs WHERE REPLACE(REPLACE(REPLACE(REPLACE(UPPER( SONG ),'ö','Ö'),'ü','Ü'),'ä','Ä'),'ß','ẞ') LIKE (?) LIMIT 20;", (prepared_string,))
+    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) RETURNING entries.ID;")
-        cur = conn.execute(stmt, {"par_song_id": song_id, "par_name": name,
-                                  "par_client_id": client_id})  # type: ignore
-        conn.commit()
-    return cur.fetchone()[0]  # type: ignore
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute(
+        "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):
-    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)
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("""SELECT Song_Id FROM entries WHERE Id=?""", (entry_id,))
+    song_id = cur.fetchone()[0]
+    cur.execute("""INSERT OR REPLACE INTO done_songs (Song_Id, Plays)
+                VALUES("""+str(song_id)+""",
+                       COALESCE(
+                           (SELECT Plays FROM done_songs
+                            WHERE Song_Id="""+str(song_id)+"), 0) + 1)"
+                )
+    conn.commit()
+    delete_entry(entry_id)
+    conn.close()
    return True


 def 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()
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("SELECT Transferred FROM entries WHERE ID =?", (entry_id,))
+    marked = cur.fetchall()[0][0]
+    if(marked == 0):
+        cur.execute(
+            "UPDATE entries SET Transferred = 1 WHERE ID =?", (entry_id,))
+    else:
+        cur.execute(
+            "UPDATE entries SET Transferred = 0 WHERE ID =?", (entry_id,))
+    conn.commit()
+    conn.close()
    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
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute(
+        "SELECT Count(*) FROM entries WHERE entries.Client_Id = ?", (client_id,))
    return cur.fetchall()[0][0]


 def check_queue_length():
-    with get_db_engine().connect() as conn:
-        cur = conn.execute(text("SELECT Count(*) FROM entries"))
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("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()
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("DELETE FROM done_songs")
+    conn.commit()
+    conn.close()
    return True


-def get_entry(id):
-    try:
-        with get_db_engine().connect() as conn:
-            cur = conn.execute(text("SELECT * FROM Liste WHERE entry_ID = :par_id"),
-                               {"par_id": id})  # type: ignore
-        return cur.fetchall()[0]
-    except Exception:
-        return None
-
-
-def get_raw_entry(id):
-    try:
-        with get_db_engine().connect() as conn:
-            cur = conn.execute(text("SELECT * FROM entries WHERE ID = :par_id"),
-                               {"par_id": id})  # type: ignore
-        return cur.fetchall()[0]
-    except Exception:
-        return None
-
-
 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()
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("DELETE FROM entries WHERE id=?", (id,))
+    conn.commit()
+    conn.close()
    return True


@ -264,75 +193,20 @@ def delete_entries(ids):
    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()
+        conn = open_db()
+        cur = conn.cursor()
+        cur.executemany("DELETE FROM entries WHERE id=?", idlist)
+        conn.commit()
+        conn.close()
        return cur.rowcount
-    except Exception:
+    except sqlite3.Error as error:
        return -1


-def delete_all_entries() -> bool:
-    with get_db_engine().connect() as conn:
-        conn.execute(text("DELETE FROM entries"))
-        conn.commit()
+def delete_all_entries():
+    conn = open_db()
+    cur = conn.cursor()
+    cur.execute("DELETE FROM entries")
+    conn.commit()
+    conn.close()
    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:
-        return ""
-
-
-def set_config(key: str, value: str) -> bool:
-    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
-
-
-def init_event_id() -> bool:
-    if not get_config("EventID"):
-        set_config("EventID", str(uuid.uuid4()))
-    return True
-
-
-def reset_event_id() -> bool:
-    set_config("EventID", str(uuid.uuid4()))
-    return True
-
-
-def get_event_id() -> str:
-    return get_config("EventID")
--- a/backend/docker/Dockerfile
+++ b/backend/docker/Dockerfile
@ -0,0 +1,11 @@
+FROM tiangolo/uwsgi-nginx-flask:python3.7
+
+RUN pip install requests
+
+RUN pip install pandas
+
+RUN pip install Flask-BasicAuth
+
+RUN pip install bs4
+
+COPY ../app /app
--- a/backend/helpers.py
+++ b/backend/helpers.py
@ -1,27 +1,30 @@
 import requests
 from bs4 import BeautifulSoup
-import subprocess
+import json
 import os
 import uuid
-from flask import make_response, Flask
+from flask import make_response
 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']
+    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))
@ -29,147 +32,48 @@ def is_valid_uuid(val):
    except ValueError:
        return False

-
 def check_config_exists():
-    return database.check_config_table()
+    return os.path.isfile(config_file)

-
-def load_version(app: Flask):
-    if app.config['DEBUG'] is True:
-        app.config['VERSION'] = subprocess.Popen("echo \"$(git rev-parse --abbrev-ref HEAD)-$(git describe)\"", shell=True, stdout=subprocess.PIPE).stdout.read().decode('utf-8').strip() + " (debug)"  # noqa: E501 # type: ignore
-        return
+def load_version(app):
    if os.environ.get("SOURCE_VERSION"):
-        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")  # type: ignore # noqa: E501
-        return
-    else:
-        app.config['VERSION'] = "Unknown"
-
-
-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")
+        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7]
+    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['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.""")
+                app.config['VERSION'] = ""
+    else:
+        app.config['VERSION'] = ""

-# Check if config exists in DB, if not, create it.
-
-
-def setup_config(app: Flask):
-    if check_config_exists() is 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': 2,
-                          'maxqueue': 10,
-                          'entries_allowed': 1,
-                          'theme': 'default.css'}
-        for key, value in default_config.items():
-            database.set_config(key, value)
-        print("Created new config")
-        database.init_event_id()
-    config = database.get_config_list()
+def setup_config(app):
+    if check_config_exists():
+        config = json.load(open(config_file))
+        with open(config_file, 'r') as handle:
+            config = json.load(handle)
+        print("Loaded existing config")
+    else:
+        config = {'username': 'admin', 'password': 'changeme', 'entryquota': 3, 'maxqueue': 20}
+        with open(config_file, 'w') as handle:
+            json.dump(config, handle, indent=4, sort_keys=True)
+        print("Wrote new config")
    app.config['BASIC_AUTH_USERNAME'] = config['username']
    app.config['BASIC_AUTH_PASSWORD'] = config['password']
    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']
-    app.config['EVENT_ID'] = database.get_event_id()

-# 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 get_current_event_id(app: Flask):
-    return app.config['EVENT_ID']
-
-
-def reset_current_event_id(app: Flask):
-    database.reset_event_id()
-    app.config['EVENT_ID'] = database.get_event_id()


 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['Last-Modified'] = datetime.now()
        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)
+        
+    return update_wrapper(no_cache, view)
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -1,36 +1,5 @@
-autopep8~=2.0.2
-beautifulsoup4~=4.12.0
-bs4~=0.0.1
-certifi~=2022.12.7
-charset-normalizer~=3.1.0
-click~=8.1.3
-flake8~=6.0.0
-Flask~=2.3.2
-Flask-BasicAuth~=0.2.0
-greenlet~=2.0.2
-gunicorn~=20.1.0
-idna~=3.4
-itsdangerous~=2.1.2
-Jinja2~=3.1.2
-mariadb~=1.1.6
-MarkupSafe~=2.1.2
-mccabe~=0.7.0
-mysql~=0.0.3
-mysqlclient~=2.1.1
-numpy~=1.24.2
-packaging~=23.0
-pandas~=1.5.3
-pycodestyle~=2.10.0
-pyflakes~=3.0.1
-PyMySQL~=1.0.3
-python-dateutil~=2.8.2
-pytz~=2023.3
-requests~=2.31.0
-six~=1.16.0
-soupsieve~=2.4
-SQLAlchemy~=2.0.7
-toml~=0.10.2
-tomli~=2.0.1
-typing_extensions~=4.5.0
-urllib3~=1.26.15
-Werkzeug~=3.0.0
+requests
+pandas
+Flask-BasicAuth
+bs4
+gunicorn
--- a/backend/static/css/style.css
+++ b/backend/static/css/style.css
@ -1,238 +1,77 @@
-: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);
-  --navbar-padding: 4.5rem;
-
-  /* Common */
-  --background-color: #ffffff;
-  --background-color-var: #f5f5f5;
-  --text-color: #212529;
-  --text-color-var: #343a40;
-  --text-color-light: #6c757d;
-
-  /* Modals */
-  --modal-background-color: #ffffff;
-  --modal-separator-color: #dee2e6;
-  --modal-close-color: #212529;
-
-  /* Tables */
-  --table-border-color: #dee2e6;
-
-  /* Input */
-  --input-background-color: #ffffff;
-
-  /* Misc */
-  --copy-highlight-color: rgba(251, 255, 0, 0.6);
-
-  /* Toasts */
-  --toast-background-color: #ffffff;
-  --toast-text-color: #212529;
-
-  /* Footer */
-  --footer-height: 80px;
+body {
+    padding-top: 5rem;
 }

-
-body {
-  padding-top: var(--navbar-padding);
-  background-color: var(--background-color);
-}
-
-html,
-body {
-  height: 100%;
+html, body {
+    height: 100%;
 }

 .site {
-  min-height: calc(100vh - var(--navbar-padding) - var(--footer-height));
-  margin-bottom: -var(--footer-height);
+    height: auto;
+    min-height: 100%;
+}
+
+main {
+    padding-bottom: 60px; /* Höhe des Footers */
 }

 .footer {
-  /*margin-top: var(--footer-height);*/
-  width: 100%;
-  height: var(--footer-height);
-
-  background-color: var(--background-color-var);
+    margin-top: -60px;
+    width: 100%;
+    height: 60px;
+    /* Set the fixed height of the footer here */
+    /*line-height: 60px; /* Vertically center the text there */
+    background-color: #f5f5f5;
 }

 .topbutton {
-  width: 100%;
+    width: 100%;
 }

 table td {
-  overflow: hidden;
-  text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

 table.entries tbody tr[data-index="0"] {
-  background-color: #007bff80;
-  font-weight: 600;
+    background-color: #007bff80;
+    font-weight: 600;
 }

 table.entries tbody tr[data-index="1"] {
-  background-color: #007bff40;
-  font-weight: 500;
+    background-color: #007bff40;
+    font-weight: 500;
 }

 table.entries tbody tr[data-index="2"] {
-  background-color: #007bff20;
-  font-weight: 400;
+    background-color: #007bff20;
+    font-weight: 400;
 }

 table.entries tbody tr[data-index="3"] {
-  background-color: #007bff10;
+    background-color: #007bff10;
 }

 table td:first-child {
-  max-width: 200px !important;
-}
-
-.fa-solid {
-  vertical-align: auto;
+    max-width: 200px !important;
 }

@media (min-width: 768px) {
-  .topbutton {
-    width: auto;
-  }
+    .topbutton {
+        width: auto;
+    }
 }

@media print {
-  body {
-    font-size: 1.3em;
-  }
+    body {
+        font-size: 1.3em;
+    }

-  .footer {
-    display: none !important;
-  }
+    .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(--modal-separator-color);
-}
-
-.modal-footer {
-  background-color: var(--background-color);
-  color: var(--text-color-var);
-  border-color: 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)
-}
-
-#entrytable td>span:hover {
-  background-color: var(--copy-highlight-color);
-}
-
-.list-indicator {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-#songYear {
-  font-size: small;
-  font-weight: 400;
-  color: var(--text-color-light);
-}
-
-.construction_bg {
-  background: repeating-linear-gradient(45deg,
-      #222200,
-      #222200 10px,
-      #000000 10px,
-      #000000 20px) !important;
-}
-
-.toast {
-  background-color: var(--toast-background-color);
-  color: var(--toast-text-color);
-}
-
-.toast-header {
-  background-color: var(--toast-background-color);
-  color: var(--toast-text-color);
-}
-
-@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;
-    --text-color-light: #6c757d;
-
-    /* Modals */
-    --modal-background-color: #121212;
-    --modal-separator-color: #232323;
-    --modal-close-color: #f5f5f5;
-
-    /* Tables */
-    --table-border-color: #232323;
-
-    /* Input */
-    --input-background-color: #343434;
-
-    /* Toasts */
-    --toast-background-color: #232323;
-    --toast-text-color: #f5f5f5;
-  }
+    .admincontrols {
+        display: none;
+    }
 }
--- a/backend/static/css/themes/stuk.css
+++ b/backend/static/css/themes/stuk.css
@ -1,91 +0,0 @@
-.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;
-}
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@ -6,39 +6,28 @@
    <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-Toaster-->
-    <link rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
-        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">

    <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css"
-        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <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" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

    <!-- Bootstraptoggle -->
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">

-    <!-- Active Theme -->
-    <link href="static/css/themes/{{config['THEME']}}" rel="stylesheet">
-
 </head>

 <body>
@ -79,14 +68,14 @@
        </main><!-- /.container -->
    </div>
    <!-- Footer -->
-    <footer class="footer {% if debug %} construction_bg {% endif %}">
+    <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
+            <!--<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 {{karaoqueue_version}} -&nbsp;<span>&copy</span>&nbsp;2019-21 - Phillip
                Kühne</span>
        </div>
    </footer>
@ -94,31 +83,27 @@
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
-        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
+        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous">
+        </script>

-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"
-        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"
-        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
-        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.15.3/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>
+        src="https://unpkg.com/bootstrap-table@1.15.3/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/js/bootstrap-toaster.min.js"
-        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {% block extrajs %}{% endblock %}
    <script>
        $(document).ready(function () {
-            checkEventID()
+            loadOrGenerateClientId()
            // get current URL path and assign 'active' class
            var pathname = window.location.pathname;
            $('.navbar-nav > li > a[href="' + pathname + '"]').parent().addClass('active');
@ -137,53 +122,9 @@

        function loadOrGenerateClientId() {
            if (!localStorage.getItem("clientId")) {
-                localStorage.setItem("clientId", create_UUID())
+                localStorage.setItem("clientId",create_UUID())
            }
        }
-
-        function getClientId() {
-            return localStorage.getItem("clientId")
-        }
-
-        async function checkEventID() {
-            const localEventID = localStorage.getItem("eventID")
-            const resp = await fetch("/api/events/current")
-            const respJson = await resp.json()
-            const remoteEventID = respJson.event
-
-            if (localEventID == null || localEventID != remoteEventID) {
-                localStorage.clear()
-                localStorage.setItem("eventID", remoteEventID)
-                loadOrGenerateClientId()
-            }
-        }
-
-        function addEntry(entryId) {
-            entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
-            if (entryArray == null) {
-                entryArray = []
-            }
-            entryArray.push(entryId)
-            localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
-        }
-
-        function removeEntry(entryId) {
-            entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
-            if (entryArray == null) {
-                entryArray = []
-            }
-            entryArray = entryArray.filter(function (value, index, arr) { return value != entryId; });
-            localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
-        }
-
-        function getOwnedEntries() {
-            var entries = JSON.parse(localStorage.getItem("ownedEntries"))
-            if (entries == null) {
-                entries = []
-            }
-            return entries;
-        }
-
    </script>
 </body>

--- a/backend/templates/main.html
+++ b/backend/templates/main.html
@ -1,3 +1,5 @@
+
+
 {% extends 'base.html' %}
 {% block title %}Warteliste{% endblock %}
 {% block content %}
@ -7,7 +9,7 @@
        data-url="/api/queue"
        data-pagination="true"
        data-classes="table"
-    data-show-refresh="false"
+        data-show-refresh="false"
        data-auto-refresh="true"
        data-auto-refresh-interval="10">
    <thead>
@ -15,7 +17,6 @@
            <th data-field="Name">Name</th>
            <th data-field="Title">Song</th>
            <th data-field="Artist">Künstler</th>
-            <th scope="col" data-formatter="TableActionsFormatter"></th>
        </tr>
    </thead>
 </table>
@ -23,53 +24,12 @@
 {% 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");
-            $("#bfb").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='bottom'></span>");
-            $(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
-            $('[data-toggle="tooltip"]').tooltip()
-        }
-    })
-
-    function TableActionsFormatter(value, row, index) {
-        console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
-        console.log(row)
-        if (getOwnedEntries().includes(row.entry_ID)) {
-            return "<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Eintrag zurückziehen' onclick=\"event.stopPropagation();$(this).tooltip('dispose');requestDeletionAsUser(" + row["entry_ID"] + ")\"><i class='fas fa-trash'></i></button>"
-        }
-        return ""
+$.getJSON("/api/entries/accept", (data) => {
+    if (data["value"]==0) {
+        $("#bfb").addClass("disabled")
+        $("#bfb").prop("aria-disabled",true);
+        $("#bfb").prop("tabindex","-1");
    }
-
-    function requestDeletionAsUser(id) {
-        bootbox.confirm("Wirklich den Eintrag zurückziehen? Das könnte zu einer langen Wartezeit führen!", function (result) {
-            if (result) {
-                payload = {
-                    "client_id": localStorage.getItem("clientId"),
-                    "entry_id": id
-                }
-                $.ajax({
-                    url: "/api/entries/delete/" + id,
-                    type: "POST",
-                    data: JSON.stringify(payload),
-                    contentType: "application/json; charset=utf-8",
-                    dataType: "json",
-                    success: function (result) {
-                        toast = {
-                            title: "Erfolgreich zurückgezogen",
-                            message: "Eintrag wurde gelöscht",
-                            status: TOAST_STATUS.SUCCESS,
-                            timeout: 5000
-                        }
-                        Toast.create(toast);
-                        location.reload()
-                    }
-                })
-            }
-        })
-    }
-
+})
 </script>
 {% endblock %}
--- a/backend/templates/main_admin.html
+++ b/backend/templates/main_admin.html
@ -1,13 +1,15 @@
+
+
 {% 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;
-    }
+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">
@ -16,19 +18,30 @@
        <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">
+        <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">
+    <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" data-formatter="CopyFormatter">Name</th>
-                <th scope="col" data-field="Title" data-formatter="CopyFormatter">Song</th>
-                <th scope="col" data-field="Artist" data-formatter="CopyFormatter">Künstler</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>
@ -39,19 +52,16 @@
 {% block extrajs %}
 <script>
    $(function () {
+        $('#entryToggle').change(function() {
+            $.ajax({url: "/api/entries/accept/"+($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000)});
+        })
        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 () {
+        $("#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) {
+        bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){
            if (result) {
                deleteEntry(entry_id)
            }
@ -59,7 +69,7 @@
    }
    function confirmDeleteSelectedEntries() {
        bootbox.confirm({
-            message: "Wirklich gewählte Eintragungen löschen?",
+            message: "Wirklich gewählte Eintragungen löschen?", 
            buttons: {
                confirm: {
                    label: 'Ja',
@ -70,7 +80,7 @@
                    className: 'btn btn-secondary'
                }
            },
-            callback: function (result) {
+            callback: function(result){
                if (result) {
                    DeleteSelectedEntries(getIdSelections())
                }
@ -90,22 +100,22 @@
                    className: 'btn btn-secondary'
                }
            },
-            callback: function (result) {
+            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)
+                    updateSongDatabase(dialog)                    
                }
            }
        })
    }
    function refreshEntryToggle() {
        $.getJSON("/api/entries/accept", (data) => {
-            if (data["value"] != $('#entryToggle').is(":checked")) {
-                if (data["value"] == 1) {
+            if (data["value"]!=$('#entryToggle').is(":checked")) {
+                if(data["value"]==1) {
                    $('#entryToggle').data('bs.toggle').on('true')
                }
                else {
@ -115,53 +125,53 @@
        })
    }
    function deleteEntry(entry_id) {
-        $.ajax({
-            type: 'GET',
-            url: '/api/entries/delete/' + entry_id,
-            contentType: "application/json",
-            dataType: 'json',
-            async: false
-        });
-        $("#entrytable").bootstrapTable('refresh')
-
+       $.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')
-
+       $.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
+         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 () {
+            error: function() {
                bootbox.alert({
                    message: "Fehler beim Löschen der Eintragungen.",
                })
            },
-            success: function () {
+            success: function() {
                $("#entrytable").bootstrapTable('refresh')
-
+            
            },
            contentType: "application/json",
            dataType: 'json'
@ -173,47 +183,29 @@
            url: '/api/songs/update',
            contentType: "application/json",
            dataType: 'json',
-            success: function (data) {
+            success: function(data) {
                wait_dialog.modal('hide')
                bootbox.alert({
                    message: data["status"],
-                    callback: function () {
+                    callback: function() {
                        $("#entrytable").bootstrapTable('refresh')
                    }
                })
            }
        });
    }
-    function TableActions(value, row, index) {
+    function TableActions (value, row, index) {
        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(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
+        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>";
        } 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(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
+            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>";
        }
        return outerHTML;
    }
-
-    function CopyFormatter(value, row, index) {
-        let escapedString = value.replace("\"", "\\\"").replace("\'", "\\\'")
-        return "<span onclick='copyAndNotify(this.innerText)'>" + value + "</span>";
-    }
-
    function getIdSelections() {
        return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
-            return row.entry_ID
-        })
-    }
-
-    function copyAndNotify(text) {
-        navigator.clipboard.writeText(text).then(function () {
-            let toast = {
-                title: "Kopiert",
-                message: text,
-                status: 1,
-                timeout: 5000
-            };
-            Toast.create(toast);
+            return row.ID
        })
    }
 </script>
--- a/backend/templates/settings.html
+++ b/backend/templates/settings.html
@ -10,32 +10,9 @@
        <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">
+    <input type="button" class="btn btn-default mr-1 mb-2" onclick="$.get('/writeSettings').done(()=>{alert('Einstellungen gespeichert')}).fail(()=>{alert('Fehler beim Speichern der Einstellungen')})" value="Einstellungen speichern"/>
 </form>
-<details>
-    <summary>Current config:</summary>
-    <pre>{% for key, val in config.items() %}{{key}}: {{val}}<br>{% endfor %}</pre>
-</details>
 {% endblock %}
 {% block extrajs %}
 {% endblock %}
--- a/backend/templates/songlist.html
+++ b/backend/templates/songlist.html
@ -11,52 +11,21 @@
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Auf die Liste setzen</h5>
+                <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="songinfo container">
-                <div class="row">
-                    <div class="col">
-                        <h5 id="songTitle"></h5>
-                        <p><span id="songArtist"></span>&nbsp;<span id="songYear"></span></p>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-1">
-                        <p><i class="fas fa-info"></i></p>
-                    </div>
-                    <div class="col" id="indicators">
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-1">
-                        <p><i class="fas fa-file-audio"></i></p>
-                    </div>
-                    <div class="col">
-                        <p id="songGenres"></p>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-1">
-                        <p><i class="fas fa-language"></i></p>
-                    </div>
-                    <div class="col">
-                        <p id="songLanguages"></p>
-                    </div>
-                </div>
-            </div>
            <div class="form-group">
                <form id="nameForm">
                    <div class="modal-body">
-                        <label for="singerNameInput">Dein Name:</label>
+                        <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">Schließen</button>
+                        <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>
@ -69,15 +38,35 @@
 <script>
    $(document).ready(function () {
        $("#filter").focus();
-        $("#filter").keyup(debounce(() => songSearch()));
+        $("#filter").keyup(function () {
+            var value = $(this).val().toLowerCase();
+            //alert(value);
+            if (value.length >= 1) {
+                $.getJSON("/api/songs/compl", { search: value }, function (data) {
+                    var items = [];
+                    $.each(data, function (key, val) {
+                        items.push("<tr><td>" + val[0] + `</td>
+                            <td><button type='button'
+                                    class='btn btn-primary justify-content-center align-content-between enqueueButton'
+                                    data-toggle='modal'
+                                    data-target='#enqueueModal' onclick='setSelectedId(`+ val[1] + `)'><i
+                                        class="fas fa-plus"></i></button></td>
+                        </tr>`)
+                    });
+
+                    $("#songtable").html("")
+                    $(items.join("")).appendTo("#songtable");
+                    entriesAccepted()
+                });
+            } else {
+                $("#songtable").html("")
+            }
+        });

        $("#nameForm").submit(function (e) {
            e.preventDefault();
            submitModal();
        });
-        $('#enqueueModal').on('shown.bs.modal', function (e) {
-            $("#singerNameInput").focus();
-        })
    });


@ -90,7 +79,7 @@
        $.ajax({
            type: 'POST',
            url: '/api/enqueue',
-            data: JSON.stringify(data),
+            data: JSON.stringify(data), // or JSON.stringify ({name: 'jonas'}),
            success: success_callback,
            statusCode: {
                423: blocked_callback
@ -101,112 +90,18 @@
    }

    function setSelectedId(id) {
-        $("#songArtist").html("");
-        $("#songTitle").html("");
-        $("#songYear").html("");
-        $("#indicators")[0].innerHTML = "";
-
        $("#selectedId").attr("value", id);
-        $.getJSON("/api/songs/details/" + id, function (data) {
-            console.log(data);
-            $("#songTitle").html(data["title"]);
-            $("#songArtist").html(data["artist"]);
-            $("#songYear").html(data["year"]);
-            $("#indicators")[0].innerHTML = "";
-
-            let duoindicator_badge = document.createElement("span");
-            duoindicator_badge.classList.add("badge");
-            duoindicator_badge.classList.add("badge-secondary");
-            duoindicator_badge.classList.add("badge-pill");
-            duoindicator_badge.classList.add("mx-1");
-            duoindicator_badge.classList.add("p-2");
-
-            if (data["duo"] == 0) {
-                duoindicator_badge.innerHTML = "Solo";
-                let duoindicator = document.createElement("i");
-                duoindicator.classList.add("fas");
-                duoindicator.classList.add("fa-user");
-                duoindicator.classList.add("ml-1");
-                duoindicator_badge.appendChild(duoindicator);
-                $("#indicators")[0].appendChild(duoindicator_badge)
-            }
-
-            if (data["duo"] == 1) {
-                duoindicator_badge.innerHTML = "Duo";
-                let duoindicator = document.createElement("i");
-                duoindicator.classList.add("fas");
-                duoindicator.classList.add("fa-user-friends");
-                duoindicator.classList.add("ml-1");
-                duoindicator_badge.appendChild(duoindicator);
-                $("#indicators")[0].appendChild(duoindicator_badge)
-            }
-
-            if (data["explicit"] == 1) {
-                let explicitindicator_badge = document.createElement("span");
-                explicitindicator_badge.classList.add("badge");
-                explicitindicator_badge.classList.add("badge-secondary");
-                explicitindicator_badge.classList.add("badge-pill");
-                explicitindicator_badge.classList.add("mx-1");
-                explicitindicator_badge.classList.add("p-2");
-                explicitindicator_badge.innerHTML = "Explicit";
-                let explicitindicator = document.createElement("i");
-                explicitindicator.classList.add("fas");
-                explicitindicator.classList.add("fa-e");
-                explicitindicator.classList.add("ml-1");
-                explicitindicator_badge.appendChild(explicitindicator);
-                $("#indicators")[0].appendChild(explicitindicator_badge)
-            }
-
-            let styles = data["styles"].split(",");
-            let languages = data["languages"].split(",");
-
-            $("#songGenres").html("");
-            $("#songLanguages").html("");
-
-            for (let i = 0; i < styles.length; i++) {
-                let badge = document.createElement("span");
-                badge.classList.add("badge");
-                badge.classList.add("badge-secondary");
-                badge.classList.add("badge-pill");
-                badge.classList.add("mx-1");
-                badge.classList.add("p-2");
-                badge.innerHTML = styles[i];
-                $("#songGenres")[0].appendChild(badge);
-            }
-
-            for (let i = 0; i < languages.length; i++) {
-                let badge = document.createElement("span");
-                badge.classList.add("badge");
-                badge.classList.add("badge-secondary");
-                badge.classList.add("badge-pill");
-                badge.classList.add("mx-1");
-                badge.classList.add("p-2");
-                badge.innerHTML = languages[i];
-                $("#songLanguages")[0].appendChild(badge);
-            }
-        });
    }

    function submitModal() {
        var name = $("#singerNameInput").val();
        var id = $("#selectedId").attr("value");
-        enqueue(localStorage.getItem("clientId"), id, name, function (response) {
-            console.log(response);
-            entryID = response["entry_id"];
-            toast = {
-                title: "Erfolgreich eingetragen",
-                message: "Du wurdest erfolgreich eingetragen.",
-                status: TOAST_STATUS.SUCCESS,
-                timeout: 5000
-            }
-            Toast.create(toast);
-            console.log("Entry ID: " + entryID);
-            addEntry(entryID);
+        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,
+                message: "Deine Eintragung konnte leider nicht vorgenommen werden.\nGrund: "+response.responseJSON.status,
            });
            entriesAccepted();
            $("#enqueueModal").modal('hide');
@ -216,76 +111,6 @@

    }

-    function songSearch() {
-        let value = $("#filter").val()
-        if (value.length >= 1) {
-            $.getJSON("/api/songs/search", { q: value }, function (data) {
-                var items = [];
-                $("#songtable").html("")
-                $.each(data, function (key, val) {
-                    let itemRow = document.createElement("tr")
-                    let itemCell = document.createElement("td")
-                    itemCell.innerHTML = val["artist"] + ` - ` + val["title"]
-                    itemRow.appendChild(itemCell)
-                    let infoCell = document.createElement("td")
-                    let duoindicator = document.createElement("i")
-                    duoindicator.classList.add("fas")
-                    if (val["duo"] == 0) {
-                        duoindicator.classList.add("fa-user")
-
-                    }
-                    if (val["duo"] == 1) {
-                        duoindicator.classList.add("fa-user-friends")
-                    }
-                    duoindicator.classList.add("ml-1")
-                    duoindicator.classList.add("list-indicator")
-                    infoCell.appendChild(duoindicator)
-                    if (val["explicit"] == 1) {
-                        let explicitindicator = document.createElement("i")
-                        explicitindicator.classList.add("fas")
-                        explicitindicator.classList.add("fa-e")
-                        explicitindicator.classList.add("ml-1")
-                        infoCell.appendChild(explicitindicator)
-                    }
-                    itemRow.appendChild(infoCell)
-                    let buttonCell = document.createElement("td")
-                    let button = document.createElement("button")
-                    button.classList.add("btn")
-                    button.classList.add("btn-primary")
-                    button.classList.add("justify-content-center")
-                    button.classList.add("align-content-between")
-                    button.classList.add("enqueueButton")
-                    button.setAttribute("type", "button")
-                    button.setAttribute("data-toggle", "modal")
-                    button.setAttribute("data-target", "#enqueueModal")
-                    button.setAttribute("onclick", "setSelectedId(" + val["karafun_id"] + ")")
-                    let buttonIcon = document.createElement("i")
-                    buttonIcon.classList.add("fas")
-                    buttonIcon.classList.add("fa-plus")
-                    button.appendChild(buttonIcon)
-                    buttonCell.appendChild(button)
-                    itemRow.appendChild(buttonCell)
-                    $("#songtable").append(itemRow)
-                });
-
-
-                $(items.join("")).appendTo("#songtable");
-                entriesAccepted()
-            });
-        } else {
-            $("#songtable").html("")
-        }
-    }
-
-    function debounce(func, timeout = 300) {
-        let timer;
-        return (...args) => {
-            clearTimeout(timer);
-            timer = setTimeout(() => { func.apply(this, args); }, timeout);
-        };
-    }
-
-
    {% if not auth %}
    function entriesAccepted() {
        $.getJSON("/api/entries/accept", (data, out) => {
@ -293,11 +118,10 @@
                $(".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 momentan nicht möglich.")
+                $(".tooltip-span").prop("title", "Eintragungen sind leider nicht mehr möglich.")
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $(".enqueueButton").prop("disabled", false)
-
            }

        })
--- a/backend/wsgi.py
+++ b/backend/wsgi.py
@ -1,4 +1,4 @@
 from app import app

 if __name__ == "__main__":
-    app.run()
+        app.run()
--- a/build_container.sh
+++ b/build_container.sh
@ -1,39 +0,0 @@
-#!/bin/bash
-
-# Get username from command line
-if [ $# -eq 0 ]; then
-    echo "No username supplied. Please supply a github username as the first argument."
-    exit 1
-fi
-
-# Store username in variable
-USERNAME=$1
-
-# Check for uncommitted changes
-if ! git diff-index --quiet HEAD --; then
-    echo "You have uncommitted changes. Please commit or stash them and try again."
-    exit 1
-fi
-
-# Get the appropriate version of the container using git
-VERSION=$(git rev-parse --abbrev-ref HEAD)-$(git describe)
-
-# Build the container. Add the version as a tag and as ENV variable SOURCE_VERSION
-docker build -t ghcr.io/$USERNAME/karaoqueue:$VERSION --build-arg SOURCE_VERSION=$VERSION .
-
-# Ask the user if they want to push the container. Confirm Version.
-read -p "Push container to ghcr.io/$USERNAME/karaoqueue:$VERSION? [y/n] " -n 1 -r
-echo
-if [[ $REPLY =~ ^[Yy]$ ]]
-then
-    docker push ghcr.io/$USERNAME/karaoqueue:$VERSION
-fi
-
-# Ask the user if they want to push the container as latest
-read -p "Push container to ghcr.io/$USERNAME/karaoqueue:latest? [y/n] " -n 1 -r
-echo
-if [[ $REPLY =~ ^[Yy]$ ]]
-then
-    docker tag ghcr.io/$USERNAME/karaoqueue:$VERSION ghcr.io/$USERNAME/karaoqueue:latest
-    docker push ghcr.io/$USERNAME/karaoqueue:latest
-fi
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@ -1,23 +0,0 @@
-version: "3.9"
-
-secrets:
-  secrets:
-    file: ./secrets.yml
-
-services:
-  karaoqueue:
-    image: "ghcr.io/phoenixtwofive/karaoqueue:v2023.06"
-    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:
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,15 +0,0 @@
-# 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"
--- a/docs/swagger.yaml
+++ b/docs/swagger.yaml
@ -0,0 +1,392 @@
+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
+        
--- a/frontend/ng-karaoqueue/.vscode/launch.json
+++ b/frontend/ng-karaoqueue/.vscode/launch.json
@ -0,0 +1,25 @@
+{
+    // 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"
+      }
+    ]
+}
--- a/frontend/ng-karaoqueue/.vscode/tasks.json
+++ b/frontend/ng-karaoqueue/.vscode/tasks.json
@ -0,0 +1,26 @@
+{
+    // 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"
+            ]
+        }
+    ]
+}
--- a/frontend/ng-karaoqueue/angular.json
+++ b/frontend/ng-karaoqueue/angular.json
@ -0,0 +1,135 @@
+{
+  "$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"
+    }
+  }
+}
--- a/frontend/ng-karaoqueue/package-lock.json
+++ b/frontend/ng-karaoqueue/package-lock.json
--- a/frontend/ng-karaoqueue/package.json
+++ b/frontend/ng-karaoqueue/package.json
@ -0,0 +1,51 @@
+{
+  "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"
+  }
+}
--- a/frontend/ng-karaoqueue/src/app/app-routing.module.ts
+++ b/frontend/ng-karaoqueue/src/app/app-routing.module.ts
@ -0,0 +1,16 @@
+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 { }
--- a/frontend/ng-karaoqueue/src/app/app.component.html
+++ b/frontend/ng-karaoqueue/src/app/app.component.html
@ -0,0 +1,11 @@
+<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>
--- a/frontend/ng-karaoqueue/src/app/app.component.scss
+++ b/frontend/ng-karaoqueue/src/app/app.component.scss
@ -0,0 +1,7 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+.is-active {
+  background-color: rgba(255,255,255,0.1);
+}
--- a/frontend/ng-karaoqueue/src/app/app.component.ts
+++ b/frontend/ng-karaoqueue/src/app/app.component.ts
@ -0,0 +1,16 @@
+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';
+}
--- a/frontend/ng-karaoqueue/src/app/app.module.ts
+++ b/frontend/ng-karaoqueue/src/app/app.module.ts
@ -0,0 +1,107 @@
+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'));
+  }
+}
--- a/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.html
+++ b/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.html
@ -0,0 +1 @@
+<p>entry-listing works!</p>
--- a/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.scss
+++ b/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.scss
--- a/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.spec.ts
@ -0,0 +1,25 @@
+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();
+  });
+});
--- a/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts
@ -0,0 +1,15 @@
+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 {
+  }
+
+}
--- a/frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts
@ -0,0 +1,16 @@
+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();
+  });
+});
--- a/frontend/ng-karaoqueue/src/app/entry-service.service.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-service.service.ts
@ -0,0 +1,25 @@
+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
+  }
+
+
+}
--- a/frontend/ng-karaoqueue/src/app/models/artist.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/artist.model.ts
@ -0,0 +1,10 @@
+export class Artist {
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+
+  id: number;
+  name: string;
+}
--- a/frontend/ng-karaoqueue/src/app/models/entry.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/entry.model.ts
@ -0,0 +1,12 @@
+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
+}
--- a/frontend/ng-karaoqueue/src/app/models/genre.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/genre.model.ts
@ -0,0 +1,16 @@
+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;
+}
--- a/frontend/ng-karaoqueue/src/app/models/language.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/language.model.ts
@ -0,0 +1,10 @@
+export class Language {
+
+  constructor(id: number, name: string) {
+    this.id = id;
+    this.name = name;
+  }
+
+  id: number;
+  name: string;
+}
--- a/frontend/ng-karaoqueue/src/app/models/song.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/song.model.ts
@ -0,0 +1,26 @@
+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>;
+}
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
@ -0,0 +1,48 @@
+<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>
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
@ -0,0 +1,120 @@
+.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;
+  }
+}
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.spec.ts
@ -0,0 +1,25 @@
+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();
+  });
+});
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts
@ -0,0 +1,43 @@
+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");
+  }
+
+}
--- a/frontend/ng-karaoqueue/src/app/song-service.service.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/song-service.service.spec.ts
@ -0,0 +1,16 @@
+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();
+  });
+});
--- a/frontend/ng-karaoqueue/src/app/song-service.service.ts
+++ b/frontend/ng-karaoqueue/src/app/song-service.service.ts
@ -0,0 +1,42 @@
+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;
+  }
+
+}
--- a/frontend/ng-karaoqueue/src/assets/config.json
+++ b/frontend/ng-karaoqueue/src/assets/config.json
@ -0,0 +1,3 @@
+{
+  "api":"http://localhost:5000/api"
+}
--- a/frontend/ng-karaoqueue/src/custom-theme.scss
+++ b/frontend/ng-karaoqueue/src/custom-theme.scss
@ -0,0 +1,280 @@
+/**
+* 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;
+}
--- a/frontend/ng-karaoqueue/src/index.html
+++ b/frontend/ng-karaoqueue/src/index.html
@ -0,0 +1,15 @@
+<!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>
--- a/frontend/ng-karaoqueue/src/styles.scss
+++ b/frontend/ng-karaoqueue/src/styles.scss
@ -0,0 +1,10 @@
+/* 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;
+}
--- a/frontend/ng-karaoqueue/tsconfig.app.json
+++ b/frontend/ng-karaoqueue/tsconfig.app.json
@ -0,0 +1,14 @@
+/* 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"
+  ]
+}
--- a/frontend/ng-karaoqueue/tsconfig.json
+++ b/frontend/ng-karaoqueue/tsconfig.json
@ -0,0 +1,32 @@
+/* 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
+    }
+  }
--- a/frontend/ng-karaoqueue/tsconfig.spec.json
+++ b/frontend/ng-karaoqueue/tsconfig.spec.json
@ -0,0 +1,18 @@
+/* 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"
+  ]
+}