Disable registration when Event is ended.

appState contains variables that indicate whether an event is
currently ongoing, and whether registration is currently allowed.

.vscode/launch.json

@@ -7,15 +7,15 @@
 
 
 
-        {"name":"Python: Flask","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger","--no-reload"],"jinja":true},
-        {"name":"Python: Flask (with reload)","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger"],"jinja":true},
+        {"name":"Python: Flask","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"backend/app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger","--no-reload"],"jinja":true},
+        {"name":"Python: Flask (with reload)","type":"python","request":"launch","module":"flask","env":{"FLASK_APP":"backend/app/main.py","FLASK_ENV":"development","FLASK_DEBUG":"1"},"args":["run","--no-debugger"],"jinja":true},
         {
             "name": "Python: Flask (with reload, externally reachable)",
             "type": "python",
             "request": "launch",
             "module": "flask",
             "env": {
-                "FLASK_APP": "app/main.py",
+                "FLASK_APP": "backend/app/main.py",
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },
@@ -32,7 +32,7 @@
             "request": "launch",
             "module": "flask",
             "env": {
-                "FLASK_APP": "app/main.py",
+                "FLASK_APP": "backend/app/main.py",
                 "FLASK_ENV": "development",
                 "FLASK_DEBUG": "1"
             },

.vscode/settings.json

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

.vscode/tasks.json

@@ -0,0 +1,15 @@
+{
+    // 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",
+            "path": "frontend/ng-karaoqueue/",
+            "problemMatcher": [
+                "$tsc"
+            ]
+        }
+    ]
+}

KaraokeWarkeliste.code-workspace

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

backend/.vscode/launch.json

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

backend/.vscode/settings.json

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

backend/.vscode/tasks.json

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

backend/app/data_adapters.py

@@ -1,8 +0,0 @@
-def dict_from_row(row):
-    return dict(zip(row.keys(), row))
-
-def dict_from_rows(rows):
-    outlist=[]
-    for row in rows:
-        outlist.append(dict_from_row(row))
-    return outlist

backend/app/database.py

