1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

Cleaned up component tables and checkbox toggling

This commit is contained in:
Jeremy Stretch
2017-12-21 13:29:02 -05:00
parent 063e79451f
commit d84e5d1839
9 changed files with 123 additions and 169 deletions

View File

@ -510,29 +510,29 @@ class DeviceTypeView(View):
# Component tables
consoleport_table = tables.ConsolePortTemplateTable(
natsorted(ConsolePortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
show_header=False
orderable=False
)
consoleserverport_table = tables.ConsoleServerPortTemplateTable(
natsorted(ConsoleServerPortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
show_header=False
orderable=False
)
powerport_table = tables.PowerPortTemplateTable(
natsorted(PowerPortTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
show_header=False
orderable=False
)
poweroutlet_table = tables.PowerOutletTemplateTable(
natsorted(PowerOutletTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
show_header=False
orderable=False
)
interface_table = tables.InterfaceTemplateTable(
list(InterfaceTemplate.objects.order_naturally(
devicetype.interface_ordering
).filter(device_type=devicetype)),
show_header=False
orderable=False
)
devicebay_table = tables.DeviceBayTemplateTable(
natsorted(DeviceBayTemplate.objects.filter(device_type=devicetype), key=attrgetter('name')),
show_header=False
orderable=False
)
if request.user.has_perm('dcim.change_devicetype'):
consoleport_table.columns.show('pk')

View File

@ -121,7 +121,7 @@ input[name="pk"] {
}
/* Tables */
.table > tbody > tr > th.pk, .table > tbody > tr > td.pk {
th.pk, td.pk {
padding-bottom: 6px;
padding-top: 10px;
width: 30px;

View File

@ -1,14 +1,24 @@
$(document).ready(function() {
// "Toggle all" checkbox (table header)
$('#toggle_all').click(function() {
$('td input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
// "Toggle" checkbox for object lists (PK column)
$('input:checkbox.toggle').click(function() {
$(this).closest('table').find('input:checkbox[name=pk]').prop('checked', $(this).prop('checked'));
// Show the "select all" box if present
if ($(this).is(':checked')) {
$('#select_all_box').removeClass('hidden');
} else {
$('#select_all').prop('checked', false);
}
});
// Uncheck the "toggle" and "select all" checkboxes if an item is unchecked
$('input:checkbox[name=pk]').click(function (event) {
if (!$(this).attr('checked')) {
$('input:checkbox.toggle, #select_all').prop('checked', false);
}
});
// Enable hidden buttons when "select all" is checked
$('#select_all').click(function() {
if ($(this).is(':checked')) {
@ -17,21 +27,6 @@ $(document).ready(function() {
$('#select_all_box').find('button').prop('disabled', 'disabled');
}
});
// Uncheck the "toggle all" checkbox if an item is unchecked
$('input:checkbox[name=pk]').click(function (event) {
if (!$(this).attr('checked')) {
$('#select_all, #toggle_all').prop('checked', false);
}
});
// Simple "Toggle all" button (panel)
$('button.toggle').click(function() {
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) {

View File

@ -376,27 +376,27 @@
<div class="panel panel-default">
<div class="panel-heading">
<strong>Device Bays</strong>
<div class="pull-right">
{% if perms.dcim.change_devicebay and device_bays|length > 1 %}
<button class="btn btn-default btn-xs toggle">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
</button>
{% endif %}
{% 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>
{% endif %}
</div>
</div>
<table class="table table-hover panel-body component-list">
{% for devicebay in device_bays %}
{% include 'dcim/inc/devicebay.html' %}
{% empty %}
<table class="table table-hover table-headings panel-body component-list">
<thead>
<tr>
<td colspan="4">No device bays defined</td>
{% if perms.dcim.change_devicebay or perms.dcim.delete_devicebay %}
<th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %}
<th>Name</th>
<th colspan="2">Installed Device</th>
<th></th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for devicebay in device_bays %}
{% include 'dcim/inc/devicebay.html' %}
{% empty %}
<tr>
<td colspan="4" class="text-center text-muted">&mdash; No device bays defined &mdash;</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if perms.dcim.add_devicebay or perms.dcim.delete_devicebay %}
<div class="panel-footer">
@ -433,38 +433,32 @@
<button class="btn btn-default btn-xs toggle-ips" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
</button>
{% if perms.dcim.change_interface and interfaces|length > 1 %}
<button class="btn btn-default btn-xs toggle">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
</button>
{% endif %}
{% 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>
{% endif %}
</div>
</div>
<table id="interfaces_table" class="table table-hover panel-body component-list">
<tr class="table-headings">
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<th></th>
{% endif %}
<th>Name</th>
<th>LAG</th>
<th>Description</th>
<th>MTU</th>
<th>MAC Address</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% for iface in interfaces %}
{% include 'dcim/inc/interface.html' %}
{% empty %}
<table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
<thead>
<tr>
<td colspan="8">No interfaces defined</td>
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %}
<th>Name</th>
<th>LAG</th>
<th>Description</th>
<th>MTU</th>
<th>MAC Address</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for iface in interfaces %}
{% include 'dcim/inc/interface.html' %}
{% empty %}
<tr>
<td colspan="8" class="text-center text-muted">&mdash; No interfaces defined &mdash;</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if perms.dcim.add_interface or perms.dcim.delete_interface %}
<div class="panel-footer">
@ -506,35 +500,27 @@
<div class="panel panel-default">
<div class="panel-heading">
<strong>Console Server Ports</strong>
<div class="pull-right">
{% if perms.dcim.change_consoleserverport and cs_ports|length > 1 %}
<button class="btn btn-default btn-xs toggle">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
</button>
{% endif %}
{% 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>
{% endif %}
</div>
</div>
<table class="table table-hover panel-body component-list">
<tr class="table-headings">
{% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
<th></th>
{% endif %}
<th>Name</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% for csp in cs_ports %}
{% include 'dcim/inc/consoleserverport.html' %}
{% empty %}
<table class="table table-hover table-headings panel-body component-list">
<thead>
<tr>
<td colspan="4">No console server ports defined</td>
{% if perms.dcim.change_consoleserverport or perms.dcim.delete_consoleserverport %}
<th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %}
<th>Name</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for csp in cs_ports %}
{% include 'dcim/inc/consoleserverport.html' %}
{% empty %}
<tr>
<td colspan="4" class="text-center text-muted">&mdash; No console server ports defined &mdash;</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if perms.dcim.add_consoleserverport or perms.dcim.delete_consoleserverport %}
<div class="panel-footer">
@ -571,35 +557,27 @@
<div class="panel panel-default">
<div class="panel-heading">
<strong>Power Outlets</strong>
<div class="pull-right">
{% if perms.dcim.change_poweroutlet and cs_ports|length > 1 %}
<button class="btn btn-default btn-xs toggle">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
</button>
{% endif %}
{% 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>
{% endif %}
</div>
</div>
<table class="table table-hover panel-body component-list">
<tr class="table-headings">
{% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
<th></th>
{% endif %}
<th>Name</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% for po in power_outlets %}
{% include 'dcim/inc/poweroutlet.html' %}
{% empty %}
<table class="table table-hover table-headings panel-body component-list">
<thead>
<tr>
<td colspan="4">No power outlets defined</td>
</tr> text-nowrap
{% endfor %}
{% if perms.dcim.change_poweroutlet or perms.dcim.delete_poweroutlet %}
<th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %}
<th>Name</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
</thead>
<tbody>
{% for po in power_outlets %}
{% include 'dcim/inc/poweroutlet.html' %}
{% empty %}
<tr>
<td colspan="4" class="text-center text-muted">&mdash; No power outlets defined &mdash;</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if perms.dcim.add_poweroutlet or perms.dcim.delete_poweroutlet %}
<div class="panel-footer">

View File

@ -5,7 +5,7 @@
</td>
{% endif %}
<td>
<i class="fa fa-fw fa-{% if devicebay.installed_device %}dot-circle-o{% else %}circle-o{% endif %}"></i> {{ devicebay }}
<i class="fa fa-fw fa-{% if devicebay.installed_device %}dot-circle-o{% else %}circle-o{% endif %}"></i> {{ devicebay.name }}
</td>
{% if devicebay.installed_device %}
<td>
@ -19,7 +19,7 @@
<span class="text-muted">Vacant</span>
</td>
{% endif %}
<td colspan="2" class="text-right">
<td class="text-right">
{% if perms.dcim.change_devicebay %}
{% if devicebay.installed_device %}
<a href="{% url 'dcim:devicebay_depopulate' pk=devicebay.pk %}" class="btn btn-danger btn-xs">

View File

@ -4,19 +4,6 @@
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{ title }}</strong>
<div class="pull-right">
{% if table.rows|length > 1 %}
<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>
{% endif %}
</div>
</div>
{% include 'responsive_table.html' %}
<div class="panel-footer">

View File

@ -3,7 +3,7 @@
{# Checkbox (exclude VC members) #}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<td class="pk">
{% if iface.device == device %}
{% if iface.parent == device %}
<input name="pk" type="checkbox" value="{{ iface.pk }}" />
{% endif %}
</td>

View File

@ -235,38 +235,32 @@
<button class="btn btn-default btn-xs toggle-ips" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
</button>
{% if perms.dcim.change_interface and interfaces|length > 1 %}
<button class="btn btn-default btn-xs toggle">
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
</button>
{% endif %}
{% if perms.dcim.add_interface and interfaces|length > 10 %}
<a href="{% url 'virtualization:interface_add' pk=vm.pk %}" class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
</a>
{% endif %}
</div>
</div>
<table id="interfaces_table" class="table table-hover panel-body component-list">
<tr class="table-headings">
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<th></th>
{% endif %}
<th>Name</th>
<th>LAG</th>
<th>Description</th>
<th>MTU</th>
<th>MAC Address</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% for iface in interfaces %}
{% include 'dcim/inc/interface.html' with device=vm %}
{% empty %}
<table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
<thead>
<tr>
<td colspan="6">No interfaces defined</td>
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %}
<th>Name</th>
<th>LAG</th>
<th>Description</th>
<th>MTU</th>
<th>MAC Address</th>
<th colspan="2">Connection</th>
<th></th>
</tr>
{% endfor %}
</thead>
<tbody>
{% for iface in interfaces %}
{% include 'dcim/inc/interface.html' with device=vm %}
{% empty %}
<tr>
<td colspan="6">No interfaces defined</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if perms.dcim.add_interface or perms.dcim.delete_interface %}
<div class="panel-footer">

View File

@ -30,4 +30,4 @@ class ToggleColumn(tables.CheckBoxColumn):
@property
def header(self):
return mark_safe('<input type="checkbox" id="toggle_all" title="Toggle all" />')
return mark_safe('<input type="checkbox" class="toggle" title="Toggle all" />')