From c56e667fe458521a440919dc6059ba5de4012442 Mon Sep 17 00:00:00 2001 From: Matthias Grief Date: Mon, 6 Jan 2025 21:53:49 +0100 Subject: [PATCH] Bearbeitung von Formeln verbessert --- webseite/assets/js/formula.js | 158 ++++++++++++++++++++++++++++++++++ webseite/topicEditor.php | 14 +++ 2 files changed, 172 insertions(+) create mode 100644 webseite/assets/js/formula.js diff --git a/webseite/assets/js/formula.js b/webseite/assets/js/formula.js new file mode 100644 index 0000000..14f74a8 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/webseite/topicEditor.php b/webseite/topicEditor.php index 040092e..4207d26 100644 --- a/webseite/topicEditor.php +++ b/webseite/topicEditor.php @@ -263,6 +263,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') { integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE" crossorigin="anonymous"> + @@ -341,6 +342,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') { +
+ +
+ +
+ +
@@ -444,6 +457,7 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') { }); } + createFormulasFromString(document.querySelector('#formulas').value); renderFormulas(); const quill = new Quill('#quillEditor', {