Better Dark Mode

Dockerfile

@@ -1,4 +1,4 @@
-FROM tiangolo/uwsgi-nginx-flask:python3.7
+FROM tiangolo/uwsgi-nginx-flask:python3.10
 
 COPY ./backend /app
 

backend/app.py

@@ -42,7 +42,7 @@ def enqueue():
         database.add_entry(name, song_id, client_id)
         return Response('{"status":"OK"}', mimetype='text/json')
     else:
-        if accept_entries:
+        if helpers.get_accept_entries(app):
             if not request.json:
                 print(request.data)
                 abort(400)
@@ -73,7 +73,7 @@ def songlist():
 @nocache
 @basic_auth.required
 def settings():
-    return render_template('settings.html', app=app, auth=basic_auth.authenticate())
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
 
 
 @app.route("/settings", methods=['POST'])
@@ -82,6 +82,7 @@ def settings():
 def settings_post():
     entryquota = request.form.get("entryquota")
     maxqueue = request.form.get("maxqueue")
+    theme = request.form.get("theme")
     if entryquota.isnumeric() and int(entryquota) > 0:  # type: ignore
         app.config['ENTRY_QUOTA'] = int(entryquota)  # type: ignore
     else:
@@ -90,6 +91,12 @@ def settings_post():
         app.config['MAX_QUEUE'] = int(maxqueue)  # type: ignore
     else:
         abort(400)
+    if theme in helpers.get_themes():
+        app.config['THEME'] = theme
+    else:
+        abort(400)
+
+    helpers.persist_config(app=app)
 
     return render_template('settings.html', app=app, auth=basic_auth.authenticate())
 
@@ -187,9 +194,8 @@ def mark_transferred(entry_id):
 @nocache
 @basic_auth.required
 def set_accept_entries(value):
-    global accept_entries
     if (value == '0' or value == '1'):
-        accept_entries = bool(int(value))
+        helpers.set_accept_entries(app,bool(int(value)))
         return Response('{"status": "OK"}', mimetype='text/json')
     else:
         return Response('{"status": "FAIL"}', mimetype='text/json', status=400)
@@ -198,7 +204,7 @@ def set_accept_entries(value):
 @app.route("/api/entries/accept")
 @nocache
 def get_accept_entries():
-    global accept_entries
+    accept_entries = helpers.get_accept_entries(app)
     return Response('{"status": "OK", "value": '+str(int(accept_entries))+'}', mimetype='text/json')
 
 
@@ -238,6 +244,7 @@ def activate_job():
     database.create_done_song_table()
     database.create_list_view()
     database.create_done_song_view()
+    database.create_config_table()
     helpers.setup_config(app)
 
 

backend/database.py

