From a4c25e8773d35f2549b6fe2cf0a536d2c40b9441 Mon Sep 17 00:00:00 2001 From: Nikolay Ogorov Date: Wed, 9 Dec 2020 21:02:37 +0300 Subject: [PATCH] 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 | 1 + netbox/dcim/views.py | 15 +++++++ netbox/project-static/js/rack_elevations.js | 44 +++++++++++++++---- netbox/templates/dcim/rack.html | 3 +- .../templates/dcim/rack_elevation_list.html | 3 +- 5 files changed, 55 insertions(+), 11 deletions(-) diff --git a/docs/development/user-preferences.md b/docs/development/user-preferences.md index 0595bc358..4d9b1ed37 100644 --- a/docs/development/user-preferences.md +++ b/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 diff --git a/netbox/dcim/views.py b/netbox/dcim/views.py index 42175d782..f66f9874c 100644 --- a/netbox/dcim/views.py +++ b/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) }) diff --git a/netbox/project-static/js/rack_elevations.js b/netbox/project-static/js/rack_elevations.js index 9c58b82e3..46a023824 100644 --- a/netbox/project-static/js/rack_elevations.js +++ b/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')); +}); diff --git a/netbox/templates/dcim/rack.html b/netbox/templates/dcim/rack.html index 4cf3b9018..27d05bd0c 100644 --- a/netbox/templates/dcim/rack.html +++ b/netbox/templates/dcim/rack.html @@ -54,7 +54,8 @@

{% block title %}Rack {{ rack }}{% endblock %}

{% include 'inc/created_updated.html' with obj=rack %}
- {% custom_links rack %} diff --git a/netbox/templates/dcim/rack_elevation_list.html b/netbox/templates/dcim/rack_elevation_list.html index 433053abc..3c590f95f 100644 --- a/netbox/templates/dcim/rack_elevation_list.html +++ b/netbox/templates/dcim/rack_elevation_list.html @@ -4,7 +4,8 @@ {% block content %}