refactor subjectEditor, add icon picker
This commit is contained in:
Eric Blommel
@@ -18,7 +18,7 @@ $defaultValues['displayName'] = "";
|
||||
$defaultValues['id'] = "";
|
||||
$defaultValues['description'] = "";
|
||||
$defaultValues['color'] = "#3b82f6";
|
||||
$defaultValues['icon'] = "";
|
||||
$defaultValues['icon'] = "fa-book";
|
||||
|
||||
$errors = array();
|
||||
|
||||
@@ -32,38 +32,38 @@ if (isset($_GET['subject'])) {
|
||||
$defaultValues['icon'] = $editingSubject->getIcon();
|
||||
}
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
foreach ($defaultValues as $key => $value) {
|
||||
$defaultValues[$key] = $_POST[$key];
|
||||
}
|
||||
|
||||
if(!isset($_POST['displayName']) || trim($_POST['displayName']) == "") {
|
||||
if (!isset($_POST['displayName']) || trim($_POST['displayName']) == "") {
|
||||
$errors["displayName"] = "Bitte geben Sie einen Namen an.";
|
||||
}
|
||||
|
||||
if(!isset($_POST['id']) || trim($_POST['id']) == "") {
|
||||
if (!isset($_POST['id']) || trim($_POST['id']) == "") {
|
||||
$errors["id"] = "Bitte geben Sie eine ID an.";
|
||||
}
|
||||
|
||||
if(!isset($_POST['description']) || trim($_POST['description']) == "") {
|
||||
if (!isset($_POST['description']) || trim($_POST['description']) == "") {
|
||||
$errors["description"] = "Bitte geben Sie eine Beschreibung an.";
|
||||
}
|
||||
|
||||
if(!isset($_POST['color']) || trim($_POST['color']) == "") {
|
||||
if (!isset($_POST['color']) || trim($_POST['color']) == "") {
|
||||
$errors["color"] = "Bitte geben Sie eine Farbe an.";
|
||||
}
|
||||
|
||||
if(!isset($_POST['icon']) || trim($_POST['icon']) == "") {
|
||||
if (!isset($_POST['icon']) || trim($_POST['icon']) == "") {
|
||||
$errors["icon"] = "Bitte geben Sie ein Icon an.";
|
||||
}
|
||||
|
||||
if(!isset($_POST['submit']) || !($_POST['submit'] == "Speichern" || $_POST['submit'] == "Fach löschen")) {
|
||||
if (!isset($_POST['submit']) || !($_POST['submit'] == "Speichern" || $_POST['submit'] == "Fach löschen")) {
|
||||
$errors["submit"] = "Ungültig abgeschickt!";
|
||||
}
|
||||
|
||||
if(empty($errors)) {
|
||||
if (empty($errors)) {
|
||||
$newSubject = false;
|
||||
if(isset($allSubjects[$_POST['id']])) {
|
||||
if (isset($allSubjects[$_POST['id']])) {
|
||||
$newSubject = $allSubjects[$_POST['id']];
|
||||
$newSubject->setDisplayName($_POST['displayName']);
|
||||
$newSubject->setDescription($_POST['description']);
|
||||
@@ -73,10 +73,10 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$newSubject = SubjectData::createNew($_POST['id'], $_POST['displayName'], $_POST['description'], $_POST['color'], $_POST['icon'], array());
|
||||
}
|
||||
|
||||
if(!$newSubject) {
|
||||
if (!$newSubject) {
|
||||
$errors["error"] = "Fehler beim Speichern des Faches.";
|
||||
} else {
|
||||
if($_POST['submit'] == "Fach löschen") {
|
||||
if ($_POST['submit'] == "Fach löschen") {
|
||||
$newSubject->delete();
|
||||
header("Location: " . "index.php");
|
||||
} else {
|
||||
@@ -106,111 +106,107 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
|
||||
<body class="min-h-screen bg-gray-50">
|
||||
|
||||
<form id="subjectForm" method="post" 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 echo $defaultValues['displayName']?>">
|
||||
</div>
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">ID des Fachs</label>
|
||||
<input type="text"
|
||||
name="id"
|
||||
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. mathe"
|
||||
value="<?php echo $defaultValues['id']?>">
|
||||
</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 echo $defaultValues['description']?></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 echo $defaultValues['color']?>">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
|
||||
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
|
||||
id="iconSelect" value="<?php echo $defaultValues['icon']?>">
|
||||
</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',
|
||||
];
|
||||
|
||||
if(isset($editingSubject)) {
|
||||
$icons[] = $editingSubject->getIcon();
|
||||
}
|
||||
|
||||
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 class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
|
||||
<form id="subjectForm" method="post" 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 echo $defaultValues['displayName'] ?>">
|
||||
</div>
|
||||
<input type="hidden" name="icon" id="selectedIcon">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">ID des Fachs</label>
|
||||
<input type="text"
|
||||
name="id"
|
||||
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. mathe"
|
||||
value="<?php echo $defaultValues['id'] ?>">
|
||||
</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 echo $defaultValues['description'] ?></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Farbe</label>
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<input type="color" name="color" required
|
||||
class="w-12 h-12 px-1 py-1 rounded-lg border-2 border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value="<?php echo $defaultValues['color'] ?>">
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-blue-500 border-2 border-gray-300 hover:border-blue-500" onclick="setColor('#3b82f6')" title="Blau"></button>
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-red-500 border-2 border-gray-300 hover:border-red-500" onclick="setColor('#ef4444')" title="Rot"></button>
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-green-500 border-2 border-gray-300 hover:border-green-500" onclick="setColor('#10b981')" title="Grün"></button>
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-yellow-500 border-2 border-gray-300 hover:border-yellow-500" onclick="setColor('#f59e0b')" title="Gelb"></button>
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-purple-500 border-2 border-gray-300 hover:border-purple-500" onclick="setColor('#8b5cf6')" title="Lila"></button>
|
||||
<button type="button" class="w-8 h-8 rounded-lg bg-pink-500 border-2 border-gray-300 hover:border-pink-500" onclick="setColor('#ec4899')" title="Pink"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Icon</label>
|
||||
<div class="mt-2 h-[180px] overflow-y-auto grid md:grid-cols-5 lg:grid-cols-8 grid-cols-8 gap-2 p-1">
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer bg-blue-50 ring-2 ring-blue-500" data-icon="fa-book" onclick="selectIcon(this)"><i class="fas fa-book"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-calculator" onclick="selectIcon(this)"><i class="fas fa-calculator"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-flask" onclick="selectIcon(this)"><i class="fas fa-flask"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-atom" onclick="selectIcon(this)"><i class="fas fa-atom"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-globe-europe" onclick="selectIcon(this)"><i class="fas fa-globe-europe"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-palette" onclick="selectIcon(this)"><i class="fas fa-palette"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-music" onclick="selectIcon(this)"><i class="fas fa-music"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dumbbell" onclick="selectIcon(this)"><i class="fas fa-dumbbell"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-language" onclick="selectIcon(this)"><i class="fas fa-language"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-microscope" onclick="selectIcon(this)"><i class="fas fa-microscope"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-keyboard" onclick="selectIcon(this)"><i class="fas fa-keyboard"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-dna" onclick="selectIcon(this)"><i class="fas fa-dna"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-brain" onclick="selectIcon(this)"><i class="fas fa-brain"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-history" onclick="selectIcon(this)"><i class="fas fa-history"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-chart-line" onclick="selectIcon(this)"><i class="fas fa-chart-line"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-draw-polygon" onclick="selectIcon(this)"><i class="fas fa-draw-polygon"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-running" onclick="selectIcon(this)"><i class="fas fa-running"></i></div>
|
||||
<div class="icon-option flex justify-center items-center w-12 h-12 p-2 border rounded-lg cursor-pointer" data-icon="fa-theater-masks" onclick="selectIcon(this)"><i class="fas fa-theater-masks"></i></div>
|
||||
</div>
|
||||
<input type="hidden" id="selectedIcon" name="icon" value="<?php echo $defaultValues['icon']; ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
foreach ($errors as $error) {
|
||||
echo "<p class='text-red-800'>$error</p>";
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<?php
|
||||
foreach ($errors as $error) {
|
||||
echo "<p class='text-red-800'>$error</p>";
|
||||
}
|
||||
?>
|
||||
<div class="flow-root mt-8 gap-4">
|
||||
<?php if (isset($editingSubject)) { ?>
|
||||
<input type="submit" value="Fach löschen" name="submit"
|
||||
class="float-left px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-gray-200">
|
||||
<?php } ?>
|
||||
<input type="submit" value="Speichern" name="submit"
|
||||
class="float-right px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
<input type="button" value="Abbrechen" onclick="history.back()"
|
||||
class="float-right mx-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flow-root mt-8 gap-4">
|
||||
<input type="submit" value="Fach löschen" name="submit"
|
||||
class="float-left px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-gray-200">
|
||||
<input type="submit" value="Speichern" name="submit"
|
||||
class="float-right px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
<input type="button" value="Abbrechen" onclick="history.back()"
|
||||
class="float-right mx-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function selectIcon(element, iconName) {
|
||||
function selectIcon(element) {
|
||||
// Remove active class from all icons
|
||||
document.querySelectorAll('.icon-option').forEach(el => {
|
||||
el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
|
||||
@@ -219,15 +215,13 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
// 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
|
||||
// Set the hidden input value
|
||||
const iconInput = document.getElementById('selectedIcon');
|
||||
iconInput.value = iconName;
|
||||
iconInput.value = element.getAttribute('data-icon');
|
||||
}
|
||||
|
||||
// Visual feedback
|
||||
element.classList.add('scale-105');
|
||||
setTimeout(() => {
|
||||
element.classList.remove('scale-105');
|
||||
}, 200);
|
||||
function setColor(color) {
|
||||
document.querySelector('input[name="color"]').value = color;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user