Disable redaction button and add redaction message on submit

DigitalSlideArchive · Oct 10, 2023 · 42a75a1 · 42a75a1
1 parent d45a572
commit 42a75a1
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 45 deletions.
diff --git a/imagedephi/gui.py b/imagedephi/gui.py
@@ -67,6 +67,7 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
 shutdown_event = asyncio.Event()
 
 app.mount("/assets", StaticFiles(directory="imagedephi/assets"), name="assets")
+app.mount("/js", StaticFiles(directory="imagedephi/js"), name="js")
 
 
 class DirectoryData:

diff --git a/imagedephi/js/redaction.js b/imagedephi/js/redaction.js
@@ -0,0 +1,11 @@
+window.onload = (event) => {
+
+const redactBanner = document.getElementById("redacting");
+const redactButton = document.getElementById("dephi");
+const redactForm = document.getElementById('redact')
+redactForm.addEventListener("submit", () => {
+  redactButton.setAttribute("disabled", "true")
+  redactBanner.classList.remove("hidden")
+})
+
+}
diff --git a/imagedephi/redact/redact.py b/imagedephi/redact/redact.py
@@ -81,7 +81,10 @@ def redact_images(
     show_redaction_plan(input_path)
     with click.progressbar(images_to_redact, label="Redacting Images") as bar:
         for image_file in bar:
-            logger.info(f"Redacting {image_file.name}. Image {output_file_counter} of {output_file_max} images")
+            logger.info(
+                f"""Redacting {image_file.name}.
+                Image {output_file_counter} of {output_file_max} images"""
+            )
             if image_file.suffix in FILE_EXTENSION_MAP:
                 redaction_plan = build_redaction_plan(image_file, base_rules, override_rules)
                 if not redaction_plan.is_comprehensive():

diff --git a/imagedephi/templates/HomePage.html.j2 b/imagedephi/templates/HomePage.html.j2
@@ -67,63 +67,74 @@
         ],
       },
     }
-  </script>
-</head>
-
-<body class="bg-base-300 min-h-screen">
-  <div class="flex">
+    </script>
+    <script type="text/javascript" src="js/redaction.js"></script>
+  </head>
+  <body class="bg-base-300 min-h-screen">
+    <div class="flex">
       <!-- djlint:off-->
       <form method="post" action="{{ url_for('redact') }}"><!-- djlint:on -->
-      <input type="hidden" value="{{ input_directory_data.directory }}" name="input_directory" />
-      <input type="hidden" value="{{ output_directory_data.directory }}" name="output_directory" />
-      <input type="checkbox" class="drawer-toggle" id="side-drawer" />
-      <div class="flex max-w-md">
-        <div class="pl-4 py-4 {{ 'opacity-50' if redacted==True  }}">
-          <div class="bg-base-100 drop-shadow-xl rounded flex flex-col">
-            <div class="flex justify-between content-center p-4 border-b">
-              <div class="max-h6 w-auto self-center">
-                <img src="{{ url_for('assets', path='logo.png') }}" />
-                                </div>
+        <input type="hidden"
+               value="{{ input_directory_data.directory }}"
+               name="input_directory" />
+        <input type="hidden"
+               value="{{ output_directory_data.directory }}"
+               name="output_directory" />
+        <input type="checkbox" class="drawer-toggle" id="side-drawer" />
+        <div class="flex max-w-md">
+          <div class="pl-4 py-4 {{ 'opacity-50' if redacted==True  }}">
+            <div class="bg-base-100 drop-shadow-xl rounded flex flex-col">
+              <div class="flex justify-between content-center p-4 border-b">
+                <div class="max-h6 w-auto self-center">
+                  <img src="{{ url_for('assets', path='logo.png') }}" />
+                </div>
                 <div class="flex items-center space-y-0.5">
                   <a class="btn btn-ghost btn-square btn-sm">
                     <i class="ri-side-bar-line text-lg text-neutral"></i>
                   </a>
                 </div>
               </div>
+              {% include "InputStep.html.j2" %}
+              {% include "OutputStep.html.j2" %}
+              {% include "RulesetStep.html.j2" %}
+              <button type="submit" class="btn btn-wide bg-accent m-auto" {{ 'disabled' if redacted}} id="dephi">De-phi
+                images
+              </button>
             </div>
-            {% include "InputStep.html.j2" %}
-            {% include "OutputStep.html.j2" %}
-            {% include "RulesetStep.html.j2" %}
-            <button type="submit" class="btn btn-wide bg-accent m-auto" {{ 'disabled' if redacted}}>De-phi
-              images
-            </button>
           </div>
         </div>
-      </div>
-      <input type="checkbox" id="input-modal" class="modal-toggle" />
-      {% include "InputSelectorWidget.html.j2" %}
-      <input type="checkbox" id="output-modal" class="modal-toggle" />
-      {% include "OutputSelectorWidget.html.j2" %}
-    </form>
-    {# TODO make into a separate component #}
-    {% if redacted %}
-    <div class="px-8 py-4">
-      <div class="hero bg-base-200">
-        <div class="hero-content text-center">
-          <div>
-            <h1 class="text-5xl font-bold">Redaction Successful</h1>
-            <p class="ma-6">
-              We successfully performed a redaction on the images in {{
-              input_directory_data.directory
-              }}.
-              The redacted images are now in a new folder created in {{ output_directory_data.directory }}
-            </p>
+        <input type="checkbox" id="input-modal" class="modal-toggle" />
+        {% include "InputSelectorWidget.html.j2" %}
+        <input type="checkbox" id="output-modal" class="modal-toggle" />
+        {% include "OutputSelectorWidget.html.j2" %}
+      </form>
+      {# TODO make into a separate component #}
+      <div class="px-8 py-4 hidden" id="redacting">
+        <div class="hero bg-base-200 m-auto">
+          <div class="hero-content text-center">
+            <div>
+              <h1 class="text-5xl font-bold">Redacting Images</h1>
+            </div>
           </div>
         </div>
       </div>
+      {% if redacted %}
+        <div class="px-8 py-4">
+          <div class="hero bg-base-200">
+            <div class="hero-content text-center">
+              <div>
+                <h1 class="text-5xl font-bold">Redaction Successful</h1>
+                <p class="ma-6">
+                  We successfully performed a redaction on the images in {{
+                  input_directory_data.directory
+                  }}.
+                  The redacted images are now in a new folder created in {{ output_directory_data.directory }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endif %}
     </div>
-    {% endif %}
-  </div>
-</body>
-
+  </body>
 </html>