@@ -78,6 +78,14 @@ def create_done_song_view():
                  WHERE done_songs.Song_Id=songs.Id""")
         
 
+def create_config_table():
+    with get_db_engine().connect() as conn:
+        conn.execute("""CREATE TABLE IF NOT EXISTS `config` (
+        `Key` VARCHAR(50) NOT NULL PRIMARY KEY,
+        `Value` TEXT
+    )""")
+
+
 def get_list():
     with get_db_engine().connect() as conn:
         cur = conn.execute("SELECT * FROM Liste")
@@ -177,7 +185,25 @@ def delete_entries(ids):
         return -1
 
 
-def delete_all_entries():
+def delete_all_entries() -> bool:
     with get_db_engine().connect() as conn:
         conn.execute("DELETE FROM entries")
     return True
+
+def get_config(key: str) -> str:
+    with get_db_engine().connect() as conn:
+        cur = conn.execute("SELECT `Value` FROM config WHERE `Key`=%s", (key,))
+    return cur.fetchall()[0][0]
+
+def set_config(key: str, value: str) -> bool:
+    with get_db_engine().connect() as conn:
+        conn.execute("INSERT INTO config (`Key`, `Value`) VALUES (%s,%s) ON DUPLICATE KEY UPDATE `Value`=%s", (key, value, value))
+    return True
+
+def get_config_list() -> dict:
+    with get_db_engine().connect() as conn:
+        cur = conn.execute("SELECT * FROM config")
+        result_dict = {}
+        for row in cur.fetchall():
+            result_dict[row[0]] = row[1]
+    return result_dict

backend/helpers.py

@@ -3,9 +3,10 @@ from bs4 import BeautifulSoup
 import json
 import os
 import uuid
-from flask import make_response
+from flask import make_response, Flask
 from functools import wraps, update_wrapper
 from datetime import datetime
+import database
 
 data_directory = "data"
 config_file = data_directory+"/config.json"
@@ -33,9 +34,17 @@ def is_valid_uuid(val):
         return False
 
 def check_config_exists():
-    return os.path.isfile(config_file)
+    eng = database.get_db_engine()
+    with eng.connect() as conn:
+        if conn.dialect.has_table(conn, 'config'):
+            if (conn.execute("SELECT COUNT(*) FROM config").fetchone()[0] > 0): # type: ignore
+                return True
+            else:
+                return False
+        else:
+            return False
 
-def load_version(app):
+def load_version(app: Flask):
     if os.environ.get("SOURCE_VERSION"):
         app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7] # type: ignore
     elif os.path.isfile(".version"):
@@ -48,7 +57,7 @@ def load_version(app):
     else:
         app.config['VERSION'] = ""
         
-def load_dbconfig(app):
+def load_dbconfig(app: Flask):
     if os.environ.get("FLASK_ENV") == "development":
         app.config['DBCONNSTRING'] = os.environ.get("DBSTRING")
     else:
@@ -70,30 +79,60 @@ def load_dbconfig(app):
                 else:
                     app.config['DBCONNSTRING'] = ""
         else:
-            app.config['DBCONNSTRING'] = ""
+            exit("No database connection string found. Cannot continue. Please set the environment variable DBSTRING or create a file .dbconn in the root directory of the project.")
 
-def setup_config(app):
+# Check if config exists in DB, if not, create it.
-    if os.environ.get("DEPLOYMENT_PLATFORM") == "Docker":
+def setup_config(app: Flask):
-        app.config['BASIC_AUTH_USERNAME'] = os.environ.get('BASIC_AUTH_USERNAME')
+    if check_config_exists():
-        app.config['BASIC_AUTH_PASSWORD'] = os.environ.get('BASIC_AUTH_PASSWORD')
+        config = database.get_config_list()
-        app.config['ENTRY_QUOTA'] = os.environ.get('ENTRY_QUOTA')
+        print("Loaded existing config")
-        app.config['MAX_QUEUE'] = os.environ.get('MAX_QUEUE')
     else:
-        if check_config_exists():
+        config = {'username': 'admin', 'password': 'changeme', 'entryquota': 3, 'maxqueue': 20, 'entries_allowed': 1, 'theme': 'default'}
-            config = json.load(open(config_file))
+        for key, value in config.items():
-            with open(config_file, 'r') as handle:
+            database.set_config(key, value)
-                config = json.load(handle)
+        print("Created new config")
-            print("Loaded existing config")
+    app.config['BASIC_AUTH_USERNAME'] = config['username']
-        else:
+    app.config['BASIC_AUTH_PASSWORD'] = config['password']
-            config = {'username': 'admin', 'password': 'changeme', 'entryquota': 3, 'maxqueue': 20}
+    app.config['ENTRY_QUOTA'] = config['entryquota']
-            with open(config_file, 'w') as handle:
+    app.config['MAX_QUEUE'] = config['maxqueue']
-                json.dump(config, handle, indent=4, sort_keys=True)
+    app.config['ENTRIES_ALLOWED'] = bool(config['entries_allowed'])
-            print("Wrote new config")
-        app.config['BASIC_AUTH_USERNAME'] = config['username']
-        app.config['BASIC_AUTH_PASSWORD'] = config['password']
-        app.config['ENTRY_QUOTA'] = config['entryquota']
-        app.config['MAX_QUEUE'] = config['maxqueue']
 
+# set queue admittance
+def set_accept_entries(app: Flask, allowed: bool):
+    if allowed:
+        app.config['ENTRIES_ALLOWED'] = True
+        database.set_config('entries_allowed', '1')
+    else:
+        app.config['ENTRIES_ALLOWED'] = False
+        database.set_config('entries_allowed', '0')
+
+# get queue admittance
+def get_accept_entries(app: Flask) -> bool:
+    state = bool(int(database.get_config('entries_allowed')))
+    app.config['ENTRIES_ALLOWED'] = state
+    return state
+
+
+# Write settings from current app.config to DB
+def persist_config(app: Flask):
+    config = {'username': app.config['BASIC_AUTH_USERNAME'], 'password': app.config['BASIC_AUTH_PASSWORD'], 'entryquota': app.config['ENTRY_QUOTA'], 'maxqueue': app.config['MAX_QUEUE']}
+    for key, value in config.items():
+        database.set_config(key, value)
+
+# Get available themes from themes directory
+def get_themes():
+    themes = []
+    for theme in os.listdir('./static/css/themes'):
+        themes.append(theme)
+    return themes
+
+# Set theme
+def set_theme(app: Flask, theme: str):
+    if theme in get_themes():
+        app.config['THEME'] = theme
+        database.set_config('theme', theme)
+    else:
+        print("Theme not found, not setting theme.")
 
 
 def nocache(view):

backend/static/css/style.css

@@ -1,8 +1,36 @@
-body {
+:root {
-    padding-top: 5rem;
+    /* Navbar */
+    --navbar-background-color: #343a40;
+    --navbar-text-color: rgba(255, 255, 255, .5);
+    --navbar-text-color-hover: rgba(255, 255, 255, .75);
+    --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+    /* Common */
+    --background-color: #ffffff;
+    --background-color-var: #f5f5f5;
+    --text-color: #212529;
+    --text-color-var: #343a40;
+
+    /* Modals */
+    --modal-background-color: #ffffff;
+    --modal-separator-color: #dee2e6;
+    --modal-close-color: #212529;
+
+    /* Tables */
+    --table-border-color: #dee2e6;
+
+    /* Input */
+    --input-background-color: #ffffff;
 }
 
-html, body {
+
+body {
+    padding-top: 5rem;
+    background-color: var(--background-color);
+}
+
+html,
+body {
     height: 100%;
 }
 
@@ -12,7 +40,8 @@ html, body {
 }
 
 main {
-    padding-bottom: 60px; /* Höhe des Footers */
+    padding-bottom: 60px;
+    /* Höhe des Footers */
 }
 
 .footer {
@@ -21,7 +50,7 @@ main {
     height: 60px;
     /* Set the fixed height of the footer here */
     /*line-height: 60px; /* Vertically center the text there */
-    background-color: #f5f5f5;
+    background-color: var(--background-color-var);
 }
 
 .topbutton {
@@ -56,6 +85,10 @@ table td:first-child {
     max-width: 200px !important;
 }
 
+.fa-solid {
+    vertical-align: auto;
+}
+
 @media (min-width: 768px) {
     .topbutton {
         width: auto;
@@ -75,3 +108,83 @@ table td:first-child {
         display: none;
     }
 }
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.footer {
+    background-color: #232323;
+}
+
+.modal-content {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+.modal-header {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.modal-footer {
+    background-color: var(--background-color);
+    color: var(--text-color-var);
+    border-color: var(var(--modal-separator-color));
+}
+
+.form-control {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.form-control:focus {
+    background-color: var(--input-background-color);
+    color: var(--text-color)
+}
+
+.table td,
+.table th {
+    border-color: var(--table-border-color)
+}
+
+.table thead th {
+    border-color: var(--table-border-color)
+}
+
+.close {
+    color: var(--text-color)
+}
+
+pre {
+    color: var(--text-color-var)
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Navbar */
+        --navbar-background-color: #343a40;
+        --navbar-text-color: rgba(255, 255, 255, .5);
+        --navbar-text-color-hover: rgba(255, 255, 255, .75);
+        --navbar-text-color-active: rgba(255, 255, 255, 1);
+
+        /* Common */
+        --background-color: #121212;
+        --background-color-var: #232323;
+        --text-color: #f5f5f5;
+        --text-color-var: #a2a2a2;
+
+        /* Modals */
+        --modal-background-color: #121212;
+        --modal-separator-color: #232323;
+        --modal-close-color: #f5f5f5;
+
+        /* Tables */
+        --table-border-color: #232323;
+
+        /* Input */
+        --input-background-color: #343434;
+    }
+}

backend/static/css/themes/stuk.css

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

backend/templates/base.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
     <meta name="author" content="">
+    <meta name="color-scheme" content="light dark" />
     <link rel="icon" href="favicon.ico">
     <link rel="manifest" href="/static/manifest.webmanifest">
 
@@ -22,12 +23,16 @@
     <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"
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-        integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Bootstraptoggle -->
     <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 
+    <!-- Active Theme -->
+    <link href="static/css/themes/{{config['THEME']}}" rel="stylesheet">
+
 </head>
 
 <body>
@@ -122,7 +127,7 @@
 
         function loadOrGenerateClientId() {
             if (!localStorage.getItem("clientId")) {
-                localStorage.setItem("clientId",create_UUID())
+                localStorage.setItem("clientId", create_UUID())
             }
         }
     </script>

backend/templates/settings.html

@@ -10,9 +10,20 @@
         <label for="maxqueue">Maximale Anzahl an Einträgen Insgesamt</label>
         <input type="number" class="form-control" id="maxqueue" name="maxqueue" min=1 value={{app.config['MAX_QUEUE']}}>
     </p>
+    <p>
+        <label for="theme">Aktives Theme</label>
+        <select class="form-control" id="theme" name="theme">
+            {% for theme in themes %}
+            <option value="{{theme}}" {% if theme == config['THEME'] %}selected{% endif %}>{{theme}}</option>
+            {% endfor %}
+        </select>
+    </p>
     <input type="submit" class="btn btn-primary mr-1 mb-2" value="Einstellungen anwenden">
-    <input type="button" class="btn btn-default mr-1 mb-2" onclick="$.get('/writeSettings').done(()=>{alert('Einstellungen gespeichert')}).fail(()=>{alert('Fehler beim Speichern der Einstellungen')})" value="Einstellungen speichern"/>
 </form>
+<details>
+    <summary>Current config:</summary>
+    <pre>{% for key, val in config.items() %}{{key}}: {{val}}<br>{% endfor %}</pre>
+</details>
 {% endblock %}
 {% block extrajs %}
 {% endblock %}

backend/templates/songlist.html

@@ -46,7 +46,7 @@
                     var items = [];
                     $.each(data, function (key, val) {
                         items.push("<tr><td>" + val[0] + `</td>
-                            <td><button type='button'
+                            <td class='buttoncell'><button type='button'
                                     class='btn btn-primary justify-content-center align-content-between enqueueButton'
                                     data-toggle='modal'
                                     data-target='#enqueueModal' onclick='setSelectedId(`+ val[1] + `)'><i

docker-compose.prod.yml

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