From b76fcfd8e471534e3b1d3ca7f85e9e1f2d8ff6f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <mail@phillipkuehne.de>
Date: Fri, 28 Apr 2023 12:40:28 +0200
Subject: [PATCH 1/3] Add Copy functionality and corresponding toasts

---
 backend/templates/base.html       | 24 +++++++++++++-----------
 backend/templates/main.html       |  8 +++++++-
 backend/templates/main_admin.html | 22 +++++++++++++++++++---
 backend/templates/songlist.html   | 10 +++++++---
 4 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/backend/templates/base.html b/backend/templates/base.html
index 54676d3..afd2047 100644
--- a/backend/templates/base.html
+++ b/backend/templates/base.html
@@ -15,9 +15,12 @@
     <!-- Bootstrap-Tables -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
 
+    <!-- Bootstrap-Toaster-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
+        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     <!-- 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">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="static/css/style.css" rel="stylesheet">
@@ -88,16 +91,12 @@
     <!-- 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/jquery/3.6.4/jquery.min.js"
+        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></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://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" 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>
@@ -105,6 +104,9 @@
     <script
         src="https://unpkg.com/bootstrap-table@1.21.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"
+        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {% block extrajs %}{% endblock %}
     <script>
         $(document).ready(function () {
diff --git a/backend/templates/main.html b/backend/templates/main.html
index 7af0e06..0cbef50 100644
--- a/backend/templates/main.html
+++ b/backend/templates/main.html
@@ -59,7 +59,13 @@ function requestDeletionAsUser(id) {
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function(result) {
-                bootbox.alert("Eintrag zurückgezogen!")
+                toast = {
+                  title: "Erfolgreich zurückgezogen",
+                  message: "Eintrag wurde gelöscht",
+                  status: TOAST_STATUS.SUCCESS,
+                  timeout: 5000
+                }
+                Toast.create(toast);
                 location.reload()
             }
         })
diff --git a/backend/templates/main_admin.html b/backend/templates/main_admin.html
index 64b9252..16ad86f 100644
--- a/backend/templates/main_admin.html
+++ b/backend/templates/main_admin.html
@@ -26,9 +26,9 @@
         <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-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-formatter="TableActions">Aktionen</th>
             </tr>
         </thead>
@@ -196,10 +196,26 @@
         return outerHTML;
     }
 
+    function CopyFormatter(value, row, index) {
+        return "<span data-toggle='tooltip' data-placement='right' title='📋' onclick='event.stopPropagation();$(this).tooltip(\"dispose\");copyAndNotify(\""+value+"\")'>"+value+"</span>";
+    }
+
     function getIdSelections() {
         return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
             return row.entry_ID
         })
     }
