Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor topicEditor

Browse Source
This commit is contained in:
Eric Blommel
2025-01-06 02:08:10 +01:00
parent 4ebcfdf63e
commit f64b2f0d4c
3 changed files with 221 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webseite/assets/css/topic.css
View File

@@ -346,3 +346,11 @@ body {
border-radius: 8px;
text-align: center;
}
.content {
margin: auto;
padding: 2rem;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

31
webseite/subjectEditor.php
View File

@@ -160,24 +160,19 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
<div>
<label class="block text-sm font-medium text-gray-700">Icon</label>
<div class="mt-2 h-[180px] overflow-y-auto grid md:grid-cols-5 lg:grid-cols-8 grid-cols-8 gap-2 p-1">
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer bg-blue-50 ring-2 ring-blue-500" data-icon="fa-book" onclick="selectIcon(this)"><i class="fas fa-book"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-calculator" onclick="selectIcon(this)"><i class="fas fa-calculator"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-flask" onclick="selectIcon(this)"><i class="fas fa-flask"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-atom" onclick="selectIcon(this)"><i class="fas fa-atom"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-globe-europe" onclick="selectIcon(this)"><i class="fas fa-globe-europe"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-palette" onclick="selectIcon(this)"><i class="fas fa-palette"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-music" onclick="selectIcon(this)"><i class="fas fa-music"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dumbbell" onclick="selectIcon(this)"><i class="fas fa-dumbbell"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-language" onclick="selectIcon(this)"><i class="fas fa-language"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-microscope" onclick="selectIcon(this)"><i class="fas fa-microscope"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-keyboard" onclick="selectIcon(this)"><i class="fas fa-keyboard"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dna" onclick="selectIcon(this)"><i class="fas fa-dna"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-brain" onclick="selectIcon(this)"><i class="fas fa-brain"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-history" onclick="selectIcon(this)"><i class="fas fa-history"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-chart-line" onclick="selectIcon(this)"><i class="fas fa-chart-line"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-draw-polygon" onclick="selectIcon(this)"><i class="fas fa-draw-polygon"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-running" onclick="selectIcon(this)"><i class="fas fa-running"></i></div>
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-theater-masks" onclick="selectIcon(this)"><i class="fas fa-theater-masks"></i></div>
<?php
$icons = [
"fa-book", "fa-calculator", "fa-flask", "fa-atom", "fa-globe-europe", "fa-palette",
"fa-music", "fa-dumbbell", "fa-language", "fa-microscope", "fa-keyboard", "fa-dna",
"fa-brain", "fa-history", "fa-chart-line", "fa-draw-polygon", "fa-running", "fa-theater-masks",
"fa-chart-pie", "fa-plus-minus", "fa-clock", "fa-code", "fa-divide", "fa-x", "fa-sitemap",
"fa-map-pin", "fa-feather-pointed", "fa-person", "fa-link", "fa-4"
];
foreach ($icons as $icon) {
$selectedClass = $defaultValues['icon'] === $icon ? 'bg-blue-50 ring-2 ring-blue-500' : '';
echo "<div class='icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer $selectedClass' data-icon='$icon' onclick='selectIcon(this)'><i class='fas $icon'></i></div>";
}
?>
</div>
<input type="hidden" id="selectedIcon" name="icon" value="<?php echo $defaultValues['icon']; ?>">
</div>

183
webseite/topicEditor.php
View File

@@ -20,7 +20,7 @@ $defaultValues['displayName'] = "";
$defaultValues['id'] = "";
$defaultValues['subjectId'] = "";
$defaultValues['description'] = "";
$defaultValues['icon'] = "";
$defaultValues['icon'] = "fa-book";
$defaultValues['relatedTopics'] = "";
$defaultValues['existing_files'] = "";
$defaultValues['formulas'] = "";
@@ -238,6 +238,7 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
@@ -254,34 +255,45 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
<script src="https://cdn.tailwindcss.com"></script>
<script src="assets/js/quill_mod.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.css" integrity="sha384-7lU0muIg/i1plk7MgygDUp3/bNRA65orrBub4/OSWHECgwEsY83HaS1x3bljA/XV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.js" integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.css"
integrity="sha384-7lU0muIg/i1plk7MgygDUp3/bNRA65orrBub4/OSWHECgwEsY83HaS1x3bljA/XV" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.19/dist/katex.min.js"
integrity="sha384-RdymN7NRJ+XoyeRY4185zXaxq9QWOOx3O7beyyrRK4KQZrPlCDQQpCu95FoCGPAE"
crossorigin="anonymous"></script>
<script src="assets/js/katex_autorender_mod.js"></script>
</head>
<body class="min-h-screen bg-gray-50">
<?php include 'header.php'; ?>
<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
<form id="topicForm" method="post" enctype="multipart/form-data" class="space-y-8">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
<!-- Left column - Topic details -->
<div class="space-y-6">
<div>
<label for="topicNameSelect" class="block text-sm font-medium text-gray-700">Themenname</label>
<label for="topicNameSelect" class="block text-sm font-medium text-gray-700 mb-2">Themenname</label>
<input id="topicNameSelect" type="text" name="displayName"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['displayName']; ?>">
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"
required
value="<?php echo $defaultValues['displayName']; ?>">
</div>
<div>
<label for="topicIdSelect" class="block text-sm font-medium text-gray-700">ID</label>
<label for="topicIdSelect" class="block text-sm font-medium text-gray-700 mb-2">ID</label>
<input id="topicIdSelect" type="text" name="id"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['id']; ?>">
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"
required
value="<?php echo $defaultValues['id']; ?>">
</div>
<div>
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700 mb-2">Fach</label>
<div class="relative">
<select id="topicSubjectSelect" name="subjectId"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<option value="">Fach auswählen...</option>
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 appearance-none bg-white">
<?php
foreach ($allSubjects as $subject) {
$selected = "";
@@ -293,56 +305,82 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
}
?>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M7 10l5 5 5-5H7z"/>
</svg>
</div>
</div>
</div>
<div>
<label for="topicDescriptionSelect"
class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<label for="topicDescriptionSelect" class="block text-sm font-medium text-gray-700 mb-2">Kurzbeschreibung</label>
<textarea id="topicDescriptionSelect" name="description" rows="5"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php echo $defaultValues['description']; ?></textarea>
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"
required><?php echo $defaultValues['description']; ?></textarea>
</div>
<div>
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
id="iconSelect" value="<?php echo $defaultValues['icon']; ?>">
<label class="block text-sm font-medium text-gray-700">Icon</label>
<div class="mt-2 h-[180px] overflow-y-auto grid grid-cols-8 gap-2 p-1">
<?php
$icons = [
"fa-book", "fa-calculator", "fa-flask", "fa-atom", "fa-globe-europe", "fa-palette",
"fa-music", "fa-dumbbell", "fa-language", "fa-microscope", "fa-keyboard", "fa-dna",
"fa-brain", "fa-history", "fa-chart-line", "fa-draw-polygon", "fa-running", "fa-theater-masks",
"fa-chart-pie", "fa-plus-minus", "fa-clock", "fa-code", "fa-divide", "fa-x", "fa-sitemap",
"fa-map-pin", "fa-feather-pointed", "fa-person", "fa-link", "fa-4"
];
foreach ($icons as $icon) {
$selectedClass = $defaultValues['icon'] === $icon ? 'bg-blue-50 ring-2 ring-blue-500' : '';
echo "<div class='icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer $selectedClass' data-icon='$icon' onclick='selectIcon(this)'><i class='fas $icon'></i></div>";
}
?>
</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"
name="relatedTopics"
id="relatedTopicSelect"
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"
value="<?php echo $defaultValues['relatedTopics']; ?>">
</div>
<div>
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen
als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text"
name="relatedTopics" id="relatedTopicSelect" value="<?php echo $defaultValues['relatedTopics']; ?>">
<label for="existing_files" class="block text-sm font-medium text-gray-700 mb-2">Existierende Übungsblätter</label>
<input type="text"
name="existing_files"
id="existing_files"
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"
value="<?php echo $defaultValues['existing_files']; ?>">
</div>
<div>
<label for="existing_files" class="block text-sm font-medium text-gray-700">
Existierende Übungsblätter</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="existing_files" id="existing_files" value="<?php echo $defaultValues['existing_files']; ?>">
<label for="new_files" class="block text-sm font-medium text-gray-700 mb-2">
Übungsblätter hinzufügen
</label>
<div class="relative border border-gray-300 rounded-lg p-2 bg-white shadow-sm">
<input type="file" name="new_files[]" id="new_files" multiple
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
<div class="flex items-center justify-center h-full text-gray-500">
<i class="fas fa-upload mr-2"></i>
<span>Dateien hier ablegen oder klicken, um Dateien auszuwählen</span>
</div>
<div class="flex gap-2">
<!--
<div class="rounded-md bg-slate-800 py-0.5 px-2.5 border border-transparent text-sm text-white transition-all shadow-sm">
Chip
<button class="pl-1" onclick=""><i class="fa fa-x"></i></button>
</div>
-->
</div>
<div>
<label for="new_files" class="block text-sm font-medium text-gray-700">
Übungsblätter hinzufügen</label>
<input type="file" name="new_files[]" id="new_files" multiple>
<label for="formulas" class="block text-sm font-medium text-gray-700 mb-2">Formeln</label>
<input type="text"
name="formulas"
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"
value="<?php echo $defaultValues['formulas']; ?>">
</div>
<div>
<label for="formulas"
class="block text-sm font-medium text-gray-700">Formeln - Format: aufgabentext1;;a::2,5;;b::3;;;;aufgabentext2;;a::1</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="formulas" id="formulas" value="<?php echo $defaultValues['formulas']; ?>">
</div>
</div>
<!-- Right column - Editor -->
@@ -373,22 +411,10 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
</div>
<div class="flow-root gap-4">
<?php if (isset($editingTopic)) { ?>
<input type="submit" value="Thema löschen" name="submit"
class="float-left px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-gray-200">
<input type="submit" value="Speichern" name="submit"
class="float-right px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<input type="button" value="Abbrechen" onclick="history.back()"
class="float-right mx-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
</div>
<div class="border rounded-lg p-8 mt-8 bg-gray-50">
<h4 class="text-lg font-medium text-gray-700 mb-4">Vorschau</h4>
<div id="contentPreview" class="content-text prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
</div>
<div class="flow-root gap-4">
<input type="submit" value="Thema löschen" name="submit"
class="float-left px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-gray-200">
<?php } ?>
<input type="submit" value="Speichern" name="submit"
class="float-right px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<input type="button" value="Abbrechen" onclick="history.back()"
@@ -397,26 +423,9 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
<input type="hidden" name="article" id="article-upload-field">
</form>
</div>
<script>
function renderFormulas() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\(", right: "\\)", display: false},
{left: "\\begin{equation}", right: "\\end{equation}", display: true},
{left: "\\begin{array}", right: "\\end{array}", display: true},
{left: "\\begin{align}", right: "\\end{align}", display: true},
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
{left: "\\[", right: "\\]", display: true}
],
throwOnError : false
});
}
renderFormulas();
const quill = new Quill('#quillEditor', {
modules: {
@@ -443,9 +452,7 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
html = html.replace(/<br>$/g, "");
}
document.getElementById('contentPreview').innerHTML = html;
document.getElementById('article-upload-field').value = html;
renderFormulas();
});
quill.emitter.emit('text-change');
@@ -457,6 +464,34 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
quill.history.redo();
}
function selectIcon(element) {
// Remove active class from all icons
document.querySelectorAll('.icon-option').forEach(el => {
el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
});
// Add active class to selected icon
element.classList.add('bg-blue-50', 'ring-2', 'ring-blue-500');
// Set the hidden input value
const iconInput = document.getElementById('selectedIcon');
iconInput.value = element.getAttribute('data-icon');
}
function selectIcon(element) {
// Remove active class from all icons
document.querySelectorAll('.icon-option').forEach(el => {
el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
});
// Add active class to selected icon
element.classList.add('bg-blue-50', 'ring-2', 'ring-blue-500');
// Set the hidden input value
const iconInput = document.getElementById('selectedIcon');
iconInput.value = element.getAttribute('data-icon');
}
</script>
</body>