.

anatomy/static/css/anatomy.css

@@ -158,6 +158,11 @@ button a {
   height: 600px;
 }
 
+.dicom-viewer {
+  width: 100%;
+  height: 600px;
+}
+
 .marking-dicom {
   position: fixed;
   right: 0px;
@@ -208,10 +213,6 @@ button a {
 }
 
 .drop-target {
-    border: 1px dashed white;
-}
-
-#drop-container {
     width: 100%;
     width: 100vw;
     height: 100px;
@@ -225,6 +226,10 @@ button a {
   margin-right: -50vw;
 }
 
+#drop-container {
+    border: 1px dashed white;
+}
+
 .submit-button {
     position: sticky;
     bottom: 0;

anatomy/static/js/anatomy.js

@@ -1,233 +1,259 @@
 import * as dicomViewer from "./dicomViewer.js"
 
 window.marked_answers = {
-    "correct": [],
+  "correct": [],
-    "half-correct": [],
+  "half-correct": [],
-    "incorrect": [],
+  "incorrect": [],
 }
 
 window.control_pressed = false;
 
 
 $(document).ready(function () {
-    $(".answer-list li").each(function (index, element) {
+  $(".answer-list li").each(function (index, element) {
-        $(element).append($("<span class='google-link' title='search for answer with google'><a href='https://www.google.com/search?q=" + $(element).text() + "' target='_blank'>G</a></span>"));
+    $(element).append($("<span class='google-link' title='search for answer with google'><a href='https://www.google.com/search?q=" + $(element).text() + "' target='_blank'>G</a></span>"));
+  });
+
+  $(".answer-list span.answer").each(function (index, element) {
+    console.log(element);
+
+    $(element).click(function (e) {
+
+      var classes = ['answer correct', 'answer half-correct', 'answer incorrect'];
+      $(element).each(function () {
+        this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
+      });
+
+      prepAnswerData();
+
+
+
+    });
+  });
+  prepAnswerData();
+
+  if ($(".post-form").length > 0) {
+    $(".post-form").get(0).addEventListener("submit", function (e) {
+      if ($(".not-marked").length > 0 && e.submitter.name != "skip") {
+        e.preventDefault(); // before the code
+        alert("Ensure all answers are marked first");
+      }
+
+    });
+  }
+
+  let dicom_images = document.getElementsByClassName("dicom-image");
+  if (dicom_images.length) {
+
+    for (let element of dicom_images) {
+      setUpDicom(element)
+    }
+
+  }
+
+
+  loadDicomViewer();
+
+  if ($("#question-mark-list").length) {
+    $(".show-all-button").click(() => {
+      $("#question-mark-list li").show();
+    });
+    $(".show-unmarked-button").click(() => {
+      console.log("TESTIG");
+      $("#question-mark-list li").each((n, el) => {
+        console.log(el);
+        if (el.dataset.markcount < 1) { $(el).hide(); }
+      })
     });
 
-    $(".answer-list span.answer").each(function (index, element) {
+  }
-        console.log(element);
 
-        $(element).click(function (e) {
+  $(document).keydown(keyDownHandler);
+  $(document).keyup(keyUpHandler);
 
-            var classes = ['answer correct', 'answer half-correct', 'answer incorrect'];
-            $(element).each(function () {
-                this.className = classes[($.inArray(this.className, classes) + 1) % classes.length];
-            });
-
-            prepAnswerData();
-
-
-
-        });
-    });
-    prepAnswerData();
-
-    if ($(".post-form").length > 0) {
-        $(".post-form").get(0).addEventListener("submit", function (e) {
-            if ($(".not-marked").length > 0 && e.submitter.name != "skip") {
-                e.preventDefault(); // before the code
-                alert("Ensure all answers are marked first");
-            }
-
-        });
-    }
-
-    let dicom_images = document.getElementsByClassName("dicom-image");
-    if (dicom_images.length) {
-
-        for (let element of dicom_images) {
-            setUpDicom(element)
-        }
-
-    }
-
-    let single_dicom = document.getElementById("single-dicom-viewer");
-    if (single_dicom) {
-
-        let images = single_dicom.dataset.images;
-        if (images.indexOf(",") > 0) {
-            images = images.split(",");
-        } 
-
-        let annotations = single_dicom.dataset.annotations;
-        if (annotations != undefined && annotations.indexOf(",") > 0) {
-            annotations = annotations;
-        } 
-
-        dicomViewer.loadCornerstone($(single_dicom), null, images, annotations);
-    }
-
-    if ($("#question-mark-list").length) {
-        $(".show-all-button").click(() => {
-            $("#question-mark-list li").show();
-        });
-        $(".show-unmarked-button").click(() => {
-            console.log("TESTIG");
-            $("#question-mark-list li").each((n, el) => {
-                console.log(el);
-                if (el.dataset.markcount < 1) { $(el).hide(); }
-            })
-        });
-
-    }
-
-      $(document).keydown(keyDownHandler);
-      $(document).keyup(keyUpHandler);
 
 });
 
-function prepAnswerData() {
+window.loadDicomViewerEvent = new Event('loadDicomViewer');
-    //$("#id_correct").val($("li.correct").map(function() {
+window.addEventListener('loadDicomViewer', function (e) { 
-    //    ans = $(this).text();
+  console.log("listen", e.detail)
-    //    window.marked_answers["correct"].push(ans);
+  let images = [];
-    //    return ans
+  console.log($("#images img"));
-    //}).get().join('--//--'));
+  $("#images img").each((n, el) => {
-    //$("#id_half_correct").val($("li.half-correct").map(function() {
+    images.push($(el).attr("src"));
-    //    ans = $(this).text();
+  } );
-    //    window.marked_answers["half-correct"].push(ans);
+  console.log("listen2", images)
-    //    return ans;
+  loadDicomViewer(images); }, false);
-    //}).get().join('--//--'));
-    //$("#id_incorrect").val($("li.incorrect").map(function() {
-    //    ans = $(this).text();
-    //    window.marked_answers["incorrect"].push(ans);
-    //    return ans;
-    //}).get().join('--//--'));
 
-    window.marked_answers["correct"] = [];
+function loadDicomViewer(images_to_load) {
-    window.marked_answers["half-correct"] = [];
+  console.log("loadDicomViewer", images_to_load);
-    window.marked_answers["incorrect"] = [];
+  let single_dicom = document.getElementById("single-dicom-viewer");
-    $("li span.correct").map(function () {
+  if (single_dicom) {
-        let ans = $(this).text();
+
-        window.marked_answers["correct"].push(ans);
+    let images = single_dicom.dataset.images;
-    })
+
-    $("li span.half-correct").map(function () {
+    if (images_to_load != undefined) {
-        let ans = $(this).text();
+      images = images_to_load;
-        window.marked_answers["half-correct"].push(ans);
+      console.log("i1", images)
-    })
+    } else if (images.indexOf(",") > 0) {
-    $("li span.incorrect").map(function () {
+      images = images.split(",");
-        let ans = $(this).text();
+    }
-        window.marked_answers["incorrect"].push(ans);
+
-    })
+    console.log(images);
-    $("#id_marked_answers").val(JSON.stringify(window.marked_answers));
+
+    let annotations = single_dicom.dataset.annotations;
+    if (annotations != undefined && annotations.indexOf(",") > 0) {
+      annotations = annotations;
+    }
+
+    if (images) {
+      dicomViewer.loadCornerstone($(single_dicom), null, images, annotations, true);
+    }
+  }
+}
+
+function prepAnswerData() {
+  //$("#id_correct").val($("li.correct").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["correct"].push(ans);
+  //    return ans
+  //}).get().join('--//--'));
+  //$("#id_half_correct").val($("li.half-correct").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["half-correct"].push(ans);
+  //    return ans;
+  //}).get().join('--//--'));
+  //$("#id_incorrect").val($("li.incorrect").map(function() {
+  //    ans = $(this).text();
+  //    window.marked_answers["incorrect"].push(ans);
+  //    return ans;
+  //}).get().join('--//--'));
+
+  window.marked_answers["correct"] = [];
+  window.marked_answers["half-correct"] = [];
+  window.marked_answers["incorrect"] = [];
+  $("li span.correct").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["correct"].push(ans);
+  })
+  $("li span.half-correct").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["half-correct"].push(ans);
+  })
+  $("li span.incorrect").map(function () {
+    let ans = $(this).text();
+    window.marked_answers["incorrect"].push(ans);
+  })
+  $("#id_marked_answers").val(JSON.stringify(window.marked_answers));
 }
 
 function loadJsonToolStateOnCurrentImage(json) {
-    let el = document.getElementById("dicom-image");
+  let el = document.getElementById("dicom-image");
 
-    const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
+  const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
 
-    const c = cornerstone.getEnabledElement(el);
+  const c = cornerstone.getEnabledElement(el);
 
-    let image_id = c.image.imageId;
+  let image_id = c.image.imageId;
 
-    let tool_state_no_id = JSON.parse(json);
+  let tool_state_no_id = JSON.parse(json);
 
-    let tool_state = {};
+  let tool_state = {};
-    tool_state[image_id] = tool_state_no_id;
+  tool_state[image_id] = tool_state_no_id;
 
-    toolStateManager.restoreToolState(tool_state);
+  toolStateManager.restoreToolState(tool_state);
 
-    cornerstone.reset(el);
+  cornerstone.reset(el);
 
-    return tool_state;
+  return tool_state;
 
 
 }
 
 function setUpDicom(element) {
 
-        console.log("Dicom element found ", $(element));
+  console.log("Dicom element found ", $(element));
 
-        $(element).bind('contextmenu', function (e) {
+  $(element).bind('contextmenu', function (e) {
-            return false;
+    return false;
-        });
+  });
 
-        $(element).dblclick((evt) => {
+  $(element).dblclick((evt) => {
-            element.requestFullscreen();
+    element.requestFullscreen();
-        })
+  })
 
-        cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
+  cornerstoneBase64ImageLoader.external.cornerstone = cornerstone;
-        cornerstoneWebImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWebImageLoader.external.cornerstone = cornerstone;
-        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+  cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
 
-        cornerstoneTools.init();
+  cornerstoneTools.init();
-        const PanTool = cornerstoneTools.PanTool;
+  const PanTool = cornerstoneTools.PanTool;
-        const ZoomTool = cornerstoneTools.ZoomTool;
+  const ZoomTool = cornerstoneTools.ZoomTool;
-        const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
+  const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
-        const WwwcTool = cornerstoneTools.WwwcTool;
+  const WwwcTool = cornerstoneTools.WwwcTool;
-        const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
+  const WwwcRegionTool = cornerstoneTools.WwwcRegionTool;
-        const RotateTool = cornerstoneTools.RotateTool;
+  const RotateTool = cornerstoneTools.RotateTool;
-        const StackScrollTool = cornerstoneTools.StackScrollTool;
+  const StackScrollTool = cornerstoneTools.StackScrollTool;
-        const MagnifyTool = cornerstoneTools.MagnifyTool;
+  const MagnifyTool = cornerstoneTools.MagnifyTool;
-        const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
+  const ArrowAnnotateTool = cornerstoneTools.ArrowAnnotateTool;
 
 
-        const imageIds = element.dataset.url.split(",");
+  const imageIds = element.dataset.url.split(",");
 
-        console.log("Dicom - load imageId: ", imageIds);
+  console.log("Dicom - load imageId: ", imageIds);
 
-        cornerstone.enable(element);
+  cornerstone.enable(element);
-        cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
+  cornerstone.loadAndCacheImage(imageIds[0]).then(function (image) {
-            cornerstone.displayImage(element, image);
+    cornerstone.displayImage(element, image);
 
-            cornerstoneTools.addTool(PanTool);
+    cornerstoneTools.addTool(PanTool);
-            cornerstoneTools.addTool(ZoomTool);
+    cornerstoneTools.addTool(ZoomTool);
-            cornerstoneTools.addTool(ZoomMouseWheelTool);
+    cornerstoneTools.addTool(ZoomMouseWheelTool);
-            cornerstoneTools.addTool(WwwcTool);
+    cornerstoneTools.addTool(WwwcTool);
-            cornerstoneTools.addTool(WwwcRegionTool);
+    cornerstoneTools.addTool(WwwcRegionTool);
-            cornerstoneTools.addTool(RotateTool);
+    cornerstoneTools.addTool(RotateTool);
-            cornerstoneTools.addTool(StackScrollTool);
+    cornerstoneTools.addTool(StackScrollTool);
-            cornerstoneTools.addTool(MagnifyTool);
+    cornerstoneTools.addTool(MagnifyTool);
 
-            cornerstoneTools.addTool(ArrowAnnotateTool, {
+    cornerstoneTools.addTool(ArrowAnnotateTool, {
-                configuration: {
+      configuration: {
-                    getTextCallback: () => { },
+        getTextCallback: () => { },
-                    changeTextCallback: () => { },
+        changeTextCallback: () => { },
-                    allowEmptyLabel: true,
+        allowEmptyLabel: true,
-                    renderDashed: false,
+        renderDashed: false,
-                    drawHandles: false,
+        drawHandles: false,
-                    drawHandlesOnHover: true,
+        drawHandlesOnHover: true,
-                },
+      },
-            });
+    });
 
 
 
-            // Enable our tools
+    // Enable our tools
-            // Avoid incorrect aspect ratio
+    // Avoid incorrect aspect ratio
-            cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
+    cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });
-            cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
+    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 2 });
-            cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
+    cornerstoneTools.setToolActive("ZoomMouseWheel", { mouseButtonMask: 3 });
-            cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
+    cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 4 });
 
