make rapid form crispy

This commit is contained in:
Ross
2024-10-21 12:30:21 +01:00
parent ad54fce54b
commit eeaa345f3c
5 changed files with 123 additions and 109 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
let active_file_inputs = new Set();
var active_file_inputs = new Set();
function add_input_form() {
var form_idx = $('#id_images-TOTAL_FORMS').val();
+34 -7
View File
@@ -25,6 +25,10 @@ from django.contrib.admin.widgets import FilteredSelectMultiple
from django.forms.widgets import RadioSelect, TextInput, Textarea
from django.contrib.auth.models import User
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Div, Field, HTML
from crispy_forms.bootstrap import InlineRadios
class RapidAnswerForm(ModelForm):
class Meta:
@@ -97,25 +101,50 @@ class RapidForm(ModelForm):
ModelForm.__init__(self, *args, **kwargs)
super(RapidForm, self).__init__(*args, **kwargs)
# self.fields['question'].widget.attrs = {'class': 'question-form', 'rows': 10, 'cols': 100}
# self.fields['feedback'].widget.attrs = {'class': 'feedback-form', 'rows': 10, 'cols': 100}
self.helper = FormHelper()
self.helper.form_id = 'id-anatomy-question-form'
self.helper.form_tag = False
self.helper.layout = Layout(
Div(InlineRadios('normal')),
Div(
HTML("<h4 class='clearfix' id='abnormality-label'>Abnormality</h4>"),
Field('abnormality', css_class='form-control'),
HTML("<h4 class='clear-both' id='region-label'>Region</h4>"),
Field('region', css_class='form-control'),
css_class='clearfix abnormal-fields'
),
HTML("<h4 class='clear-both' id='examination-label'>Examination*</h4>"),
Field('examination', css_class='form-control'),
Div(InlineRadios('laterality', css_class='form-control'), css_class='clearfix clear-both'),
Field('feedback', css_class='form-control'),
Field('history', css_class='form-control'),
Field('open_access', css_class='form-control'),
HTML("<h4 class='clear-both' id='exams-label'>Exams</h4>"),
Field('exams', css_class='form-control'),
)
self.fields["abnormality"] = ModelMultipleChoiceField(
required=False,
queryset=Abnormality.objects.all(),
widget=FilteredSelectMultiple(verbose_name="Abnormality", is_stacked=False),
)
self.fields["abnormality"].label = ""
self.fields["region"] = ModelMultipleChoiceField(
required=False,
queryset=Region.objects.all(),
widget=FilteredSelectMultiple(verbose_name="Region", is_stacked=False),
)
self.fields["region"].label = ""
self.fields["examination"] = ModelMultipleChoiceField(
queryset=Examination.objects.all(),
widget=FilteredSelectMultiple(verbose_name="Examination", is_stacked=False),
)
self.fields["examination"].label = ""
self.fields["laterality"] = ChoiceField(
choices=Rapid.LATERALITY_CHOICES, required=False, widget=RadioSelect()
@@ -133,6 +162,7 @@ class RapidForm(ModelForm):
queryset=exam_queryset.distinct(),
widget=FilteredSelectMultiple(verbose_name="Exams", is_stacked=False),
)
self.fields["exams"].label = ""
def save(self, commit=True):
instance = ModelForm.save(self, False)
@@ -186,11 +216,8 @@ class RapidForm(ModelForm):
]
# fields = ['question', 'feedback', 'subspecialty', 'references']
widgets = {
# "normal": RadioSelect(
# choices=[(True, 'Yes'),
# (False, 'No')])
}
"normal": RadioSelect()
}
ImageFormSet = inlineformset_factory(
Rapid,
@@ -0,0 +1,18 @@
# Generated by Django 5.0.2 on 2024-10-21 09:11
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('rapids', '0014_exam_exam_open_access'),
]
operations = [
migrations.AlterField(
model_name='rapid',
name='normal',
field=models.BooleanField(choices=[(True, 'Normal'), (False, 'Abnormal')], default=False, help_text='Defines if a question is normal/abnormal'),
),
]
+6 -1
View File
@@ -161,7 +161,12 @@ class Rapid(QuestionBase):
question = models.TextField(null=True, blank=True)
history = models.TextField(null=True, blank=True)
normal = models.BooleanField(default=False, help_text="Tick if true")
NORMAL_CHOICES = (
(True, "Normal"),
(False, "Abnormal"),
)
normal = models.BooleanField(default=False, help_text="Defines if a question is normal/abnormal", choices=NORMAL_CHOICES)
NONE = "NONE"
LEFT = "LEFT"
+64 -100
View File
@@ -1,11 +1,11 @@
{% extends "rapids/base.html" %}
{% load static from static %}
{% load crispy_forms_tags %}
{% block js %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
<script type="text/javascript">
let normal = false;
let csrf_token = "{{csrf_token}}";
let hash_url = "{% url 'rapids:rapid_question_by_hash' %}";
//let monitor_directory_handler = false;
@@ -58,9 +58,9 @@
$(document).ready(function () {
$("#add_abnormality").appendTo($("label[for='id_abnormality']"));
$("#add_examination").appendTo($("label[for='id_examination']"));
$("#add_region").appendTo($("label[for='id_region']"));
$("#add_abnormality").appendTo($("#abnormality-label"));
$("#add_examination").appendTo($("#examination-label"));
$("#add_region").appendTo($("#region-label"));
dropContainer = document.getElementById("drop-container");
@@ -179,31 +179,13 @@
$("input[type=file]").on('change', input_change);
function ifNormal() {
if (document.getElementById("id_normal").checked) {
$("#answer_form_set textarea").attr("required", false)
$('#answer_empty_form textarea').attr("required", false)
normal = true;
} else {
$("#answer_form_set textarea").attr("required", true)
$('#answer_empty_form textarea').attr("required", true)
normal = false;
}
}
$("#id_normal").change(() => ifNormal());
ifNormal();
$("#rapid-form").on("submit", (evt) => {
submit = true;
if (!normal) {
if (!$normal) {
if ($('#id_answers-TOTAL_FORMS').val() == "0") {
submit = false;
add_answers_input_form();
toastr.error(`Please enter an answers (or select Normal)`);
toastr.error(`Question that are not normal require an answer`);
evt.preventDefault();
}
@@ -245,77 +227,6 @@
// async function readFileAndProcess(callback) {
// //$("#single-dicom-viewer").empty()
// //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);
// });
// }
//
// // Add file to the process list
// active_file_inputs.add(el)
// const readFile = (file, el) => {
// reader(file).then(reader => {
// console.log("12345", reader)
// $(el).parent().parent().find(".temp-thumb").remove();
//
// if (reader.result.startsWith("data:application/octet-stream;base64")) {
// const element = $(`<div class='temp-thumb' src=${reader.result}></div>`).get(0)
// $(el).parent().parent().prepend(element);
// const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
// file
// );
// cornerstone.enable(element);
// cornerstone.loadAndCacheImage(imageId).then(function (image) {
// cornerstone.displayImage(element, image);
// cornerstone.resize(element)
//
// });
//
// } else {
// var image = new Image();
// image.title = file.name;
// image.src = reader.result;
// image.className = "temp-thumb";
// $(el).parent().parent().prepend(image);
// //images.push(reader.result);
// }
//
// active_file_inputs.delete(el)
// console.log("active", active_file_inputs)
// // Only load once all queued files have been processed
// if (active_file_inputs.size < 1) {
// loadViewer();
// }
// });
// }
//
// file_set = $("#image_form_set input[type=file]");
//
// file_set.each(async (n, el) => {
// if (el.files.length > 0) {
// filename = el.files[0].name;
// // Probably no need to await here anymore
// await readFile(el.files[0], el);
// }
// })
// }
// const viewLoadChecker = setInterval(function () {
// if (load_viewer) {
// load_viewer = false;
// loadViewer();
// }
// }, 2000);
function extractDicomDetails(byteArray) {
if (!$("#id_examination_to option").length) {
@@ -355,10 +266,52 @@
}
}
}
</script>
<script type="text/hyperscript">
init
set global $normal to false
if (#id_normal_0.checked )
Fade(.abnormal-fields) then
set global $normal to true then
remove @required from <#answer_form_set textarea/> then
remove @required from <#answer_empty_form textarea.required/>
end
end
def Fade(elt)
if elt's style's opacity != "0"
transition element elt opacity to 0 over 350ms
transition element elt transform to "translateY(0.25rem)" over 350ms
hide elt
else
show elt
transition element elt opacity to 1 over 350ms
transition element elt transform to "translateY(0rem)" over 350ms
end
end
on change from #id_normal_0
if (#id_normal_0.checked )
Fade(.abnormal-fields) then
set global $normal to true then
remove @required from <#answer_form_set textarea/> then
remove @required from <#answer_empty_form textarea.required/>
end
on change from #id_normal_1
if (#id_normal_1.checked )
Fade(.abnormal-fields) then
set global $normal to false then
add @required to <#answer_form_set textarea/> then
add @required to <#answer_empty_form textarea.required/>
end
</script>
{{ form.media }}
{% endblock %}
{% block content %}
{% if object %}
@@ -380,7 +333,7 @@ the feedback image box is checked they will not be displayed when taking the que
<span id="directory-picker-display">No directory monitored</span>
</div> -->
<form action="" method="post" enctype="multipart/form-data" id="rapid-form">
{% csrf_token %}
{% comment %} {% csrf_token %} {% endcomment %}
<a href="/rapids/abnormality/create" id="add_abnormality" class="add-popup"
onclick="return showAddPopup(this);"><img src="{% static '/img/icon-addlink.svg' %}"></a>
<a href="/rapids/examination/create" id="add_examination" class="add-popup"
@@ -388,9 +341,9 @@ the feedback image box is checked they will not be displayed when taking the que
<a href="/rapids/region/create" id="add_region" class="add-popup" onclick="return showAddPopup(this);"><img
src="{% static '/img/icon-addlink.svg' %}"></a>
<table>
{{ form.as_table }}
</table>
{% crispy form form.helper %}
<div class="abnormal-fields">
<h3>Answers:</h3>
<input type="button" value="Add More Answers" id="add_more_answers">
<div id="answer_form_set">
@@ -403,6 +356,7 @@ the feedback image box is checked they will not be displayed when taking the que
{% endfor %}
</div>
{{ answer_formset.management_form }}
</div>
<h3>Images:</h3>
<div id="drop-container" class="drop-target">Drop images here (or use the buttons below)<div
id="feedback-drop-target">Feedback image?<br />drop those here</div>
@@ -434,4 +388,14 @@ the feedback image box is checked they will not be displayed when taking the que
<div id="single-dicom-viewer" class="rapid-dicom-viewer" data-images="" data-annotations='' style="display:none"></div>
{% endblock %}
{% endblock %}
{% block css %}
<style>
.add-popup {
float: left;
}
</style>
{% endblock css %}