.

longs/templates/longs/long_form.html

@@ -1,5 +1,5 @@
 {% extends "longs/base.html" %}
-{% load static from static %}
+<!-- {% load static from static %} -->
 
 {% block js %}
 <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
@@ -24,13 +24,23 @@
     }
 
 
+    function add_input_form() {
+        var form_idx = $('#id_LongSeries_long-TOTAL_FORMS').val();
+        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
+        $('#id_LongSeries_long-TOTAL_FORMS').val(parseInt(form_idx) + 1);
+    }
+
+    $(document).ready(function () {
+        $('#add_more').click(() => { add_input_form() });
+    })
+
 </script>
 
-{{ form.media }}
+<!-- {{ form.media }} -->
 {% endblock %}
 {% block content %}
 <h2>Submit Long Case</h2>
-Use this form to create a long case. Associated image sets can be added using this form however the images will have to be uploaded once the case has been created.
+Use this form to create a long case. Existing associated image sets can be added using this form.
 <form action="" method="post" enctype="multipart/form-data" id="long-form">
     {% csrf_token %}
 
@@ -38,6 +48,7 @@ Use this form to create a long case. Associated image sets can be added using th
         {{ form.as_table }}
     </table>
     <h3>Series:</h3>
+    Add image sets here. These can only be added once created (they can also be added to cases on creation).
     <input type="button" value="Add More Series" id="add_more">
     <div id="form_set">
         {% for form in series_formset %}

longs/templates/longs/long_series_viewer.html

@@ -2,7 +2,10 @@
 <div>{{ series.modality}}, {{ series.examination }}</div>
 
 {% if series.long %}
-Associated case: <a href="{% url 'longs:long_detail' pk=series.long.pk %}">{{series.long}}</a>
+Associated case: 
+{% for long in series.long.all %}
+<a href="{% url 'longs:long_detail' pk=long.pk %}">{{long}}</a> 
+{% endfor %}
 {% else %}
 This series is not associated with any cases.
 {% endif %}

longs/templates/longs/longseries_form.html

@@ -1,5 +1,4 @@
 {% extends "longs/base.html" %}
-{% load static from static %}
 
 {% block js %}
 <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
@@ -131,7 +130,7 @@
 
 
         sortable('.sortable');
-        sortable('.sortable')[0].addEventListener('sortstop', function(e) {
+        sortable('.sortable')[0].addEventListener('sortupdate', function(e) {
             /*
 
             This event is triggered when the user stops sorting and the DOM position has not yet changed.
@@ -143,7 +142,10 @@
             e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container
             e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)
             */
-           updateImagePositions();
+           //updateImagePositions();
+
+            $(".temp-thumb").remove()
+           loadDicomViewer();
         });
     });
 
@@ -207,6 +209,7 @@
 
 
     async function loadDicomViewer(callback) {
+        $("#single-dicom-viewer").empty()
         //images = []
         //Function that returns a promise to read the file
         const reader = (file) => {
@@ -223,6 +226,7 @@
                 image.height = 100;
                 image.title = file.name;
                 image.src = reader.result;
+                image.className = "temp-thumb";
                 console.log("read" ,el);
                 $(el).parent().parent().prepend(image);
                 //images.push(reader.result);
@@ -235,6 +239,7 @@
         file_set = $("#image_form_set input[type=file]");
 
 
+
         file_set.each(async (n, el) => {
             console.log(el);
             if (el.files.length > 0) {
@@ -266,6 +271,8 @@
             const event = new CustomEvent('loadDicomViewer', { "detail": image_set });
 
             window.dispatchEvent(event);
+            sortable('.sortable');
+            //sortable('.sortable')[0].addEventListener('sortstop', function(e) {
             updateImagePositions();
         }