From 557f09575ef5a91911a050f2fab5f9d0d8915dba Mon Sep 17 00:00:00 2001
From: Matthias Grief <matthias.grief@alumni.fh-aachen.de>
Date: Sun, 22 Dec 2024 17:41:16 +0100
Subject: [PATCH] =?UTF-8?q?Neue=20eigene=20Seite=20f=C3=BCr=20den=20Inhalt?=
 =?UTF-8?q?seditor=20zum=20entwickeln?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webseite/topicEditor.php | 126 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 webseite/topicEditor.php
diff --git a/webseite/topicEditor.php b/webseite/topicEditor.php
new file mode 100644
index 0000000..2ac429a
--- /dev/null
+++ b/webseite/topicEditor.php
@@ -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>
