From c78d30d47e9158022332dab33ef100ed117537b8 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <stretch@packetlife.net>
Date: Thu, 20 Feb 2020 13:20:58 -0500
Subject: [PATCH] Enable toggling of device images on elevations list

---
 netbox/project-static/js/rack_elevations.js   | 16 ++++++++++
 netbox/templates/dcim/rack.html               | 29 +++----------------
 .../templates/dcim/rack_elevation_list.html   | 10 +++----
 3 files changed, 25 insertions(+), 30 deletions(-)
 create mode 100644 netbox/project-static/js/rack_elevations.js

diff --git a/netbox/project-static/js/rack_elevations.js b/netbox/project-static/js/rack_elevations.js
new file mode 100644
index 000000000..138065e3c
--- /dev/null
+++ b/netbox/project-static/js/rack_elevations.js
@@ -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;
+});
diff --git a/netbox/templates/dcim/rack.html b/netbox/templates/dcim/rack.html
index a43b00f54..b43a4bfdf 100644
--- a/netbox/templates/dcim/rack.html
+++ b/netbox/templates/dcim/rack.html
@@ -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 %}
diff --git a/netbox/templates/dcim/rack_elevation_list.html b/netbox/templates/dcim/rack_elevation_list.html
index da4f002d6..2ff622f0f 100644
--- a/netbox/templates/dcim/rack_elevation_list.html
+++ b/netbox/templates/dcim/rack_elevation_list.html
@@ -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 %}