@@ -1,165 +0,0 @@
-# -*- coding: utf_8 -*-
-
-import sqlite3
-import pandas
-from io import StringIO
-
-song_table  = "songs"
-entry_table = "entries"
-index_label = "Id"
-done_table  = "done_songs"
-
-def open_db():
-    conn = sqlite3.connect("data/test.db")
-    conn.execute('PRAGMA encoding = "UTF-8";')
-    return conn
-
-def import_songs(song_csv):
-    print("Start importing Songs...")
-    df = pandas.read_csv(StringIO(song_csv), sep=';')
-    conn = open_db()
-    cur = conn.cursor()
-    df.to_sql(song_table, conn, if_exists='replace',
-              index=False)
-    cur.execute("SELECT Count(Id) FROM songs")
-    num_songs = cur.fetchone()[0]
-    conn.close()
-    print("Imported songs ({} in Database)".format(num_songs))
-    return("Imported songs ({} in Database)".format(num_songs)) 
-
-def create_entry_table():
-    conn = open_db()
-    conn.execute('CREATE TABLE IF NOT EXISTS '+entry_table +
-                 ' (ID INTEGER PRIMARY KEY NOT NULL, Song_Id INTEGER NOT NULL, Name VARCHAR(255))')
-    conn.close()
-
-
-def create_done_song_table():
-    conn = open_db()
-    conn.execute('CREATE TABLE IF NOT EXISTS '+done_table +
-                 ' (Song_Id INTEGER PRIMARY KEY NOT NULL,  Plays INTEGER)')
-    conn.close()
-
-def create_song_table():
-    conn = open_db()
-    conn.execute("CREATE TABLE IF NOT EXISTS \""+song_table+"""\" (
-        "Id" INTEGER,
-        "Title" TEXT,
-        "Artist" TEXT,
-        "Year" INTEGER,
-        "Duo" INTEGER,
-        "Explicit" INTEGER,
-        "Date Added" TEXT,
-        "Styles" TEXT,
-        "Languages" TEXT
-    )""")
-    conn.close()
-
-def create_list_view():
-    conn = open_db()
-    conn.execute("""CREATE VIEW IF NOT EXISTS [Liste] AS
-                 SELECT Name, Title, Artist, entries.Id, songs.Id
-                 FROM entries, songs
-                 WHERE entries.Song_Id=songs.Id""")
-    conn.close()
-
-
-def create_done_song_view():
-    conn = open_db()
-    conn.execute("""CREATE VIEW IF NOT EXISTS [Abspielliste] AS
-                 SELECT Artist || \" - \" || Title AS Song, Plays AS Wiedergaben
-                 FROM songs, done_songs
-                 WHERE done_songs.Song_Id=songs.Id""")
-    conn.close()
-
-def get_list():
-    conn = open_db()
-    conn.row_factory = sqlite3.Row
-    cur = conn.cursor()
-    cur.execute("SELECT * FROM Liste")
-    return cur.fetchall()
-
-
-def get_played_list():
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute("SELECT * FROM Abspielliste")
-    return cur.fetchall()
-
-def get_song_list():
-    conn =open_db()
-    cur = conn.cursor()
-    cur.execute("SELECT Artist || \" - \" || Title AS Song, Id FROM songs")
-    return cur.fetchall()
-
-def get_song_completions(input_string):
-    conn = open_db()
-    cur = conn.cursor()
-    # Don't look, it burns...
-    cur.execute(
-        "SELECT Title || \" - \" || Artist AS Song, Id FROM songs WHERE Song LIKE REPLACE(REPLACE(REPLACE(REPLACE(UPPER('%"+input_string+"%'),'ö','Ö'),'ü','Ü'),'ä','Ä'),'ß','ẞ') LIMIT 20")
-    return cur.fetchall()
-
-def add_entry(name,song_id):
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute(
-        "INSERT INTO entries (Song_Id,Name) VALUES(?,?);", (song_id,name))
-    conn.commit()
-    conn.close()
-    return
-
-def add_sung_song(entry_id):
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute("""SELECT Song_Id FROM entries WHERE Id=?""",(entry_id,))
-    song_id = cur.fetchone()[0]
-    cur.execute("""INSERT OR REPLACE INTO done_songs (Song_Id, Plays)
-                VALUES("""+str(song_id)+""",
-                       COALESCE(
-                           (SELECT Plays FROM done_songs
-                            WHERE Song_Id="""+str(song_id)+"), 0) + 1)"
-                )
-    conn.commit()
-    delete_entry(entry_id)
-    conn.close()
-    return True
-
-def clear_played_songs():
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute("DELETE FROM done_songs")
-    conn.commit()
-    conn.close()
-    return True
-
-def delete_entry(id):
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute("DELETE FROM entries WHERE id=?",(id,))
-    conn.commit()
-    conn.close()
-    return True
-
-
-def delete_entries(ids):
-    idlist = []
-    for x in ids:
-        idlist.append( (x,) )
-    try:
-        conn = open_db()
-        cur = conn.cursor()
-        cur.executemany("DELETE FROM entries WHERE id=?", idlist)
-        conn.commit()
-        conn.close()
-        return cur.rowcount
-    except sqlite3.Error as error:
-        return -1
-
-def delete_all_entries():
-    conn = open_db()
-    cur = conn.cursor()
-    cur.execute("DELETE FROM entries")
-    conn.commit()
-    conn.close()
-    return True

backend/app/helpers.py

@@ -1,39 +0,0 @@
-import requests
-from bs4 import BeautifulSoup
-import json
-import os
-
-data_directory = "data"
-config_file = data_directory+"/config.json"
-
-def create_data_directory():
-    if not os.path.exists(data_directory):
-        os.makedirs(data_directory)
-
-
-def get_catalog_url():
-    r = requests.get('https://www.karafun.de/karaoke-song-list.html')
-    soup = BeautifulSoup(r.content, 'html.parser')
-    url = soup.findAll('a', href=True, text='CSV')[0]['href']
-    return url
-
-def get_songs(url):
-    r = requests.get(url)
-    return r.text
-
-def check_config_exists():
-    return os.path.isfile(config_file)
-
-def setup_config(app):
-    if check_config_exists():
-        config = json.load(open(config_file))
-        with open(config_file, 'r') as handle:
-            config = json.load(handle)
-        print("Loaded existing config")
-    else:
-        config = {'username': 'admin', 'password': 'changeme'}
-        with open(config_file, 'w') as handle:
-            json.dump(config, handle, indent=4, sort_keys=True)
-        print("Wrote new config")
-    app.config['BASIC_AUTH_USERNAME'] = config['username']
-    app.config['BASIC_AUTH_PASSWORD'] = config['password']

backend/app/main.py

