make rapid form crispy
This commit is contained in:
@@ -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
@@ -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
@@ -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"
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user