Display device names in front of device front/rear images

Fixes #6879
This commit is contained in:
Brian Candler 2021-08-04 10:38:30 +01:00
parent 76df55dfc0
commit 1aa1dce243
4 changed files with 28 additions and 3 deletions

View File

@ -89,10 +89,9 @@ class RackElevationSVG:
)
link.set_desc(self._get_device_description(device))
link.add(drawing.rect(start, end, style='fill: #{}'.format(color), class_='slot'))
hex_color = '#{}'.format(foreground_color(color))
link.add(drawing.text(str(name), insert=text, fill=hex_color))
# Embed front device type image if one exists
text_color = '#{}'.format(foreground_color(color))
if self.include_images and device.device_type.front_image:
image = drawing.image(
href=device.device_type.front_image.url,
@ -103,11 +102,14 @@ class RackElevationSVG:
image.fit(scale='slice')
link.add(image)
link.add(drawing.text(str(name), insert=text, stroke='#{}'.format(color),
stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
link.add(drawing.text(str(name), insert=text, fill=text_color, class_='device-label'))
def _draw_device_rear(self, drawing, device, start, end, text):
rect = drawing.rect(start, end, class_="slot blocked")
rect.set_desc(self._get_device_description(device))
drawing.add(rect)
drawing.add(drawing.text(str(device), insert=text))
# Embed rear device type image if one exists
if self.include_images and device.device_type.rear_image:
@ -120,6 +122,10 @@ class RackElevationSVG:
image.fit(scale='slice')
drawing.add(image)
drawing.add(drawing.text(str(device), insert=text, stroke='white',
stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
drawing.add(drawing.text(str(device), insert=text, class_='device-label'))
@staticmethod
def _draw_empty(drawing, rack, start, end, text, id_, face_id, class_, reservation):
link = drawing.add(

View File

@ -11,3 +11,16 @@ $('button.toggle-images').click(function() {
$(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
return false;
});
// Toggle the display of device labels within an SVG rack elevation
$('button.toggle-labels').click(function() {
var selected = $(this).attr('selected');
var rack_elevation = $(".rack_elevation");
if (selected) {
$('.device-label', rack_elevation.contents()).addClass('hidden');
} else {
$('.device-label', rack_elevation.contents()).removeClass('hidden');
}
$(this).attr('selected', !selected);
$(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
return false;
});

View File

@ -40,6 +40,9 @@
<button class="btn btn-sm btn-default toggle-images" selected="selected">
<span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
</button>
<button class="btn btn-sm btn-default toggle-labels" selected="selected">
<span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
</button>
{{ block.super }}
{% endblock %}

View File

@ -7,6 +7,9 @@
<button class="btn btn-default toggle-images" selected="selected">
<span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
</button>
<button class="btn btn-default toggle-labels" selected="selected">
<span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
</button>
<div class="btn-group" role="group">
<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>