@@ -1,155 +0,0 @@
-from flask import Flask, render_template, Response, abort, request, redirect
-import helpers
-import database
-import data_adapters
-import os, errno
-import json
-from flask_basicauth import BasicAuth
-app = Flask(__name__, static_url_path='/static')
-
-basic_auth = BasicAuth(app)
-accept_entries = False
-
-@app.route("/")
-def home():
-    if basic_auth.authenticate():
-        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate())
-    else:
-        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate())
-
-@app.route('/api/enqueue', methods=['POST'])
-def enqueue():
-    if accept_entries:
-        if not request.json:
-            print(request.data)
-            abort(400)
-        name = request.json['name']
-        song_id = request.json['id']
-        database.add_entry(name, song_id)
-        return Response('{"status":"OK"}', mimetype='text/json')
-    else:
-        return Response('{"status":"Currently not accepting entries"}', mimetype='text/json',status=423)
-    
-
-@app.route("/list")
-def songlist():
-    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate())
-
-@app.route("/api/queue")
-def queue_json():
-    list = data_adapters.dict_from_rows(database.get_list())
-    return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
-
-@app.route("/plays")
-@basic_auth.required
-def played_list():
-    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate())
-
-@app.route("/api/songs")
-def songs():
-    list = database.get_song_list()
-    return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
-
-@app.route("/api/songs/update")
-@basic_auth.required
-def update_songs():
-    database.delete_all_entries()
-    status = database.import_songs(helpers.get_songs(helpers.get_catalog_url()))
-    print(status)
-    return Response('{"status": "%s" }' % status, mimetype='text/json')
-
-
-@app.route("/api/songs/compl")
-def get_song_completions(input_string=""):
-    input_string = request.args.get('search',input_string)
-    if input_string!="":
-        print(input_string)
-        list = database.get_song_completions(input_string=input_string)
-        return Response(json.dumps(list, ensure_ascii=False).encode('utf-8'), mimetype='text/json')
-
-    else:
-        return 400
-
-
-@app.route("/api/entries/delete/<entry_id>")
-@basic_auth.required
-def delete_entry(entry_id):
-    if database.delete_entry(entry_id):
-        return Response('{"status": "OK"}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json')
-
-
-@app.route("/api/entries/delete", methods=['POST'])
-@basic_auth.required
-def delete_entries():
-    if not request.json:
-        print(request.data)
-        abort(400)
-        return
-    updates = database.delete_entries(request.json)
-    if updates >= 0:
-        return Response('{"status": "OK", "updates": '+str(updates)+'}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
-
-
-@app.route("/api/entries/mark_sung/<entry_id>")
-@basic_auth.required
-def mark_sung(entry_id):
-    if database.add_sung_song(entry_id):
-        return Response('{"status": "OK"}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json')
-
-@app.route("/api/entries/accept/<value>")
-@basic_auth.required
-def set_accept_entries(value):
-    global accept_entries
-    if (value=='0' or value=='1'):
-        accept_entries=bool(int(value))
-        return Response('{"status": "OK"}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
-
-
-@app.route("/api/entries/accept")
-def get_accept_entries():
-    global accept_entries
-    return Response('{"status": "OK", "value": '+str(int(accept_entries))+'}', mimetype='text/json')
-    
-
-@app.route("/api/played/clear")
-@basic_auth.required
-def clear_played_songs():
-    if database.clear_played_songs():
-        return Response('{"status": "OK"}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json')
-
-@app.route("/api/entries/delete_all")
-@basic_auth.required
-def delete_all_entries():
-    if database.delete_all_entries():
-        return Response('{"status": "OK"}', mimetype='text/json')
-    else:
-        return Response('{"status": "FAIL"}', mimetype='text/json')
-
-@app.route("/login")
-@basic_auth.required
-def admin():
-    return redirect("/", code=303)
-
-@app.before_first_request
-def activate_job():
-    helpers.create_data_directory()
-    database.create_entry_table()
-    database.create_song_table()
-    database.create_done_song_table()
-    database.create_list_view()
-    database.create_done_song_view()
-    helpers.setup_config(app)
-
-
-if __name__ == "__main__":    
-    app.run(debug=True, host='0.0.0.0')

backend/app/static/css/style.css

@@ -1,77 +0,0 @@
-body {
-    padding-top: 5rem;
-}
-
-html, body {
-    height: 100%;
-}
-
-.site {
-    height: auto;
-    min-height: 100%;
-}
-
-main {
-    padding-bottom: 60px; /* Höhe des Footers */
-}
-
-.footer {
-    margin-top: -60px;
-    width: 100%;
-    height: 60px;
-    /* Set the fixed height of the footer here */
-    /*line-height: 60px; /* Vertically center the text there */
-    background-color: #f5f5f5;
-}
-
-.topbutton {
-    width: 100%;
-}
-
-table td {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-table.entries tbody tr:first-child {
-    background-color: #007bff80;
-    font-weight: 600;
-}
-
-table.entries tbody tr:nth-child(2) {
-    background-color: #007bff40;
-    font-weight: 500;
-}
-
-table.entries tbody tr:nth-child(3) {
-    background-color: #007bff20;
-    font-weight: 400;
-}
-
-table.entries tbody tr:nth-child(4) {
-    background-color: #007bff10;
-}
-
-table td:first-child {
-    max-width: 200px !important;
-}
-
-@media (min-width: 768px) {
-    .topbutton {
-        width: auto;
-    }
-}
-
-@media print {
-    body {
-        font-size: 1.3em;
-    }
-
-    .footer {
-        display: none !important;
-    }
-
-    .admincontrols {
-        display: none;
-    }
-}

backend/app/static/manifest.webmanifest

@@ -1,16 +0,0 @@
-{
-    "name": "KaraoQueue",
-    "short_name": "KaraoQueue",
-    "start_url": "/",
-    "display": "standalone",
-    "background_color": "#343a40",
-    "description": "Eine Karaokewarteliste.",
-    "icons": [{
-        "src": "images/touch/homescreen192.png",
-        "sizes": "192x192",
-        "type": "image/png"
-    }],
-    "related_applications": [{
-        "platform": "Web"
-    }]
-}

backend/app/templates/base.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <link rel="icon" href="favicon.ico">
-    <link rel="manifest" href="/static/manifest.webmanifest">
-
-    <title>{% block title %}{% endblock %} - KaraoQueue</title>
-    
-    <!-- Bootstrap-Tables -->
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
-
-    <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
-        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
-    <!-- Custom styles for this template -->
-    <link href="static/css/style.css" rel="stylesheet">
-
-    <!-- Fontawesome Icons -->
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
-        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
-
-    <!-- Bootstraptoggle -->
-    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
-
-</head>
-
-<body>
-
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-        <a class="navbar-brand" href="/">KaraoQueue</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
-            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-            <ul class="navbar-nav mr-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="/">Warteliste</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="/list">Songsuche</a>
-                </li>
-                {% if auth %}
-                <li class="nav-item">
-                    <a class="nav-link" href="/plays">Abspielliste</a>
-                </li>
-                {% endif %}
-            </ul>
-            <!--<form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-            </form>-->
-        </div>
-    </nav>
-    <div class="site">
-        <main role="main" class="container">
-            {% block content %}{% endblock %}
-        </main><!-- /.container -->
-    </div>
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="container text-center py-3">
-            {% if not auth %}
-                <a href="/login" class="ml-1 mr-1"><i
-                        class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
-            {% endif %}
-            <a href="https://github.com/PhoenixTwoFive/karaoqueue"
-                class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
-            <span class="text-muted">KaraoQueue -&nbsp;<span
-                    style="display:inline-block;transform: rotate(180deg) translateY(-0.2rem)">&copy</span>&nbsp;2019 - Phillip
-                Kühne</span>
-        </div>
-    </footer>
-    <!-- Footer -->
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
-        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous">
-    </script>
-    
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
-        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
-    </script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
-        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
-        integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
-    </script>
-    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
-    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
-    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
-    {% block extrajs %}{% endblock %}
-    <script>
-        $(document).ready(function () {
-            // get current URL path and assign 'active' class
-            var pathname = window.location.pathname;
-            $('.navbar-nav > li > a[href="' + pathname + '"]').parent().addClass('active');
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-    </script>
-</body>
-
-</html>

backend/app/templates/main.html

@@ -1,35 +0,0 @@
-
-
-{% extends 'base.html' %}
-{% block title %}Warteliste{% endblock %}
-{% block content %}
-<a id="bfb" role="button" class="btn btn-primary btn-lg btn-block mb-2" href="/list">Eintragen</a>
-<table class="table entries"
-        data-toggle="table"
-        data-url="/api/queue"
-        data-pagination="true"
-        data-classes="table"
-        data-show-refresh="false"
-        data-auto-refresh="true"
-        data-auto-refresh-interval="10">
-    <thead>
-        <tr>
-            <th data-field="Name">Name</th>
-            <th data-field="Title">Song</th>
-            <th data-field="Artist">Künstler</th>
-        </tr>
-    </thead>
-</table>
-<a name="end"></a>
-{% endblock %}
-{% block extrajs %}
-<script>
-$.getJSON("/api/entries/accept", (data) => {
-    if (data["value"]==0) {
-        $("#bfb").addClass("disabled")
-        $("#bfb").prop("aria-disabled",true);
-        $("#bfb").prop("tabindex","-1");
-    }
-})
-</script>
-{% endblock %}

backend/app/templates/main_admin.html

@@ -1,191 +0,0 @@
-
-
-{% extends 'base.html' %}
-{% block title %}Warteliste-Admin{% endblock %}
-{% block content %}
-<style>
-table td:nth-child(2) {
-    max-width: 450px !important;
-    overflow: scroll;
-}
-</style>
-<div class="container">
-    <div id="toolbar">
-        <button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteSelectedEntries()"><i
-                class="fas fa-trash mr-2"></i>Gewählte Einträge löschen</button>
-        <button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i
-                class="fas fa-file-import mr-2"></i>Song-Datenbank
-            aktualisieren</button>
-        <input id="entryToggle" type="checkbox" class="topbutton" data-toggle="toggle" data-on="Eintragen erlaubt" data-off="Eintragen deaktiviert" data-onstyle="success" data-offstyle="danger">
-    </div>
-    <table class="table entries"
-            id="entrytable"
-            data-toggle="table"
-            data-search="true"
-            data-show-columns="true"
-            data-show-toggle="true"
-            data-multiple-select-row="true"
-            data-click-to-select="true"
-            data-toolbar="#toolbar"
-            data-pagination="true"
-            data-show-extended-pagination="true"
-            data-classes="table table-hover"
-            data-url="/api/queue"
-            data-show-refresh="true"
-            data-auto-refresh="true"
-            data-auto-refresh-interval="10">
-        <thead>
-            <tr>
-                <th data-field="state" data-checkbox="true"></th>
-                <th scope="col" data-field="Name">Name</th>
-                <th scope="col" data-field="Title">Song</th>
-                <th scope="col" data-field="Artist">Künstler</th>
-                <th scope="col" data-formatter="TableActions">Aktionen</th>
-            </tr>
-        </thead>
-    </table>
-    <a name="end"></a>
-</div>
-{% endblock %}
-{% block extrajs %}
-<script>
-    $(function () {
-        $('#entryToggle').change(function() {
-            $.ajax({url: "/api/entries/accept/"+($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000)});
-        })
-        refreshEntryToggle()
-        $("#entrytable").bootstrapTable().on('load-success.bs.table', function() {
-            $('[data-toggle="tooltip"]').tooltip()
-        })
-    })
-    function confirmDeleteEntry(name, entry_id) {
-        bootbox.confirm("Wirklich den Eintrag von "+name+" löschen?", function(result){
-            if (result) {
-                deleteEntry(entry_id)
-            }
-        })
-    }
-    function confirmDeleteSelectedEntries() {
-        bootbox.confirm({
-            message: "Wirklich gewählte Eintragungen löschen?", 
-            buttons: {
-                confirm: {
-                    label: 'Ja',
-                    className: 'btn btn-danger'
-                },
-                cancel: {
-                    label: 'Nein',
-                    className: 'btn btn-secondary'
-                }
-            },
-            callback: function(result){
-                if (result) {
-                    DeleteSelectedEntries(getIdSelections())
-                }
-            }
-        })
-    }
-    function confirmUpdateSongDatabase() {
-        bootbox.confirm({
-            message: "Wirklich die Song-Datenbank aktualisieren?<br>Dies lädt die Aktuelle Song-Liste von <a href='https://www.karafun.de/karaoke-song-list.html'>KaraFun</a> herunter, <b>und wird alle Eintragungen löschen!</b>",
-            buttons: {
-                confirm: {
-                    label: 'Ja',
-                    className: 'btn-primary'
-                },
-                cancel: {
-                    label: 'Nein',
-                    className: 'btn btn-secondary'
-                }
-            },
-            callback: function(result){
-                if (result) {
-                    var dialog = bootbox.dialog({
-                        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',
-    
-                        closeButton: false
-                    });
-                    updateSongDatabase(dialog)                    
-                }
-            }
-        })
-    }
-    function refreshEntryToggle() {
-        $.getJSON("/api/entries/accept", (data) => {
-            if (data["value"]!=$('#entryToggle').is(":checked")) {
-                if(data["value"]==1) {
-                $('#entryToggle').bootstrapToggle('on')
-                }
-                else {
-                    $('#entryToggle').bootstrapToggle('off')
-                }
-            }
-        })
-    }
-    function deleteEntry(entry_id) {
-       $.ajax({
-        type: 'GET',
-        url: '/api/entries/delete/'+entry_id,
-        contentType: "application/json",
-        dataType: 'json',
-        async: false
-       });
-       $("#entrytable").bootstrapTable('refresh')
-    
-    }
-    function markEntryAsSung(entry_id) {
-       $.ajax({
-        type: 'GET',
-        url: '/api/entries/mark_sung/'+entry_id,
-        contentType: "application/json",
-        dataType: 'json',
-        async: false
-       });
-       $("#entrytable").bootstrapTable('refresh')
-    
-    }
-    function DeleteSelectedEntries(ids) {
-        $.ajax({
-            type: 'POST',
-            url: '/api/entries/delete',
-            data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
-            error: function() {
-                bootbox.alert({
-                    message: "Fehler beim Löschen der Eintragungen.",
-                })
-            },
-            success: function() {
-                $("#entrytable").bootstrapTable('refresh')
-            
-            },
-            contentType: "application/json",
-            dataType: 'json'
-        });
-    }
-    function updateSongDatabase(wait_dialog) {
-        $.ajax({
-            type: 'GET',
-            url: '/api/songs/update',
-            contentType: "application/json",
-            dataType: 'json',
-            success: function(data) {
-                wait_dialog.modal('hide')
-                bootbox.alert({
-                    message: data["status"],
-                    callback: function() {
-                        $("#entrytable").bootstrapTable('refresh')
-                    }
-                })
-            }
-        });
-    }
-    function TableActions (value, row, index) {
-        return "<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"markEntryAsSung("+row.ID+")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"confirmDeleteEntry('"+row.Name+"',"+row.ID+")\"><i class=\"fas fa-trash\"></i></button>";
-    }
-    function getIdSelections() {
-        return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
-            return row.ID
-        })
-    }
-</script>
-{% endblock %}

backend/app/templates/played_list.html

@@ -1,102 +0,0 @@
-{% extends 'base.html' %}
-{% block title %}Abspielliste{% endblock %}
-{% block content %}
-<div id="toolbar">
-    <button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteAllEntries()"><i
-            class="fas fa-trash mr-2"></i>Abspielliste löschen</button>
-    <button type="button" class="topbutton btn btn-primary" onclick="exportPDF()"><i
-            class="fas fa-file-pdf mr-2"></i>Als PDF herunterladen</button>
-    <button type="button" class="topbutton btn btn-secondary" onclick="printPDF()"><i
-            class="fas fa-print mr-2"></i>Drucken</button>
-</div>
-<table class="table"
-        id="table"
-        data-toggle="table"
-        data-search="true"
-        data-show-columns="true"
-        data-toolbar="#toolbar"
-        data-pagination="true"
-        data-classes="table table-bordered table-striped"
-        data-show-extended-pagination="true">
-    <thead>
-        <tr>
-            <th scope="col">Song</th>
-            <th scope="col">Wiedergaben</th>
-        </tr>
-    </thead>
-    {% for entry in list: %}
-    <tr>
-        <td>
-            {{ entry[0] }}
-        </td>
-        <td>
-            {{ entry[1] }}
-        </td>
-    </tr>
-    {% endfor %}
-</table>
-</table>
-{% endblock %}
-{% block extrajs %}
-<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
-<script src="https://unpkg.com/jspdf-autotable@3.1.1/dist/jspdf.plugin.autotable.js"></script>
-<script>
-    function confirmDeleteAllEntries() {
-        bootbox.confirm({
-            message: "Wirklich Abspielliste löschen?<br>Stelle sicher, dass du sie vorher zwecks Abrechnung gedruckt und/oder heruntergeladen hast!", 
-            buttons: {
-                confirm: {
-                    label: 'Ja',
-                    className: 'btn btn-danger'
-                },
-                cancel: {
-                    label: 'Nein',
-                    className: 'btn btn-secondary'
-                }
-            },
-            callback: function(result){
-                if (result) {
-                    deleteAllEntries()
-                }
-            }
-        })
-    }
-    function deleteAllEntries() {
-        $.ajax({
-            type: 'GET',
-            url: '/api/played/clear',
-            contentType: "application/json",
-            dataType: 'json',
-            async: false
-        });
-        location.reload();
-    }
-
-    function exportPDF() {
-        var doc = new jsPDF();
-        doc.autoTable({
-            head: [["Song","Wiedergaben"]],
-            body: createTableArray(),
-            theme: 'grid'
-        });
-        doc.save('Abspielliste.pdf');
-    }
-
-    function printPDF() {
-        var doc = new jsPDF();
-        doc.autoTable({
-            head: [["Song","Wiedergaben"]],
-            body: createTableArray(),
-            theme: 'grid'
-        });
-        doc.autoPrint();
-        doc.output('dataurlnewwindow');
-    }
-
-    function createTableArray() {
-        var data = $("#table").bootstrapTable('getData')
-        out = data.map(x => [x["0"],x["1"]])
-        return out;
-    }
-</script>
-{% endblock %}

backend/app/templates/songlist.html

@@ -1,129 +0,0 @@
-{% extends 'base.html' %}
-{% block title %}Songsuche{% endblock %}
-{% block content %}
-<input class="form-control" id="filter" type="text" placeholder="Suchen...">
-<table class="table">
-    <tbody id="songtable">
-    </tbody>
-</table>
-<div class="modal fade" id="enqueueModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-    aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Auf Liste setzen</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="form-group">
-            <form id="nameForm">
-                <div class="modal-body">
-                        <label for="singerNameInput">Sängername</label>
-                        <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
-                            required>
-                        <input id="selectedId" name="selectedId" type="hidden" value="">
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
-                    </div>
-            </form>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-{% block extrajs %}
-<script>
-    $(document).ready(function () {
-        $("#filter").focus();
-        $("#filter").keyup( function () {
-            var value = $(this).val().toLowerCase();
-            //alert(value);
-            if(value.length >= 1) {
-                $.getJSON("/api/songs/compl", { search: value }, function (data) {
-                    var items = [];
-                    $.each(data, function (key, val) {
-                        items.push("<tr><td>"+val[0]+`</td>
-                            <td><button type='button'
-                                    class='btn btn-primary justify-content-center align-content-between enqueueButton'
-                                    data-toggle='modal'
-                                    data-target='#enqueueModal' onclick='setSelectedId(`+val[1]+`)'><i
-                                        class="fas fa-plus"></i></button></td>
-                        </tr>`)
-                    });
-    
-                    $("#songtable").html("")
-                    $(items.join("")).appendTo("#songtable");
-                    entriesAccepted()
-                });
-            } else {
-                $("#songtable").html("")
-            }
-        });
-
-        $("#nameForm").submit( function (e) {
-            e.preventDefault();
-            submitModal();
-        });
-    });
-
-    
-    function enqueue(id,name,success_callback, blocked_callback) {
-        var data = {
-            "name": name,
-            "id": id
-        }
-        $.ajax({
-            type: 'POST',
-            url: '/api/enqueue',
-            data: JSON.stringify(data), // or JSON.stringify ({name: 'jonas'}),
-            success: success_callback,
-            statusCode: {
-                423: blocked_callback
-            },
-            contentType: "application/json",
-            dataType: 'json'
-        });
-    }
-    
-    function setSelectedId(id) {
-        $("#selectedId").attr("value",id);
-    }
-    
-    function submitModal() {
-        var name = $("#singerNameInput").val();
-        var id = $("#selectedId").attr("value");
-        enqueue(id,name,function () {
-            $("#enqueueModal").modal('hide');
-            window.location.href = '/#end';
-        }, function () {
-            bootbox.alert({
-                    message: "Es werden leider keine neuen Anmeldungen mehr angenommen. Tut mir leid :(",
-                });
-            $(".enqueueButton").prop("disabled",true);
-            $("#enqueueModal").modal('hide');
-
-        });
-        
-
-    }
-
-    function entriesAccepted() {
-        $.getJSON("/api/entries/accept", (data,out) => {
-            if(data["value"]==0) {
-                $(".enqueueButton").prop("disabled",true)
-                $(".enqueueButton").prop("style","pointer-events: none;")
-                $(".enqueueButton").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='top'></span>" );
-                $(".tooltip-span").prop("title","Eintragungen sind leider nicht mehr möglich.")
-                $('[data-toggle="tooltip"]').tooltip()
-            } else {
-                $(".enqueueButton").prop("disabled",false)
-            }
-            
-        })
-    }
-
-</script>
-{% endblock %}

backend/docker/Dockerfile

@@ -8,4 +8,4 @@ RUN pip install Flask-BasicAuth
 
 RUN pip install bs4
 
-COPY ./app /app
+COPY ../app /app

backend/docker/docker-compose.dev.yml

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

backend/docker/docker-compose.yml

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

backend/karaoqueue-backend/.example.env

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

backend/karaoqueue-backend/.gitignore

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

backend/karaoqueue-backend/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

backend/karaoqueue-backend/src/index.ts

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

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

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

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

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

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

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

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

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

backend/karaoqueue-backend/tsconfig.json

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

backend/karaoqueue-backend/tslint.json

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

docs/swagger.yaml

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

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

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

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

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

frontend/ng-karaoqueue/angular.json

@@ -21,11 +21,16 @@
             "aot": false,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+               {
+                 "glob": "mdi.svg",
+                 "input": "node_modules/@mdi/angular-material/",
+                 "output": "/assets/"
+               }
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "src/custom-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -87,11 +92,16 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "mdi.svg",
+                "input": "node_modules/@mdi/angular-material/",
+                "output": "/assets/"
+              }
             ],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "./app/custom-theme.scss",
+              "src/styles.scss"
             ],
             "scripts": []
           }
