refactor subjectEditor, add icon picker
This commit is contained in:
Eric Blommel
@@ -18,7 +18,7 @@ $defaultValues['displayName'] = "";
|
|||||||
$defaultValues['id'] = "";
|
$defaultValues['id'] = "";
|
||||||
$defaultValues['description'] = "";
|
$defaultValues['description'] = "";
|
||||||
$defaultValues['color'] = "#3b82f6";
|
$defaultValues['color'] = "#3b82f6";
|
||||||
$defaultValues['icon'] = "";
|
$defaultValues['icon'] = "fa-book";
|
||||||
|
|
||||||
$errors = array();
|
$errors = array();
|
||||||
|
|
||||||
@@ -106,6 +106,9 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
|||||||
|
|
||||||
<body class="min-h-screen bg-gray-50">
|
<body class="min-h-screen bg-gray-50">
|
||||||
|
|
||||||
|
<?php include 'header.php'; ?>
|
||||||
|
|
||||||
|
<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
|
||||||
<form id="subjectForm" method="post" onsubmit="handleSubjectSubmit(event)">
|
<form id="subjectForm" method="post" onsubmit="handleSubjectSubmit(event)">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
@@ -137,59 +140,48 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
|||||||
placeholder="Kurze Beschreibung des Fachs"><?php echo $defaultValues['description'] ?></textarea>
|
placeholder="Kurze Beschreibung des Fachs"><?php echo $defaultValues['description'] ?></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">Farbe</label>
|
<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
|
<input type="color" name="color" required
|
||||||
class="w-full h-14 px-1 py-1 rounded-lg"
|
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'] ?>">
|
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>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
|
<label 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"
|
<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">
|
||||||
id="iconSelect" value="<?php echo $defaultValues['icon']?>">
|
<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>
|
</div>
|
||||||
|
<input type="hidden" id="selectedIcon" name="icon" value="<?php echo $defaultValues['icon']; ?>">
|
||||||
<!--
|
|
||||||
<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>
|
</div>
|
||||||
<input type="hidden" name="icon" id="selectedIcon">
|
|
||||||
</div>
|
</div>
|
||||||
-->
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
foreach ($errors as $error) {
|
foreach ($errors as $error) {
|
||||||
@@ -200,17 +192,21 @@ if($_SERVER['REQUEST_METHOD'] == 'POST') {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flow-root mt-8 gap-4">
|
<div class="flow-root mt-8 gap-4">
|
||||||
|
<?php if (isset($editingSubject)) { ?>
|
||||||
<input type="submit" value="Fach löschen" name="submit"
|
<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">
|
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"
|
<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">
|
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()"
|
<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">
|
class="float-right mx-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function selectIcon(element, iconName) {
|
function selectIcon(element) {
|
||||||
// Remove active class from all icons
|
// Remove active class from all icons
|
||||||
document.querySelectorAll('.icon-option').forEach(el => {
|
document.querySelectorAll('.icon-option').forEach(el => {
|
||||||
el.classList.remove('bg-blue-50', 'ring-2', 'ring-blue-500');
|
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
|
// Add active class to selected icon
|
||||||
element.classList.add('bg-blue-50', 'ring-2', 'ring-blue-500');
|
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');
|
const iconInput = document.getElementById('selectedIcon');
|
||||||
iconInput.value = iconName;
|
iconInput.value = element.getAttribute('data-icon');
|
||||||
|
}
|
||||||
|
|
||||||
// Visual feedback
|
function setColor(color) {
|
||||||
element.classList.add('scale-105');
|
document.querySelector('input[name="color"]').value = color;
|
||||||
setTimeout(() => {
|
|
||||||
element.classList.remove('scale-105');
|
|
||||||
}, 200);
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user