Merge pull request #76 from PhoenixTwoFive/PhoenixTwoFive-patch-1

Update devcontainer.json
2025-07-01 15:51:41 +02:00 · 2023-10-04 15:19:02 +02:00 · 2023-10-04 15:18:54 +02:00 · 2023-10-04 13:11:43 +00:00 · 2023-10-04 12:49:06 +00:00 · 2023-10-04 12:48:50 +00:00
61 changed files with 437 additions and 27526 deletions
--- a/.gitignore
+++ b/.gitignore
@ -139,7 +139,5 @@ node_modules/
 # Version identification file
 .version

-**/.angular/
-
 # Docker secrets
-secrets.yml
+secrets.yml
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -4,13 +4,6 @@
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
-        {
-            "command": "npm start",
-            "name": "Run npm start",
-            "request": "launch",
-            "type": "node-terminal",
-            "cwd": "${workspaceFolder}/frontend/ng-karaoqueue"
-        },
        {
            "preLaunchTask": "mariadb",
            "name": "Python: Flask",
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -9,6 +9,8 @@
    ],
    "python.testing.pytestEnabled": false,
    "python.testing.unittestEnabled": true,
+    "python.linting.pylintEnabled": false,
+    "python.linting.flake8Enabled": true,
    "emmet.includeLanguages": {
        "django-html": "html"
    }
--- 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": [
@ -9,20 +9,12 @@
            "command": "echo \"$(git rev-parse --abbrev-ref HEAD)-$(git describe)\"> ${workspaceFolder}/backend/.version",
            "problemMatcher": []
        },
-        {
-            "label": "Start Frontend",
-            "type": "npm",
-            "script": "start",
-            "path": "frontend/ng-karaoqueue/",
-            "problemMatcher": [
-                "$tsc"
-            ]
-        },
        {
            "label": "mariadb",
            "type": "shell",
            "command": "docker-compose -f docker-compose.yml up --remove-orphans",
            "isBackground": true,
+            "activeOnStart": false
        }
    ]
 }
--- a/3
+++ b/3
@ -17,4 +17,7 @@ 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
@ -1,13 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "./frontend/ng-karaoqueue"
-		},
-		{
-			"path": "backend"
-		},
-		{
-			"path": "docs"
-		}
-	]
-}
--- a/backend/app.py
+++ b/backend/app.py
@ -7,10 +7,7 @@ import os
 import json
 from flask_basicauth import BasicAuth
 from helpers import nocache
-from flask_cors import CORS
-
 app = Flask(__name__, static_url_path='/static')
-CORS(app)

 basic_auth = BasicAuth(app)
 accept_entries = True
@ -19,9 +16,9 @@ accept_entries = True
@app.route("/")
 def home():
    if basic_auth.authenticate():
-        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate())
+        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
    else:
-        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate())
+        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])


@app.route("/favicon.ico")
@ -70,14 +67,14 @@ def enqueue():

@app.route("/list")
 def songlist():
-    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate())
+    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])


@app.route("/settings")
@nocache
@basic_auth.required
 def settings():
-    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes(), debug=app.config['DEBUG'])


@app.route("/settings", methods=['POST'])
@ -112,7 +109,7 @@ def settings_post():
    if changed_credentials:
        return redirect("/")
    else:
-        return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+        return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes(), debug=app.config['DEBUG'])


@app.route("/api/queue")
@ -126,7 +123,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())
+    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])


@app.route("/api/songs")
@ -158,8 +155,8 @@ def get_song_completions(input_string=""):

    else:
        return 400
-    
-    
+
+
@app.route("/api/songs/search")
@nocache
 def query_songs_with_details(input_string=""):
@ -172,6 +169,7 @@ def query_songs_with_details(input_string=""):
        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)
@ -180,6 +178,7 @@ def get_song_details(song_id):
    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'])
@nocache
@basic_auth.required
@ -296,7 +295,7 @@ def get_current_event():


 def activate_job():
-    with app.app_context():    
+    with app.app_context():
        helpers.load_dbconfig(app)
        helpers.load_version(app)
        database.create_entry_table()
@ -323,8 +322,6 @@ def add_header(response):
 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/database.py
+++ b/backend/database.py
@ -28,6 +28,11 @@ def import_songs(song_csv):
    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()
@ -130,7 +135,7 @@ def get_song_completions(input_string):
        stmt = text(
            """
            SELECT CONCAT(Artist, ' - ', Title) AS Song, Id FROM songs
-            WHERE MATCH(Artist, Title) 
+            WHERE MATCH(Artist, Title)
            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
            LIMIT 20;
            """)
@ -144,7 +149,7 @@ def get_songs_with_details(input_string: str):
        prepared_string = f"%{input_string}"
        stmt = text(
            """
-            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs 
+            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
            WHERE MATCH(Artist, Title)
            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
            LIMIT 20;
@ -154,11 +159,12 @@ def get_songs_with_details(input_string: str):
            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 
+            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
            WHERE Id = :song_id;
            """
        )
@ -166,6 +172,7 @@ def get_song_details(song_id: int):
            stmt, {"song_id": song_id})
        return cur.fetchall()

