wip

Defacto2 · Aug 3, 2024 · ac24edd · ac24edd
1 parent eacecce
commit ac24edd
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 9 deletions.
diff --git a/assets/js/editor-assets.js b/assets/js/editor-assets.js
@@ -56,14 +56,87 @@ import { progress } from "./uploader.mjs";
 
   // New file download form event listener.
   document.body.addEventListener("htmx:afterRequest", function (event) {
-    afterRequest(
+    afterFormRequest(
       event,
       `artifact-editor-dl-form`,
       `artifact-editor-dl-up`,
       `artifact-editor-dl-feedback`
     );
+    afterDeleteRequest(
+      event,
+      "artifact-editor-image-delete",
+      "artifact-editor-image-feedback"
+    );
+    afterLinkRequest(
+      event,
+      "artifact-editor-link-delete",
+      "artifact-editor-link-feedback"
+    );
   });
 
+  function afterDeleteRequest(event, inputId, feedbackId) {
+    if (event.detail.elt === null) return;
+    if (event.detail.elt.id !== `${inputId}`) return;
+    const feedback = document.getElementById(feedbackId);
+    if (feedback === null) {
+      throw new Error(
+        `The htmx successful feedback element ${feedbackId} is null`
+      );
+    }
+    const errClass = "text-danger";
+    const okClass = "text-success";
+    const xhr = event.detail.xhr;
+    if (event.detail.successful) {
+      feedback.innerText = `The delete request was successful, about to refresh the page.`;
+      feedback.classList.remove(errClass);
+      feedback.classList.add(okClass);
+      setTimeout(() => {
+        location.reload();
+      }, 500);
+      return;
+    }
+    if (event.detail.failed && event.detail.xhr) {
+      feedback.classList.add(errClass);
+      feedback.innerText =
+        `Something on the server is not working, ` +
+        `${xhr.status} status: ${xhr.responseText}.`;
+      return;
+    }
+    feedback.classList.add(errClass);
+    feedback.innerText =
+      "Something with the browser is not working," +
+      " please try again or refresh the page.";
+  }
+
+  function afterLinkRequest(event, inputId, feedbackId) {
+    if (event.detail.elt === null) return;
+    if (event.detail.elt.id !== `${inputId}`) return;
+    const feedback = document.getElementById(feedbackId);
+    if (feedback === null) {
+      throw new Error(
+        `The htmx successful feedback element ${feedbackId} is null`
+      );
+    }
+    const errClass = "text-danger";
+    const xhr = event.detail.xhr;
+    if (event.detail.successful) {
+      feedback.innerText = `${xhr.responseText}`;
+      feedback.classList.remove(errClass);
+      return;
+    }
+    if (event.detail.failed && event.detail.xhr) {
+      feedback.classList.add(errClass);
+      feedback.innerText =
+        `Something on the server is not working, ` +
+        `${xhr.status} status: ${xhr.responseText}.`;
+      return;
+    }
+    feedback.classList.add(errClass);
+    feedback.innerText =
+      "Something with the browser is not working," +
+      " please try again or refresh the page.";
+  }
+
   /**
    * The htmx event listener for the artifact editor upload a new file download form.
    * @param {Event} event - The htmx event.
@@ -72,7 +145,7 @@ import { progress } from "./uploader.mjs";
    * @param {string} feedbackName - The feedback name.
    * @returns {void}
    **/
-  function afterRequest(event, formId, inputName, feedbackName) {
+  function afterFormRequest(event, formId, inputName, feedbackName) {
     if (event.detail.elt === null) return;
     if (event.detail.elt.id !== `${formId}`) return;
     const input = document.getElementById(inputName);

diff --git a/handler/app/internal/mf/mf.go b/handler/app/internal/mf/mf.go
@@ -282,12 +282,14 @@ func entryHTML(images, programs, texts bool, rel, sign, size, unid string, bytes
 		`data-bs-title="%s">%s</div>`, rel, rel)
 	if images {
 		htm += `<div class="col col-1 text-end">` +
-			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/preview/copy/%s/%s">`, unid, name) +
+			fmt.Sprintf(`<a class="icon-link align-text-bottom" id="" `+
+				`hx-target="#artifact-editor-comp-feedback" hx-patch="/editor/preview/copy/%s/%s">`, unid, name) +
 			`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
 			`<use xlink:href="/svg/bootstrap-icons.svg#images"></use></svg></a></div>`
 	} else if texts {
 		htm += `<div class="col col-1 text-end">` +
-			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/readme/preview/%s/%s">`, unid, name) +
+			fmt.Sprintf(`<a class="icon-link align-text-bottom" `+
+				`hx-target="#artifact-editor-comp-feedback" hx-patch="/editor/readme/preview/%s/%s">`, unid, name) +
 			`<svg width="16" height="16" fill="currentColor" aria-hidden="true">` +
 			`<use xlink:href="/svg/bootstrap-icons.svg#images"></use></svg></a></div>`
 	} else {
@@ -296,7 +298,8 @@ func entryHTML(images, programs, texts bool, rel, sign, size, unid string, bytes
 	switch {
 	case texts:
 		htm += `<div class="col col-1 text-end">` +
-			fmt.Sprintf(`<a class="icon-link align-text-bottom" hx-patch="/editor/readme/copy/%s/%s">`, unid, name) +
+			fmt.Sprintf(`<a class="icon-link align-text-bottom" `+
+				`hx-target="#artifact-editor-comp-feedback" hx-patch="/editor/readme/copy/%s/%s">`, unid, name) +
 			`<svg class="bi" width="16" height="16" fill="currentColor" aria-hidden="true">` +
 			`<use xlink:href="/svg/bootstrap-icons.svg#file-text"></use></svg></a></div>`
 	case programs:

diff --git a/handler/htmx/artifact.go b/handler/htmx/artifact.go
@@ -139,8 +139,8 @@ func RecordImagesDeleter(c echo.Context, dirs ...string) error {
 			defer os.Remove(name)
 		}
 	}
-	c.Response().Header().Set("HX-Refresh", "true")
-	return c.String(http.StatusOK, "Deleted, refresh the browser.")
+	//c.Response().Header().Set("HX-Refresh", "true")
+	return c.NoContent(http.StatusOK)
 }
 
 func RecordReadmeDeleter(c echo.Context, extraDir string) error {

diff --git a/public/js/editor-assets.min.js b/public/js/editor-assets.min.js
diff --git a/view/app/artifactfile.tmpl b/view/app/artifactfile.tmpl
@@ -163,6 +163,7 @@
 
             </div>
             <div class="container text-begin mb-3">
+              <div class="form-text" id="artifact-editor-comp-feedback"></div>
               <hr class="m-0 mb-3 mt-3">
               {{$modDecompress}}
             </div>
@@ -171,6 +172,11 @@
           <div class="col-xl-6 pb-3 bg-light">
             {{- /*  Image assets  */}}
             <legend>Image assets</legend>
+            <div>
+              <button id="artifact-editor-image-delete" hx-target="#artifact-editor-image-feedback" 
+              hx-delete="/editor/images/{{$unid}}" class="btn btn-link m-0 p-0">Delete image assets</button>
+            </div>
+            <div class="form-text" id="artifact-editor-image-feedback"></div>
             <div class="row row-cols-2 g-1">
               <div class="col-6">
                 <div class="card">
@@ -197,7 +203,6 @@
                   </div>
                   {{$previewImg}}
                 </div>
-                <div class="mt-1"><a href="#file-editor" hx-delete="/editor/images/{{$unid}}">Delete image assets</a></div>
               </div>
               <div class="col-6">
                 <div class="card">