Sith/pedagogy/templates/pedagogy/guide.jinja

{% extends "core/base.jinja" %}

{% block title %}
{% trans %}UV Guide{% endtrans %}
{% endblock %}

{% block content %}
<form id="search_form" action="{{ url('pedagogy:guide') }}" method="get">
	{% if can_create_uv(user) %}
	<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>
	<p>
		<input class="input-search" type="text" name="search">
		<button class="button-search">{% trans %}Search{% endtrans %}</button>
	</p>
	<div class="radio-guide">
		<input type="radio" name="department" id="radioEDIM" value="EDIM"><label for="radioEDIM">{% trans %}EDIM{% endtrans %}</label>
		<input type="radio" name="department" id="radioEE" value="EE"><label for="radioEE">{% trans %}ENERGIE{% endtrans %}</label>
		<input type="radio" name="department" id="radioIMSI" value="IMSI"><label for="radioIMSI">{% trans %}IMSI{% endtrans %}</label>
		<input type="radio" name="department" id="radioGI" value="GI"><label for="radioGI">{% trans %}INFO{% endtrans %}</label>
		<input type="radio" name="department" id="radioMC" value="MC"><label for="radioMC">{% trans %}GMC{% endtrans %}</label>
		<input type="radio" name="department" id="radioHUMA" value="HUMA"><label for="radioHUMA">{% trans %}HUMA{% endtrans %}</label>
		<input type="radio" name="department" id="radioTC" value="TC"><label for="radioTC">{% trans %}TC{% endtrans %}</label>
	</div>
	<div class="radio-guide">
		<input type="radio" name="credit_type" id="radioCS" value="CS"><label for="radioCS">{% trans %}CS{% endtrans %}</label>
		<input type="radio" name="credit_type" id="radioTM" value="TM"><label for="radioTM">{% trans %}TM{% endtrans %}</label>
		<input type="radio" name="credit_type" id="radioEC" value="EC"><label for="radioEC">{% trans %}EC{% endtrans %}</label>
		<input type="radio" name="credit_type" id="radioQC" value="QC"><label for="radioQC">{% trans %}QC{% endtrans %}</label>
		<input type="radio" name="credit_type" id="radioOM" value="OM"><label for="radioOM">{% trans %}OM{% endtrans %}</label>

		<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>
	<input type="text" name="json" hidden>
</form>
<br>
{% endif %}
<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>
			<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>

<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>
				<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>";
	}

	// 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(),
			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]));
				}
			},
		});

		// 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 %}