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

Enable toggling of device images on elevations list

This commit is contained in:
Jeremy Stretch
2020-02-20 13:20:58 -05:00
parent ba6562a5db
commit c78d30d47e
3 changed files with 25 additions and 30 deletions

View File

@ -0,0 +1,16 @@
// Toggle the display of device images within an SVG rack elevation
$('button.toggle-images').click(function() {
var selected = $(this).attr('selected');
var rack_front = $("#rack_front");
var rack_rear = $("#rack_rear");
if (selected) {
$('.device-image', rack_front.contents()).addClass('hidden');
$('.device-image', rack_rear.contents()).addClass('hidden');
} else {
$('.device-image', rack_front.contents()).removeClass('hidden');
$('.device-image', rack_rear.contents()).removeClass('hidden');
}
$(this).attr('selected', !selected);
$(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
return false;
});

View File

@ -2,6 +2,7 @@
{% load buttons %}
{% load custom_links %}
{% load helpers %}
{% load static %}
{% block header %}
<div class="row noprint">
@ -45,12 +46,10 @@
<h1>{% block title %}Rack {{ rack }}{% endblock %}</h1>
{% include 'inc/created_updated.html' with obj=rack %}
<div class="pull-right noprint">
{% custom_links rack %}
</div>
<div class="pull-right noprint">
<button class="btn btn-default btn-xs toggle-images" selected="selected">
<button class="btn btn-sm btn-default toggle-images" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show Images
</button>
{% custom_links rack %}
</div>
<ul class="nav nav-tabs">
<li role="presentation"{% if not active_tab %} class="active"{% endif %}>
@ -373,25 +372,5 @@
{% endblock %}
{% block javascript %}
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
});
// Toggle the display of device images
$('button.toggle-images').click(function() {
var selected = $(this).attr('selected');
var rack_front = $("#rack_front");
var rack_rear = $("#rack_rear");
if (selected) {
$('.device-image', rack_front.contents()).addClass('hidden');
$('.device-image', rack_rear.contents()).addClass('hidden');
} else {
$('.device-image', rack_front.contents()).removeClass('hidden');
$('.device-image', rack_rear.contents()).removeClass('hidden');
}
$(this).attr('selected', !selected);
$(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
return false;
});
</script>
<script src="{% static 'js/rack_elevations.js' %}?v{{ settings.VERSION }}"></script>
{% endblock %}

View File

@ -1,8 +1,12 @@
{% extends '_base.html' %}
{% load helpers %}
{% load static %}
{% block content %}
<div class="btn-group pull-right noprint" role="group">
<button class="btn btn-default toggle-images" selected="selected">
<span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show Images
</button>
<a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-default{% if rack_face == 'front' %} active{% endif %}">Front</a>
<a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-default{% if rack_face == 'rear' %} active{% endif %}">Rear</a>
</div>
@ -41,9 +45,5 @@
{% endblock %}
{% block javascript %}
<script type="text/javascript">
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
<script src="{% static 'js/rack_elevations.js' %}?v{{ settings.VERSION }}"></script>
{% endblock %}