Skip to content

Commit

Permalink
Add session detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@ammsa
ammsa committed Jun 2, 2020
1 parent 0797314 commit cac7ac1
Show file tree
Hide file tree
Showing 3 changed files with 214 additions and 9 deletions.
158 changes: 151 additions & 7 deletions HiCALWeb/hicalweb/progress/templates/progress/sessions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@

{% block pagetitle %}Sessions{% endblock %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js" type="application/javascript"></script>
{% endblock %}

{% block main %}
<div class="row">

Expand All @@ -15,7 +19,7 @@ <h2 class="text-secondary">Current session</h2>
<hr class="d-none d-md-block">

<div class="list-group">
<div class="list-group-item list-group-item-action">
<div class="list-group-item list-group-item-action btn session-details" data-toggle="modal" data-target="#sessionModal" data-session-id="{{ user.current_task.uuid }}" data-session-title="{{ user.current_task.topic.title }}">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{ user.current_task.topic.title }}</h5>
{% if user.current_task.topic.number %}
Expand Down Expand Up @@ -59,10 +63,10 @@ <h2 class="text-danger">Please create or select a session</h2>
<hr>
<p>There are currently no sessions..</p>
{% endif %}
{% for task in tasks %}

<div class="row mb-4">
<div class="col-md-9">
{% for task in tasks %}
<div class="row mb-4 list-group flex-row">
<div class="col-md-9 list-group-item list-group-item-action border-0 btn session-details" data-toggle="modal" data-target="#sessionModal" data-session-id="{{ task.task_obj.uuid }}" data-session-title="{{ task.task_obj.topic.title }}">
<h5 class="text-truncate">{{ task.task_obj.topic.title }}</h5>
<p class="mb-1 small text-truncate">
{% if task.task_obj.topic.description %}
Expand All @@ -86,14 +90,67 @@ <h5 class="text-truncate">{{ task.task_obj.topic.title }}</h5>
</div>
</div>
{% endfor %}

<!-- Session modal -->
<div class="modal" id="sessionModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-primary" id="sessionModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="sessionModalBody">

<div class="center-text" id="sessionModalSpinner">
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>

<div id="sessionModalDetails" class="d-none">
<p class="text-muted small">Created <span id="session_created_at"></span></p>

<p class="mb-1">
<strong>Description</strong>: <p id="session_description"></p>
</p>
<p class="mb-1">
<strong>Narrative</strong>: <p id="session_narrative"></p>
</p>
<p class="mb-1">
<strong>Seed query</strong>: <span id="session_seed_query"></span>
</p>
<p class="mb-1">
<strong>Strategy:</strong> <span id="session_strategy"></span>
</p>
<p class="mb-1">
<strong>Effort (max judgments):</strong> <span id="session_effort"></span>
</p>

<div class="row">
<div class="col-md-5 col-sm-5 mx-auto center-text">
<canvas id="piechart" width="200" height="200" class="mt-2"></canvas>
</div>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

</div>

<!-- Delete session modal -->
<div class="modal fade" id="deleteSessionModal" tabindex="-1" role="dialog" >
<div class="modal" id="deleteSessionModal" tabindex="-1" role="dialog" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteSessionModalTitle"></h5>
<h5 class="modal-title text-primary" id="deleteSessionModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
Expand Down Expand Up @@ -123,11 +180,98 @@ <h5 class="modal-title" id="deleteSessionModalTitle"></h5>
$(document).on("click", ".delete-modal", function () {
var session_title = $(this).data('session-title');
var session_id = $(this).data('session-id');
console.log(session_title, session_id);
$("#deleteSessionModalTitle").html( session_title );
$("#deleteSessionModalDeleteButton").val( session_id );

return false;
});

