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();
+}

webseite/topicEditor.php

@@ -263,6 +263,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
             integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE"
             crossorigin="anonymous"></script>
     <script src="assets/js/katex_autorender_mod.js"></script>
+    <script src="assets/js/formula.js"></script>
 </head>
 
 <body class="min-h-screen bg-gray-50">
@@ -341,6 +342,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                     </div>
                     <input type="hidden" id="selectedIcon" name="icon" value="<?php echo $defaultValues['icon']; ?>">
                 </div>
+
                 <div>
                     <label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700 mb-2">Verwandte Themen (IDs, kommagetrennt)</label>
                     <input type="text"
@@ -380,7 +382,18 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                            id="formulas"
                            class="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"
                            placeholder="Format: aufgabentext1;;a::2,5;;b::3;;;;aufgabentext2;;a::1"
+                           hidden="hidden"
                            value="<?php echo $defaultValues['formulas']; ?>">
+
+                    <div id="formulaInputs">
+
+                    </div>
+
+                    <button class="bg-blue-500 text-white w-full px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300 flex items-center"
+                            onclick="createFormulaWithVariable()"
+                            type="button">
+                        <span>Neue Aufgabe</span>
+                    </button>
                 </div>
 
             </div>
@@ -444,6 +457,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
         });
     }
 
+    createFormulasFromString(document.querySelector('#formulas').value);
     renderFormulas();
 
     const quill = new Quill('#quillEditor', {