((dn, schema, inputs, ldifOutput, classContainer, addClassSelect, addClassBtn) => { let changes = [], multipleValues = {}, maxInputId = 0, newClasses = {}, attributeCount = {}; function ComputeChanges() { let classChanges = []; let actualChanges = []; for (let i in newClasses) classChanges.push(`add: objectClass\nobjectClass: ${i}`); for (let i = 0; i < changes.length; ++i) { let ch = changes[i]; if (!ch) continue; if (ch.initialValue.length && ch.newValue.length && (multipleValues[ch.attrName] || 0) === 1) { actualChanges.push(`replace: ${ch.attrName}\n${ch.attrName}: ${ch.newValue}`); } else { if (ch.initialValue.length) { if ((multipleValues[ch.attrName] || 0) === 1) actualChanges.push(`delete: ${ch.attrName}`); else actualChanges.push(`delete: ${ch.attrName}\nattribute: ${ch.initialValue}`); } if (ch.newValue.length) actualChanges.push(`add: ${ch.attrName}\n${ch.attrName}: ${ch.newValue}`); } } let totalChanges = classChanges.concat(actualChanges.sort((a, b) => b.localeCompare(a))); if (!totalChanges.length) return ""; return `dn: ${dn}\nchangetype: modify\n` + totalChanges.join("\n-\n"); } function UpdateLdif() { ldifOutput.textContent = ComputeChanges(); ldifOutput.style.height = ldifOutput.scrollHeight + "px" } function onValueChanged(input) { let initialValue = input.dataset.initialValue || "", inputId = input.dataset.inputId, newValue = input.value || "", attrName = input.dataset.attributeName; if (initialValue === newValue) changes[inputId] = undefined; else changes[inputId] = { initialValue: initialValue, newValue: newValue, attrName: attrName }; UpdateLdif(); } let prevItem = null; // input field function addAddButton(item) { // item is the input field let addButton = document.createElement("a"); addButton.innerText = "Add"; addButton.src = "#"; addButton.parentInput = item; addButton.addEventListener("click", (e) => { e.preventDefault(); let line = addButton.parentInput.parentNode.parentNode; let copy = line.cloneNode(true); line.parentNode.insertBefore(copy, line); let input = copy.querySelectorAll("label > input")[0]; input.value = ""; input.dataset.initialValue = ""; input.addEventListener("change", e => onValueChanged(e.currentTarget)); input.dataset.inputId = ++maxInputId; let button = copy.querySelectorAll("label > span > a")[0]; button.parentNode.removeChild(button); }); item.parentNode.children[0].appendChild(addButton); } function manageDuplicateAttributes(li, input) { attributeCount[input.dataset.attributeName] = (attributeCount[input.dataset.attributeName] || {}); attributeCount[input.dataset.attributeName][input.dataset.klass] = true; if (Object.keys(attributeCount[input.dataset.attributeName]).length > 1) li.style.display = "none"; } inputs.forEach(i => { maxInputId = Math.max(i.dataset.inputId, maxInputId); let attrName = i.dataset.attributeName; if ((i.dataset.initialValue || "").length) multipleValues[attrName] = (multipleValues[attrName] || 0) + 1; i.addEventListener("change", e => onValueChanged(e.currentTarget)) if (prevItem != null && prevItem.dataset.attributeName !== i.dataset.attributeName) { addAddButton(prevItem); } prevItem = i; manageDuplicateAttributes(i.parentElement.parentElement, i); }); prevItem && addAddButton(prevItem); function CreateClassAttributeDom(className, name, init, isMandatory) { let li = document.createElement("li"); let label = document.createElement("label"); label.classList.add("LDAPAttribute"); li.appendChild(label); let span = document.createElement("span"); if (isMandatory) span.classList.add("mandatory"); span.innerText = name; let input = document.createElement("input"); input.type = "text"; input.value = init; input.dataset.initialValue = init; input.dataset.inputId = ++maxInputId; input.dataset.name = name; input.dataset.klass = className; input.dataset.attributeName = name; input.required = isMandatory; input.addEventListener("change", e => onValueChanged(e.currentTarget)) label.appendChild(span); label.appendChild(input); addAddButton(input); manageDuplicateAttributes(li, input); return li; } function CreateClassDom(schema, className) { let classDom = document.createElement("fieldset"); classDom.classList.add("LDAPClass"); let legend = document.createElement("legend"); let legendInner = document.createElement("h3"); legendInner.innerText = className +' (' +schema["type"] +')'; legend.appendChild(legendInner); classDom.appendChild(legend); let list = document.createElement("ul"); for (let i of schema["must"]) list.appendChild(CreateClassAttributeDom(className, i, "", true)); for (let i of schema["may"]) list.appendChild(CreateClassAttributeDom(className, i, "", false)); classDom.appendChild(list); return classDom; } addClassBtn.addEventListener("click", () => { let targetClass = addClassSelect.value; if (!schema[targetClass]) return; for (let i of addClassSelect.children) { if (i.value === targetClass) { addClassSelect.removeChild(i); break; } } newClasses[targetClass] = true; let dom = CreateClassDom(schema[targetClass], targetClass); classContainer.appendChild(dom); UpdateLdif(); }); })( window['dn'], window['schema'], document.querySelectorAll(".LDAPAttribute > input"), document.getElementById("ldifOutput"), document.getElementById("classContainer"), document.getElementById("addClassSelect"), document.getElementById("addClassBtn"));