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() {
var selected = $(this).attr('selected');
if (selected) {
$('#interfaces_table tr.interface:visible + tr.ipaddresses').hide();
$('.ipaddresses').hide();
} 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).children('span').toggleClass('glyphicon-check glyphicon-unchecked');

View File

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

View File

@ -39,21 +39,21 @@
</td>
{#Tagged ports#}
<td>
{% if iface.tagged_vlans.all %}
{% for tag in iface.tagged_vlans.all %}
<a href="{% url 'ipam:vlan' tag.id %}">{{ tag }}</a>
<br>
{% endfor %}
{% endif %}
</td>
{# <td>#}
{# {% if iface.tagged_vlans.all %}#}
{# {% for tag in iface.tagged_vlans.all %}#}
{# <a href="{% url 'ipam:vlan' tag.id %}">{{ tag }}</a>#}
{# <br>#}
{# {% endfor %}#}
{# {% endif %}#}
{# </td>#}
{##}
{#Untagged ports#}
<td>
{% if iface.untagged_vlan %}
<a href="{% url 'ipam:vlan' iface.untagged_vlan.id %}">{{ iface.untagged_vlan }}</a>
{% endif %}
</td>
{# <td>#}
{# {% if iface.untagged_vlan %}#}
{# <a href="{% url 'ipam:vlan' iface.untagged_vlan.id %}">{{ iface.untagged_vlan }}</a>#}
{# {% endif %}#}
{# </td>#}
{# MTU #}
<td>{{ iface.mtu|default:"&mdash;" }}</td>
@ -201,16 +201,17 @@
</td>
</tr>
{% with ipaddresses=iface.ip_addresses.all %}
{% if ipaddresses %}
<tr class="ipaddresses">
<tr>
{# Placeholder#}
{% if perms.dcim.change_interface or perms.dcim.delete_interface %}
<td></td>
<td class="ipaddresses"></td>
{% endif %}
{# IP addresses table#}
<td colspan="11" style="padding: 0">
<td class="ipaddresses" colspan="9" style="padding: 0">
<table class="table table-condensed interface-ips">
<thead>
<tr class="text-muted">
@ -279,3 +280,114 @@
</tr>
{% endif %}
{% 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 %}