+
 def add_entry(name, song_id, client_id):
    with get_db_engine().connect() as conn:
        stmt = text(
@ -285,7 +292,6 @@ def get_config(key: str) -> str:


 def set_config(key: str, value: str) -> bool:
-    print(f"Setting config {key} to {value}")
    with get_db_engine().connect() as conn:
        conn.execute(text(
            "INSERT INTO config (`Key`, `Value`) VALUES ( :par_key , :par_value) ON DUPLICATE KEY UPDATE `Value`= :par_value"),
--- a/backend/helpers.py
+++ b/backend/helpers.py
@ -1,5 +1,6 @@
 import requests
 from bs4 import BeautifulSoup
+import subprocess
 import os
 import uuid
 from flask import make_response, Flask
@ -34,17 +35,14 @@ def check_config_exists():


 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
    if os.environ.get("SOURCE_VERSION"):
-        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7]  # type: ignore # noqa: E501
-    elif os.path.isfile(".version"):
-        with open('.version', 'r') as file:
-            data = file.read().replace('\n', '')
-            if data:
-                app.config['VERSION'] = data
-            else:
-                app.config['VERSION'] = ""
+        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")  # type: ignore # noqa: E501
+        return
    else:
-        app.config['VERSION'] = ""
+        app.config['VERSION'] = "Unknown"


 def load_dbconfig(app: Flask):
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@ -1,37 +1,36 @@
-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==2.2.3
-flask_cors==4.0.0
+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
--- a/backend/static/css/style.css
+++ b/backend/static/css/style.css
@ -4,12 +4,14 @@
  --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;
@ -24,11 +26,18 @@

  /* 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;
+  padding-top: var(--navbar-padding);
  background-color: var(--background-color);
 }

@ -38,21 +47,15 @@ body {
 }

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

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

@ -129,13 +132,13 @@ body {
 .modal-header {
  background-color: var(--background-color);
  color: var(--text-color-var);
-  border-color: var(var(--modal-separator-color));
+  border-color: var(--modal-separator-color);
 }

 .modal-footer {
  background-color: var(--background-color);
  color: var(--text-color-var);
-  border-color: var(var(--modal-separator-color));
+  border-color: var(--modal-separator-color);
 }

 .form-control {
@ -173,6 +176,35 @@ pre {
  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 */
@ -186,6 +218,7 @@ pre {
    --background-color-var: #232323;
    --text-color: #f5f5f5;
    --text-color-var: #a2a2a2;
+    --text-color-light: #6c757d;

    /* Modals */
    --modal-background-color: #121212;
@ -197,5 +230,9 @@ pre {

    /* Input */
    --input-background-color: #343434;
+
+    /* Toasts */
+    --toast-background-color: #232323;
+    --toast-text-color: #f5f5f5;
  }
 }
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@ -16,11 +16,14 @@
    <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://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" />

    <!-- 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://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css"
+        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <link href="static/css/style.css" rel="stylesheet">
@ -76,13 +79,13 @@
        </main><!-- /.container -->
    </div>
    <!-- Footer -->
-    <footer class="footer">
+    <footer class="footer {% if debug %} construction_bg {% endif %}">
        <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>
+            <a href="https://github.com/PhoenixTwoFive/karaoqueue" class="ml-1 mr-1"><i
+                    class="fab fa-github mr-1"></i><span>Github</span></a>
            <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-23 - Phillip
                Kühne</span>
        </div>
@ -95,8 +98,12 @@
        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></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://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/bootbox.js/4.4.0/bootbox.min.js"
        integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
        </script>
@ -106,7 +113,8 @@
    <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>
+        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {% block extrajs %}{% endblock %}
    <script>
        $(document).ready(function () {
@ -151,29 +159,29 @@
        }

        function addEntry(entryId) {
-          entryArray = JSON.parse(localStorage.getItem("ownedEntries"))
-          if (entryArray == null) {
-            entryArray = []
-          }
-          entryArray.push(entryId)
-          localStorage.setItem("ownedEntries", JSON.stringify(entryArray))
+            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))
+            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;
+            var entries = JSON.parse(localStorage.getItem("ownedEntries"))
+            if (entries == null) {
+                entries = []
+            }
+            return entries;
        }

    </script>
--- a/backend/templates/main.html
+++ b/backend/templates/main.html
@ -1,5 +1,3 @@
-
-
 {% extends 'base.html' %}
 {% block title %}Warteliste{% endblock %}
 {% block content %}
@ -9,7 +7,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>
@ -25,53 +23,53 @@
 {% 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 ""
-}
-
-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
+    $.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()
        }
-        $.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
+    })
+
+    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 ""
+    }
+
+    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
                }
-                Toast.create(toast);
-                location.reload()
+                $.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
@ -27,8 +27,8 @@
            <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="Title" data-formatter="CopyFormatter">Song</th>
+                <th scope="col" data-field="Artist" data-formatter="CopyFormatter">Künstler</th>
                <th scope="col" data-formatter="TableActions">Aktionen</th>
            </tr>
        </thead>
@ -195,8 +195,8 @@
    }

    function CopyFormatter(value, row, index) {
-        let escapedString = value.replace("\"","\\\"").replace("\'", "\\\'")
-        return "<span onclick='copyAndNotify(this.innerText)'>"+value+"</span>";
+        let escapedString = value.replace("\"", "\\\"").replace("\'", "\\\'")
+        return "<span onclick='copyAndNotify(this.innerText)'>" + value + "</span>";
    }

    function getIdSelections() {
@ -212,9 +212,9 @@
                message: text,
                status: 1,
                timeout: 5000
-              };
+            };
            Toast.create(toast);
-            })
+        })
    }
 </script>
 {% endblock %}
--- a/backend/templates/songlist.html
+++ b/backend/templates/songlist.html
@ -11,21 +11,52 @@
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Auf Liste setzen</h5>
+                <h5 class="modal-title" id="exampleModalLabel">Auf die 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">Sängername</label>
+                        <label for="singerNameInput">Dein Name:</label>
                        <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
                            required>
                        <input id="selectedId" name="selectedId" type="hidden" value="">
                    </div>
                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                        <button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
                    </div>
                </form>
