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

This commit is contained in:
Jeremy Stretch 2016-10-19 15:45:26 -04:00
parent 54a0639a6e
commit 4405bc4182
3 changed files with 47 additions and 21 deletions

View File

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

View File

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

View File

@ -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">