From e443cdb35a59dbb001dc7eff880dddaa954d775b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <mail@phillipkuehne.de>
Date: Wed, 4 Oct 2023 00:11:42 +0000
Subject: [PATCH] Dark theme Toast notifications Fixes #59

---
 backend/static/css/style.css      | 18 +++++++
 backend/templates/main.html       | 88 +++++++++++++++----------------
 backend/templates/main_admin.html | 12 ++---
 3 files changed, 67 insertions(+), 51 deletions(-)

diff --git a/backend/static/css/style.css b/backend/static/css/style.css
index b58490d..bbcb86a 100644
--- a/backend/static/css/style.css
+++ b/backend/static/css/style.css
@@ -24,6 +24,10 @@
 
   /* Misc */
   --copy-highlight-color: rgba(251, 255, 0, 0.6);
+
+  /* Toasts */
+  --toast-background-color: #ffffff;
+  --toast-text-color: #212529;
 }
 
 
@@ -188,6 +192,16 @@ pre {
 );
 }
 
+.toast {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
+.toast-header {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     /* Navbar */
@@ -212,5 +226,9 @@ pre {
 
     /* Input */
     --input-background-color: #343434;
+
+    /* Toasts */
+    --toast-background-color: #232323;
+    --toast-text-color: #f5f5f5;
   }
 }
\ No newline at end of file
diff --git a/backend/templates/main.html b/backend/templates/main.html
index 0cbef50..0e0e1ae 100644
--- a/backend/templates/main.html
+++ b/backend/templates/main.html
@@ -1,5 +1,3 @@
-
-
 {% extends 'base.html' %}
 {% block title %}Warteliste{% endblock %}
 {% block content %}
@@ -9,7 +7,7 @@
         data-url="/api/queue"
         data-pagination="true"
         data-classes="table"
-        data-show-refresh="false"
+    data-show-refresh="false"
         data-auto-refresh="true"
         data-auto-refresh-interval="10">
     <thead>
@@ -25,53 +23,53 @@
 {% endblock %}
 {% block extrajs %}
 <script>
-$.getJSON("/api/entries/accept", (data) => {
-    if (data["value"]==0) {
-        $("#bfb").addClass("disabled")
-        $("#bfb").prop("aria-disabled",true);
-        $("#bfb").prop("tabindex","-1");
-        $("#bfb").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='bottom'></span>");
-                $(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
-                $('[data-toggle="tooltip"]').tooltip()
-    }
-})
-
-function TableActionsFormatter(value,row,index) {
-    console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
-    console.log(row)
-    if (getOwnedEntries().includes(row.entry_ID)) {
-      return "<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Eintrag zurückziehen' onclick=\"event.stopPropagation();$(this).tooltip('dispose');requestDeletionAsUser("+row["entry_ID"]+")\"><i class='fas fa-trash'></i></button>"
-    }
-    return ""
-}
-
-function requestDeletionAsUser(id) {
-  bootbox.confirm("Wirklich den Eintrag zurückziehen? Das könnte zu einer langen Wartezeit führen!", function (result) {
-    if (result) {
-        payload = {
-            "client_id": localStorage.getItem("clientId"),
-            "entry_id": id
+    $.getJSON("/api/entries/accept", (data) => {
+        if (data["value"] == 0) {
+            $("#bfb").addClass("disabled")
+            $("#bfb").prop("aria-disabled", true);
+            $("#bfb").prop("tabindex", "-1");
+            $("#bfb").wrap("<span class='tooltip-span' tabindex='0' data-toggle='tooltip' data-placement='bottom'></span>");
+            $(".tooltip-span").prop("title", "Eintragungen sind leider momentan nicht möglich.")
+            $('[data-toggle="tooltip"]').tooltip()
         }
-        $.ajax({
-            url: "/api/entries/delete/"+id,
-            type: "POST",
-            data: JSON.stringify(payload),
-            contentType: "application/json; charset=utf-8",
-            dataType: "json",
-            success: function(result) {
-                toast = {
-                  title: "Erfolgreich zurückgezogen",
-                  message: "Eintrag wurde gelöscht",
-                  status: TOAST_STATUS.SUCCESS,
-                  timeout: 5000
+    })
+
+    function TableActionsFormatter(value, row, index) {
+        console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
+        console.log(row)
+        if (getOwnedEntries().includes(row.entry_ID)) {
+            return "<button type='button' class='btn btn-danger' data-toggle='tooltip' data-placement='top' title='Eintrag zurückziehen' onclick=\"event.stopPropagation();$(this).tooltip('dispose');requestDeletionAsUser(" + row["entry_ID"] + ")\"><i class='fas fa-trash'></i></button>"
+        }
+        return ""
+    }
+
+    function requestDeletionAsUser(id) {
+        bootbox.confirm("Wirklich den Eintrag zurückziehen? Das könnte zu einer langen Wartezeit führen!", function (result) {
+            if (result) {
+                payload = {
+                    "client_id": localStorage.getItem("clientId"),
+                    "entry_id": id
                 }
-                Toast.create(toast);
-                location.reload()
+                $.ajax({
+                    url: "/api/entries/delete/" + id,
+                    type: "POST",
+                    data: JSON.stringify(payload),
+                    contentType: "application/json; charset=utf-8",
+                    dataType: "json",
+                    success: function (result) {
+                        toast = {
+                            title: "Erfolgreich zurückgezogen",
+                            message: "Eintrag wurde gelöscht",
+                            status: TOAST_STATUS.SUCCESS,
+                            timeout: 5000
+                        }
+                        Toast.create(toast);
+                        location.reload()
+                    }
+                })
             }
         })
     }
-  })
-}
 
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/backend/templates/main_admin.html b/backend/templates/main_admin.html
index 4649063..468342d 100644
--- a/backend/templates/main_admin.html
+++ b/backend/templates/main_admin.html
@@ -27,8 +27,8 @@
             <tr>
                 <th data-field="state" data-checkbox="true"></th>
                 <th scope="col" data-field="Name" data-formatter="CopyFormatter">Name</th>
-                <th scope="col" data-field="Title"data-formatter="CopyFormatter">Song</th>
-                <th scope="col" data-field="Artist"data-formatter="CopyFormatter">Künstler</th>
+                <th scope="col" data-field="Title" data-formatter="CopyFormatter">Song</th>
+                <th scope="col" data-field="Artist" data-formatter="CopyFormatter">Künstler</th>
                 <th scope="col" data-formatter="TableActions">Aktionen</th>
             </tr>
         </thead>
@@ -195,8 +195,8 @@
     }
 
     function CopyFormatter(value, row, index) {
-        let escapedString = value.replace("\"","\\\"").replace("\'", "\\\'")
-        return "<span onclick='copyAndNotify(this.innerText)'>"+value+"</span>";
+        let escapedString = value.replace("\"", "\\\"").replace("\'", "\\\'")
+        return "<span onclick='copyAndNotify(this.innerText)'>" + value + "</span>";
     }
 
     function getIdSelections() {
@@ -212,9 +212,9 @@
                 message: text,
                 status: 1,
                 timeout: 5000
-              };
+            };
             Toast.create(toast);
-            })
+        })
     }
 </script>
 {% endblock %}
\ No newline at end of file