@@ -124,5 +134,10 @@
       }
     }
   },
-  "defaultProject": "ng-karaoqueue"
+  "defaultProject": "ng-karaoqueue",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
 }

frontend/ng-karaoqueue/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "serve": "ng serve --host=0.0.0.0",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -11,40 +12,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.14",
-    "@angular/cdk": "~8.2.3",
-    "@angular/common": "~8.2.14",
-    "@angular/compiler": "~8.2.14",
-    "@angular/core": "~8.2.14",
-    "@angular/forms": "~8.2.14",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "~8.2.14",
-    "@angular/platform-browser-dynamic": "~8.2.14",
-    "@angular/router": "~8.2.14",
+    "@angular/animations": "~9.0.5",
+    "@angular/cdk": "~9.1.2",
+    "@angular/common": "~9.0.5",
+    "@angular/compiler": "~9.0.5",
+    "@angular/core": "~9.0.5",
+    "@angular/forms": "~9.0.5",
+    "@angular/material": "^9.1.2",
+    "@angular/platform-browser": "~9.0.5",
+    "@angular/platform-browser-dynamic": "~9.0.5",
+    "@angular/router": "~9.0.5",
+    "@mdi/angular-material": "^5.0.45",
+    "@ngx-pwa/local-storage": "^9.0.3",
     "hammerjs": "^2.0.8",
