From 187f7d9a833fc2fea729fa1cdfc47f77ce85feb5 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 16 Dec 2024 17:38:23 +0000
Subject: [PATCH] add loading indicatior when importitng cases

---
 atlas/templates/atlas/user_uploads.html | 43 +++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/atlas/templates/atlas/user_uploads.html b/atlas/templates/atlas/user_uploads.html
index 33a69677..f6802e7d 100644
--- a/atlas/templates/atlas/user_uploads.html
+++ b/atlas/templates/atlas/user_uploads.html
@@ -6,7 +6,7 @@
     <a href="{% url 'atlas:new_uploads' %}">Upload more dicoms</a><br/>
     {% if not case %}
         <div class="alert alert-info" role="alert">
-            Series imported from here will be orphaned (not associated with a case). It is usually better to create a case first and then import directly into the case.
+            Series imported from here will be orphaned (not associated with a case). <br/>It is usually better to <a href="{% url 'atlas:case_create' %}">create a case</a> first and then import directly into the case.
         </div>
     {% endif %}
 
@@ -42,7 +42,7 @@
                     <div>
                 <fieldset><legend>Select how series should be ordered when uploaded</legend>
                         <div class="helptext">
-                            This will affect how series are displayed when viewing with the built in site viewer. By default when exporting from Insight the order is not maintained so you should choose to order eithre by slice location or instance number.<br/>
+                            This will affect how series are displayed when viewing with the built in site viewer. By default when exporting from Insight the order is not maintained so you should choose to order either by slice location or instance number.<br/>
                             If you are not sure, leave this as the default.
                         </div>
                         <div>
@@ -72,6 +72,7 @@
             <button id="import-dicoms-case-button"
                     hx-post="{% url 'api-1:import_dicoms_case' case.id %}"
                     hx-target=".imported"
+                    hx-indicator=".indicator"
                     hx-include=".selected,[name='order-series']"
             >Import into case</button>
 
@@ -79,9 +80,11 @@
             <button id="import-dicoms-button"
                     hx-post="{% url 'api-1:import_dicoms' %}"
                     hx-target=".imported"
+                    hx-indicator=".indicator"
                     hx-include=".selected,[name='order-series']"
             >Import</button>
         {% endif %}
+        <div class="indicator"><div class="loader"></div>Loading...</div>
 
         <div class="imported">
 
@@ -98,6 +101,42 @@
 
 {% block css %}
 <style>
+.indicator {
+  display: none;
+}
+
+.indicator.htmx-request {
+  display: block;
+}
+
+.loader {
+  width: 50px;
+  aspect-ratio: 1;
+  display: grid;
+}
+.loader::before,
+.loader::after {    
+  content:"";
+  grid-area: 1/1;
+  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
+  background: 
+    var(--c) 50%  0, 
+    var(--c) 50%  100%, 
+    var(--c) 100% 50%, 
+    var(--c) 0    50%;
+  background-size: 12px 12px;
+  animation: l12 1s infinite;
+}
+.loader::before {
+  margin: 4px;
+  filter: hue-rotate(45deg);
+  background-size: 8px 8px;
+  animation-timing-function: linear
+}
+
+@keyframes l12 { 
+  100%{transform: rotate(.5turn)}
+}
 
 #series-list {
   user-select: none;