Fix stuck tooltips

Fix stuck tooltips by implementing custom data  request function, and destroying existing tooltips on new data load.

Fixes #81

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

backend/Procfile

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

backend/database.py

@@ -62,7 +62,6 @@ def create_schema():
     create_long_term_stats_table()
     create_list_view()
     create_done_song_view()
-    init_event_id()
 
 
 def create_entry_table():

backend/requirements.txt

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

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"
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
-        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="static/css/style.css" rel="stylesheet">
@@ -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"
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
-        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
+        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.",