Merge pull request #84 from PhoenixTwoFive/83-dark-mode-is-broken

Fix dark mode styling

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-    "python.pythonPath": "/usr/bin/python",
     "python.testing.unittestArgs": [
         "-v",
         "-s",
@@ -9,8 +8,6 @@
     ],
     "python.testing.pytestEnabled": false,
     "python.testing.unittestEnabled": true,
-    "python.linting.pylintEnabled": false,
-    "python.linting.flake8Enabled": true,
     "emmet.includeLanguages": {
         "django-html": "html"
     }

backend/Pipfile

@@ -4,45 +4,45 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-autopep8 = "==2.0.2"
-beautifulsoup4 = "==4.12.0"
-bs4 = "==0.0.1"
-certifi = "==2022.12.7"
-charset-normalizer = "==3.1.0"
-click = "==8.1.3"
-flake8 = "==6.0.0"
-flask = "==2.2.3"
-flask-basicauth = "==0.2.0"
-greenlet = "==2.0.2"
-gunicorn = "==20.1.0"
-idna = "==3.4"
-itsdangerous = "==2.1.2"
-jinja2 = "==3.1.2"
-mariadb = "==1.1.6"
-markupsafe = "==2.1.2"
-mccabe = "==0.7.0"
-mysql = "==0.0.3"
-mysqlclient = "==2.1.1"
-numpy = "==1.24.2"
-packaging = "==23.0"
-pandas = "==1.5.3"
-pycodestyle = "==2.10.0"
-pyflakes = "==3.0.1"
-pymysql = "==1.0.3"
-python-dateutil = "==2.8.2"
-pytz = "==2023.3"
-requests = "==2.28.2"
-six = "==1.16.0"
-soupsieve = "==2.4"
-sqlalchemy = "==2.0.7"
-toml = "==0.10.2"
-tomli = "==2.0.1"
-typing-extensions = "==4.5.0"
-urllib3 = "==1.26.15"
-werkzeug = "==2.2.3"
+autopep8 = "*"
+beautifulsoup4 = "*"
+bs4 = "*"
+certifi = "*"
+charset-normalizer = "*"
+click = "*"
+flake8 = "*"
+flask = "*"
+flask-basicauth = "*"
+greenlet = "*"
+gunicorn = "*"
+idna = "*"
+itsdangerous = "*"
+jinja2 = "*"
+mariadb = "*"
+markupsafe = "*"
+mccabe = "*"
+mysql = "*"
+mysqlclient = "*"
+numpy = "*"
+packaging = "*"
+pandas = "*"
+pycodestyle = "*"
+pyflakes = "*"
+pymysql = "*"
+python-dateutil = "*"
+pytz = "*"
+requests = "*"
+six = "*"
+soupsieve = "*"
+sqlalchemy = "*"
+toml = "*"
+tomli = "*"
+typing-extensions = "*"
+urllib3 = "*"
+werkzeug = "*"
 
 [dev-packages]
 
 [requires]
-python_version = "3.9"
-python_full_version = "3.9.17"
+python_version = "3.11"
+python_full_version = "3.11.7"

backend/Procfile

@@ -1 +0,0 @@
-web: gunicorn wsgi:app

backend/app.py

@@ -32,11 +32,9 @@ def favicon():
 @nocache
 def enqueue():
     if not request.json:
-        print(request.data)
         abort(400)
     client_id = request.json['client_id']
     if not helpers.is_valid_uuid(client_id):
-        print(request.data)
         abort(400)
     name = request.json['name'].strip()
     song_id = request.json['id']
@@ -46,11 +44,9 @@ def enqueue():
     else:
         if helpers.get_accept_entries(app):
             if not request.json:
-                print(request.data)
                 abort(400)
             client_id = request.json['client_id']
             if not helpers.is_valid_uuid(client_id):
-                print(request.data)
                 abort(400)
             name = request.json['name']
             song_id = request.json['id']
@@ -203,7 +199,6 @@ def get_stats():
 # Return data from long_term_stats as csv
 def get_stats_csv():
     db_result = database.get_long_term_stats()
-    print(db_result)
     csv = "Id,Playbacks\n"
     for row in db_result:
         csv += str(row[0]) + "," + str(row[1]) + "\n"
@@ -258,14 +253,11 @@ def delete_entry_admin(entry_id):
 @nocache
 def delete_entry_user(entry_id):
     if not request.json:
-        print(request.data)
         abort(400)
     client_id = request.json['client_id']
     if not helpers.is_valid_uuid(client_id):
-        print(request.data)
         abort(400)
     if database.get_raw_entry(entry_id)[3] != client_id:  # type: ignore
-        print(request.data)
         abort(403)
     if database.delete_entry(entry_id):
         return Response('{"status": "OK"}', mimetype='text/json')
@@ -278,7 +270,6 @@ def delete_entry_user(entry_id):
 @basic_auth.required
 def delete_entries():
     if not request.json:
-        print(request.data)
         abort(400)
         return
     updates = database.delete_entries(request.json)

backend/database.py

