From ae2cff0c3ae44d5e9c9a26f76ba1bc96b098cafc Mon Sep 17 00:00:00 2001
From: Max Hohlfeld <maxhohlfeld@posteo.de>
Date: Fri, 30 Aug 2024 23:15:00 +0200
Subject: [PATCH] refactor: color of dialog and event listening

---
 build.rs                          |  4 ++++
 src/endpoints/user/post_toggle.rs |  4 ++--
 src/filters.rs                    |  2 --
 static/package-lock.json          |  8 --------
 static/package.json               |  1 -
 static/style.scss                 | 14 ++++----------
 static/utils.js                   | 11 +++++++++++
 templates/base.html               |  3 ++-
 templates/user/overview.html      | 11 +----------
 9 files changed, 24 insertions(+), 34 deletions(-)
 create mode 100644 static/utils.js

diff --git a/build.rs b/build.rs
index 5f458cf1..d9da102e 100644
--- a/build.rs
+++ b/build.rs
@@ -36,6 +36,10 @@ fn main() -> std::io::Result<()> {
         nm_path.join("sweetalert2/dist/sweetalert2.min.js"),
         dist_path.join("sweetalert2.min.js"),
     )?;
+    copy(
+        Path::new("./static/utils.js"),
+        dist_path.join("utils.js"),
+    )?;
     copy(
         Path::new("./static/brass.jpeg"),
         dist_path.join("brass.jpeg"),
diff --git a/src/endpoints/user/post_toggle.rs b/src/endpoints/user/post_toggle.rs
index 7a1ee840..df554f22 100644
--- a/src/endpoints/user/post_toggle.rs
+++ b/src/endpoints/user/post_toggle.rs
@@ -56,7 +56,7 @@ pub async fn post(
                       </span>
                       <span>Entsperren</span>
                     <div id="user-{id}-locked" hx-swap-oob="true">ja</div>
-                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete"  hx-trigger="confirmed" onClick="fireConfirmModal(event)">
+                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete"  hx-trigger="confirmed">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />
@@ -74,7 +74,7 @@ pub async fn post(
                       </span>
                       <span>Sperren</span>
                     <div id="user-{id}-locked" hx-swap-oob="true">nein</div>
-                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" disabled hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed" onClick="fireConfirmModal(event)">
+                    <button id="user-{id}-delete" hx-swap-oob="true" class="button is-danger is-light" disabled hx-delete="/users/{id}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />
diff --git a/src/filters.rs b/src/filters.rs
index 23fb457a..6049564e 100644
--- a/src/filters.rs
+++ b/src/filters.rs
@@ -18,9 +18,7 @@ pub fn cond_show(show: &bool, text: &str) -> askama::Result<String> {
 
 pub fn insert_value(option: &Option<String>) -> askama::Result<String> {
     if let Some(val) = option {
-        println!("{val}");
         let s = format!(r#"value="{val}""#);
-        println!("{s}");
         return Ok(s);
     }
 
diff --git a/static/package-lock.json b/static/package-lock.json
index 45459faf..7d489163 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -5,7 +5,6 @@
   "packages": {
     "": {
       "devDependencies": {
-        "@sweetalert2/theme-bulma": "^5.0.18",
         "bulma": "^1.0.1",
         "feather-icons": "^4.29.2",
         "htmx.org": "^1.9.12",
@@ -13,13 +12,6 @@
         "sweetalert2": "^11.12.4"
       }
     },
-    "node_modules/@sweetalert2/theme-bulma": {
-      "version": "5.0.18",
-      "resolved": "https://registry.npmjs.org/@sweetalert2/theme-bulma/-/theme-bulma-5.0.18.tgz",
-      "integrity": "sha512-GmlNOFmgF9bw9XMAEz6kLWglvSLuNMtr/ThTYW6mEKkQw9M8s1WB/1H7s/nIn2IgamgOlz/fhDvDqX9ne5cgQg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
diff --git a/static/package.json b/static/package.json
index 9f534af4..b8254361 100644
--- a/static/package.json
+++ b/static/package.json
@@ -1,6 +1,5 @@
 {
   "devDependencies": {
-    "@sweetalert2/theme-bulma": "^5.0.18",
     "bulma": "^1.0.1",
     "feather-icons": "^4.29.2",
     "htmx.org": "^1.9.12",
diff --git a/static/style.scss b/static/style.scss
index 5fc3eac5..60a7a1e7 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -1,16 +1,12 @@
 // Set your brand colors
-$purple: #8a4d76;
-$pink: #fa7c91;
-$brown: #757763;
-$beige-light: #d0d1cd;
-$beige-lighter: #eff0eb;
+$crimson: #00d1b2;//#B80F0A;
 
 // Override global Sass variables from the /utilities folder
-@use "bulma/sass/utilities" with ($family-primary: '"Nunito", sans-serif'
+@use "bulma/sass/utilities" with ($family-primary: '"Nunito", sans-serif',
+  $primary: $crimson,
 );
 // $grey-dark: $brown,
 // $grey-light: $beige-light,
-// $primary: $purple,
 // $link: $pink,
 // $control-border-width: 2px
 
@@ -45,8 +41,7 @@ $beige-lighter: #eff0eb;
 @forward "bulma/sass/themes";
 
 // TODO: bulma theme for sweetalert looks and feels outdated
-// @import "@sweetalert2/theme-bulma/bulma.scss";
-@import "sweetalert2/src/sweetalert2.scss";
+@use "sweetalert2/src/sweetalert2.scss" with ($swal2-confirm-button-background-color: $crimson);
 
 .feather {
   width: 24px;
@@ -85,4 +80,3 @@ $beige-lighter: #eff0eb;
 section.htmx-request {
   visibility: hidden;
 }
-
diff --git a/static/utils.js b/static/utils.js
new file mode 100644
index 00000000..80104c89
--- /dev/null
+++ b/static/utils.js
@@ -0,0 +1,11 @@
+const fireConfirmModal = (event) => {
+	Swal.fire({ title: 'Wirklich löschen?', showCancelButton: true, cancelButtonText: 'Abbrechen', icon: 'warning', confirmButtonText: "Löschen", showCloseButton: true })
+		.then((result) => { if (result.isConfirmed) { htmx.trigger(event.target, 'confirmed'); } });
+}
+
+
+document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal));
+
+document.addEventListener("htmx:afterSwap", () => {
+	document.querySelectorAll("button[hx-trigger='confirmed']").forEach((value) => value.addEventListener("click", fireConfirmModal));
+});
diff --git a/templates/base.html b/templates/base.html
index 2298ef26..b7546821 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -9,6 +9,7 @@
   <script src="/static/htmx.min.js"></script>
   <script src="/static/response-targets.js"></script>
   <script src="/static/sweetalert2.min.js"></script>
+  <script type="module" src="/static/utils.js"></script>
 </head>
 
 <body class="hero is-fullheight" hx-ext="response-targets">
@@ -24,7 +25,7 @@
       </div>
 
       <p class="level-item">
-        Brass ist freie and quelloffene Software
+        Brass ist freie und quelloffene Software
       </p>
 
       <div class="level-right">
diff --git a/templates/user/overview.html b/templates/user/overview.html
index 07c31739..8ad0e070 100644
--- a/templates/user/overview.html
+++ b/templates/user/overview.html
@@ -108,8 +108,7 @@
                   <span>Bearbeiten</span>
                 </a>
                 <button id="user-{{ u.id }}-delete" class="button is-danger is-light" {% if !u.locked %}disabled{% endif
-                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed"
-                  onClick="fireConfirmModal(event)">
+                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
                   <span class="icon">
                     <svg class="feather">
                       <use href="/static/feather-sprite.svg#x-circle" />
@@ -127,12 +126,4 @@
     </div>
   </div>
 </section>
-
-<script>
-  const fireConfirmModal = (event) => {
-    Swal.fire({title: 'Den Nutzer wirklich löschen?', showCancelButton: true, cancelButtonText: 'Abbrechen', icon: 'warning', confirmButtonText: "Löschen", showCloseButton: true})
-      .then((result) => {if (result.isConfirmed) {htmx.trigger(event.target, 'confirmed');} });
-  }
-
-</script>
 {% endblock %}