diff --git a/django/website/hid/templates/hid/view.html b/django/website/hid/templates/hid/view.html index 6f5f7802814fa66e5d0838fbb65b1e89f4835daa..dfb10104652cfe0aa3c18a5395a6ea98d4fa2554 100644 --- a/django/website/hid/templates/hid/view.html +++ b/django/website/hid/templates/hid/view.html @@ -6,7 +6,7 @@ {% block maincontent %} <h2>{% trans "View data" %}</h2> -<form action="{% url "data-view-process" %}" method="post">{% csrf_token %} +<form action="{% url "data-view-process" %}" method="post" class="view-items-form">{% csrf_token %} {% with pagination_class="pull-left" %} {% render_table table %} @@ -20,3 +20,54 @@ </form> {% endblock maincontent %} + +{% block lastjs %} +<script type="text/javascript"> +(function ($) { + var selectors = { + td_input : '.view-items-form td.delete > input', + th_delete : '.view-items-form th.delete' + }; + + function addCheckbox(selector, check_id) { + var check = $('<input>', { + type: 'checkbox', + id: check_id + }), + label = $('<label>', { + for: check_id + }); + + label.html( + $(selector).html() + ); + + $(selector).html("") + .append(check) + .append(label); + } + + function toggleSelection(e) { + var checked = $(e.target).prop("checked"); + $(selectors.td_input).prop("checked", checked); + } + + function setSelectAll(e) { + var checked = $(selectors.td_input + ':checked').length, + all = $(selectors.td_input).length, + checked_all = all === checked; + + $(selectors.th_delete + ' input').prop("checked", checked_all); + } + + function init() { + addCheckbox(selectors.th_delete, 'select-all-items'); + + $(selectors.th_delete + ' input').on('change', toggleSelection); + $(selectors.td_input).on('change', setSelectAll); + } + + init(); +})(jQuery); +</script> +{% endblock lastjs %} diff --git a/django/website/media/css/styles.css b/django/website/media/css/styles.css index 5aeab5e2115b9a82160e3bb2a721fa6c36b2c121..24895fe5d43c4eac64de9a1b2b7315972dd37595 100644 --- a/django/website/media/css/styles.css +++ b/django/website/media/css/styles.css @@ -63,6 +63,9 @@ html, body { } /* ------------- table & pagination ---------------- */ +th label { + padding-left: .25em; +} .current { margin-left: 1em; margin-right: 1em;