-    "rxjs": "~6.4.0",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "runtime-config-loader": "^2.0.0",
+    "rxjs": "~6.5.4",
+    "tslib": "^1.11.1",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.20",
-    "@angular/cli": "~8.3.20",
-    "@angular/compiler-cli": "~8.2.14",
-    "@angular/language-service": "~8.2.14",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
+    "@angular-devkit/build-angular": "^0.900.5",
+    "@angular/cli": "~9.0.5",
+    "@angular/compiler-cli": "~9.0.5",
+    "@angular/language-service": "~9.0.5",
+    "@types/jasmine": "~3.5.9",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "~13.9.0",
+    "codelyzer": "^5.2.1",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.5.3"
+    "karma": "~4.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.1",
+    "karma-jasmine": "~3.1.1",
+    "karma-jasmine-html-reporter": "^1.5.2",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.6.2",
+    "tslint": "~6.0.0",
+    "typescript": "~3.8.3"
   }
 }

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

@@ -1,8 +1,13 @@
+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 = [];
+const routes: Routes = [
+  {path: '', component: EntryListingComponent },
+  {path: 'songs', component: SongSearchComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/ng-karaoqueue/src/index.html

@@ -9,7 +9,7 @@
   <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>
+<body class="mat-typography mat-app-background">
   <app-root></app-root>
 </body>
 </html>

frontend/ng-karaoqueue/src/styles.css

@@ -1,5 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

frontend/ng-karaoqueue/src/styles.scss

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

frontend/ng-karaoqueue/tsconfig.json

@@ -21,6 +21,7 @@
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "disableTypeScriptVersionCheck": true
   }
 }