NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-18 13:06:30 -06:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Cleaned up component tables and checkbox toggling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
netbox/dcim/views.py
View File

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

2
netbox/project-static/css/base.css
View File

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

31
netbox/project-static/js/forms.js
View File

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

100
netbox/templates/dcim/device.html
View File

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

4
netbox/templates/dcim/inc/devicebay.html
View File

@ -5,7 +5,7 @@
</td> </td>
{% endif %} {% endif %}
<td> <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> </td>
{% if devicebay.installed_device %} {% if devicebay.installed_device %}
<td> <td>
@ -19,7 +19,7 @@
<span class="text-muted">Vacant</span> <span class="text-muted">Vacant</span>
</td> </td>
{% endif %} {% endif %}
<td colspan="2" class="text-right"> <td class="text-right">
{% if perms.dcim.change_devicebay %} {% if perms.dcim.change_devicebay %}
{% if devicebay.installed_device %} {% if devicebay.installed_device %}
<a href="{% url 'dcim:devicebay_depopulate' pk=devicebay.pk %}" class="btn btn-danger btn-xs"> <a href="{% url 'dcim:devicebay_depopulate' pk=devicebay.pk %}" class="btn btn-danger btn-xs">

13
netbox/templates/dcim/inc/devicetype_component_table.html
View File

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

2
netbox/templates/dcim/inc/interface.html
View File

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

20
netbox/templates/virtualization/virtualmachine.html
View File

@ -235,22 +235,13 @@
<button class="btn btn-default btn-xs toggle-ips" selected="selected"> <button class="btn btn-default btn-xs toggle-ips" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
</button> </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>
</div> </div>
<table id="interfaces_table" class="table table-hover panel-body component-list"> <table id="interfaces_table" class="table table-hover table-headings panel-body component-list">
<tr class="table-headings"> <thead>
<tr>
{% if perms.dcim.change_interface or perms.dcim.delete_interface %} {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<th></th> <th class="pk"><input type="checkbox" class="toggle" title="Toggle all" /></th>
{% endif %} {% endif %}
<th>Name</th> <th>Name</th>
<th>LAG</th> <th>LAG</th>
@ -260,6 +251,8 @@
<th colspan="2">Connection</th> <th colspan="2">Connection</th>
<th></th> <th></th>
</tr> </tr>
</thead>
<tbody>
{% for iface in interfaces %} {% for iface in interfaces %}
{% include 'dcim/inc/interface.html' with device=vm %} {% include 'dcim/inc/interface.html' with device=vm %}
{% empty %} {% empty %}
@ -267,6 +260,7 @@
<td colspan="6">No interfaces defined</td> <td colspan="6">No interfaces defined</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody>
</table> </table>
{% if perms.dcim.add_interface or perms.dcim.delete_interface %} {% if perms.dcim.add_interface or perms.dcim.delete_interface %}
<div class="panel-footer"> <div class="panel-footer">

2
netbox/utilities/tables.py
View File

@ -30,4 +30,4 @@ class ToggleColumn(tables.CheckBoxColumn):
@property @property
def header(self): 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" />')