@ -38,30 +69,7 @@
 <script>
    $(document).ready(function () {
        $("#filter").focus();
-        $("#filter").keyup(function () {
-            var value = $(this).val().toLowerCase();
-            //alert(value);
-            if (value.length >= 1) {
-                $.getJSON("/api/songs/compl", { search: value }, function (data) {
-                    var items = [];
-                    $.each(data, function (key, val) {
-                        items.push("<tr><td>" + val[0] + `</td>
-                            <td class='buttoncell'><button type='button'
-                                    class='btn btn-primary justify-content-center align-content-between enqueueButton'
-                                    data-toggle='modal'
-                                    data-target='#enqueueModal' onclick='setSelectedId(`+ val[1] + `)'><i
-                                        class="fas fa-plus"></i></button></td>
-                        </tr>`)
-                    });
-
-                    $("#songtable").html("")
-                    $(items.join("")).appendTo("#songtable");
-                    entriesAccepted()
-                });
-            } else {
-                $("#songtable").html("")
-            }
-        });
+        $("#filter").keyup(debounce(() => songSearch()));

        $("#nameForm").submit(function (e) {
            e.preventDefault();
@ -93,13 +101,96 @@
    }

    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) {
+        enqueue(localStorage.getItem("clientId"), id, name, function (response) {
            console.log(response);
            entryID = response["entry_id"];
            toast = {
@ -115,7 +206,7 @@
            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');
@ -125,6 +216,76 @@

    }

+    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) => {
@ -136,6 +297,7 @@
                $('[data-toggle="tooltip"]').tooltip()
            } else {
                $(".enqueueButton").prop("disabled", false)
+
            }

        })
--- a/build_container.sh
+++ b/build_container.sh
@ -0,0 +1,39 @@
+#!/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/docs/swagger.yaml
+++ b/docs/swagger.yaml
@ -1,233 +0,0 @@
-openapi: 3.0.2
-info:
-  title: Karaoqueue API
-  version: '0.0.1'
-servers:
-  - url: 'http://localhost:3000/api'
-    description: Local Test sever instance
-  - url: 'https://karaoke.phillipathome.dynv6.net/api'
-    description: Production API    
-
-paths:
-  /api/enqueue:
-    post:
-      summary: "Enqueue a song"
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                client_id:
-                  type: string
-                name:
-                  type: string
-                id:
-                  type: string
-      responses:
-        '200':
-          description: "Song enqueued successfully"
-        '400':
-          description: "Bad request, JSON is required"
-        '423':
-          description: "Cannot enqueue, conditions not met"
-
-  /api/queue:
-    get:
-      summary: "Get the queue"
-      responses:
-        '200':
-          description: "Queue retrieved successfully"
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  type: object
-
-  /api/songs:
-    get:
-      summary: "Get the list of songs"
-      responses:
-        '200':
-          description: "List of songs retrieved successfully"
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  type: object
-
-  /api/songs/update:
-    get:
-      summary: "Update the list of songs"
-      responses:
-        '200':
-          description: "Songs updated successfully"
-        '400':
-          description: "Bad request"
-
-  /api/songs/compl:
-    get:
-      summary: "Get song completions"
-      parameters:
-        - name: search
-          in: query
-          required: false
-          schema:
-            type: string
-      responses:
-        '200':
-          description: "Song completions retrieved successfully"
-          content:
-            application/json:
-              schema:
-                type: array
-                items:
-                  type: object
-        '400':
-          description: "Bad request"
-
-  /api/entries/delete/{entry_id}:
-    get:
-      summary: "Admin deletes an entry"
-      parameters:
-        - name: entry_id
-          in: path
-          required: true
-          schema:
-            type: string
-      responses:
-        '200':
-          description: "Entry deleted successfully"
-        '400':
-          description: "Entry deletion failed"
-
-    post:
-      summary: "User deletes an entry"
-      parameters:
-        - name: entry_id
-          in: path
-          required: true
-          schema:
-            type: string
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                client_id:
-                  type: string
-      responses:
-        '200':
-          description: "Entry deleted successfully"
-        '400':
-          description: "Bad request, JSON is required"
-        '403':
-          description: "Forbidden, client_id mismatch"
-
-  /api/entries/delete:
-    post:
-      summary: "Delete multiple entries"
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              type: array
-              items:
-                type: string
-      responses:
-        '200':
-          description: "Entries deleted successfully"
-        '400':
-          description: "Bad request, JSON is required"
-
-  /api/entries/mark_sung/{entry_id}:
-    get:
-      summary: "Mark an entry as sung"
-      parameters:
-        - name: entry_id
-          in: path
-          required: true
-          schema:
-            type: string
-      responses:
-        '200':
-          description: "Entry marked as sung successfully"
-        '400':
-          description: "Marking entry as sung failed"
-
-  /api/entries/mark_transferred/{entry_id}:
-    get:
-      summary: "Toggle transferred status of an entry"
-      parameters:
-        - name: entry_id
-          in: path
-          required: true
-          schema:
-            type: string
-      responses:
-        '200':
-          description: "Entry transferred status toggled successfully"
-        '400':
-          description: "Toggling transferred status failed"
-
-  /api/entries/accept/{value}:
-    get:
-      summary: "Set accept entries status"
-      parameters:
-        - name: value
-          in: path
-          required: true
-          schema:
-            type: string
-      responses:
-        '200':
-          description: "Accept entries status set successfully"
-        '400':
-          description: "Setting accept entries status failed"
-
-  /api/entries/accept:
-    get:
-      summary: "Get accept entries status"
-      responses:
-        '200':
-          description: "Accept entries status retrieved successfully"
-
-  /api/played/clear:
-    get:
-      summary: "Clear played songs"
-      responses:
-        '200':
-          description: "Played songs cleared successfully"
-        '400':
-          description: "Clearing played songs failed"
-
-  /api/entries/delete_all:
-    get:
-      summary: "Delete all entries"
-      responses:
-        '200':
-          description: "All entries deleted successfully"
-        '400':
-          description: "Deleting all entries failed"
-
-  /api/events/current:
-    get:
-      summary: "Get the current event"
-      responses:
-        '200':
-          description: "Current event retrieved successfully"
-
-security:
-  - BasicAuth: []
-
-components:
-  securitySchemes:
-    BasicAuth:
-      type: http
-      scheme: basic
--- a/frontend/ng-karaoqueue/.vscode/launch.json
+++ b/frontend/ng-karaoqueue/.vscode/launch.json
@ -1,25 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-      {
-        "type": "firefox",
-        "request": "launch",
-        "reAttach": true,
-        "name": "Launch Firefox against localhost",
-        "url": "http://localhost:4200",
-        "webRoot": "${workspaceFolder}"
-      },
-
-      {
-          "type": "chrome",
-          "request": "launch",
-          "name": "Launch Chrome against localhost",
-          "url": "http://localhost:4200",
-          "webRoot": "${workspaceFolder}",
-          "runtimeExecutable": "/usr/bin/chromium"
-      }
-    ]
-}
--- a/frontend/ng-karaoqueue/.vscode/tasks.json
+++ b/frontend/ng-karaoqueue/.vscode/tasks.json
@ -1,26 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "type": "npm",
-            "script": "start",
-            "group": "build",
-            "problemMatcher": []
-        },
-        {
-            "type": "npm",
-            "script": "build",
-            "group": "build",
-            "problemMatcher": []
-        },
-        {
-            "type": "npm",
-            "script": "serve",
-            "problemMatcher": [
-                "$tsc"
-            ]
-        }
-    ]
-}
--- a/frontend/ng-karaoqueue/angular.json
+++ b/frontend/ng-karaoqueue/angular.json
@ -1,139 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ng-karaoqueue": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "preserveSymlinks": true,
-            "outputPath": "dist/ng-karaoqueue",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.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"
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}
--- 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
@ -1,51 +0,0 @@
-{
-  "name": "ng-karaoqueue",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "serve": "ng serve --host=0.0.0.0",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^16.2.7",
-    "@angular/cdk": "^16.2.6",
-    "@angular/common": "^16.2.7",
-    "@angular/compiler": "^16.2.7",
-    "@angular/core": "^16.2.7",
-    "@angular/forms": "^16.2.7",
-    "@angular/material": "^16.2.6",
-    "@angular/platform-browser": "^16.2.7",
-    "@angular/platform-browser-dynamic": "^16.2.7",
-    "@angular/router": "^16.2.7",
-    "@mdi/angular-material": "^7.2.96",
-    "hammerjs": "^2.0.8",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.4",
-    "@angular/cli": "^16.2.4",
-    "@angular/compiler-cli": "^16.2.7",
-    "@angular/language-service": "^16.2.7",
-    "@types/jasmine": "~4.3.6",
-    "@types/jasminewd2": "~2.0.11",
-    "@types/node": "~20.7.2",
-    "jasmine-core": "~5.1.1",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.4.2",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~10.9.1",
-    "tslint": "~6.1.0",
-    "typescript": "~5.2.2"
-  }
-}
--- a/frontend/ng-karaoqueue/src/app/app-routing.module.ts
+++ b/frontend/ng-karaoqueue/src/app/app-routing.module.ts
@ -1,16 +0,0 @@
-import { EntryListingComponent } from './entry-listing/entry-listing.component';
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { SongSearchComponent } from './song-search/song-search.component';
-
-
-const routes: Routes = [
-  {path: '', component: EntryListingComponent },
-  {path: 'songs', component: SongSearchComponent}
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
--- a/frontend/ng-karaoqueue/src/app/app.component.html
+++ b/frontend/ng-karaoqueue/src/app/app.component.html
@ -1,11 +0,0 @@
-<div>
-  <mat-toolbar color="primary" class="mat-elevation-z6">
-    <span>KaraoQueue</span>
-    <span>&nbsp;</span>
-    <a mat-button routerLink="/" [routerLinkActive]="['is-active']">Warteschlange</a>
-    <a mat-button routerLink="/songs" [routerLinkActive]="['is-active']">Songs</a>
-    <div class="spacer"></div>
-    <a mat-stroked-button>Login</a>
-  </mat-toolbar>
-</div>
-<router-outlet></router-outlet>
--- a/frontend/ng-karaoqueue/src/app/app.component.scss
+++ b/frontend/ng-karaoqueue/src/app/app.component.scss
@ -1,7 +0,0 @@
-.spacer {
-  flex: 1 1 auto;
-}
-
-.is-active {
-  background-color: rgba(255,255,255,0.1);
-}
--- a/frontend/ng-karaoqueue/src/app/app.component.ts
+++ b/frontend/ng-karaoqueue/src/app/app.component.ts
@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
- 
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent implements OnInit{
-
-  constructor() {}
-  ngOnInit(): void {
-    
-  }
-  title = 'KaraoQueue';
-}
--- a/frontend/ng-karaoqueue/src/app/app.module.ts
+++ b/frontend/ng-karaoqueue/src/app/app.module.ts
@ -1,106 +0,0 @@
-import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-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 { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-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 { SongChipComponent } from './song-chip/song-chip.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    EntryListingComponent,
-    SongSearchComponent,
-    SongChipComponent
-  ],
-  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,
-  ],
-  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
@ -1 +0,0 @@
-<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
@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EntryListingComponent } from './entry-listing.component';
-
-describe('EntryListingComponent', () => {
-  let component: EntryListingComponent;
-  let fixture: ComponentFixture<EntryListingComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EntryListingComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EntryListingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-listing/entry-listing.component.ts
@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-entry-listing',
-  templateUrl: './entry-listing.component.html',
-  styleUrls: ['./entry-listing.component.scss']
-})
-export class EntryListingComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
--- a/frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-service.service.spec.ts
@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { EntryServiceService } from './entry-service.service';
-
-describe('EntryServiceService', () => {
-  let service: EntryServiceService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(EntryServiceService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/frontend/ng-karaoqueue/src/app/entry-service.service.ts
+++ b/frontend/ng-karaoqueue/src/app/entry-service.service.ts
@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
- 
-import { 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
@ -1,10 +0,0 @@
-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
@ -1,12 +0,0 @@
-export class Entry {
-
-  constructor(singer_name: string, song: string, auth_cookie?: string) {
-    this.singer_name=singer_name;
-    this.song=song;
-    this.auth_cookie = auth_cookie;
-  }
-
-  singer_name: string;
-  song: string; //Actually the ID of the Song
-  auth_cookie?: string; //The "cookie" to authenticate for changing an entry. Null otherwise
-}
--- a/frontend/ng-karaoqueue/src/app/models/genre.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/genre.model.ts
@ -1,16 +0,0 @@
-export class Genre {
-
-  constructor(id: number, name: string) {
-    this.id = id;
-    this._name = name;
-  }
-
-
-  public get name() : string {
-    return this._name;
-  }
-
-
-  id: number; 
-  _name: string;
-}
--- a/frontend/ng-karaoqueue/src/app/models/language.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/language.model.ts
@ -1,10 +0,0 @@
-export class Language {
-
-  constructor(id: number, name: string) {
-    this.id = id;
-    this.name = name;
-  }
-
-  id: number;
-  name: string;
-}
--- a/frontend/ng-karaoqueue/src/app/models/song.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/song.model.ts
@ -1,26 +0,0 @@
-import { Genre } from './genre.model';
-import { Language } from './language.model';
-import { Artist } from './artist.model';
-
-export class Song {
-
-  constructor(title: string, artist: Artist, karafun_id: number, duo: boolean, explicit: boolean, id: number, styles: Array<String>, languages: Array<String>) {
-    this.title=title;
-    this.artist=artist;
-    this.karafun_id=karafun_id;
-    this.duo=duo;
-    this.explicit=explicit;
-    this.id=id;
-    this.styles=styles;
-    this.languages=languages;
-  }
-
-  title: string;
-  artist: Artist;
-  karafun_id: number;
-  duo: boolean;
-  explicit: boolean;
-  id: number;
-  styles: Array<String>;
-  languages: Array<String>;
-}
--- a/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.html
+++ b/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.html
@ -1,36 +0,0 @@
-<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.duo==1" [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==1" [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 style of song.styles">
-                    <mat-chip>{{style}}</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>
--- a/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.scss
+++ b/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.scss
--- a/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.spec.ts
@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SongChipComponent } from './song-chip.component';
-
-describe('SongChipComponent', () => {
-  let component: SongChipComponent;
-  let fixture: ComponentFixture<SongChipComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SongChipComponent]
-    });
-    fixture = TestBed.createComponent(SongChipComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.ts
+++ b/frontend/ng-karaoqueue/src/app/song-chip/song-chip.component.ts
@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-song-chip',
-  templateUrl: './song-chip.component.html',
-  styleUrls: ['./song-chip.component.scss']
-})
-export class SongChipComponent {
-
-}
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
@ -1,13 +0,0 @@
-<div class="content">
-  <mat-form-field class="search-input">
-    <mat-label>Suche...</mat-label>
-    <mat-icon matSuffix svgIcon="magnify"></mat-icon>
-    <input type="text" matInput placeholder="Tippe einen Künstler oder Song..."
-    (keyup)="applyFilter($event.target.value)">
-  </mat-form-field>
-  </div>
-  <div class="resultcontainer">
-    <mat-list *ngFor="let song of songs">
-        
-    </mat-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
@ -1,120 +0,0 @@
-.search-input {
-  width: 95%;
-  margin-top: 1rem;
-}
-
-.add-button {
-  height: 3rem;
-}
-
-.content {
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-}
-
-.resultcontainer {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.result {
-  margin-left: auto;
-  margin-right: auto;
-  width: 90%;
-  margin-top: 0.2rem;
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  flex-direction: column;
-}
-
-.card-left {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.song-info {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.song-info > * {
-  margin-right: 0.5rem;
-}
-
-.icon-disabled {
-  opacity: 0.1;
-}
-
-.genre-list > mat-icon {
-  padding-right: 0.25rem;
-}
-
-.genre-list mat-chip-list {
-  margin-right: 0.15rem;
-}
-
-.genre-list {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 0.25rem;
-  align-items: center;
-  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
-  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
-  -ms-overflow-style: none;
-}
-
-.language-list > mat-icon {
-  padding-right: 0.25rem;
-}
-
-.language-list mat-chip-list {
-  margin-right: 0.15rem;
-}
-
-.genre-list::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-  display: none;
-}
-
-.language-list {
-  overflow-x: scroll;
-  overflow-y: hidden;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  padding-bottom: 0.25rem;
-  align-items: center;
-  -ms-overflow-style: none;
-}
-
-
-
-.language-list::-webkit-scrollbar {
-  display: none;
-}
-
-
-$breakpoint-tablet: 768px;
-@media (min-width: $breakpoint-tablet) {
-  .result {
-    flex-direction: row;
-
-  }
-
-  .add-button {
-    height: 6.5rem;
-    width: 4rem;
-    align-self: center;
-  }
-}
--- 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
@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SongSearchComponent } from './song-search.component';
-
-describe('SongSearchComponent', () => {
-  let component: SongSearchComponent;
-  let fixture: ComponentFixture<SongSearchComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SongSearchComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SongSearchComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.ts
@ -1,43 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { SongServiceService } from "../song-service.service";
-import { Song } from '../models/song.model';
-import { Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
-
-@Component({
-  selector: 'app-song-search',
-  templateUrl: './song-search.component.html',
-  styleUrls: ['./song-search.component.scss']
-})
-export class SongSearchComponent implements OnInit {
-
-  private searchSub$ = new Subject<string>();
-
-  constructor(private songServiceService: SongServiceService) { }
-
-  songs: Array<Song> = new Array<Song>();
-
-  updateSongs(text: string) {
-    this.songServiceService.searchSongByText(text).subscribe(x => {
-      console.log(x);
-      this.songs = x;
-    });
-  }
-
-  applyFilter(filterValue: string) {
-    this.searchSub$.next(filterValue)
-  }
-
-  ngOnInit(): void {
-    this.searchSub$.pipe(
-      debounceTime(400),
-      distinctUntilChanged()
-    ).subscribe((filterValue: string) => {
-      this.updateSongs(filterValue);
-    });
-
-    //Für Testzwecke
-    this.updateSongs("Test");
-  }
-
-}
--- a/frontend/ng-karaoqueue/src/app/song-service.service.spec.ts
+++ b/frontend/ng-karaoqueue/src/app/song-service.service.spec.ts
@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SongServiceService } from './song-service.service';
-
-describe('SongServiceService', () => {
-  let service: SongServiceService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(SongServiceService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/frontend/ng-karaoqueue/src/app/song-service.service.ts
+++ b/frontend/ng-karaoqueue/src/app/song-service.service.ts
@ -1,51 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { Song } from './models/song.model';
-import { Artist } from './models/artist.model';
-import { Genre } from './models/genre.model';
-import { Language } from './models/language.model';
- 
-import { ConnectableObservable, Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SongServiceService {
-
-  private api: string;
-  constructor(
-    private http: HttpClient,
-  ) {
-    // TODO: get api from config
-    this.api= "http://localhost:5000/api";
-  }
-
-  searchSongByText(text: string): Observable<Array<Song>> {
-
-
-    let out = new Array<Song>();
-
-    this.http.get(this.api +"/songs/search?q="+text).subscribe((data: Observable<JSON>) => {
-      data.forEach(element => {
-        let styles = new Array<String>();
-        let languages = new Array<String>();
-        for (let style of element["styles"].split(",")) {
-          styles.push(style);
-        }
-        for (let language of element["languages"].split(",")) {
-          languages.push(language);
-        }
-        out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],styles,languages));
-      });
-      console.log(out);
-    });
-
-    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
@ -1,3 +0,0 @@
-{
-  "api":"http://localhost:5000/api"
-}
--- a/frontend/ng-karaoqueue/src/custom-theme.scss
+++ b/frontend/ng-karaoqueue/src/custom-theme.scss
@ -1,280 +0,0 @@
-/**
-* Generated theme by Material Theme Generator
-* https://materialtheme.arcsine.dev
-*/
-
-@import '@angular/material/theming';
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-
-// Fonts
-@import 'https://fonts.googleapis.com/css?family=Material+Icons';
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
-
-$fontConfig: (
-  display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
-  display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
-  display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
-  display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
-  headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
-  title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
-  subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
-  subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
-  body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
-  body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
-  button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
-  caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
-  input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
-);
-
-// Foreground Elements
-
-// Light Theme Text
-$dark-text: #000000;
-$dark-primary-text: rgba($dark-text, 0.87);
-$dark-accent-text: rgba($dark-primary-text, 0.54);
-$dark-disabled-text: rgba($dark-primary-text, 0.38);
-$dark-dividers: rgba($dark-primary-text, 0.12);
-$dark-focused: rgba($dark-primary-text, 0.12);
-
-$mat-light-theme-foreground: (
-  base:              black,
-  divider:           $dark-dividers,
-  dividers:          $dark-dividers,
-  disabled:          $dark-disabled-text,
-  disabled-button:   rgba($dark-text, 0.26),
-  disabled-text:     $dark-disabled-text,
-  elevation:         black,
-  secondary-text:    $dark-accent-text,
-  hint-text:         $dark-disabled-text,
-  accent-text:       $dark-accent-text,
-  icon:              $dark-accent-text,
-  icons:             $dark-accent-text,
-  text:              $dark-primary-text,
-  slider-min:        $dark-primary-text,
-  slider-off:        rgba($dark-text, 0.26),
-  slider-off-active: $dark-disabled-text,
-);
-
-// Dark Theme text
-$light-text: #ffffff;
-$light-primary-text: $light-text;
-$light-accent-text: rgba($light-primary-text, 0.7);
-$light-disabled-text: rgba($light-primary-text, 0.5);
-$light-dividers: rgba($light-primary-text, 0.12);
-$light-focused: rgba($light-primary-text, 0.12);
-
-$mat-dark-theme-foreground: (
-  base:              $light-text,
-  divider:           $light-dividers,
-  dividers:          $light-dividers,
-  disabled:          $light-disabled-text,
-  disabled-button:   rgba($light-text, 0.3),
-  disabled-text:     $light-disabled-text,
-  elevation:         black,
-  hint-text:         $light-disabled-text,
-  secondary-text:    $light-accent-text,
-  accent-text:       $light-accent-text,
-  icon:              $light-text,
-  icons:             $light-text,
-  text:              $light-text,
-  slider-min:        $light-text,
-  slider-off:        rgba($light-text, 0.3),
-  slider-off-active: rgba($light-text, 0.3),
-);
-
-// Background config
-// Light bg
-$light-background:    #fafafa;
-$light-bg-darker-5:   darken($light-background, 5%);
-$light-bg-darker-10:  darken($light-background, 10%);
-$light-bg-darker-20:  darken($light-background, 20%);
-$light-bg-darker-30:  darken($light-background, 30%);
-$light-bg-lighter-5:  lighten($light-background, 5%);
-$dark-bg-tooltip:     lighten(#2c2c2c, 20%);
-$dark-bg-alpha-4:     rgba(#2c2c2c, 0.04);
-$dark-bg-alpha-12:    rgba(#2c2c2c, 0.12);
-
-$mat-light-theme-background: (
-  background:               $light-background,
-  status-bar:               $light-bg-darker-20,
-  app-bar:                  $light-bg-darker-5,
-  hover:                    $dark-bg-alpha-4,
-  card:                     $light-bg-lighter-5,
-  dialog:                   $light-bg-lighter-5,
-  tooltip:                  $dark-bg-tooltip,
-  disabled-button:          $dark-bg-alpha-12,
-  raised-button:            $light-bg-lighter-5,
-  focused-button:           $dark-focused,
-  selected-button:          $light-bg-darker-20,
-  selected-disabled-button: $light-bg-darker-30,
-  disabled-button-toggle:   $light-bg-darker-10,
-  unselected-chip:          $light-bg-darker-10,
-  disabled-list-option:     $light-bg-darker-10,
-);
-
-// Dark bg
-$dark-background:     #2c2c2c;
-$dark-bg-lighter-5:   lighten($dark-background, 5%);
-$dark-bg-lighter-10:  lighten($dark-background, 10%);
-$dark-bg-lighter-20:  lighten($dark-background, 20%);
-$dark-bg-lighter-30:  lighten($dark-background, 30%);
-$light-bg-alpha-4:    rgba(#fafafa, 0.04);
-$light-bg-alpha-12:   rgba(#fafafa, 0.12);
-
-// Background palette for dark themes.
-$mat-dark-theme-background: (
-  background:               $dark-background,
-  status-bar:               $dark-bg-lighter-20,
-  app-bar:                  $dark-bg-lighter-5,
-  hover:                    $light-bg-alpha-4,
-  card:                     $dark-bg-lighter-5,
-  dialog:                   $dark-bg-lighter-5,
-  tooltip:                  $dark-bg-lighter-20,
-  disabled-button:          $light-bg-alpha-12,
-  raised-button:            $dark-bg-lighter-5,
-  focused-button:           $light-focused,
-  selected-button:          $dark-bg-lighter-20,
-  selected-disabled-button: $dark-bg-lighter-30,
-  disabled-button-toggle:   $dark-bg-lighter-10,
-  unselected-chip:          $dark-bg-lighter-20,
-  disabled-list-option:     $dark-bg-lighter-10,
-);
-
-// Compute font config
-@include mat-core();
-
-// 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
@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>NgKaraoqueue</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="mat-typography mat-app-background">
-  <app-root></app-root>
-</body>
-</html>
--- a/frontend/ng-karaoqueue/src/main.ts
+++ b/frontend/ng-karaoqueue/src/main.ts
@ -1,4 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
--- a/frontend/ng-karaoqueue/src/polyfills.ts
+++ b/frontend/ng-karaoqueue/src/polyfills.ts
@ -1,61 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
--- a/frontend/ng-karaoqueue/src/styles.scss
+++ b/frontend/ng-karaoqueue/src/styles.scss
@ -1,10 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
--- a/frontend/ng-karaoqueue/src/test.ts
+++ b/frontend/ng-karaoqueue/src/test.ts
@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);
--- a/frontend/ng-karaoqueue/src/tsconfig.json
+++ b/frontend/ng-karaoqueue/src/tsconfig.json
@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "",
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es6",
-      "dom"
-    ],
-    "mapRoot": "./",
-    "module": "ES2022",
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
-    "sourceMap": true,
-    "target": "ES2022",
-    "skipLibCheck": true,
-    "typeRoots": [
-      "../node_modules/@types"
-    ],
-    "useDefineForClassFields": false
-  },
-  "include": [
-    "main.ts",
-    "polyfills.ts",
-    "src/**/*.d.ts"
-  ]
-}
--- a/frontend/ng-karaoqueue/tsconfig.app.json
+++ b/frontend/ng-karaoqueue/tsconfig.app.json
@ -1,16 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/app/app.module.ts",
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}
--- a/frontend/ng-karaoqueue/tsconfig.json
+++ b/frontend/ng-karaoqueue/tsconfig.json
@ -1,17 +0,0 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
-{
-    "files": [],
-    "references": [
-      {
-        "path": "./src/tsconfig.json"
-      }
-    ],
-    "compilerOptions": {
-      "target": "ES2022",
-    }
-}
--- a/frontend/ng-karaoqueue/tsconfig.spec.json
+++ b/frontend/ng-karaoqueue/tsconfig.spec.json
@ -1,18 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,141 +0,0 @@
-{
-  "name": "karaoqueue",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "runtime-config-loader": "^5.0.2"
-      }
-    },
-    "node_modules/@angular/common": {
-      "version": "16.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-16.2.7.tgz",
-      "integrity": "sha512-vcKbbtDXNmJ8dj1GF52saJRT5U3P+phnIwnv+hQ2c+VVj/S2alWlBkT12iM+KlvnWdxsa0q4yW0G4WvpPJPaMQ==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.10.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "16.2.7",
-        "rxjs": "^6.5.3 || ^7.4.0"
-      }
-    },
-    "node_modules/@angular/compiler": {
-      "version": "16.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-16.2.7.tgz",
-      "integrity": "sha512-Sp+QjHFYjBMhjag/YbIV5skqr/UrpBjCPo1WFBBhj5DKkvgWC7T00yYJn+aBj0DU5ZuMmO/P8Vb7bRIHIRNL4w==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.10.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "16.2.7"
-      },
-      "peerDependenciesMeta": {
-        "@angular/core": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/core": {
-      "version": "16.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-16.2.7.tgz",
-      "integrity": "sha512-JQOxo+Ja9ThQjUa4vdOMLZfIK2dhR3cnPbqB1tV2WuTmIv49QASbFHsae8zZsS4Au5/TafBaW3KkK9aRU8G5gg==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.10.0"
-      },
-      "peerDependencies": {
-        "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.13.0"
-      }
-    },
-    "node_modules/@angular/platform-browser": {
-      "version": "16.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-16.2.7.tgz",
-      "integrity": "sha512-yQ/4FB33Jc1Xs+slWfddZpbKdkCHdhCh39Mfjxa1wTen6YJZKmvjBbMNCkvnvNbLqc2IFWRwTQdG8s0n1jfl3A==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.10.0"
-      },
-      "peerDependencies": {
-        "@angular/animations": "16.2.7",
-        "@angular/common": "16.2.7",
-        "@angular/core": "16.2.7"
-      },
-      "peerDependenciesMeta": {
-        "@angular/animations": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@angular/platform-browser-dynamic": {
-      "version": "16.2.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-16.2.7.tgz",
-      "integrity": "sha512-raeuYEQfByHByLnA5YRR7fYD/5u6hMjONH77p08IjmtdmLb0XYP18l/C4YqsIOQG6kZLNCVWknEHZu3kuvAwtQ==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "engines": {
-        "node": "^16.14.0 || >=18.10.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "16.2.7",
-        "@angular/compiler": "16.2.7",
-        "@angular/core": "16.2.7",
-        "@angular/platform-browser": "16.2.7"
-      }
-    },
-    "node_modules/runtime-config-loader": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/runtime-config-loader/-/runtime-config-loader-5.0.2.tgz",
-      "integrity": "sha512-6LnDfuV79wPuwykgxK0nDx/b28z6iXsKChlnc5OIr+iYPWNzgIe9MBaH7nNw9ACitWq4T1+Rkc+fvJeWNBBpug==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": ">=13.0.0",
-        "@angular/core": ">=13.0.0",
-        "@angular/platform-browser-dynamic": ">=13.0.0",
-        "rxjs": ">=6.6.0"
-      }
-    },
-    "node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
-    "node_modules/zone.js": {
-      "version": "0.13.3",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.13.3.tgz",
-      "integrity": "sha512-MKPbmZie6fASC/ps4dkmIhaT5eonHkEt6eAy80K42tAm0G2W+AahLJjbfi6X9NPdciOE9GRFTTM8u2IiF6O3ww==",
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.3.0"
-      }
-    }
-  }
-}
--- a/package.json
+++ b/package.json
@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "runtime-config-loader": "^5.0.2"
-  }
-}
Author	SHA1	Message	Date
Phillip Kühne	d8899267c3	Merge pull request #76 from PhoenixTwoFive/PhoenixTwoFive-patch-1 Update devcontainer.json	2023-10-04 15:19:02 +02:00
Phillip Kühne	dd83d6c9c4	Update devcontainer.json	2023-10-04 15:18:54 +02:00
Phillip Kühne	14630b97be	Move mariabd install to postCreate to fix github codespaces	2023-10-04 13:11:43 +00:00
Phillip Kühne	7f4625a062	Fix CSS quirks	2023-10-04 12:49:06 +00:00
Phillip Kühne	e7d9816010	Add song year to detail view	2023-10-04 12:48:50 +00:00
Phillip Kühne	37990e596c	Add python extensions to devcontainer.json	2023-10-04 12:48:28 +00:00
Phillip Kühne	00e090ec48	Remove faulty postAttachCommand from devcontainer.json	2023-10-04 10:45:36 +00:00
Phillip Kühne	e7b0f5f2dc	make requirements.txt useful	2023-10-04 01:33:35 +00:00
Phillip Kühne	c32ed395d8	Improve construction tape gimmick	2023-10-04 01:23:21 +00:00
Phillip Kühne	95be876a19	Change terminology	2023-10-04 01:06:16 +00:00
Phillip Kühne	0f9ad4f91a	Fix trailing whitespace	2023-10-04 01:02:30 +00:00
Phillip Kühne	ac940ded8c	Add debouncing for the search	2023-10-04 00:53:03 +00:00
Phillip Kühne	c8b65e4433	Ensure Index exists after Song import	2023-10-04 00:33:15 +00:00
Phillip Kühne	c50f00c1d3	Fix env var version	2023-10-04 00:24:26 +00:00
Phillip Kühne	3b4152f89f	Fix build script	2023-10-04 00:19:14 +00:00
Phillip Kühne	4561f5f376	Merge branch 'legacy' of github.com:PhoenixTwoFive/karaoqueue into legacy	2023-10-04 00:18:33 +00:00
Phillip Kühne	3728e282e3	Fix container build script	2023-10-04 00:18:29 +00:00
Phillip Kühne	6d3ca87869	Merge pull request #75 from PhoenixTwoFive/59-dark-theme-toast-notifications Dark theme Toast notifications	2023-10-04 02:15:48 +02:00
Phillip Kühne	e443cdb35a	Dark theme Toast notifications Fixes #59	2023-10-04 00:11:42 +00:00
Phillip Kühne	8c98edb604	Fix depenndencies	2023-10-03 23:48:59 +00:00
Phillip Kühne	9d1bab6a07	Less dodgy debug/version handling	2023-10-03 23:48:52 +00:00
Phillip Kühne	c87abb506d	Add docker build and push script	2023-10-03 23:47:57 +00:00
Phillip Kühne	c03f632ea0	Add useful VScode Extensions to devcontainer.json	2023-10-03 23:01:12 +00:00
Phillip Kühne	ab0aca9f90	Add song info and remove string bodging	2023-10-03 22:57:37 +00:00
Phillip Kühne	e3f8839c07	Fix queue modal header border	2023-10-03 22:57:03 +00:00
Phillip Kühne	81267a4484	Update devcontainer.json	2023-10-03 22:56:40 +00:00
Phillip Kühne	a1a041c5ce	Add detailed song info view on song select	2023-10-03 19:23:09 +00:00
Phillip Kühne	c3603a13dd	Merge pull request #74 from PhoenixTwoFive/73-fix-code-scanning-alert-flask-app-is-run-in-debug-mode Remove standalone run stub	2023-10-03 20:22:20 +02:00
Phillip Kühne	c9613dfbd9	Remove standalone run stub	2023-10-03 18:17:36 +00:00
Phillip Kühne	a1c8181779	Merge pull request #72 from PhoenixTwoFive/71-fix-code-scanning-alert-clear-text-logging-of-sensitive-information Remove Logging	2023-10-03 19:51:06 +02:00
Phillip Kühne	1ef4830588	Fix formatting issues	2023-10-03 17:46:52 +00:00
Phillip Kühne	5a8b2fe66c	Remove Logging	2023-10-03 17:42:21 +00:00
Phillip Kühne	0db1ef1fc4	Apply Flask deprecation fixes	2023-10-03 17:36:10 +00:00
Phillip Kühne	dcc79aed1b	Improve search (cherry picked from commit `85497a1569`)	2023-10-03 17:25:39 +00:00
Phillip Kühne	3d8cf665db	Update devcontainer.json	2023-10-03 17:23:54 +00:00