112 lines
4.9 KiB
PHP
112 lines
4.9 KiB
PHP
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
|
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
|
|
|
|
<div id="topicModal" class="modal-overlay fixed inset-0 bg-black/30 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-2xl p-8 w-full max-w-[90vw] h-[95vh] shadow-2xl border-2 border-gray-100 overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold">Neues Thema erstellen</h3>
|
|
<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<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 class="block text-sm font-medium text-gray-700">Themenname</label>
|
|
<input type="text" name="displayName" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label 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
|
|
require_once("../../classes/SubjectData.php");
|
|
$subjects = SubjectData::getAll();
|
|
foreach ($subjects as $subject) {
|
|
echo "<option value='{$subject->getId()}'>{$subject->getDisplayName()}</option>";
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
|
|
<textarea 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>
|
|
<!-- The editor container -->
|
|
<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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { QuillEditor } from '/dashboard/js/modules/QuillEditor.js';
|
|
const editor = new QuillEditor('quillEditor', 'contentPreview');
|
|
window.editor = editor;
|
|
</script>
|
|
|
|
<style>
|
|
/* Quill Editor Styles */
|
|
.ql-editor {
|
|
min-height: 350px;
|
|
font-size: 16px;
|
|
background: white;
|
|
}
|
|
|
|
.ql-toolbar {
|
|
background: white;
|
|
border-top-left-radius: 0.5rem;
|
|
border-top-right-radius: 0.5rem;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.ql-container {
|
|
border-bottom-left-radius: 0.5rem;
|
|
border-bottom-right-radius: 0.5rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-top: none;
|
|
}
|
|
</style>
|