chore: added model delete related to #2

views/js/main.js

@@ -1,14 +1,49 @@
 function load() {
-  for (const elm of document.querySelectorAll("form > button")) {
-    elm.addEventListener('click', (e) => {
-      e.target.parentElement.classList.add("submitted");
-    });
-  }
+    for (const elm of document.querySelectorAll("form > button")) {
+        elm.addEventListener('click', (e) => {
+            e.target.parentElement.classList.add("submitted");
+        });
+    }
+    for (const elm of document.querySelectorAll("button.icon")) {
+        elm.addEventListener('click', (e) => {
+            e.preventDefault()
+            const input = document.querySelectorAll('form .file-upload input[type="file"]')[0];
+            if (input) {
+                input.click();
+                input.addEventListener('change', (e) => {
+                    const file = input.files[0];
+                    if (!file) return;
+                    elm.setAttribute("disabled", "true");
+
+                    const spanToReplace = document.querySelector('.file-upload .icon span');
+                    const imgToReplace = document.querySelector('.file-upload .icon img');
+                    if (!imgToReplace || !spanToReplace) return;
+
+                    if (imgToReplace.getAttribute("replace")) {
+                        const fileReader = new FileReader();
+                        fileReader.onloadend = () => {
+                            imgToReplace.setAttribute("src", fileReader.result)
+                            elm.classList.add("adapt");
+                        }
+                        fileReader.readAsDataURL(file)
+                    }
+
+                    if (spanToReplace.getAttribute("replace")) {
+                        spanToReplace.innerHTML = spanToReplace.getAttribute("replace")
+                    }
+                })
+            }
+        });
+    }
 }
 window.onload = load;
 htmx.on('htmx:afterSwap', load);
 htmx.on('htmx:beforeSwap', (env) => {
     if (env.detail.xhr.status === 401) {
         window.location = "/login"
-    }
+    } else
+        // 309 is the code I selected for html to htmlfull change
+        if (env.detail.xhr.status === 309) {
+            env.detail.target = htmx.find(".app")
+        }
 });