146 lines
5.0 KiB
PHP
146 lines
5.0 KiB
PHP
<?php
|
|
require_once("classes/User.php");
|
|
require_once("classes/SubjectData.php");
|
|
require_once("classes/TopicData.php");
|
|
|
|
$allSubjects = SubjectData::getAll();
|
|
$editingSubject = null;
|
|
|
|
if (isset($_GET['subjectId'])) {
|
|
$editingSubject = $allSubjects[$_GET['subjectId']];
|
|
}
|
|
|
|
?>
|
|
|
|
<!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">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-gray-50">
|
|
|
|
<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"
|
|
value="<?php
|
|
if (isset($editingSubject)) {
|
|
echo $editingSubject->getDisplayName();
|
|
}
|
|
?>">
|
|
</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"><?php
|
|
if (isset($editingSubject)) {
|
|
echo $editingSubject->getDescription();
|
|
}
|
|
?></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Farbe</label>
|
|
<input type="color" name="color" required
|
|
class="w-full h-14 px-1 py-1 rounded-lg"
|
|
value="<?php
|
|
if (isset($editingSubject)) {
|
|
echo $editingSubject->getColor();
|
|
} else {
|
|
echo "#3b82f6";
|
|
}
|
|
?>">
|
|
</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',
|
|
'fa-square-root-alt',
|
|
'fa-flask',
|
|
'fa-language',
|
|
'fa-music',
|
|
'fa-palette',
|
|
'fa-dumbbell',
|
|
'fa-globe',
|
|
'fa-clock',
|
|
'fa-microscope',
|
|
'fa-atom',
|
|
'fa-vial',
|
|
'fa-calculator',
|
|
'fa-pen',
|
|
'fa-theater-masks',
|
|
'fa-draw-polygon',
|
|
'fa-tablets',
|
|
];
|
|
|
|
foreach ($icons as $icon) {
|
|
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>";
|
|
}
|
|
?>
|
|
</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>
|
|
|
|
<script>
|
|
function selectIcon(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;
|
|
|
|
// Visual feedback
|
|
element.classList.add('scale-105');
|
|
setTimeout(() => {
|
|
element.classList.remove('scale-105');
|
|
}, 200);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|