SWE/webseite/assets/js/formula.js

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-2/12", "md: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-5/12", "md: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", "md: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-2/12", "md: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();
}