Skip to content
Snippets Groups Projects
Commit fecd6c88 authored by Fanna Lautenbach's avatar Fanna Lautenbach
Browse files

Multi select visuals

parent 19fd5e1b
No related branches found
No related tags found
Hide whitespace changes
Inline Side-by-side
ldvspec/lofardata/templates/lofardata/index.html
+ 54
− 8
View file @ fecd6c88
......@@ -24,18 +24,18 @@
<input id="collapsible-1" class="toggle" type="checkbox">
<label for="collapsible-1" class="group-toggle">
<i>Ungrouped</i>
<div class="custom--group-actions margin-left" style="display:none;">
<div class="custom--group-actions margin-left">
<a class="button--icon-button margin-left margin-right" href="#"
title="Edit this group">
title="Edit this group" style="display:none;">
<span class="icon icon--pen"></span>
</a>
<a class="button--icon-button margin-right" href="#"
title="Delete this group">
title="Delete this group" style="display:none;">
<span class="icon icon--color-inherit icon--trash-alt"></span>
</a>
<button type="submit"
class="button custom--action-button button button--icon-button margin-right"
title="Submit to ATDB">
title="Submit to ATDB" style="display:none;">
<span class="icon icon--color-inherit icon--play">
<span class="icon icon--stacked icon--check icon--green"></span>
</span>
......@@ -48,6 +48,15 @@
<div class="table">
<div class="table__header">
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="ungrouped-select-all"
class="input custom--checkbox margin-top"
onClick="toggle(this,'checkbox-select-ungrouped')">
</div>
</div>
</div>
<div class="table__cell">ID
<a class="tooltip-dias tooltip-dias-right"
data-tooltip="Click on the id to view/edit">m</a>
......@@ -79,6 +88,15 @@
{% for specification in ungrouped_work_specifications %}
<div class="table__row table__row--dark table__row--padding"
data-spec-id="specification.id">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="checkbox-select-ungrouped"
class="input custom--checkbox margin-top">
</div>
</div>
</div>
<div class="table__cell">
<a href="{% url 'specification-detail' pk=specification.id %}"
title="View the specification details">{{ specification.id }}</a>
......@@ -213,18 +231,18 @@
<input id="collapsible-{{ group.name }}" class="toggle" type="checkbox">
<label for="collapsible-{{ group.name }}" class="group-toggle">
{{ group.name }}
<div class="custom--group-actions margin-left" style="display:none;">
<div class="custom--group-actions margin-left">
<a class="button--icon-button margin-left margin-right" href="#"
title="Edit this group">
title="Edit this group" style="display:none;">
<span class="icon icon--pen"></span>
</a>
<a class="button--icon-button margin-right" href="#"
title="Delete this group">
title="Delete this group" style="display:none;">
<span class="icon icon--color-inherit icon--trash-alt"></span>
</a>
<button type="submit"
class="button custom--action-button button button--icon-button margin-right"
title="Submit to ATDB">
title="Submit to ATDB" style="display:none;">
<span class="icon icon--color-inherit icon--play">
<span class="icon icon--stacked icon--check icon--green"></span>
</span>
......@@ -237,6 +255,16 @@
<div class="table">
<div class="table__header">
<div class="table__row table__row--dark table__row--padding">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="{{ group.name }}-select-all"
class="input custom--checkbox margin-top"
onClick="toggle(this,'checkbox-select-{{ group.name }}')">
</div>
</div>
</div>
<div class="table__cell">ID
<a class="tooltip-dias tooltip-dias-right"
data-tooltip="Click on the id to view/edit">m</a>
......@@ -268,6 +296,16 @@
{% for specification in group.workspecification_set.all %}
<div class="table__row table__row--dark table__row--padding"
data-spec-id="specification.id">
<div class="table__cell table__cell--mini">
<div class="flex-container flex-container--checkboxes">
<div class="flex-wrapper flex-wrapper--row" style="display: none">
<input type="checkbox" name="checkbox-select-{{ group.name }}"
class="input custom--checkbox margin-top">
</div>
</div>
</div>
<div class="table__cell">
<a href="{% url 'specification-detail' pk=specification.id %}"
title="View the specification details">{{ specification.id }}</a>
......@@ -403,4 +441,12 @@
<h2>Log in to see/add/update work specifications</h2>
</div>
{% endif %}
<script type="text/javascript">
function toggle(source, name) {
const checkboxes = document.getElementsByName(name);
for (let i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment