refactor: color of dialog and event listening

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"),

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" />

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);
     }
 

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",

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",

static/style.scss

@@ -1,16 +1,12 @@
 // Set your brand colors
-$purple: #8a4d76;
+$crimson: #00d1b2;//#B80F0A;
-$pink: #fa7c91;
-$brown: #757763;
-$beige-light: #d0d1cd;
-$beige-lighter: #eff0eb;
 
 // 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";
+@use "sweetalert2/src/sweetalert2.scss" with ($swal2-confirm-button-background-color: $crimson);
-@import "sweetalert2/src/sweetalert2.scss";
 
 .feather {
   width: 24px;
@@ -85,4 +80,3 @@ $beige-lighter: #eff0eb;
 section.htmx-request {
   visibility: hidden;
 }
-

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));
+});

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">

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"
+                  %} hx-delete="/users/{{ u.id }}" hx-target="closest tr" hx-swap="delete" hx-trigger="confirmed">
-                  onClick="fireConfirmModal(event)">
                   <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 %}