Files
penracourses/generic/templates/generic/cid_view.html
T
Ross 59d80ca201 .
2022-01-10 14:27:08 +00:00

288 lines
9.3 KiB
HTML

{% extends 'generic/base.html' %}
{% load render_table from django_tables2 %}
{% block css %}
{% endblock %}
{% block content %}
<div id="view-filter-options">
<h3>Filter CID Users </h3>
<form action="" method="get">
{{ filter.form }}
<input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
</form>
</div>
<div>
<span id="manage-span">
{% render_table table %}
</span>
</div>
<details>
<summary>
<h3>Add/Edit CID users</h3>
</summary>
<button id="add-exams-selected-cids">Change selected exams</button>
<button id="clear-exams-selected-cids">Clear selected exams</button>
<button id="activate-selected-cids">Activate selected</button>
<button id="deactivate-selected-cids">Deactivate selected</button>
<button id="delete-selected-cids">Delete selected</button>
<button id="toggle-internal">Toggle internal</button>
<p>Select exams below to add user to.</p>
<div class="exam-selectors">
<span>
Physics Exams<br />
<select id="physics-exams" multiple="multiple">
{% for name, id in physics_exams %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
</span>
<span>
Rapid Exams<br />
<select id="rapid-exams" multiple="multiple">
{% for name, id in rapid_exams %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
</span>
<span>
Sba Exams<br />
<select id="sbas-exams" multiple="multiple">
{% for name, id in sba_exams %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
</span>
<span>
Long Exams<br />
<select id="longs-exams" multiple="multiple">
{% for name, id in longs_exams %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
</span>
<span>
Anatomy Exams<br />
<select id="anatomy-exams" multiple="multiple">
{% for name, id in anatomy_exams %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
</span>
</div>
<div>
Groups<br />
<select id="cid-groups">
<option value="">----</option>
{% for name, id in cid_user_groups %}
<option value="{{id}}">{{name}}</option>
{% endfor %}
</select>
<button id="add-group">Add Group to users</button>
</div>
<button id="add-new-cids">Add New (Blank) Users</button>
<input type="number" id="add-number" value="number to add"><br />
<button id="add-new-emails">Add New Users From Email</button>
<textarea id="emails-input" name="emails" rows="4" cols="50">Enter emails here</textarea>
</details>
{% endblock %}
{% block js %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.js"></script>
<script>
jQuery.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
var esc = function ( t ) {
return t
.replace( /&/g, '&amp;' )
.replace( /</g, '&lt;' )
.replace( />/g, '&gt;' )
.replace( /"/g, '&quot;' );
};
return function ( d, type, row ) {
// Order, search and type get the original data
if ( type !== 'display' ) {
return d;
}
if ( typeof d !== 'number' && typeof d !== 'string' ) {
return d;
}
d = d.toString(); // cast numbers
if ( d.length <= cutoff ) {
return d;
}
var shortened = d.substr(0, cutoff-1);
// Find the last white space character in the string
if ( wordbreak ) {
shortened = shortened.replace(/\s([^\s]*)$/, '');
}
// Protect against uncontrolled HTML input
if ( escapeHtml ) {
shortened = esc( shortened );
}
return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
};
};
function postAjax(data) {
$.ajax({
url: "{% url 'generic:manage_cid_users' %}",
data: data,
type: "POST",
dataType: "json",
})
// $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
.done(function (data) {
console.log(data);
if (data.status == "success") {
toastr.info('Added/Updated');
location.reload();
}
// show some message according to the response.
// For eg. A message box showing that the status has been changed
})
.always(function () {
console.log('[Done]');
})
}
function getGenericData() {
selected_cids = []
$("#manage-span tbody input:checked").each((n, el) => {
selected_cids.push(parseInt(el.value));
})
return {
csrfmiddlewaretoken: "{{ csrf_token }}",
physics_exams: JSON.stringify($("#physics-exams").val()),
rapid_exams: JSON.stringify($("#rapid-exams").val()),
sba_exams: JSON.stringify($("#sbas-exams").val()),
longs_exams: JSON.stringify($("#longs-exams").val()),
anatomy_exams: JSON.stringify($("#anatomy-exams").val()),
cid_groups: JSON.stringify($("#cid-groups").val()),
delete: false,
emails: JSON.stringify(false),
number_to_create: 0,
activate: false,
deactivate: false,
add_exams: false,
clear_exams: false,
toggle_internal: false,
selected_cids: JSON.stringify(selected_cids),
}
}
$(document).ready(function () {
{% if exams %}
$("table").DataTable({
columnDefs: [ {
targets: [6,7,8,9,10],
render: $.fn.dataTable.render.ellipsis( 17, true )
} ],
"paging": false,
});
{% else %}
$("table").DataTable({
"paging": false,
});
{% endif %}
$("#toggle-internal").click((evt) => {
data = getGenericData();
data["toggle_internal"] = true;
postAjax(data);
});
$("#add-new-emails").click((evt) => {
data = getGenericData();
data["emails"] = JSON.stringify($("#emails-input").val());
postAjax(data);
});
$("#add-group").click((evt) => {
data = getGenericData();
data["add_group"] = true;
postAjax(data);
});
$("#add-exams-selected-cids").click((evt) => {
data = getGenericData();
data["add_exams"] = true;
postAjax(data);
});
$("#clear-exams-selected-cids").click((evt) => {
data = getGenericData();
data["clear_exams"] = true;
postAjax(data);
});
$("#activate-selected-cids").click((evt) => {
data = getGenericData();
data["activate"] = true;
postAjax(data);
});
$("#deactivate-selected-cids").click((evt) => {
data = getGenericData();
data["deactivate"] = true;
postAjax(data);
});
$("#delete-selected-cids").click((evt) => {
data = getGenericData();
data["delete"] = true;
postAjax(data);
});
$("#add-new-cids").click((evt) => {
n = $("#add-number").get(0).value;
if (n < 1) {
toastr.info("You need to enter how many users to add.");
return
}
data = getGenericData();
data["number_to_create"] = n;
postAjax(data);
});
});
</script>
<style>
.exam-selectors {
display: flex;
}
.exam-selectors select {
height: 200px;
}
</style>
{% endblock %}