Closes #608: Add "toggle all" button to device and device type components

netbox/project-static/js/forms.js

@@ -1,6 +1,6 @@
 $(document).ready(function() {
 
-    // "Toggle all" checkbox in a table header
+    // "Toggle all" checkbox (table header)
     $('#toggle_all').click(function (event) {
         $('td input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
         if ($(this).is(':checked')) {
@@ -16,6 +16,15 @@ $(document).ready(function() {
         }
     });
 
+    // Simple "Toggle all" button (panel)
+    $('button.toggle').click(function (event) {
+        var selected = $(this).attr('selected');
+        $(this).closest('form').find('input:checkbox[name=pk]').prop('checked', !selected);
+        $(this).attr('selected', !selected);
+        $(this).children('span').toggleClass('glyphicon-unchecked glyphicon-check');
+        return false;
+    });
+
     // Slugify
     function slugify(s, num_chars) {
         s = s.replace(/[^\-\.\w\s]/g, '');          // Remove unneeded chars

netbox/templates/dcim/device.html

@@ -314,13 +314,16 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Device Bays</strong>
-                    {% if perms.dcim.add_devicebay and device_bays|length > 10 %}
-                        <div class="pull-right">
+                    <div class="pull-right">
+                        <button class="btn btn-default btn-xs toggle">
+                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
+                        </button>
+                        {% if perms.dcim.add_devicebay and device_bays|length > 10 %}
                             <a href="{% url 'dcim:devicebay_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add device bays
                             </a>
-                        </div>
-                    {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <table class="table table-hover panel-body">
                     {% for devicebay in device_bays %}
@@ -361,13 +364,16 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Interfaces</strong>
-                    {% if perms.dcim.add_interface and interfaces|length > 10 %}
-                        <div class="pull-right">
+                    <div class="pull-right">
+                        <button class="btn btn-default btn-xs toggle">
+                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
+                        </button>
+                        {% if perms.dcim.add_interface and interfaces|length > 10 %}
                             <a href="{% url 'dcim:interface_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
                             </a>
-                        </div>
-                    {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <table class="table table-hover panel-body">
                     {% for iface in interfaces %}
@@ -413,13 +419,16 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Console Server Ports</strong>
-                    {% if perms.dcim.add_consoleserverport and cs_ports|length > 10 %}
-                        <div class="pull-right">
+                    <div class="pull-right">
+                        <button class="btn btn-default btn-xs toggle">
+                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
+                        </button>
+                        {% if perms.dcim.add_consoleserverport and cs_ports|length > 10 %}
                             <a href="{% url 'dcim:consoleserverport_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add console server ports
                             </a>
-                        </div>
-                    {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <table class="table table-hover panel-body">
                     {% for csp in cs_ports %}
@@ -460,13 +469,16 @@
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <strong>Power Outlets</strong>
-                    {% if perms.dcim.add_poweroutlet and power_outlets|length > 10 %}
-                        <div class="pull-right">
+                    <div class="pull-right">
+                        <button class="btn btn-default btn-xs toggle">
+                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
+                        </button>
+                        {% if perms.dcim.add_poweroutlet and power_outlets|length > 10 %}
                             <a href="{% url 'dcim:poweroutlet_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power outlets
                             </a>
-                        </div>
-                    {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <table class="table table-hover panel-body">
                     {% for po in power_outlets %}

netbox/templates/dcim/inc/devicetype_component_table.html

@@ -5,14 +5,19 @@
         <div class="panel panel-default">
             <div class="panel-heading">
                 <strong>{{ title }}</strong>
-                {% if table.rows|length > 10 %}
-                    <div class="pull-right">
+                <div class="pull-right">
+                    {% if table.rows|length > 3 %}
+                        <button class="btn btn-default btn-xs toggle">
+                            <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
+                        </button>
+                    {% endif %}
+                    {% if table.rows|length > 10 %}
                         <a href="{% url add_url pk=devicetype.pk %}{{ add_url_extra }}" class="btn btn-primary btn-xs">
                             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                             Add {{ title }}
                         </a>
-                    </div>
-                {% endif %}
+                    {% endif %}
+                </div>
             </div>
             {% render_table table 'table.html' %}
             <div class="panel-footer">