$(document).on("click", ".session-details", function () {
var session_title = $(this).data('session-title');
var session_id = $(this).data('session-id');
$("#sessionModalTitle").html( session_title );

$("#sessionModalSpinner").removeClass("d-none");
$("#sessionModalDetails").addClass("d-none");

// fetch session details
$.ajax({
url: '{% url 'progress:get_session_details' %}?uuid=' +session_id,
method: 'GET',
success: function (result) {

let session = result
// session["total_highlyRelevant"]
// session["total_nonrelevant"]
// session["total_relevant"]
// session["total_judged"]
let title = session['topic_title']
let number = session['topic_number']
let show_full_document_content = session['show_full_document_content']
let effort = session['effort']
if (effort <= 0){
effort = "No max";
}

$("#session_created_at").html(session['created_at']);
$("#session_description").html(session['topic_description']);
$("#session_narrative").html(session['topic_narrative']);
$("#session_seed_query").html(session['topic_seed_query']);
$("#session_strategy").html(session['strategy']);
$("#session_effort").html(effort);


// Update piechart
var ctx = document.getElementById("piechart");
var data = {
labels: [
"Highly relevant",
"Relevant",
"Non relevant"
],
datasets: [
{
data: [
session["total_highlyRelevant"],
session["total_relevant"],
session["total_nonrelevant"]],
backgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
],
hoverBackgroundColor: [
"#5cb85c",
"#f0ad4e",
"#d9534f"
]
}]
};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
legend: {
display: true,
position: 'right'
}
}
});


$("#sessionModalSpinner").addClass("d-none");
$("#sessionModalDetails").removeClass("d-none");

},
error: function (result) {

}
});


return false;
});


</script>
{% endblock %}
4 changes: 3 additions & 1 deletion HiCALWeb/hicalweb/progress/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,7 @@
views.MessageAJAXView.as_view(),
name='post_log_msg'),


url(r'^get_session_details/$',
views.SessionDetailsAJAXView.as_view(),
name='get_session_details'),
]
61 changes: 60 additions & 1 deletion HiCALWeb/hicalweb/progress/views.py
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import json
import logging
import random
import string
Expand All @@ -12,7 +13,7 @@
from django.db.models import Case
from django.db.models import Count
from django.db.models import When
from django.http import HttpResponseRedirect
from django.http import HttpResponseRedirect, HttpResponse, JsonResponse
from django.urls import reverse_lazy
from django.utils import timezone
from django.views import generic
Expand Down Expand Up @@ -198,6 +199,64 @@ def post(self, request, *args, **kwargs):
return HttpResponseRedirect(reverse_lazy('progress:sessions'))


class SessionDetailsAJAXView(views.CsrfExemptMixin, views.LoginRequiredMixin,
views.JsonRequestResponseMixin,
views.AjaxResponseMixin, generic.View):

require_json = False

def render_timeout_request_response(self, error_dict=None):
if error_dict is None:
error_dict = self.error_response_dict
json_context = json.dumps(
error_dict,
cls=self.json_encoder_class,
**self.get_json_dumps_kwargs()
).encode('utf-8')
return HttpResponse(json_context, content_type=self.get_content_type(), status=502)

def get_ajax(self, request, *args, **kwargs):
session_id = request.GET.get('uuid')
if not session_id:
return self.render_json_response([])
session = {
"uuid": session_id,
}

try:
session_obj = Task.objects.get(username=self.request.user, uuid=session_id)
session['topic_title'] = session_obj.topic.title
session['topic_number'] = session_obj.topic.number
session['topic_description'] = session_obj.topic.description
session['topic_seed_query'] = session_obj.topic.seed_query
session['topic_narrative'] = session_obj.topic.narrative

session['strategy'] = session_obj.get_strategy_display()
session['effort'] = session_obj.max_number_of_judgments
session['show_full_document_content'] = session_obj.show_full_document_content
session['created_at'] = session_obj.created_at

counters = Judgment.objects.filter(user=self.request.user,
task=session_obj).aggregate(
total_highlyRelevant=Count(Case(When(relevance=2, then=1))),
total_relevant=Count(Case(When(relevance=1, then=1))),
total_nonrelevant=Count(Case(When(relevance=0, then=1)))
)

session["total_highlyRelevant"] = counters["total_highlyRelevant"]
session["total_nonrelevant"] = counters["total_nonrelevant"]
session["total_relevant"] = counters["total_relevant"]
session["total_judged"] = counters["total_highlyRelevant"] + counters["total_nonrelevant"] + counters["total_relevant"]

except TimeoutError:
error_msg = {u"message": u"Timeout error. Please check status of servers."}
return JsonResponse(error_msg, status=408)
except Task.DoesNotExist:
return JsonResponse({"message": "Session not found."}, status=404)

return self.render_json_response(session)


class VisitAJAXView(views.CsrfExemptMixin, views.LoginRequiredMixin,
views.JsonRequestResponseMixin,
generic.View):
Expand Down

0 comments on commit cac7ac1

Please sign in to comment.