From 4405bc41826d11cd139607212347347ed40dc393 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@digitalocean.com>
Date: Wed, 19 Oct 2016 15:45:26 -0400
Subject: [PATCH] Closes #608: Add "toggle all" button to device and device
 type components

---
 netbox/project-static/js/forms.js             | 11 ++++-
 netbox/templates/dcim/device.html             | 44 ++++++++++++-------
 .../dcim/inc/devicetype_component_table.html  | 13 ++++--
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/netbox/project-static/js/forms.js b/netbox/project-static/js/forms.js
index 944b01868..439cf8701 100644
--- a/netbox/project-static/js/forms.js
+++ b/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
diff --git a/netbox/templates/dcim/device.html b/netbox/templates/dcim/device.html
index 345944370..62683930b 100644
--- a/netbox/templates/dcim/device.html
+++ b/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 %}
diff --git a/netbox/templates/dcim/inc/devicetype_component_table.html b/netbox/templates/dcim/inc/devicetype_component_table.html
index c71c5b4da..9954fec23 100644
--- a/netbox/templates/dcim/inc/devicetype_component_table.html
+++ b/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">