.

rapids/templates/rapids/rapid_form.html

@@ -5,16 +5,42 @@
 <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
 
 <script type="text/javascript">
-
     let normal = false;
+    let monitor_directory_handler = false;
 
+    // set to hold the files that are still being processed
     let active_file_inputs = new Set()
 
+    async function listAllFilesAndDirs(dirHandle) {
+        const files = [];
+        for await (let [name, handle] of dirHandle) {
+            const {
+                kind
+            } = handle;
+            if (handle.kind === 'directory') {
+                files.push({
+                    name,
+                    handle,
+                    kind
+                });
+                files.push(...await listAllFilesAndDirs(handle));
+            } else {
+                files.push({
+                    name,
+                    handle,
+                    kind
+                });
+            }
+        }
+        return files;
+    }
+
     function showEditPopup(url) {
         var win = window.open(url, "Edit",
             'height=500,width=800,resizable=yes,scrollbars=yes');
         return false;
     }
+
     function showAddPopup(triggeringLink) {
         var name = triggeringLink.id.replace(/^add_/, '');
         href = triggeringLink.href;
@@ -22,13 +48,16 @@
         win.focus();
         return false;
     }
+
     function closePopup(win, newID, newRepr, id) {
         console.log(id)
         $(id + "_to").append('<option value=' + newID + ' title=' + newRepr + ' >' + newRepr + '</option>')
         win.close();
     }
 
-    document.addEventListener('drop', function (e) { e.preventDefault(); }, false);
+    document.addEventListener('drop', function (e) {
+        e.preventDefault();
+    }, false);
 
     function getUnusedInputs(inputs) {
         new_inputs = [];
@@ -69,7 +98,8 @@
 
     function add_input_form() {
         var form_idx = $('#id_images-TOTAL_FORMS').val();
-        $('#image_form_set').append($($('#empty_form').html().replace(/__prefix__/g, form_idx)).on("change", input_change));
+        $('#image_form_set').append($($('#empty_form').html().replace(/__prefix__/g, form_idx)).on("change",
+            input_change));
         $('#id_images-TOTAL_FORMS').val(parseInt(form_idx) + 1);
     }
 
@@ -215,8 +245,33 @@
         };
 
 
-        $('#add_more_images').click(() => { add_input_form() });
+        $('#directory-picker-button').click(() => {
-        $('#add_more_answers').click(() => { add_answers_input_form() });
+            monitor_directory_handler = await window.showDirectoryPicker();
+            $("#directory-picker-display").text(monitor_directory_handler.name).appendAfter($(
+                "<span>clear</span>").click(() => {
+                $(evt.target).remove();
+                $("#directory-picker-display").text("");
+                monitor_directory_handler = false;
+            }));
+        });
+
+        async function onClickHandler(e) {
+            try {
+                const directoryHandle =
+                    const files = await listAllFilesAndDirs(directoryHandle);
+                console.log('files', files);
+            } catch (e) {
+                console.log(e);
+            }
+        }
+
+
+        $('#add_more_images').click(() => {
+            add_input_form()
+        });
+        $('#add_more_answers').click(() => {
+            add_answers_input_form()
+        });
 
         $("input[type=file]").on('change', input_change);
 
@@ -282,6 +337,7 @@
 
 
     });
+
     function ocr(input) {
         // Tesseract.recognize(f, "eng",{ logger: m => console.log(m) }
         // ).then(({ data: { text } }) => {
@@ -319,12 +375,17 @@
                 await worker.loadLanguage('eng');
                 await worker.initialize('eng');
                 // const { data: { text } } = await worker.recognize(input.files[0], { rectangle });
-                const { data: { text } } = await worker.recognize(input.files[0]);
+                const {
+                    data: {
+                        text
+                    }
+                } = await worker.recognize(input.files[0]);
                 //console.log(text);
                 l = text.toLowerCase();
                 $(`img[data-input-id='${input.id}'`).removeClass("image-ident-loading");
                 console.log(l);
-                if (l.includes("accesion") || l.includes("number") || l.search(/(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
+                if (l.includes("accesion") || l.includes("number") || l.search(
+                        /(ref|rk9|rh8|ra9|rbz)\d+/g) > -1) {
                     console.log("SHIT", input);
                     $(input).addClass("image-ident-warning");
                     $(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
@@ -350,6 +411,7 @@
             });
         }
 
+        // Add file to the process list
         active_file_inputs.add(el)
         const readFile = (file, el) => {
             reader(file).then(reader => {
@@ -364,6 +426,7 @@
                 //images.push(reader.result);
 
                 active_file_inputs.delete(el)
+                // Only load once all queued files have been processed
                 if (active_file_inputs.size < 1) {
                     loadViewer();
                 }
@@ -380,6 +443,7 @@
             console.log(el);
             if (el.files.length > 0) {
                 filename = el.files[0].name;
+                // Probably no need to await here anymore
                 await readFile(el.files[0], el);
             }
         })
@@ -403,7 +467,9 @@
 
         image_set = $("#image_form_set img");
         if (n == image_set.length) {
-            const event = new CustomEvent('loadDicomViewer', { "detail": image_set });
+            const event = new CustomEvent('loadDicomViewer', {
+                "detail": image_set
+            });
 
             window.dispatchEvent(event);
             sortable('.sortable');
@@ -465,17 +531,16 @@
                     option.appendTo($("#id_examination_to"));
                     toastr.success(`Examination set to ${option.attr('title')} from dicom data`);
                 } else {
-                    toastr.warning(`Unable to set examination ${study_description} from dicom data (it needs creating)`);
+                    toastr.warning(
+                        `Unable to set examination ${study_description} from dicom data (it needs creating)`);
 
                 }
             }
 
-        }
+        } catch (err) {
-        catch (err) {
             console.log(err);
         }
     }
-
 </script>
 
 {{ form.media }}
@@ -484,11 +549,17 @@
 <h2>Submit Rapid</h2>
 <a href="{% url 'rapids:rapid_create_defaults' %}">Edit defaults</a>
 <p>
-<h3>Instructions</h3>
+    <h3>Instructions</h3>
-Abnormality, Region and Laterality are used to categorise within the system (they are not used for marking). String
+    Abnormality, Region and Laterality are used to categorise within the system (they are not used for marking). String
-answers that match those added below will be used for automatic marking. Multiple images can be added to a question. If
+    answers that match those added below will be used for automatic marking. Multiple images can be added to a question.
-the feedback image box is checked they will not be displayed when taking the question.
+    If
+    the feedback image box is checked they will not be displayed when taking the question.
 </p>
+<div>
+    To monitor a directory select it here.<br />
+    <button id="directory-picker-button">Pick a directory</button>
+    <span id="directory-picker-display">No directory monitored</span>
+</div>
 <form action="" method="post" enctype="multipart/form-data" id="rapid-form">
     {% csrf_token %}
     <a href="/rapids/abnormality/create" id="add_abnormality" class="add-popup"