Sith/pedagogy/templates/pedagogy/guide.jinja

246 lines
7.9 KiB
Django/Jinja

{% extends "core/base.jinja" %}
{% block title %}
{% trans %}UV Guide{% endtrans %}
{% endblock %}
{% block head %}
{{ super() }}
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
{% endblock head %}
{% block content %}
<div class="pedagogy">
<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
<div class="search-form-container">
{% if can_create_uv(user) %}
<div class="action-bar">
<p>
<a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a>
</p>
<p>
<a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
</p>
</div>
{% endif %}
<div class="search-bar">
<input id="search_input" class="search-bar-input" type="text" name="search">
<button class="search-bar-button">{% trans %}Search{% endtrans %}</button>
</div>
<div class="radio-department">
<div class="radio-guide">
{% for (display_name, real_name) in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
<input type="radio" name="department" id="radio{{ real_name }}" value="{{ real_name }}"><label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
{% endfor %}
</div>
</div>
<div class="radio-credit-type">
<div class="radio-guide">
{% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
<input type="radio" name="credit_type" id="radio{{ credit_type }}" value="{{ credit_type }}"><label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
{% endfor %}
</div>
</div>
<div class="radio-semester">
<div class="radio-guide">
<input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN"><label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
<input type="checkbox" name="semester" id="radioSPRING" value="SPRING"><label for="radioSPRING"><i class="fa fa-sun-o"></i></label>
<span><input type="checkbox" name="semester" id="radioAP" value="AUTUMN_AND_SPRING"><label for="radioAP">AP</label></span>
</div>
</div>
<input type="text" name="json" hidden>
</div>
</form>
<table id="dynamic_view">
<thead>
<tr>
<td>{% trans %}UV{% endtrans %}</td>
<td>{% trans %}Title{% endtrans %}</td>
<td>{% trans %}Department{% endtrans %}</td>
<td>{% trans %}Credit type{% endtrans %}</td>
<td><i class="fa fa-leaf"></i></td>
<td><i class="fa fa-sun-o"></i></td>
{% if can_create_uv(user) %}
<td>{% trans %}Edit{% endtrans %}</td>
<td>{% trans %}Delete{% endtrans %}</td>
{% endif %}
</tr>
</thead>
<tbody id="dynamic_view_content">
{% for uv in object_list %}
<tr onclick="window.location.href = `{{ url('pedagogy:uv_detail', uv_id=uv.id) }}`">
<td><a href="{{ url('pedagogy:uv_detail', uv_id=uv.id) }}">{{ uv.code }}</a></td>
<td>{{ uv.title }}</td>
<td>{{ uv.department }}</td>
<td>{{ uv.credit_type }}</td>
<td>
{% if uv.semester in ["AUTUMN", "AUTUMN_AND_SPRING"] %}
<i class="fa fa-leaf"></i>
{% endif %}
</td>
<td>
{% if uv.semester in ["SPRING", "AUTUMN_AND_SPRING"] %}
<i class="fa fa-sun-o"></i>
{% endif %}
</td>
{% if user.is_owner(uv) -%}
<td><a href="{{ url('pedagogy:uv_update', uv_id=uv.id) }}">{% trans %}Edit{% endtrans %}</a></td>
<td><a href="{{ url('pedagogy:uv_delete', uv_id=uv.id) }}">{% trans %}Delete{% endtrans %}</a></td>
{%- endif -%}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
function autofillCheckboxRadio(name){
if (urlParams.has(name)){ $("input[name='" + name + "']").each(function(){
if ($(this).attr("value") == urlParams.get(name))
$(this).prop("checked", true);
});
}
}
function uvJSONToHTML(uv){
var autumn = "";
var spring = "";
if (uv.semester == "AUTUMN" || uv.semester == "AUTUMN_AND_SPRING")
autumn = "<i class='fa fa-leaf'></i>";
if (uv.semester == "SPRING" || uv.semester == "AUTUMN_AND_SPRING")
spring = "<i class='fa fa-sun-o'></i>";
var html = `
<tr onclick="window.location.href = '${uv.absolute_url}';">
<td><a href="${uv.absolute_url}">${uv.code}</a></td>
<td>${uv.title}</td>
<td>${uv.department}</td>
<td>${uv.credit_type}</td>
<td>${autumn}</td>
<td>${spring}</td>
`;
{% if can_create_uv(user) %}
html += `
<td><a href="${uv.update_url}">{% trans %}Edit{% endtrans %}</a></td>
<td><a href="${uv.delete_url}">{% trans %}Delete{% endtrans %}</a></td>
`;
{% endif %}
return html + "</td>";
}
var lastTypedLetter;
$("#search_input").on("keyup", function(){
// Auto submit when user pauses it's typing
clearTimeout(lastTypedLetter);
lastTypedLetter = setTimeout(function (){
$("#search_form").submit();
}, 300);
});
$("#search_input").on("change", function(e){
// Don't send request when leaving the text area
// It has already been send by the keypress event
e.preventDefault();
});
// Auto fill from get arguments
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.has("search"))
$("input[name='search']").first().prop("value", urlParams.get("search"));
autofillCheckboxRadio("department");
autofillCheckboxRadio("credit_type");
autofillCheckboxRadio("semester");
// Allow unchecking a radio button when we click on it
// Keep a state of what is checked
var formStates = {};
function radioCheckToggle(e){
if (formStates[this.name] == this.value){
this.checked = false;
formStates[this.name] = "";
// Fire an update since the browser does not do it in this situation
$("#search_form").submit();
return;
}
formStates[this.name] = this.value;
}
$("input[type='radio']").each(function() {
$(this).on("click", radioCheckToggle);
// Get current state
if ($(this).prop("checked")){
formStates[$(this).attr("name")] = $(this).attr("value");
}
});
var autumn_and_spring = $("input[value='AUTUMN_AND_SPRING']").first();
var autumn = $("input[value='AUTUMN']").first();
var spring = $("input[value='SPRING']").first();
// Make autumn and spring hidden if js is enabled
autumn_and_spring.parent().hide();
// Fill json field if js is enabled
$("input[name='json']").first().prop("value", "true");
// Set correctly state of what is checked
if (autumn_and_spring.prop("checked")){
autumn.prop("checked", true);
spring.prop("checked", true);
autumn_and_spring.prop("checked", false);
}
// Handle submit here and modify autumn and spring here
$("#search_form").submit(function(e) {
e.preventDefault();
if (autumn.prop("checked") && spring.prop("checked")){
autumn_and_spring.prop("checked", true);
autumn.prop("checked", false);
spring.prop("checked", false);
}
// Do query
var xhr = new XMLHttpRequest();
$.ajax({
type: "GET",
url: "{{ url('pedagogy:guide') }}",
data: $(this).serialize(),
tryCount: 0,
retryLimit: 10,
xhr: function(){
return xhr;
},
success: function(data){
// Update URL
history.pushState({}, null, xhr.responseURL.replace("&json=true", ""));
// Update content
$("#dynamic_view_content").html("");
for (key in data){
$("#dynamic_view_content").append(uvJSONToHTML(data[key]));
}
},
error: function(){
console.log(`try ${this.tryCount}`);
if (this.tryCount++ <= this.retryLimit){
$("dynamic_view_content").html("");
$.ajax(this);
return;
}
$("#dynamic_view_content").html("<tr><td></td><td>{% trans %}Error connecting to the server{% endtrans %}</td></tr>");
}
});
// Restore autumn and spring for perfect illusion
if (autumn_and_spring.prop("checked")){
autumn_and_spring.prop("checked", false);
autumn.prop("checked", true);
spring.prop("checked", true);
}
});
// Auto send on change
$("#search_form").on("change", function(e){
$(this).submit();
});
</script>
{% endblock content %}