guide.jinja 7.45 KB
Newer Older
Sli's avatar
Sli committed
1 2 3 4 5 6 7 8

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

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

{% block content %}
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
<div class="pedagogy">
	<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>
		{% endif %}
		<p>
			<input id="search_input" class="input-search" type="text" name="search">
			<button class="button-search">{% trans %}Search{% endtrans %}</button>
		</p>
		<div class="radio-guide">
			{% for department in [("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"), ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")] %}
				{% set display_name, real_name = department %}
				<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 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 %}
Sli's avatar
Sli committed
33

34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
			<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>
	<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>
53
				{% endif %}
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
			</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>
Sli's avatar
Sli committed
82
<script>
Sli's avatar
Sli committed
83 84 85 86 87 88 89 90 91
	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){
92 93 94 95 96 97 98
		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>";

Sli's avatar
Sli committed
99
		var html = `
100
			<tr onclick="window.location.href = '${uv.absolute_url}';">
Sli's avatar
Sli committed
101 102 103 104
				<td><a href="${uv.absolute_url}">${uv.code}</a></td>
				<td>${uv.title}</td>
				<td>${uv.department}</td>
				<td>${uv.credit_type}</td>
105 106
				<td>${autumn}</td>
				<td>${spring}</td>
Sli's avatar
Sli committed
107 108 109 110 111 112 113 114 115
		`;
		{% 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>";
	}
116

Sli's avatar
Sli committed
117 118 119 120 121 122 123 124 125 126 127 128 129 130
	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();
	});

131 132
	// Auto fill from get arguments
	var urlParams = new URLSearchParams(window.location.search);
Sli's avatar
Sli committed
133 134 135 136 137
	if (urlParams.has("search"))
		$("input[name='search']").first().prop("value", urlParams.get("search"));
	autofillCheckboxRadio("department");
	autofillCheckboxRadio("credit_type");
	autofillCheckboxRadio("semester");
138

Sli's avatar
Sli committed
139 140 141 142 143 144 145
	// 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] = "";
Sli's avatar
Sli committed
146 147
			// Fire an update since the browser does not do it in this situation
			$("#search_form").submit();
Sli's avatar
Sli committed
148 149 150 151 152
			return;
		}
		formStates[this.name] = this.value;
	}

Sli's avatar
Sli committed
153 154
	$("input[type='radio']").each(function() {
		$(this).on("click", radioCheckToggle);
Sli's avatar
Sli committed
155 156 157 158 159
    	// Get current state
    	if ($(this).prop("checked")){
    		formStates[$(this).attr("name")] = $(this).attr("value");
    	}
    });
160

Sli's avatar
Sli committed
161 162 163
	var autumn_and_spring = $("input[value='AUTUMN_AND_SPRING']").first();
	var autumn = $("input[value='AUTUMN']").first();
	var spring = $("input[value='SPRING']").first();
164 165

    // Make autumn and spring hidden if js is enabled
166
    autumn_and_spring.parent().hide();
167

Sli's avatar
Sli committed
168 169 170
    // Fill json field if js is enabled
    $("input[name='json']").first().prop("value", "true");

171 172 173 174 175 176 177 178
    // 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
Sli's avatar
Sli committed
179 180 181 182 183 184 185 186 187 188 189 190 191 192
	$("#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(),
193 194
			tryCount: 0,
			retryLimit: 10,
Sli's avatar
Sli committed
195 196 197 198 199 200 201 202 203 204 205 206
			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]));
				}
			},
207 208 209 210 211 212 213 214 215
			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>");
			}
Sli's avatar
Sli committed
216 217 218 219 220 221 222 223 224 225 226 227 228
		});

		// 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();
229
    });
Sli's avatar
Sli committed
230
</script>
Sli's avatar
Sli committed
231
{% endblock content %}