46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
function hideUnselectedResourceFields(selectedResourceIndex) {
|
|
const fields = document.querySelectorAll("[resource-index]");
|
|
|
|
fields.forEach((field) => {
|
|
if (field.getAttribute("resource-index") !== selectedResourceIndex.toString()) {
|
|
// field is wrapped by div, change visibility on wrapper
|
|
field.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
function showSelectedResourceFields(resourceIndex) {
|
|
const fields = document.querySelectorAll(`[resource-index="${resourceIndex}"]`);
|
|
|
|
fields.forEach((field) => {
|
|
// field is wrapped by div, change visibility on wrapper
|
|
field.style.display = "block";
|
|
});
|
|
}
|
|
|
|
function onResourceSelected(e) {
|
|
const resourceIndex = e.target.value;
|
|
|
|
showSelectedResourceFields(resourceIndex);
|
|
|
|
hideUnselectedResourceFields(resourceIndex);
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const resourceSelector = document.querySelector("#id_resource");
|
|
|
|
if (!resourceSelector) {
|
|
console.error("resource select input not found");
|
|
return;
|
|
}
|
|
|
|
// If selector is actually select input, get selected option.
|
|
// else selected resource index is 0
|
|
const selectedResourceIndex = resourceSelector.tagName === "SELECT" ? resourceSelector.value : 0;
|
|
|
|
resourceSelector.addEventListener("input", onResourceSelected);
|
|
|
|
// initially hide unselected resource fields
|
|
hideUnselectedResourceFields(selectedResourceIndex);
|
|
});
|