Neue eigene Seite für den Inhaltseditor zum entwickeln
This commit is contained in:
Matthias Grief
126
webseite/topicEditor.php
Normal file
126
webseite/topicEditor.php
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
<?php
|
||||||
|
// Temporarily remove validation
|
||||||
|
// session_start();
|
||||||
|
require_once("classes/User.php");
|
||||||
|
require_once("classes/SubjectData.php");
|
||||||
|
require_once("classes/TopicData.php");
|
||||||
|
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<title>Lehrer Dashboard</title>
|
||||||
|
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/css/styles.css" rel="stylesheet">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="min-h-screen bg-gray-50">
|
||||||
|
<form id="topicForm" class="space-y-8">
|
||||||
|
<div class="grid 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>
|
||||||
|
<input id="topicNameSelect" type="text" name="displayName" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
|
||||||
|
<select id="topicSubjectSelect" name="subject" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
|
||||||
|
<option value="">Fach auswählen...</option>
|
||||||
|
<?php
|
||||||
|
foreach (SubjectData::getAll() as $subject) {
|
||||||
|
$id = $subject->getID();
|
||||||
|
$name = $subject->getDisplayName();
|
||||||
|
|
||||||
|
echo "<option value='$id'>$name</option>";
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="topicDescriptionSelect" class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
|
||||||
|
<textarea id="topicDescriptionSelect" name="description" rows="2" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right column - Content and preview -->
|
||||||
|
<div>
|
||||||
|
<div class="mb-6">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<label class="block text-sm font-medium text-gray-700">Bildungsinhalt</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button type="button" onclick="editor.undo()"
|
||||||
|
class="text-gray-500 hover:text-gray-700 p-1">
|
||||||
|
<i class="fas fa-undo"></i>
|
||||||
|
</button>
|
||||||
|
<button type="button" onclick="editor.redo()"
|
||||||
|
class="text-gray-500 hover:text-gray-700 p-1">
|
||||||
|
<i class="fas fa-redo"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Preview section -->
|
||||||
|
<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="prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-4">
|
||||||
|
<button type="button" onclick="closeModal()"
|
||||||
|
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button type="submit"
|
||||||
|
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||||
|
Thema erstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="hidden" name="article" id="article-upload-field">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const quill = new Quill('#quillEditor', {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{ 'size': [] }],
|
||||||
|
[ 'bold', 'italic', 'underline', 'strike' ],
|
||||||
|
[{ 'script': 'super' }, { 'script': 'sub' }],
|
||||||
|
[{ 'list': 'ordered' }, { 'list': 'bullet'}],
|
||||||
|
[ 'link', 'image' ],
|
||||||
|
]
|
||||||
|
},
|
||||||
|
theme: 'snow'
|
||||||
|
});
|
||||||
|
|
||||||
|
quill.on('text-change', (delta, oldDelta, source) => {
|
||||||
|
const html = quill.getSemanticHTML();
|
||||||
|
document.getElementById('contentPreview').innerHTML = html;
|
||||||
|
document.getElementById('article-upload-field').value = html;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user