mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
migrate vlan group scope selector to typescript
This commit is contained in:
checktheroads
2
netbox/project-static/dist/netbox.js
vendored
2
netbox/project-static/dist/netbox.js
vendored
File diff suppressed because one or more lines are too long
2
netbox/project-static/dist/netbox.js.map
vendored
2
netbox/project-static/dist/netbox.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +1,10 @@
|
||||
import { getElements, scrollTo } from './util';
|
||||
|
||||
type ShowHideMap = {
|
||||
default: { hide: string[]; show: string[] };
|
||||
[k: string]: { hide: string[]; show: string[] };
|
||||
};
|
||||
|
||||
/**
|
||||
* Get form data from a form element and transform it into a body usable by fetch.
|
||||
*
|
||||
@ -156,8 +161,112 @@ function initMoveButtons() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mapping of scope names to arrays of object types whose fields should be hidden or shown when
|
||||
* the scope type (key) is selected.
|
||||
*
|
||||
* For example, if `region` is the scope type, the fields with IDs listed in
|
||||
* showHideMap.region.hide should be hidden, and the fields with IDs listed in
|
||||
* showHideMap.region.show should be shown.
|
||||
*/
|
||||
const showHideMap: ShowHideMap = {
|
||||
region: {
|
||||
hide: ['id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
|
||||
show: ['id_region'],
|
||||
},
|
||||
'site group': {
|
||||
hide: ['id_region', 'id_site', 'id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
|
||||
show: ['id_sitegroup'],
|
||||
},
|
||||
site: {
|
||||
hide: ['id_location', 'id_rack', 'id_clustergroup', 'id_cluster'],
|
||||
show: ['id_region', 'id_sitegroup', 'id_site'],
|
||||
},
|
||||
location: {
|
||||
hide: ['id_rack', 'id_clustergroup', 'id_cluster'],
|
||||
show: ['id_region', 'id_sitegroup', 'id_site', 'id_location'],
|
||||
},
|
||||
rack: {
|
||||
hide: ['id_clustergroup', 'id_cluster'],
|
||||
show: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
|
||||
},
|
||||
'cluster group': {
|
||||
hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack', 'id_cluster'],
|
||||
show: ['id_clustergroup'],
|
||||
},
|
||||
cluster: {
|
||||
hide: ['id_region', 'id_sitegroup', 'id_site', 'id_location', 'id_rack'],
|
||||
show: ['id_clustergroup', 'id_cluster'],
|
||||
},
|
||||
default: {
|
||||
hide: [
|
||||
'id_region',
|
||||
'id_sitegroup',
|
||||
'id_site',
|
||||
'id_location',
|
||||
'id_rack',
|
||||
'id_clustergroup',
|
||||
'id_cluster',
|
||||
],
|
||||
show: [],
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggle visibility of a given element's parent.
|
||||
* @param query CSS Query.
|
||||
* @param action Show or Hide the Parent.
|
||||
*/
|
||||
function toggleParentVisibility(query: string, action: 'show' | 'hide') {
|
||||
for (const element of getElements(query)) {
|
||||
if (action === 'show') {
|
||||
element.parentElement?.classList.remove('d-none', 'invisible');
|
||||
} else {
|
||||
element.parentElement?.classList.add('d-none', 'invisible');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle changes to the Scope Type field.
|
||||
*/
|
||||
function handleScopeChange(event: Event) {
|
||||
const element = event.currentTarget as HTMLSelectElement;
|
||||
// Scope type's innerText looks something like `DCIM > region`.
|
||||
const scopeType = element.options[element.selectedIndex].innerText.toLowerCase();
|
||||
|
||||
for (const [scope, fields] of Object.entries(showHideMap)) {
|
||||
// If the scope type ends with the specified scope, toggle its field visibility according to
|
||||
// the show/hide values.
|
||||
if (scopeType.endsWith(scope)) {
|
||||
for (const field of fields.hide) {
|
||||
toggleParentVisibility(`#${field}`, 'hide');
|
||||
}
|
||||
for (const field of fields.show) {
|
||||
toggleParentVisibility(`#${field}`, 'show');
|
||||
}
|
||||
// Stop on first match.
|
||||
break;
|
||||
} else {
|
||||
// Otherwise, hide all fields.
|
||||
for (const field of showHideMap.default.hide) {
|
||||
toggleParentVisibility(`#${field}`, 'hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize scope type select event listeners.
|
||||
*/
|
||||
function initScopeSelector() {
|
||||
for (const element of getElements<HTMLSelectElement>('#id_scope_type')) {
|
||||
element.addEventListener('change', handleScopeChange);
|
||||
}
|
||||
}
|
||||
|
||||
export function initForms() {
|
||||
for (const func of [initFormElements, initMoveButtons]) {
|
||||
for (const func of [initFormElements, initMoveButtons, initScopeSelector]) {
|
||||
func();
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,78 +28,3 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascript %}
|
||||
<script type="text/javascript">
|
||||
// TODO: Employ form field attrs to clean up this mess
|
||||
let scope_type = $('#id_scope_type');
|
||||
scope_type.change(function() {
|
||||
let label = this.options[this.selectedIndex].text;
|
||||
if (label.endsWith('region')) {
|
||||
$('#id_region').parents('.form-group').show();
|
||||
$('#id_sitegroup').parents('.form-group').hide();
|
||||
$('#id_site').parents('.form-group').hide();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('site group')) {
|
||||
$('#id_region').parents('.form-group').hide();
|
||||
$('#id_sitegroup').parents('.form-group').show();
|
||||
$('#id_site').parents('.form-group').hide();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('site')) {
|
||||
$('#id_region').parents('.form-group').show();
|
||||
$('#id_sitegroup').parents('.form-group').show();
|
||||
$('#id_site').parents('.form-group').show();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('location')) {
|
||||
$('#id_region').parents('.form-group').show();
|
||||
$('#id_sitegroup').parents('.form-group').show();
|
||||
$('#id_site').parents('.form-group').show();
|
||||
$('#id_location').parents('.form-group').show();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('rack')) {
|
||||
$('#id_region').parents('.form-group').show();
|
||||
$('#id_sitegroup').parents('.form-group').show();
|
||||
$('#id_site').parents('.form-group').show();
|
||||
$('#id_location').parents('.form-group').show();
|
||||
$('#id_rack').parents('.form-group').show();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('cluster group')) {
|
||||
$('#id_region').parents('.form-group').hide();
|
||||
$('#id_sitegroup').parents('.form-group').hide();
|
||||
$('#id_site').parents('.form-group').hide();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').show();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
} else if (label.endsWith('cluster')) {
|
||||
$('#id_region').parents('.form-group').hide();
|
||||
$('#id_sitegroup').parents('.form-group').hide();
|
||||
$('#id_site').parents('.form-group').hide();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').show();
|
||||
$('#id_cluster').parents('.form-group').show();
|
||||
} else {
|
||||
$('#id_region').parents('.form-group').hide();
|
||||
$('#id_sitegroup').parents('.form-group').hide();
|
||||
$('#id_site').parents('.form-group').hide();
|
||||
$('#id_location').parents('.form-group').hide();
|
||||
$('#id_rack').parents('.form-group').hide();
|
||||
$('#id_clustergroup').parents('.form-group').hide();
|
||||
$('#id_cluster').parents('.form-group').hide();
|
||||
}
|
||||
});
|
||||
scope_type.change();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user