Multi select visuals

ldvspec/lofardata/templates/lofardata/index.html

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