Dashboard Fach hinzufügen funktioniert in swe-b1-a-dev
This commit is contained in:
Kelvi Yawo Jules Agbessi Awuklu
@@ -0,0 +1,198 @@
|
||||
<div class="modal-overlay fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
|
||||
<div class="modal fixed top-1/2 left-1/2 bg-white rounded-xl shadow-lg p-6 w-[800px] max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-semibold">Neues Fach erstellen</h3>
|
||||
<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="subjectForm" onsubmit="handleSubjectSubmit(event)">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Name des Fachs</label>
|
||||
<input type="text"
|
||||
name="displayName"
|
||||
required
|
||||
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="z.B. Mathematik">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
|
||||
<textarea name="description"
|
||||
required
|
||||
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"
|
||||
rows="4"
|
||||
placeholder="Kurze Beschreibung des Fachs"></textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Farbe</label>
|
||||
<input type="color" name="color" required
|
||||
value="#3b82f6"
|
||||
class="w-full h-14 px-1 py-1 rounded-lg">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Icon auswählen</label>
|
||||
<div class="grid grid-cols-6 gap-4 p-4 border rounded-lg bg-gray-50">
|
||||
<?php
|
||||
$icons = [
|
||||
['fa-book', 'Buch'],
|
||||
['fa-square-root-alt', 'Mathematik'],
|
||||
['fa-flask', 'Naturwissenschaften'],
|
||||
['fa-language', 'Sprachen'],
|
||||
['fa-music', 'Musik'],
|
||||
['fa-palette', 'Kunst'],
|
||||
['fa-dumbbell', 'Sport'],
|
||||
['fa-globe', 'Erdkunde'],
|
||||
['fa-clock', 'Geschichte'],
|
||||
['fa-microscope', 'Biologie'],
|
||||
['fa-atom', 'Physik'],
|
||||
['fa-vial', 'Chemie'],
|
||||
['fa-computer', 'Informatik'],
|
||||
['fa-calculator', 'Rechnen'],
|
||||
['fa-pen', 'Schreiben'],
|
||||
['fa-theater-masks', 'Theater'],
|
||||
['fa-draw-polygon', 'Geometrie'],
|
||||
['fa-tablets', 'Medizin']
|
||||
];
|
||||
|
||||
foreach ($icons as $index => [$icon, $label]) {
|
||||
echo "<div class='icon-option cursor-pointer p-4 rounded-lg hover:bg-white hover:shadow transition-all text-center'
|
||||
onclick='selectIcon(this, \"$icon\")' data-icon='$icon'>
|
||||
<i class='fas $icon text-2xl mb-2'></i>
|
||||
<div class='text-xs text-gray-600'>$label</div>
|
||||
</div>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<input type="hidden" name="icon" id="selectedIcon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex justify-end gap-3">
|
||||
<button type="button" onclick="closeModal()"
|
||||
class="px-6 py-3 text-gray-600 hover:text-gray-800 text-lg">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-lg">
|
||||
Fach erstellen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function closeModal() {
|
||||
const modalOverlay = document.querySelector('.modal-overlay');
|
||||
modalOverlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
window.selectIcon = function(element, iconName) {
|
||||
// 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 and log it
|
||||
const iconInput = document.getElementById('selectedIcon');
|
||||
iconInput.value = iconName;
|
||||
console.log('Icon selected:', iconInput.value);
|
||||
|
||||
// Visual feedback
|
||||
element.classList.add('scale-105');
|
||||
setTimeout(() => {
|
||||
element.classList.remove('scale-105');
|
||||
}, 200);
|
||||
}
|
||||
|
||||
function handleSubjectSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const form = event.target;
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Get values and validate only required fields
|
||||
const displayName = formData.get('displayName').trim();
|
||||
const description = formData.get('description').trim();
|
||||
|
||||
// Validate only name and description
|
||||
if (!displayName) {
|
||||
alert('Bitte geben Sie einen Namen für das Fach ein');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!description) {
|
||||
alert('Bitte geben Sie eine Beschreibung ein');
|
||||
return;
|
||||
}
|
||||
|
||||
// Always set a default icon if none is selected
|
||||
if (!formData.get('icon')) {
|
||||
formData.set('icon', 'fa-book'); // Default icon
|
||||
}
|
||||
|
||||
// Send AJAX request
|
||||
fetch('../api/create-subject.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
closeModal();
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('Fehler beim Erstellen des Fachs: ' + (data.message || 'Unbekannter Fehler'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('Ein Fehler ist aufgetreten');
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize first icon selection on page load
|
||||
/*
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const firstIcon = document.querySelector('.icon-option');
|
||||
if (firstIcon) {
|
||||
const iconName = firstIcon.getAttribute('data-icon');
|
||||
selectIcon(firstIcon, iconName);
|
||||
}
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.icon-option {
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-option:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon-option.selected {
|
||||
background-color: #EBF5FF;
|
||||
border-color: #3B82F6;
|
||||
}
|
||||
|
||||
.icon-option i {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.icon-option:hover i {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<div id="topicEditorModal" 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">Thema bearbeiten</h3>
|
||||
<button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="topicEditorForm" class="space-y-8">
|
||||
<!-- Subject and Topic Selection -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Fach</label>
|
||||
<select id="editSubjectSelect" name="subject" required
|
||||
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
|
||||
<option value="">Fach auswählen...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Thema</label>
|
||||
<select id="editTopicSelect" name="topic" required
|
||||
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
|
||||
<option value="">Thema auswählen...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Topic Content Editor (initially hidden) -->
|
||||
<div id="topicContentEditor" class="hidden space-y-6">
|
||||
<!-- ... rest of your form fields ... -->
|
||||
<div id="topicEditorQuill" class="h-[400px] border rounded-lg"></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">
|
||||
Änderungen speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { TopicEditor } from '/dashboard/js/modules/TopicEditor.js';
|
||||
const topicEditor = new TopicEditor();
|
||||
window.topicEditor = topicEditor;
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user