-            if (element.dataset.edit_annotation == "true") {
+    if (element.dataset.edit_annotation == "true") {
-                cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
+      cornerstoneTools.setToolActive("ArrowAnnotate", { mouseButtonMask: 2 });
-            } else {
+    } else {
-                cornerstoneTools.setToolEnabled("ArrowAnnotate");
+      cornerstoneTools.setToolEnabled("ArrowAnnotate");
-            }
+    }
 
-            if (element.dataset.annotations) {
+    if (element.dataset.annotations) {
-                loadJsonToolStateOnCurrentImage(element.dataset.annotations)
+      loadJsonToolStateOnCurrentImage(element.dataset.annotations)
-            }
+    }
 
-            cornerstone.resize(element);
+    cornerstone.resize(element);
 
 
-        });
+  });
 
 }
 
 function keyUpHandler(e) {
-  if(e.key == "Control") {
+  if (e.key == "Control") {
     dicomViewer.registerPrimaryDicomInterface(e);
     window.control_pressed = false;
   }
@@ -236,16 +262,16 @@ function keyUpHandler(e) {
 function keyDownHandler(e) {
   // Ignore our custom keybindings if we are currently in a field that
   // accepts some kind of input
-  if($("*:focus:not(disabled)").is("textarea, input")) {
+  if ($("*:focus:not(disabled)").is("textarea, input")) {
     // unless a modifier key is pressed (not shift)
-    if(e.altKey ? true : false || e.ctrlKey ? true : false) {
+    if (e.altKey ? true : false || e.ctrlKey ? true : false) {
     } else {
       return;
     }
   }
 
-  if(e.key == "Control") {
+  if (e.key == "Control") {
-    if(window.control_pressed == false) {
+    if (window.control_pressed == false) {
       window.control_pressed = true;
       dicomViewer.registerAltDicomInterface(e);
     }
@@ -255,23 +281,23 @@ function keyDownHandler(e) {
   console.log(e, charCode);
 
   function numberKeyPressed(e, x) {
-    if(e.altKey ? true : false) {
+    if (e.altKey ? true : false) {
       dicomViewer.selectThumb(x);
       e.preventDefault();
     } else {
     }
   }
 
-  switch(charCode) {
+  switch (charCode) {
     case 13: // Return
-      if(e.shiftKey ? true : false) {
+      if (e.shiftKey ? true : false) {
         //$(".next-button:last").click();
       } else {
         //$(".check-button:last").click();
       }
       break;
     case 32: // Space
-      if(e.shiftKey ? true : false) {
+      if (e.shiftKey ? true : false) {
         //$(".previous-button:last").click();
       } else {
         //$(".next-button:last").click();

longs/forms.py

@@ -55,6 +55,11 @@ class LongCreationDefaultForm(ModelForm):
         fields = ["site"]
         exclude = ["author"]
 
+class LongSeriesForm(ModelForm):
+    class Meta:
+        model = LongSeries
+        exclude = []
+
 
 class LongForm(ModelForm):
     class Media:
@@ -103,3 +108,14 @@ SeriesFormSet = inlineformset_factory(
     max_num=10,
     field_classes="testing",
 )
+
+
+LongSeriesImageFormSet = inlineformset_factory(
+    LongSeries,
+    LongSeriesImage,
+    exclude=[],
+    can_delete=True,
+    extra=4,
+    max_num=2000,
+    field_classes="testing",
+)

longs/migrations/0002_auto_20210204_1032.py

@@ -0,0 +1,75 @@
+# Generated by Django 3.1.3 on 2021-02-04 10:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('longs', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='ciduseranswer',
+            name='answer',
+        ),
+        migrations.RemoveField(
+            model_name='ciduseranswer',
+            name='answer_compare',
+        ),
+        migrations.RemoveField(
+            model_name='ciduseranswer',
+            name='normal',
+        ),
+        migrations.AddField(
+            model_name='ciduseranswer',
+            name='answer_differential_diagnosis',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='ciduseranswer',
+            name='answer_further_management',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='ciduseranswer',
+            name='answer_interpretation',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='ciduseranswer',
+            name='answer_observations',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='ciduseranswer',
+            name='answer_principle_diagnosis',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='long',
+            name='model_differential_diagnosis',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='long',
+            name='model_further_management',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='long',
+            name='model_interpretation',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='long',
+            name='model_observations',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='long',
+            name='model_principle_diagnosis',
+            field=models.TextField(blank=True, null=True),
+        ),
+    ]

longs/migrations/0003_auto_20210204_2105.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.1.3 on 2021-02-04 21:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('longs', '0002_auto_20210204_1032'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='long',
+            old_name='question',
+            new_name='history',
+        ),
+        migrations.AddField(
+            model_name='longseries',
+            name='description',
+            field=models.TextField(blank=True, help_text='Description of stack, for admin organisation'),
+        ),
+    ]

longs/models.py

@@ -60,7 +60,8 @@ class Sign(tagulous.models.TagModel):
 class Long(models.Model):
     #author = models.ForeignKey('auth.User', on_delete=models.CASCADE)
     #image = models.ImageField()
-    question = models.TextField(null=True, blank=True)
+    history = models.TextField(null=True, blank=True)
+
     feedback = models.TextField(null=True, blank=True)
 
     #condition = tagulous.models.TagField(
@@ -157,6 +158,7 @@ class LongSeries(models.Model):
     examination = models.ForeignKey(
         Examination, help_text="Name of the examination", on_delete=models.SET_NULL, null=True)
     long = models.ForeignKey("Long", related_name="long", on_delete=models.SET_NULL, null=True)
+    description = models.TextField(blank=True, help_text="Description of stack, for admin organisation")
 
 #class LongImage(models.Model):
 #    long = models.ForeignKey(Long,

longs/templates/longs/longseries_form.html

@@ -0,0 +1,317 @@
+{% extends "longs/base.html" %}
+{% load static from static %}
+
+{% block js %}
+<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
+
+<script type="text/javascript">
+    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;
+        var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
+        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);
+
+    function add_input_form() {
+        var form_idx = $('#id_series-TOTAL_FORMS').val();
+        $('#image_form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
+        $('#id_series-TOTAL_FORMS').val(parseInt(form_idx) + 1);
+    }
+
+    function add_answers_input_form() {
+        var form_idx = $('#id_answers-TOTAL_FORMS').val();
+        $('#answer_form_set').append($('#answer_empty_form').html().replace(/__prefix__/g, form_idx));
+        $('#id_answers-TOTAL_FORMS').val(parseInt(form_idx) + 1);
+    }
+
+
+    $(document).ready(function () {
+        $("#add_abnormality").appendTo($("label[for='id_abnormality']"));
+        $("#add_examination").appendTo($("label[for='id_examination']"));
+        $("#add_region").appendTo($("label[for='id_region']"));
+
+        dropContainer = document.getElementById("drop-container");
+
+        dropContainer.ondragover = function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+
+        dropContainer.ondragenter = function (evt) {
+            console.log("ENTER")
+            console.log(evt)
+            $(evt.target).addClass("drop-target-active")
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+
+        dropContainer.ondragleave = function (evt) {
+            console.log("ENTER")
+            console.log(evt)
+            $(evt.target).removeClass("drop-target-active")
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+
+        dropContainer.ondrop = function (evt) {
+            $(evt.target).removeClass("drop-target-active");
+
+            // Get all input elements
+            inputs = $("#long-form input[type=file][id^=id_series-]");
+            //fileInput = document.getElementById("id_series-0-image");
+
+            // Make sure we have enough input targets
+            input_diff = (evt.dataTransfer.files.length - inputs.length)
+
+            if (input_diff > 0) {
+                for (let j = 0; j < input_diff; j++) {
+                    add_input_form()
+                }
+
+                // Need to make sure we include the new ones...
+                inputs = $("#long-form input[type=file][id^=id_series-]");
+            }
+
+            // Loop through each dropped file and try to assign to an
+            // input element
+            [...evt.dataTransfer.files].forEach((f) => {
+                let dT = new DataTransfer();
+                dT.clearData();
+                dT.items.add(f);
+                for (let i = 0; i < inputs.length; i++) {
+                    el = inputs.get(i)
+
+                    if (el.files.length == 0) {
+                        el.files = dT.files;
+                        //ocr(el)
+
+                        return false
+                    }
+                }
+            })
+
+            // // If you want to use some of the dropped files
+            // const dT = new DataTransfer();
+            // dT.items.add(evt.dataTransfer.files[0]);
+            // dT.items.add(evt.dataTransfer.files[3]);
+            // fileInput.files = dT.files;
+
+            loadDicomViewer();
+
+            evt.preventDefault();
+            evt.stopPropagation();
+        };
+
+
+        $('#add_more_images').click(() => { add_input_form() });
+        $('#add_more_answers').click(() => { add_answers_input_form() });
+
+
+        $("input[type=file]").on('change', function () {
+            $(this).removeClass("image-ident-warning");
+            $(this).removeClass("image-ident-ok");
+            console.log("input change1");
+            console.log("input change", this);
+            //ocr(this);
+            //LoadDicomViewer();
+
+        });
+
+
+
+    });
+
+
+
+
+    function ocr(input) {
+        // Tesseract.recognize(f, "eng",{ logger: m => console.log(m) }
+        // ).then(({ data: { text } }) => {
+        //   console.log(text);
+        //   l = text.toLowerCase();
+        //   if (l.includes("accesion") || l.includes("number") || l.search(/(REF|RK9|RH8|RA9)\d+/g)) {
+        //       console.log("SHIT", this);
+        //   }
+        // })
+
+        console.log('{% static "worker.min.js" %}');
+        console.log('{{ STATIC_URL }}/tesseract-core.wasm.js %}');
+
+        const worker = Tesseract.createWorker({
+            workerPath: '{% static "worker.min.js" %}',
+            langPath: '{% static "" %}',
+            //langPath: '{{ STATIC_URL }}',
+            corePath: '{% static "tesseract-core.wasm.js" %}',
+        });
+
+        const url = URL.createObjectURL(input.files[0]);
+        let img = new Image;
+        img.src = url;
+
+        img.onload = function () {
+
+
+            width = img.width;
+
+            // const rectangle = { left: 0, top: 0, width: width, height: 10 }
+
+
+            (async () => {
+                await worker.load();
+                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]);
+                //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) {
+                    console.log("SHIT", input);
+                    $(input).addClass("image-ident-warning");
+                    $(`img[data-input-id='${input.id}'`).addClass("image-ident-warning");
+                } else {
+                    $(input).addClass("image-ident-ok");
+
+                }
+
+                await worker.terminate();
+            })();
+        }
+    }
+
+
+    async function loadDicomViewer(callback) {
+        //images = []
+        //Function that returns a promise to read the file
+        const reader = (file) => {
+            return new Promise((resolve, reject) => {
+                const fileReader = new FileReader();
+                fileReader.onload = () => resolve(fileReader);
+                fileReader.readAsDataURL(file);
+            });
+        }
+
+        const readFile = (file) => {
+            reader(file).then(reader => {
+                var image = new Image();
+                image.height = 100;
+                image.title = file.name;
+                image.src = reader.result;
+                $("#images").append(image);
+                //images.push(reader.result);
+                loadViewer(images);
+            });
+        }
+
+
+
+        file_set = $("#image_form_set input[type=file]");
+
+
+        file_set.each(async (n, el) => {
+            console.log(el);
+            if (el.files.length > 0) {
+                filename = el.files[0].name;
+                await readFile(el.files[0]);
+            }
+        })
+
+
+        console.log("images from files", images);
+
+
+    }
+
+    function loadViewer(images) {
+        //dicomViewer.loadCornerstone($("#single-dicom-viewer"), null, images, annotations);
+        file_set = $("#image_form_set input[type=file]");
+
+        n = 0;
+        for (let i = 0; i < file_set.length; i++) {
+            el = file_set.get(i)
+            if (el.files.length > 0) {
+                n++;
+            }
+        }
+
+        image_set = $("#images img");
+        if (n == image_set.length) {
+            const event = new CustomEvent('loadDicomViewer', { "detail": images });
+
+            window.dispatchEvent(event);
+        }
+
+    }
+
+    function updateImagePositions() {
+
+        file_set = $("#image_form_set ul");
+
+        n = 0;
+        for (let i = 0; i < file_set.length; i++) {
+            ul = file_set.get(i);
+            console.log(ul)
+
+            file_element = $(ul).find("input[type=file]").get(0);
+            console.log(file_element);
+            if (file_element.files.length > 0) {
+                n++;
+                $(ul).find("input[type=number]").val(n);
+            }
+        }
+
+    }
+</script>
+
+{{ form.media }}
+{% endblock %}
+{% block content %}
+<h2>Add Series</h2>
+<a href="{% url 'longs:long_create_defaults' %}">Edit defaults</a>
+<form action="" method="post" enctype="multipart/form-data" id="long-form">
+    {% csrf_token %}
+    <table>
+        {{ form.as_table }}
+    </table>
+
+    <h3>Images:</h3>
+    <input type="button" value="Add More Images" id="add_more_images">
+    <div id="drop-container" class="">Drop images here (or use the buttons below)
+        <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''></div>
+        <div id="drop-filenames"></div>
+    </div>
+    <div id="image_form_set">
+        {% for form in image_formset %}
+        <ul class="no-error image-formset">
+            {{form.non_field_errors}}
+            {{form.errors}}
+            {{ form.as_ul }}
+        </ul>
+        {% endfor %}
+    </div>
+    {{ image_formset.management_form }}
+    <input type="submit" class="submit-button" value="Submit" name="submit">
+</form>
+<div id="empty_form" style="display:none">
+    <ul class='no_error image-formset'>
+        {{ image_formset.empty_form.as_ul }}
+    </ul>
+</div>
+<div id="images">
+
+</div>
+{% endblock %}

longs/urls.py

@@ -35,6 +35,7 @@ urlpatterns = [
     path("exam/json/<int:pk>", views.exam_json, name="exam_json"),
     path("exam/json/<int:pk>/recreate", views.exam_json_recreate, name="exam_json_recreate"),
     path("create/", views.LongCreate.as_view(), name="long_create"),
+    path("create/series", views.LongSeriesCreate.as_view(), name="long_series_create"),
     path("create/defaults",
          views.LongCreationDefaultView.as_view(),
          name="long_create_defaults"),

longs/views.py

@@ -20,13 +20,14 @@ from django.http import HttpResponseRedirect, HttpResponse
 
 from .forms import (
     LongForm,
+    LongSeriesForm, LongSeriesImageFormSet,
     MarkLongQuestionForm,
     SeriesFormSet,
     NoteForm,
     ExaminationForm,
 )
 from .models import (
-    Long,
+    Long, LongSeries,
     Note,
     Examination,
     Exam,
@@ -252,6 +253,38 @@ def long_clone(request, pk):
 
     return render(request, "longs/long_form.html", context)
 
+class LongSeriesCreate(LoginRequiredMixin, CreateView):
+    model = LongSeries
+    form_class = LongSeriesForm
+
+    def get_context_data(self, **kwargs):
+        context = super(LongSeriesCreate, self).get_context_data(**kwargs)
+        if self.request.POST:
+            context["image_formset"] = LongSeriesImageFormSet(
+                self.request.POST, self.request.FILES
+            )
+            context["image_formset"].full_clean()
+        else:
+            context["image_formset"] = LongSeriesImageFormSet()
+        return context
+
+    def form_valid(self, form):
+
+        self.object = form.save(commit=False)
+        self.object.save()
+
+        #form.instance.author.add(self.request.user.id)
+
+        context = self.get_context_data(form=form)
+        series_formset = context["image_formset"]
+        if series_formset.is_valid():
+            response = super().form_valid(form)
+            series_formset.instance = self.object
+            series_formset.save()
+            return response
+
+        else:
+            return super().form_invalid(form)
 
 class LongCreateBase(LoginRequiredMixin, CreateView):
     model = Long
@@ -294,8 +327,6 @@ class LongCreateBase(LoginRequiredMixin, CreateView):
 
 # @login_required
 class LongCreate(LongCreateBase):
-
-
     def get_initial(self):
         # There has to be a better way...
         try:

templates/base.html

@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="{% static 'css/dicomViewer.css' %}">
     <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
+    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/latest.min.js?config=TeX-AMS-MML_HTMLorMML"> </script> -->
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dexie/3.0.3/dexie.min.js" integrity="sha512-aEtNzq8X5E0ambgeM68H174SOXaANJ6wDqJ0TuVIx4R2J4fRdUA0nLzx0faA1mmViqb+r0VX7cOXkskxyJENUA==" crossorigin="anonymous"></script>
     <script src="{% static 'tagulous/lib/jquery.js' %}"></script>