+
+    function copyAndNotify(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            let toast = {
+                title: "Kopiert",
+                message: text,
+                status: 1,
+                timeout: 5000
+              };
+            Toast.create(toast);
+            })
+    }
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/backend/templates/songlist.html b/backend/templates/songlist.html
index 7392a81..10df759 100644
--- a/backend/templates/songlist.html
+++ b/backend/templates/songlist.html
@@ -99,9 +99,13 @@
         enqueue(localStorage.getItem("clientId"),id, name, function (response) {
             console.log(response);
             entryID = response["entry_id"];
-            bootbox.alert({
-                message: "Deine Eintragung wurde erfolgreich vorgenommen.",
-            });
+            toast = {
+                title: "Erfolgreich eingetragen",
+                message: "Du wurdest erfolgreich eingetragen.",
+                status: TOAST_STATUS.SUCCESS,
+                timeout: 5000
+            }
+            Toast.create(toast);
             console.log("Entry ID: " + entryID);
             addEntry(entryID);
             $("#enqueueModal").modal('hide');

From f2b4611ea658ea43e169e87a2aa9157f86245446 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <mail@phillipkuehne.de>
Date: Fri, 28 Apr 2023 12:52:03 +0200
Subject: [PATCH 2/3] Remove problematic tooltip and debug log

---
 backend/templates/main_admin.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/backend/templates/main_admin.html b/backend/templates/main_admin.html
index 16ad86f..ac98b48 100644
--- a/backend/templates/main_admin.html
+++ b/backend/templates/main_admin.html
@@ -185,8 +185,6 @@
         });
     }
     function TableActions(value, row, index) {
-        console.log("Value: " + value + ", Row: " + row + ", Index: " + index)
-        console.log(row)
         let outerHTML = ""
         if (row.Transferred == 1) {
             outerHTML = "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Markierung zurückziehen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-backward\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_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=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry('" + row.Name + "'," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
@@ -197,7 +195,7 @@
     }
 
     function CopyFormatter(value, row, index) {
-        return "<span data-toggle='tooltip' data-placement='right' title='📋' onclick='event.stopPropagation();$(this).tooltip(\"dispose\");copyAndNotify(\""+value+"\")'>"+value+"</span>";
+        return "<span onclick='copyAndNotify(\""+value+"\")'>"+value+"</span>";
     }
 
     function getIdSelections() {

From d0d8e41b4863b8c42743bf978559cef7be659a16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <mail@phillipkuehne.de>
Date: Fri, 28 Apr 2023 12:53:03 +0200
Subject: [PATCH 3/3] Indicate copyability of table text Indicate copyability
 on click of table contents by highlighting hovered element

---
 backend/static/css/style.css | 365 ++++++++++++++++++-----------------
 1 file changed, 186 insertions(+), 179 deletions(-)

diff --git a/backend/static/css/style.css b/backend/static/css/style.css
index 5d0fb40..52298d9 100644
--- a/backend/static/css/style.css
+++ b/backend/static/css/style.css
@@ -1,4 +1,180 @@
 :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: #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;
+
+  /* Misc */
+  --copy-highlight-color: rgba(251, 255, 0, 0.6);
+}
+
+
+body {
+  padding-top: 5rem;
+  background-color: var(--background-color);
+}
+
+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: var(--background-color-var);
+}
+
+.topbutton {
+  width: 100%;
+}
+
+table td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+table.entries tbody tr[data-index="0"] {
+  background-color: #007bff80;
+  font-weight: 600;
+}
+
+table.entries tbody tr[data-index="1"] {
+  background-color: #007bff40;
+  font-weight: 500;
+}
+
+table.entries tbody tr[data-index="2"] {
+  background-color: #007bff20;
+  font-weight: 400;
+}
+
+table.entries tbody tr[data-index="3"] {
+  background-color: #007bff10;
+}
+
+table td:first-child {
+  max-width: 200px !important;
+}
+
+.fa-solid {
+  vertical-align: auto;
+}
+
+@media (min-width: 768px) {
+  .topbutton {
+    width: auto;
+  }
+}
+
+@media print {
+  body {
+    font-size: 1.3em;
+  }
+
+  .footer {
+    display: none !important;
+  }
+
+  .admincontrols {
+    display: none;
+  }
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.footer {
+  background-color: var(--background-color-var);
+}
+
+.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)
+}
+
+table td.buttoncell {
+  text-align: end;
+}
+
+.close {
+  color: var(--text-color)
+}
+
+pre {
+  color: var(--text-color-var)
+}
+
+#entrytable td>span:hover {
+  background-color: var(--copy-highlight-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
     /* Navbar */
     --navbar-background-color: #343a40;
     --navbar-text-color: rgba(255, 255, 255, .5);
@@ -6,189 +182,20 @@
     --navbar-text-color-active: rgba(255, 255, 255, 1);
 
     /* Common */
-    --background-color: #ffffff;
-    --background-color-var: #f5f5f5;
-    --text-color: #212529;
-    --text-color-var: #343a40;
+    --background-color: #121212;
+    --background-color-var: #232323;
+    --text-color: #f5f5f5;
+    --text-color-var: #a2a2a2;
 
     /* Modals */
-    --modal-background-color: #ffffff;
-    --modal-separator-color: #dee2e6;
-    --modal-close-color: #212529;
+    --modal-background-color: #121212;
+    --modal-separator-color: #232323;
+    --modal-close-color: #f5f5f5;
 
     /* Tables */
-    --table-border-color: #dee2e6;
+    --table-border-color: #232323;
 
     /* Input */
-    --input-background-color: #ffffff;
-}
-
-
-body {
-    padding-top: 5rem;
-    background-color: var(--background-color);
-}
-
-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: var(--background-color-var);
-}
-
-.topbutton {
-    width: 100%;
-}
-
-table td {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-table.entries tbody tr[data-index="0"] {
-    background-color: #007bff80;
-    font-weight: 600;
-}
-
-table.entries tbody tr[data-index="1"] {
-    background-color: #007bff40;
-    font-weight: 500;
-}
-
-table.entries tbody tr[data-index="2"] {
-    background-color: #007bff20;
-    font-weight: 400;
-}
-
-table.entries tbody tr[data-index="3"] {
-    background-color: #007bff10;
-}
-
-table td:first-child {
-    max-width: 200px !important;
-}
-
-.fa-solid {
-    vertical-align: auto;
-}
-
-@media (min-width: 768px) {
-    .topbutton {
-        width: auto;
-    }
-}
-
-@media print {
-    body {
-        font-size: 1.3em;
-    }
-
-    .footer {
-        display: none !important;
-    }
-
-    .admincontrols {
-        display: none;
-    }
-}
-
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-}
-
-.footer {
-    background-color: var(--background-color-var);
-}
-
-.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)
-}
-
-table td.buttoncell {
-    text-align: end;
-}
-
-.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;
-    }
+    --input-background-color: #343434;
+  }
 }
\ No newline at end of file