@@ -298,8 +298,7 @@ def transfer_playbacks():
                     ON DUPLICATE KEY
                     UPDATE Playbacks = lts.Playbacks + VALUES(Playbacks);
                     """)
-        result = conn.execute(stmt)
-        print(result)
+        conn.execute(stmt)
         conn.commit()
     return True
 

backend/requirements.txt

@@ -1,36 +1,40 @@
-autopep8~=2.0.2
-beautifulsoup4~=4.12.0
-bs4~=0.0.1
-certifi~=2022.12.7
-charset-normalizer~=3.1.0
-click~=8.1.3
-flake8~=6.0.0
-Flask~=2.3.2
-Flask-BasicAuth~=0.2.0
-greenlet~=2.0.2
-gunicorn~=20.1.0
-idna~=3.4
-itsdangerous~=2.1.2
-Jinja2~=3.1.2
-mariadb~=1.1.6
-MarkupSafe~=2.1.2
-mccabe~=0.7.0
-mysql~=0.0.3
-mysqlclient~=2.1.1
-numpy~=1.24.2
-packaging~=23.0
-pandas~=1.5.3
-pycodestyle~=2.10.0
-pyflakes~=3.0.1
-PyMySQL~=1.0.3
-python-dateutil~=2.8.2
-pytz~=2023.3
-requests~=2.31.0
-six~=1.16.0
-soupsieve~=2.4
-SQLAlchemy~=2.0.7
-toml~=0.10.2
-tomli~=2.0.1
-typing_extensions~=4.5.0
-urllib3~=1.26.15
-Werkzeug~=3.0.0
+autopep8==2.0.4
+beautifulsoup4==4.12.3
+blinker==1.7.0
+bs4==0.0.2
+certifi==2024.2.2
+charset-normalizer==3.3.2
+click==8.1.7
+flake8==7.0.0
+Flask==3.0.2
+Flask-BasicAuth==0.2.0
+greenlet==3.0.3
+gunicorn==21.2.0
+idna==3.6
+itsdangerous==2.1.2
+Jinja2==3.1.3
+mariadb==1.1.10
+MarkupSafe==2.1.5
+mccabe==0.7.0
+mysql==0.0.3
+mysqlclient==2.2.4
+numpy==1.26.4
+packaging==23.2
+pandas==2.2.0
+pipfile-upgrade==0.0.2
+pycodestyle==2.11.1
+pyflakes==3.2.0
+PyMySQL==1.1.0
+python-dateutil==2.8.2
+pytz==2024.1
+requests==2.31.0
+six==1.16.0
+soupsieve==2.5
+SQLAlchemy==2.0.27
+toml==0.10.2
+tomli==2.0.1
+tomlkit==0.12.3
+typing_extensions==4.9.0
+tzdata==2024.1
+urllib3==2.2.0
+Werkzeug==3.0.1

backend/static/css/style.css

@@ -63,9 +63,14 @@ body {
   width: 100%;
 }
 
+.table {
+  color: var(--text-color);
+}
+
 table td {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--text-color);
 }
 
 table.entries tbody tr[data-index="0"] {
@@ -234,5 +239,8 @@ pre {
     /* Toasts */
     --toast-background-color: #232323;
     --toast-text-color: #f5f5f5;
+
+    /* Tables */
+    --table-border-color: #232323;
   }
 }

backend/templates/base.html

@@ -13,7 +13,7 @@
     <title>{% block title %}{% endblock %} - KaraoQueue</title>
 
     <!-- Bootstrap-Tables -->
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.css">
 
     <!-- Bootstrap-Toaster-->
     <link rel="stylesheet"
@@ -22,8 +22,8 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css"
-        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="static/css/style.css" rel="stylesheet">
@@ -86,7 +86,7 @@
             {% endif %}
             <a href="https://github.com/PhoenixTwoFive/karaoqueue" class="ml-1 mr-1"><i
                     class="fab fa-github mr-1"></i><span>Github</span></a>
-            <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-23 - <span id="myName">Phillip
+            <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-24 - <span id="myName">Phillip
                 Kühne</span></span>
         </div>
     </footer>
@@ -101,15 +101,15 @@
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"
         integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
         crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"
-        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
+        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
         crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
         integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
         </script>
-    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
+    <script src="https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.js"></script>
     <script
-        src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
+        src="https://unpkg.com/bootstrap-table@1.22.2/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
     <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/js/bootstrap-toaster.min.js"
@@ -187,6 +187,14 @@
             return entries;
         }
 
+        function dataRequestQueueAndDestroyTooltips(params) {
+          document.querySelectorAll(".tooltip[role='tooltip']").forEach((tooltip) => tooltip.remove());
+          var base_url = "/api/queue"
+          $.get(base_url).then((res) => {
+            params.success(res);
+          });
+        }
+
     </script>
 </body>
 

backend/templates/main.html

@@ -4,7 +4,7 @@
 <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-ajax="dataRequestQueueAndDestroyTooltips"
         data-pagination="true"
         data-classes="table"
     data-show-refresh="false"

backend/templates/main_admin.html

@@ -22,7 +22,7 @@
     <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">
+        data-ajax="dataRequestQueueAndDestroyTooltips" data-show-refresh="true" data-auto-refresh="true" data-auto-refresh-interval="10">
         <thead>
             <tr>
                 <th data-field="state" data-checkbox="true"></th>
@@ -153,7 +153,7 @@
         $.ajax({
             type: 'POST',
             url: '/api/entries/delete',
-            data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
+            data: JSON.stringify(ids),
             error: function () {
                 bootbox.alert({
                     message: "Fehler beim Löschen der Eintragungen.",