Added rack_elevation.show_images to user.preferences

Changed rack_elevation.js to show/hide images in case of prefernce is set and to send preference to server when user toggle it
Added post method to RackElevationListView.
(I can't find better place to add method that set new preference)
Made toggle-button gliph and attributes dependent on new property

docs/development/user-preferences.md

@@ -9,3 +9,4 @@ The `users.UserConfig` model holds individual preferences for each user in the f
 | extras.configcontext.format | Preferred format when rendering config context data (JSON or YAML) |
 | pagination.per_page | The number of items to display per page of a paginated table |
 | tables.TABLE_NAME.columns | The ordered list of columns to display when viewing the table |
+| rack_elevation.show_images | The bool value defining the display of device images on the rack scheme 

netbox/dcim/views.py

@@ -6,6 +6,7 @@ from django.core.paginator import EmptyPage, PageNotAnInteger
 from django.db import transaction
 from django.db.models import Count, F, Prefetch
 from django.forms import ModelMultipleChoiceField, MultipleHiddenInput, modelformset_factory
+from django.http import HttpResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.urls import reverse
 from django.utils.html import escape
@@ -341,8 +342,21 @@ class RackElevationListView(ObjectListView):
             'reverse': reverse,
             'rack_face': rack_face,
             'filter_form': forms.RackElevationFilterForm(request.GET),
+            'show_images': request.user.config.get('rack_elevation.show_images', False)
         })
 
+    def post(self, request):
+        # Update the user's rack_elevation configuration
+        if "show_images" in request.POST:
+            value = False
+            if request.POST.get("show_images") == 'true' or request.POST.get("show_images") == 'True':
+                value = True
+            preference_name = "rack_elevation.show_images"
+            request.user.config.set(preference_name, value, commit=True)
+            return HttpResponse("Your preferences have been updated.")
+        else:
+            return HttpResponse("No valid parameters was provided")
+
 
 class RackView(ObjectView):
     queryset = Rack.objects.prefetch_related('site__region', 'tenant__group', 'group', 'role')
@@ -376,6 +390,7 @@ class RackView(ObjectView):
             'nonracked_devices': nonracked_devices,
             'next_rack': next_rack,
             'prev_rack': prev_rack,
+            'show_images': request.user.config.get('rack_elevation.show_images', False)
         })
 
 

netbox/project-static/js/rack_elevations.js

@@ -1,13 +1,39 @@
-// Toggle the display of device images within an SVG rack elevation
-$('button.toggle-images').click(function() {
-    var selected = $(this).attr('selected');
-    var rack_elevation = $(".rack_elevation");
-    if (selected) {
-        $('.device-image', rack_elevation.contents()).addClass('hidden');
-    } else {
+//Set images by boolean value
+function setImages(visible){
+    let button = $("#toggle_device_images");
+    let rack_elevation = $(".rack_elevation");
+
+    button.children('span').removeClass('glyphicon-check glyphicon-unchecked');
+    if(visible){
         $('.device-image', rack_elevation.contents()).removeClass('hidden');
+        button.children('span').addClass('glyphicon-check');
+        button.attr('selected', true);
     }
-    $(this).attr('selected', !selected);
-    $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
+    else{
+        $('.device-image', rack_elevation.contents()).addClass('hidden');
+        button.children('span').addClass('glyphicon-unchecked');
+        button.attr('selected', false);
+    }
+}
+
+// Toggle the display of device images within an SVG rack elevation
+$('#toggle_device_images').click(function() {
+    var selected = $(this).attr('selected');
+    $.ajax({
+        url: "/dcim/rack-elevations/",
+        type: 'POST',
+        data: {
+            'show_images': !selected,
+            'csrfmiddlewaretoken': $("#csrfmiddlewaretoken").val()
+        },
+        datatype: "json"
+      });
+
+    setImages(!selected);
     return false;
 });
+
+//Initial images setting
+$(".rack_elevation").on('load', function() {
+    setImages($("#toggle_device_images").attr('selected'));
+});

netbox/templates/dcim/rack.html

@@ -54,7 +54,8 @@
     <h1>{% block title %}Rack {{ rack }}{% endblock %}</h1>
     {% include 'inc/created_updated.html' with obj=rack %}
     <div class="pull-right noprint">
-        <button class="btn btn-sm btn-default toggle-images" selected="selected">
+        <input type="hidden" id="csrfmiddlewaretoken" value="{{ csrf_token }}">
+        <button id="toggle_device_images" class="btn btn-default toggle-images" {% if show_images %} selected="selected" {% endif %}>
             <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show Images
         </button>
         {% custom_links rack %}

netbox/templates/dcim/rack_elevation_list.html

@@ -4,7 +4,8 @@
 
 {% block content %}
 <div class="btn-toolbar pull-right noprint" role="toolbar">
-    <button class="btn btn-default toggle-images" selected="selected">
+    <input type="hidden" id="csrfmiddlewaretoken" value="{{ csrf_token }}">
+    <button id="toggle_device_images" class="btn btn-default toggle-images" {% if show_images %} selected="selected" {% endif %}>
         <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show Images
     </button>
     <div class="btn-group" role="group">