diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 4c691de2a..6d76b8547 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index 116f576c2..ebf1bd992 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/js/rack_elevations.js b/netbox/project-static/js/rack_elevations.js deleted file mode 100644 index ef21eefd7..000000000 --- a/netbox/project-static/js/rack_elevations.js +++ /dev/null @@ -1,13 +0,0 @@ -// 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 { - $('.device-image', 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; -}); diff --git a/netbox/project-static/src/buttons.ts b/netbox/project-static/src/buttons.ts new file mode 100644 index 000000000..311d3cdf9 --- /dev/null +++ b/netbox/project-static/src/buttons.ts @@ -0,0 +1,42 @@ +import { isTruthy, getElements } from './util'; + +/** + * Add onClick callback for toggling rack elevation images. + */ +export function initRackElevation() { + for (const button of getElements('button.toggle-images')) { + /** + * Toggle the visibility of device images and update the toggle button style. + */ + function handleClick(event: Event) { + const target = event.target as HTMLButtonElement; + const selected = target.getAttribute('selected'); + + if (isTruthy(selected)) { + target.innerHTML = ` Show Images`; + + for (const elevation of getElements('.rack_elevation')) { + const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? []; + for (const image of images) { + if (!image.classList.contains('hidden')) { + image && image.classList.add('hidden'); + } + } + } + target.setAttribute('selected', ''); + } else { + target.innerHTML = ` Hide Images`; + + for (const elevation of getElements('.rack_elevation')) { + const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? []; + for (const image of images) { + image && image.classList.remove('hidden'); + } + } + + target.setAttribute('selected', 'selected'); + } + } + button.addEventListener('click', handleClick); + } +} diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index 7c5eca403..383cef002 100644 --- a/netbox/project-static/src/netbox.ts +++ b/netbox/project-static/src/netbox.ts @@ -4,6 +4,7 @@ import { initApiSelect, initStaticSelect, initColorSelect } from './select'; import { initDateSelector } from './dateSelector'; import { initMessageToasts } from './toast'; import { initSpeedSelector, initForms } from './forms'; +import { initRackElevation } from './buttons'; import { initSearchBar } from './search'; import { getElements } from './util'; @@ -16,6 +17,7 @@ const INITIALIZERS = [ initDateSelector, initSpeedSelector, initColorSelect, + initRackElevation, ] as (() => void)[]; /** diff --git a/netbox/project-static/src/util.ts b/netbox/project-static/src/util.ts index 89013bf70..0194b1039 100644 --- a/netbox/project-static/src/util.ts +++ b/netbox/project-static/src/util.ts @@ -49,18 +49,20 @@ export async function getApiData( } export function getElements( - key: K, + ...key: K[] ): Generator; export function getElements( - key: K, + ...key: K[] ): Generator; -export function getElements(key: string): Generator; +export function getElements(...key: string[]): Generator; export function* getElements( - key: string | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap, + ...key: (string | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap)[] ) { - for (const element of document.querySelectorAll(key)) { - if (element !== null) { - yield element; + for (const query of key) { + for (const element of document.querySelectorAll(query)) { + if (element !== null) { + yield element; + } } } } diff --git a/netbox/templates/dcim/rack.html b/netbox/templates/dcim/rack.html index f0081cce1..3ff088b1c 100644 --- a/netbox/templates/dcim/rack.html +++ b/netbox/templates/dcim/rack.html @@ -18,29 +18,17 @@
  • {{ object }}
    • {% endblock %} -{% block buttons %} - - Previous Rack - - - Next Rack - - {% if perms.dcim.add_rack %} - {% clone_button object %} - {% endif %} - {% if perms.dcim.change_rack %} - {% edit_button object %} - {% endif %} - {% if perms.dcim.delete_rack %} - {% delete_button object %} - {% endif %} -{% endblock %} - -{% block tab_buttons %} - - {{ block.super }} + + Previous Rack + + + Next Rack + {% endblock %} {% block content %} @@ -389,7 +377,3 @@ {% endblock %} - -{% block javascript %} - -{% endblock %} diff --git a/netbox/templates/generic/object.html b/netbox/templates/generic/object.html index 2736c207c..495316fd9 100644 --- a/netbox/templates/generic/object.html +++ b/netbox/templates/generic/object.html @@ -63,10 +63,10 @@ {% endblock %} -{% block content %}{% endblock %} +{% block content %}{% block tab_buttons %}{% endblock %}{% endblock %} {% block components %}{% endblock %} -{% block header %} +{% comment %} {% block header %}
    - {% comment %}
    +
    {% plugin_buttons object %} {% block buttons %} {% if request.user|can_add:object %} @@ -104,7 +104,7 @@ {% endblock %}

    {% block title %}{{ object }}{% endblock %}

    - {% endcomment %} + {% include 'inc/created_updated.html' %}
    {% block tab_buttons %} @@ -112,4 +112,4 @@ {% endblock %}
    -{% endblock %} +{% endblock %} {% endcomment %}