CHanged VLAN table in device panel

This commit is contained in:
gorban 2020-02-11 12:50:41 +03:00
parent ecc47a3f12
commit b01d96b5b3
3 changed files with 159 additions and 28 deletions

View File

@ -2,9 +2,23 @@
$('button.toggle-ips').click(function() { $('button.toggle-ips').click(function() {
var selected = $(this).attr('selected'); var selected = $(this).attr('selected');
if (selected) { if (selected) {
$('#interfaces_table tr.interface:visible + tr.ipaddresses').hide(); $('.ipaddresses').hide();
} else { } else {
$('#interfaces_table tr.interface:visible + tr.ipaddresses').show(); $('.ipaddresses').show();
}
$(this).attr('selected', !selected);
$(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
return false;
});
//Toggle the display of VLANs
$('button.toggle-vlans').click(function(){
var selected = $(this).attr('selected');
if (selected) {
$('.vlans').hide();
} else {
$('.vlans').show();
} }
$(this).attr('selected', !selected); $(this).attr('selected', !selected);
$(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked'); $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');

View File

@ -571,6 +571,11 @@
<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>
{# </div>#}
{# <div class="pull-right noprint">#}
<button class="btn btn-default btn-xs toggle-vlans" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show VLANs
</button>
</div> </div>
<div class="col-md-2 pull-right noprint"> <div class="col-md-2 pull-right noprint">
<input class="form-control interface-filter" type="text" placeholder="Filter" title="RegEx-enabled" style="height: 23px" /> <input class="form-control interface-filter" type="text" placeholder="Filter" title="RegEx-enabled" style="height: 23px" />
@ -585,8 +590,8 @@
<th>Name</th> <th>Name</th>
<th>LAG</th> <th>LAG</th>
<th>Description</th> <th>Description</th>
<th>Tagged vlans</th> {# <th>Tagged VLANs</th>#}
<th>Untagged vlan</th> {# <th>Untagged VLAN</th>#}
<th>MTU</th> <th>MTU</th>
<th>Mode</th> <th>Mode</th>
<th>Cable</th> <th>Cable</th>

View File

@ -39,21 +39,21 @@
</td> </td>
{#Tagged ports#} {#Tagged ports#}
<td> {# <td>#}
{% if iface.tagged_vlans.all %} {# {% if iface.tagged_vlans.all %}#}
{% for tag in iface.tagged_vlans.all %} {# {% for tag in iface.tagged_vlans.all %}#}
<a href="{% url 'ipam:vlan' tag.id %}">{{ tag }}</a> {# <a href="{% url 'ipam:vlan' tag.id %}">{{ tag }}</a>#}
<br> {# <br>#}
{% endfor %} {# {% endfor %}#}
{% endif %} {# {% endif %}#}
</td> {# </td>#}
{##}
{#Untagged ports#} {#Untagged ports#}
<td> {# <td>#}
{% if iface.untagged_vlan %} {# {% if iface.untagged_vlan %}#}
<a href="{% url 'ipam:vlan' iface.untagged_vlan.id %}">{{ iface.untagged_vlan }}</a> {# <a href="{% url 'ipam:vlan' iface.untagged_vlan.id %}">{{ iface.untagged_vlan }}</a>#}
{% endif %} {# {% endif %}#}
</td> {# </td>#}
{# MTU #} {# MTU #}
<td>{{ iface.mtu|default:"&mdash;" }}</td> <td>{{ iface.mtu|default:"&mdash;" }}</td>
@ -201,16 +201,17 @@
</td> </td>
</tr> </tr>
{% with ipaddresses=iface.ip_addresses.all %} {% with ipaddresses=iface.ip_addresses.all %}
{% if ipaddresses %} {% if ipaddresses %}
<tr class="ipaddresses"> <tr>
{# Placeholder#} {# Placeholder#}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %} {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<td></td> <td class="ipaddresses"></td>
{% endif %} {% endif %}
{# IP addresses table#} {# IP addresses table#}
<td colspan="11" style="padding: 0"> <td class="ipaddresses" colspan="9" style="padding: 0">
<table class="table table-condensed interface-ips"> <table class="table table-condensed interface-ips">
<thead> <thead>
<tr class="text-muted"> <tr class="text-muted">
@ -279,3 +280,114 @@
</tr> </tr>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
{% if iface.untagged_vlan or iface.tagged_vlans.all %}
<tr>
{# Placeholder#}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<td class="vlans"></td>
{% endif %}
{# VLAN table #}
<td class="vlans" colspan="9" style="padding: 0">
<table class="table table-condensed interface-ips">
<thead>
<tr class="text-muted">
<th class="col-md-1">ID</th>
<th class="col-md-1">Tagged</th>
<th class="col-md-2">Name</th>
<th class="col-md-2">Status</th>
<th class="col-md-2">Description</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tr>
{# Untagged VLAN #}
{% if iface.untagged_vlan %}
{# VLAN ID #}
<td>
<a href="{% url 'ipam:vlan' iface.untagged_vlan.id %}">{{ iface.untagged_vlan.id }}</a>
</td>
{# VLAN tag status #}
<td>
<span class="text-danger">
<li class="fa fa-close"></li>
</span>
</td>
{# VLAN name #}
<td>{{ iface.untagged_vlan.name }}</td>
{# VLAN status #}
<td>
<span class="label label-primary"
style="text-transform: capitalize">{{ iface.untagged_vlan.status }}</span>
</td>
{# VLAN description #}
<td>{{ iface.untagged_vlan.description }}</td>
{# VLAN buttons #}
<td style="text-align: right">
{% if perms.ipam.change_vlan %}
<a href="{% url 'ipam:vlan_edit' pk=iface.untagged_vlan.pk %}?return_url={{ device.get_absolute_url }}"
class="btn btn-info btn-xs">
<i class="glyphicon glyphicon-pencil" aria-hidden="true"
title="Edit IP address"></i>
</a>
{% endif %}
{% if perms.ipam.delete_ipaddress %}
<a href="{% url 'ipam:vlan_edit' pk=iface.untagged_vlan.pk %}?return_url={{ device.get_absolute_url }}"
class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-trash" aria-hidden="true"
title="Delete IP address"></i>
</a>
{% endif %}
</td>
{% endif %}
</tr>
{# Tagged VLANs #}
{% if iface.tagged_vlans.all %}
{% for tag in iface.tagged_vlans.all %}
<tr>
{# VLAN ID #}
<td>
<a href="{% url 'ipam:vlan' tag.id %}">{{ tag.id }}</a>
</td>
{# VLAN tag #}
<td>
<span class="text-success">
<li class="fa fa-check"></li>
</span>
</td>
{# VLAN name #}
<td>{{ tag.name }}</td>
{# VLAN status #}
<td>
<span class="label label-primary"
style="text-transform: capitalize">{{ tag.status }}</span>
</td>
{# VLAN description #}
<td>{{ tag.description }}</td>
{# VLAN buttons #}
<td style="text-align: right">
{% if perms.ipam.change_vlan %}
<a href="{% url 'ipam:vlan_edit' pk=tag.pk %}?return_url={{ device.get_absolute_url }}"
class="btn btn-info btn-xs">
<i class="glyphicon glyphicon-pencil" aria-hidden="true" title="Edit VLAN"></i>
</a>
{% endif %}
{% if perms.ipam.delete_ipaddress %}
<a href="{% url 'ipam:vlan_delete' pk=tag.pk %}?return_url={{ device.get_absolute_url }}"
class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete VLAN"></i>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
{% endif %}
</table>
</td>
</tr>
{% endif %}