salam/nuhodds_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
salam committed 2026-09-05 08:19:49 +02:00
1 parent c2e0e0b89b
commit 9f1650572c
2 files changed
+206 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/Livewire/BoardDispatcher.php
+74 -24
View File
@@ -8,21 +8,25 @@ class BoardDispatcher extends Component
{
public array $lists = [];
public string $boardVersion = '';
public function mount()
{
$this->lists['source-attack'] = [
['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-attack'],
['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-attack'],
$this->boardVersion = uniqid();
$this->lists['source-1'] = [
['id' => '1', 'name' => 'Source Item A', 'origin' => 'source-1'],
['id' => '2', 'name' => 'Source Item B', 'origin' => 'source-1'],
];
$this->lists['source-midfield'] = [
['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-midfield'],
$this->lists['source-2'] = [
['id' => '3', 'name' => 'Source Item C', 'origin' => 'source-2'],
];
$this->lists['source-defence'] = [
['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-defence'],
['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-defence'],
$this->lists['source-3'] = [
['id' => '4', 'name' => 'Source Item D', 'origin' => 'source-3'],
['id' => '5', 'name' => 'Source Item E', 'origin' => 'source-3'],
];
$this->lists['source-goalkeeper'] = [
['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-goalkeeper'],
$this->lists['source-4'] = [
['id' => '6', 'name' => 'Source Item F', 'origin' => 'source-4'],
];
for ($i = 1; $i <= 21; $i++) {
@@ -35,29 +39,35 @@ class BoardDispatcher extends Component
$itemId = (string) $itemId;
$newIndex = (int) $newIndex;
// Abbrechen falls kein Ziel vorhanden ist oder die Position unverändert blieb
if (! $toList || $fromList === $toList) {
if (! $toList || $fromList === $toList || ! isset($this->lists[$fromList]) || ! isset($this->lists[$toList])) {
$this->boardVersion = uniqid();
return;
}
// Limit-Guard: Wenn das Ziel bereits ein Element enthält, abbrechen
if (count($this->lists[$toList]) >= 1) {
$this->boardVersion = uniqid();
return;
}
$foundItem = null;
// 1. Element aus der alten Liste entfernen
if (isset($this->lists[$fromList])) {
foreach ($this->lists[$fromList] as $key => $item) {
if ((string) $item['id'] === $itemId) {
$foundItem = $item;
unset($this->lists[$fromList][$key]);
$this->lists[$fromList] = array_values($this->lists[$fromList]); // Array-Keys korrigieren
break;
}
foreach ($this->lists[$fromList] as $key => $item) {
if ((string) $item['id'] === $itemId) {
$foundItem = $item;
unset($this->lists[$fromList][$key]);
$this->lists[$fromList] = array_values($this->lists[$fromList]);
break;
}
}
// 2. Element in die neue Zielliste am exakten Index einfügen
if ($foundItem && isset($this->lists[$toList])) {
if ($foundItem) {
array_splice($this->lists[$toList], $newIndex, 0, [$foundItem]);
}
$this->boardVersion = uniqid();
}
public function returnToOrigin($itemId, $currentListId)
@@ -65,6 +75,8 @@ class BoardDispatcher extends Component
$itemId = (string) $itemId;
if (! isset($this->lists[$currentListId])) {
$this->boardVersion = uniqid();
return;
}
@@ -80,8 +92,46 @@ class BoardDispatcher extends Component
}
if ($foundItem && isset($this->lists[$foundItem['origin']])) {
array_unshift($this->lists[$foundItem['origin']], $foundItem);
// Nur zurücklegen, wenn die Quelle wirklich frei ist
if (count($this->lists[$foundItem['origin']]) < 1) {
array_unshift($this->lists[$foundItem['origin']], $foundItem);
} else {
// Ausfallsicherheit gegen Datenverlust: Zurück in die Bucht schieben
array_unshift($this->lists[$currentListId], $foundItem);
}
}
$this->boardVersion = uniqid();
}
public function resetBoard()
{
// Alle 21 Zielbays durchlaufen
for ($i = 1; $i <= 21; $i++) {
$bayKey = "dest-{$i}";
if (isset($this->lists[$bayKey]) && ! empty($this->lists[$bayKey])) {
foreach ($this->lists[$bayKey] as $item) {
$targetOrigin = $item['origin'];
// Element zurück in sein Original-Quell-Tab schieben
if (isset($this->lists[$targetOrigin])) {
array_unshift($this->lists[$targetOrigin], $item);
}
}
// Die Zielbucht komplett leeren
$this->lists[$bayKey] = [];
}
}
// Falls Sie die boardVersion-Logik nutzen, erneuern wir sie hier für den DOM-Refresh:
if (property_exists($this, 'boardVersion')) {
$this->boardVersion = uniqid();
}
// Falls Sie die Javascript-Event/ignore-Logik nutzen, feuern wir das Refresh-Event:
$this->dispatch('refreshBoard', lists: $this->lists);
}
public function render()
resources/views/livewire/board-dispatcher.blade.php
+132 -83
View File
@@ -1,112 +1,119 @@
<!-- Ermittelt dynamisch die erste verfügbare Quelle als Start-Tab -->
<div class="space-y-6 max-h-[75vh] overflow-y-auto p-1"
x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }">
x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }"
id="dispatcher-board-root">
<!-- 🌟 SEKTION 1: DIE 4 SOURCE-CONTAINER IN NATIVEN FILAMENT TABS -->
<div wire:key="sources-tab-container">
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4" wire:key="header-split-zone">
<!-- Native Filament Tabs-Leiste -->
<x-filament::tabs wire:key="filament-tabs-bar">
<!-- 🌟 SPLIT HEADER -->
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4">
<div class="flex-1 overflow-x-auto min-w-0">
<x-filament::tabs class="border-none p-0 m-0 flex items-center space-x-1">
@foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'source-'))
<x-filament::tabs.item icon="heroicon-m-bell"
<x-filament::tabs.item
:alpine-active="'activeTab === \'' . $listId . '\''"
x-on:click="activeTab = '{{ $listId }}'"
wire:key="tab-button-{{ $listId }}"
class="cursor-pointer">
<div class="flex items-center space-x-2">
<span>{{ ucwords(str_replace('source-', '', $listId)) }}</span>
<!-- Kleiner Zähler direkt im Tab-Titel -->
<x-filament::badge size="xs" color="gray">
class="cursor-pointer !px-2 !py-1 !min-h-0 text-[11px] font-medium tracking-tight rounded-md">
<div class="flex items-center space-x-1.5 leading-none">
<span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
<span class="inline-flex items-center justify-center px-1 py-0.5 text-[10px] font-mono font-bold bg-primary-500/10 text-primary-600 dark:text-primary-400 rounded-md">
{{ count($items) }}
</x-filament::badge>
</span>
</div>
</x-filament::tabs.item>
@endif
@endforeach
</x-filament::tabs>
<div class="flex items-center pl-4 shrink-0" wire:key="modal-close-right-side">
<x-filament::icon-button
icon="heroicon-m-x-mark"
color="gray"
size="md"
label="Schließen"
tooltip="Modal schließen"
x-on:click="close()"
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
/>
</div>
</div>
<!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
<!-- Reset-Button -->
<x-filament::icon-button
icon="heroicon-m-arrow-path"
color="warning"
size="md"
label="Reset"
tooltip="Alle Elemente zurücksetzen"
@click.stop="
if (confirm('Möchten Sie wirklich alle Elemente in ihre Quell-Tabs zurücksetzen?')) {
// 💡 ALLE AKTIVEN SORTABLE-INSTANZEN IM BROWSER ZERSTÖREN, UM DEN CODELOCK ZU LÖSCHEN
document.querySelectorAll('.sortable-zone').forEach(el => {
if (el._sortableInstance) {
try {
el._sortableInstance.destroy();
el._sortableInstance = null;
} catch(err) {
// Ignoriert verwaiste Instanzen geräuschlos
}
}
});
<!-- Tab-Inhalte (Die Listen selbst) -->
<div class="mt-4" wire:key="sources-lists-loop">
@foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'source-'))
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
<x-filament::section compact>
<!-- SortableJS Container für die aktive Quelle -->
<div x-init="new Sortable($el, {
group: 'master-board',
animation: 150,
onEnd: function(evt) {
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
}
})"
id="{{ $listId }}"
class="space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-30 transition duration-200 hover:border-primary-500">
@foreach($items as $item)
<div data-id="{{ $item['id'] }}"
wire:key="item-source-{{ $item['id'] }}"
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing hover:border-primary-500 dark:hover:border-primary-500 transition-all">
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
<svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg>
</div>
@endforeach
</div>
</x-filament::section>
</div>
@endif
@endforeach
// 💡 ERST JETZT DEN SERVER-RESET AUSFÜHREN
$wire.resetBoard();
}
"
class="cursor-pointer"
/>
<!-- Schließen-Button -->
<x-filament::icon-button
icon="heroicon-m-x-mark"
color="gray"
size="md"
label="Schließen"
x-on:click="close()"
class="cursor-pointer"
/>
</div>
</div>
<!-- 🌟 SEKTION 2: DIE 21 DESTINATION BAYS -->
<div wire:key="destinations-main-container">
<!-- 🌟 SEKTION 1: SOURCES -->
<div>
<div class="text-xs font-bold uppercase tracking-wider text-primary-500 mb-3">Available Sources</div>
@foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'source-'))
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
<x-filament::section compact>
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
<div id="{{ $listId }}"
class="sortable-zone space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-[120px]">
@foreach($items as $item)
<div data-id="{{ $item['id'] }}"
wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
<svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg>
</div>
@endforeach
</div>
</x-filament::section>
</div>
@endif
@endforeach
</div>
<!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
<div>
<div class="text-xs font-bold uppercase tracking-wider text-success-500 mb-3">Target Destination Slots (21)</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3" wire:key="destations-grid-loop">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
@foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'dest-'))
<div class="bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700/50 rounded-xl p-3 flex flex-col min-h-[140px]" wire:key="box-{{ $listId }}">
<div class="flex items-center justify-between mb-2">
<span class="text-[11px] font-bold uppercase text-gray-500 dark:text-gray-400">Bay {{ str_replace('dest-', '', $listId) }}</span>
<x-filament::badge color="success" size="xs">
{{ count($items) }}
</x-filament::badge>
<x-filament::badge color="success" size="xs">{{ count($items) }}</x-filament::badge>
</div>
<!-- SortableJS Container für das Zielgebiet -->
<div x-init="new Sortable($el, {
group: 'master-board',
animation: 150,
onEnd: function(evt) {
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
}
})"
id="{{ $listId }}"
class="flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px] transition-colors duration-200 hover:border-success-500">
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
<div id="{{ $listId }}"
class="sortable-zone flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px]">
@foreach($items as $item)
<div data-id="{{ $item['id'] }}"
wire:key="item-dest-{{ $item['id'] }}"
wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs rounded-md p-2 flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing hover:border-danger-500 transition-all">
<span class="truncate font-medium text-gray-900 dark:text-gray-100 flex-1">
@@ -114,16 +121,15 @@
</span>
<div class="flex items-center space-x-1 shrink-0">
<!-- Return Button -->
<!-- Zuverlässiger, direkter Livewire-Löschcall -->
<button type="button"
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
@click.stop="$wire.returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
class="p-1 rounded text-gray-400 hover:text-danger-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<svg class="h-3.5 w-3.5 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg>
@@ -137,3 +143,46 @@
</div>
</div>
</div>
<!-- 🌟 ZENTRALE AUTOMATISCHE INITIALISIERUNG NACH JEDEM RENDERING -->
@script
<script>
function setupSortableZones() {
document.querySelectorAll('.sortable-zone').forEach(el => {
// Falls für dieses Element bereits eine Instanz existiert, zerstören wir sie sauber vor dem Neuaufbau
if (el._sortableInstance) {
el._sortableInstance.destroy();
}
el._sortableInstance = new Sortable(el, {
group: {
name: 'master-board',
// Striktes Limit: Maximal 1 Kind-Element pro Box zulassen
put: function(to, from) {
if (from.el !== to.el) {
return to.el.children.length < 1;
}
return true;
}
},
animation: 150,
onEnd: function(evt) {
if (evt.from.id !== evt.to.id) {
// Triggert den Server-Call absolut fehlerfrei
$wire.call('moveItem', evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
}
}
});
});
}
// Initialer Aufruf beim Laden
setupSortableZones();
// 💡 DER ENTSCHEIDENDE FIX: Jedes Mal, wenn Livewire das DOM nach einer Array-Änderung (Löschen/Verschieben) aktualisiert,
// binden wir SortableJS sofort wieder frisch an alle 25 Container an!
Livewire.hook('morph.updated', () => {
setupSortableZones();
});
</script>
@endscript