Bearbeitung von Formeln verbessert

webseite/assets/js/formula.js

@@ -0,0 +1,158 @@
+function createFormula(text = "") {
+    const formulaInputs = document.querySelector('#formulaInputs');
+
+    const formulaElement = document.createElement('div');
+    formulaElement.classList.add('input-formula', "pb-10");
+    formulaElement.id = "f-" + crypto.randomUUID();
+
+    const textElement = document.createElement('textarea');
+    textElement.type = 'text';
+    textElement.classList.add('input-text');
+    textElement.classList.add("w-full", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    textElement.rows = 3;
+    textElement.placeholder = "Aufgabentext";
+    textElement.innerText = text;
+    textElement.onchange = updateFormulaText;
+
+    formulaElement.appendChild(textElement);
+
+    const variableSection = document.createElement('div');
+    variableSection.classList.add("input-variable-section");
+    formulaElement.appendChild(variableSection)
+
+    const buttonRow = document.createElement('div');
+    buttonRow.classList.add("flex", "flow-root");
+
+    const removeFormulaButton = document.createElement('button');
+    removeFormulaButton.type = "button";
+    removeFormulaButton.innerText = "Aufgabe löschen";
+    removeFormulaButton.classList.add("px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    removeFormulaButton.onclick = () => {
+        formulaElement.remove();
+    };
+    buttonRow.appendChild(removeFormulaButton);
+
+    const addVariableButton = document.createElement('button');
+    addVariableButton.type = "button";
+    addVariableButton.innerText = "+";
+    addVariableButton.classList.add("w-1/12", "float-right", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    addVariableButton.onclick = () => {
+        createVariable(formulaElement.id);
+    };
+    buttonRow.appendChild(addVariableButton);
+
+    formulaElement.appendChild(buttonRow);
+
+    formulaInputs.appendChild(formulaElement);
+
+    return formulaElement.id;
+}
+
+function createVariable(formulaUID, variableText = "", valueText = "") {
+    const element = document.querySelector("#" + formulaUID).querySelector(".input-variable-section");
+
+    const variableValueElement = document.createElement('div');
+    variableValueElement.classList.add('input-variables');
+
+    const variableElement = document.createElement('input');
+    variableElement.type = 'text';
+    variableElement.classList.add('input-variable');
+    variableElement.classList.add("w-6/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
+    variableElement.value = variableText;
+    variableElement.placeholder = "Variable";
+    variableElement.onchange = updateFormulaText;
+    variableValueElement.appendChild(variableElement);
+
+    const valueElement = document.createElement('input');
+    valueElement.type = 'text';
+    valueElement.classList.add('input-value');
+    valueElement.classList.add("w-5/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400")
+    valueElement.value = valueText;
+    valueElement.placeholder = "Richtiger Wert";
+    valueElement.onchange = updateFormulaText;
+    variableValueElement.appendChild(valueElement);
+
+    const removeButton = document.createElement('button');
+    removeButton.type = "button";
+    removeButton.innerText = "-"
+    removeButton.classList.add("w-1/12", "px-4", "py-3", "border", "rounded-lg", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "text-lg", "enabled:hover:border-gray-400");
+    removeButton.onclick = () => {
+        variableValueElement.remove();
+        updateFormulaText();
+    };
+    variableValueElement.appendChild(removeButton);
+
+    element.appendChild(variableValueElement);
+}
+
+function createFormulaWithVariable() {
+    const uuid = createFormula();
+    createVariable(uuid);
+}
+
+function createFormulasFromString(string) {
+    const taskStrings = string.split(";;;;");
+    taskStrings.forEach((taskString) => {
+        const elements = taskString.split(";;");
+        if(elements.length < 2) {
+            return;
+        }
+
+        const text = elements[0];
+        const variables = elements.slice(1, elements.length);
+
+        const uid = createFormula(text);
+
+        variables.forEach((variableValuePair) => {
+            const arr = variableValuePair.split("::");
+            if(arr.length !== 2) {
+                return;
+            }
+            createVariable(uid, arr[0], arr[1]);
+        });
+    });
+}
+
+function getFormulasAsString() {
+    const formulaInputs = document.querySelector('#formulaInputs');
+
+    let formulas = [];
+    formulaInputs.querySelectorAll('.input-formula').forEach((formulaElement) => {
+        const text = formulaElement.querySelector(".input-text").value;
+        if(text.includes(";;")) {
+            return;
+        }
+
+        let variables = [];
+        formulaElement.querySelectorAll(".input-variables").forEach((variableValueElement) => {
+            const variable = variableValueElement.querySelector(".input-variable");
+            const value = variableValueElement.querySelector(".input-value");
+
+            if(variable == null || value == null) {
+                return;
+            }
+
+            if(variable.value.trim() === "" || value.value.trim() === "") {
+                return;
+            }
+
+            if(variable.value.includes(";;") || variable.value.includes("::")) {
+                return;
+            }
+
+            if(value.value.includes(";;") || value.value.includes("::")) {
+                return;
+            }
+
+            variables.push(variable.value + "::" + value.value);
+        });
+
+        formulas.push(text + ";;" + variables.join(";;"));
+    });
+
+    return formulas.join(';;;;');
+}
+
+function updateFormulaText() {
+    document.querySelector('#formulas').value = getFormulasAsString();
+}