ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add toastr

Browse Source
This commit is contained in:
Ross
2020-12-06 15:52:39 +00:00
parent 31d8902792
commit 9bcd326802
5 changed files with 54 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/static/css/anatomy.css
+15
View File
@@ -139,6 +139,16 @@ button a {
padding: 20px padding: 20px
} }
#full-question-list li{
padding-bottom: 20px
}
#full-question-list img{
float: left;
padding-right: 20px;
padding-left: 10px;
}
#question-mark-list a { #question-mark-list a {
color: #bbe1fa color: #bbe1fa
} }
@@ -152,3 +162,8 @@ button a {
position: sticky; position: sticky;
top: 30px; top: 30px;
} }
#save-annotations {
position: absolute;
left: 0;
}
anatomy/templates/anatomy/base.html
+2
View File
@@ -4,7 +4,9 @@
<head> <head>
<title>Anatomy Quiz</title> <title>Anatomy Quiz</title>
<link rel="stylesheet" href="{% static 'css/anatomy.css' %}"> <link rel="stylesheet" href="{% static 'css/anatomy.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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="{% static 'js/toastr.min.js' %}"></script>
<script src="{% static 'js/cornerstone/hammer.js' %}"></script> <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
<script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script> <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
<script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script> <script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
anatomy/templates/anatomy/exam_overview.html
+22 -14
View File
@@ -8,28 +8,32 @@
This exam has {{question_number}} questions. This exam has {{question_number}} questions.
<div title="Click to enable / disable the exam"> <div title="Click to enable / disable the exam">
Exam active: <input type="checkbox" id="exam-active-switch" {% if exam.active %}checked{% endif %}> Exam active: <input type="checkbox" id="exam-active-switch" {% if exam.active %}checked{% endif %}>
</div> </div>
<p><a href="{% url 'anatomy:mark_overview' pk=exam.pk %}"><button>Mark exam</button></a></p> <p><a href="{% url 'anatomy:mark_overview' pk=exam.pk %}"><button>Mark exam</button></a></p>
<!--<p><button><a href="{% url 'anatomy:exam_take' pk=exam.pk sk=0 %}">Click here to start</a></button></p>--> <!--<p><button><a href="{% url 'anatomy:exam_take' pk=exam.pk sk=0 %}">Click here to start</a></button></p>-->
<ol> <ol id="full-question-list">
{% for question in questions.all %} {% for question in questions.all %}
<li>{{ question.description }}: {{ question.GetPrimaryAnswer }}<img src="{{ question.image|thumbnail_url:'exam-list' }}" alt="thumbail" /> <li>
<br /> <img src="{{ question.image|thumbnail_url:'exam-list' }}" alt="thumbail" />
Modality: {{ question.modality }} {{ question.description }}
</li> <br />
{{ question.question_type }}: {{ question.GetPrimaryAnswer }}
<br />
Modality: {{ question.modality }}, <a href="{% url 'anatomy:question_detail' pk=question.pk %}">View</a>
</li>
{% endfor %} {% endfor %}
</ol> </ol>
<a href="{% url 'anatomy:exam_json' pk=exam.pk %}">JSON</a> <a href="{% url 'anatomy:exam_json' pk=exam.pk %}">JSON</a>
<a href="{% url 'anatomy:exam_json_recreate' pk=exam.pk %}">Refresh JSON cache</a> <a href="{% url 'anatomy:exam_json_recreate' pk=exam.pk %}">Refresh JSON cache</a>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function () {
// send request to change the is_private state on customSwitches toggle // send request to change the is_private state on customSwitches toggle
$("#exam-active-switch").on("change", function() { $("#exam-active-switch").on("change", function () {
$.ajax({ $.ajax({
url: "{% url 'anatomy:exam_toggle_active' pk=exam.pk %}", url: "{% url 'anatomy:exam_toggle_active' pk=exam.pk %}",
data: { data: {
@@ -37,15 +41,19 @@ Modality: {{ question.modality }}
active: this.checked // true if checked else false active: this.checked // true if checked else false
}, },
type: "POST", type: "POST",
dataType : "json", dataType: "json",
}) })
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function(data) { .done(function (data) {
console.log(data); console.log(data);
if (data.success) {
toastr.info('Exam state changed.')
}
// show some message according to the response. // show some message according to the response.
// For eg. A message box showing that the status has been changed // For eg. A message box showing that the status has been changed
}) })
.always(function() { .always(function () {
console.log('[Done]'); console.log('[Done]');
}) })
}) })
anatomy/templates/anatomy/question_detail.html
+6 -1
View File
@@ -2,11 +2,11 @@
{% block content %} {% block content %}
{% load static %} {% load static %}
<button id="save-annotations">Save Annotations</button>
<div id="dicom-image" data-url="{{ question.image.url}}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div> <div id="dicom-image" data-url="{{ question.image.url}}" data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>
<!-- testing --> <!-- testing -->
<!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg" <!--<div id="dicom-image" data-url="http://localhost:8000/static/abdoct.jpg"
data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>--> data-annotations='{{question.image_annotations}}' data-edit_annotation=true></div>-->
<button id="save-annotations">Save Annotations</button>
<div class="question"> <div class="question">
<div class="date"> <div class="date">
Created: {{ question.created_date }} Created: {{ question.created_date }}
@@ -44,6 +44,11 @@
console.log(data); console.log(data);
// show some message according to the response. // show some message according to the response.
// For eg. A message box showing that the status has been changed // For eg. A message box showing that the status has been changed
if (data.success) {
toastr.info('Annotations saved')
} else {
toastr.warn('Error saving annotations')
}
}) })
.always(function () { .always(function () {
console.log('[Done]'); console.log('[Done]');
anatomy/views.py
+1 -1
View File
@@ -512,7 +512,7 @@ def exam_json(request, pk):
"title": "{}".format(q.description), "title": "{}".format(q.description),
"question": str(q.question_type), "question": str(q.question_type),
"images": [image_as_base64(q.image)], "images": [image_as_base64(q.image)],
"annotations": [q.image_annotations], "annotations": [str(q.image_annotations)],
"type": "anatomy", "type": "anatomy",
} }