172 lines
8.8 KiB
PHP
172 lines
8.8 KiB
PHP
<div class="h-full p-1" x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }" id="dispatcher-board-root">
|
|
|
|
<!-- 🌟 SPLIT HEADER -->
|
|
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-600 py-2 mb-4">
|
|
<div class="flex-1 overflow-x-auto min-w-0">
|
|
<x-filament::tabs>
|
|
@foreach ($lists as $listId => $items)
|
|
@if (str_starts_with($listId, 'source-'))
|
|
<x-filament::tabs.item :alpine-active="'activeTab === \'' . $listId . '\''" x-on:click="activeTab = '{{ $listId }}'"
|
|
wire:key="tab-button-{{ $listId }}" class="cursor-pointer">
|
|
<span class="uppercase">{{ str_replace('source-', '', $listId) }}</span>
|
|
|
|
<x-filament::badge size="xs">
|
|
{{ count($items) }}
|
|
</x-filament::badge>
|
|
</x-filament::tabs.item>
|
|
@endif
|
|
@endforeach
|
|
</x-filament::tabs>
|
|
</div>
|
|
<!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
|
|
<div class="flex items-right space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
|
|
|
|
<!-- Copy-Button -->
|
|
<x-filament::button icon="heroicon-o-clipboard-document-list" size="md" tooltip="Copy"
|
|
:disabled="$copyDisabled" class="cursor-pointer" color="{{ $copyColor }}"
|
|
x-on:click="navigator.clipboard.writeText({{ $this->copystring }})" />
|
|
|
|
<!-- Calculate-Button -->
|
|
<x-filament::button icon="heroicon-o-calculator" size="md" tooltip="Calculate" :disabled="$calculationDisabled"
|
|
x-on:click="$wire.calculate()" class="cursor-pointer" color="{{ $calculationColor }}" />
|
|
|
|
<!-- Reset-Button -->
|
|
<x-filament::button icon="heroicon-o-arrow-path" size="md" tooltip="Reset"
|
|
x-on:click="$wire.resetBoard()" class="cursor-pointer" />
|
|
|
|
<!-- Schließen-Button -->
|
|
<x-filament::button icon="heroicon-o-x-mark" size="md" x-on:click="close()" tooltip="Close"
|
|
class="cursor-pointer" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 🌟 SEKTION 1: 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 }}">
|
|
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
|
|
|
<div id="{{ $listId }}" class="sortable-zone grid grid-cols-5 gap-2 space-y-1 min-h-12">
|
|
@foreach ($items as $item)
|
|
<x-filament::badge color="{{ $item['pcolor'] }}" data-id="{{ $item['id'] }}"
|
|
icon="phosphor-dots-six-vertical" icon-position="after"
|
|
wire:key="item-src-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
|
class="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'] }}
|
|
<div class="text-xs">{{ $item['info'] }}</div>
|
|
</span>
|
|
</x-filament::badge>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- 🌟 SEKTION 2: DESTINATIONS (21 BAYS) -->
|
|
<div class="mt-7 w-full grid grid-cols-7 gap-3">
|
|
<div class="rounded col-span-5 grid grid-cols-7 grid-rows-5 p-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5 max-w-4xl"
|
|
style="background-image: url({{ asset('images/soccerfield-reduced.jpg') }});">
|
|
@foreach ($lists as $listId => $items)
|
|
@if (str_starts_with($listId, 'dest-'))
|
|
<div class="relative rounded-xl flex flex-col bg-white/30 backdrop-blur-none drop-shadow-xl"
|
|
wire:key="box-{{ $listId }}">
|
|
<div
|
|
class="fixed h-6 z-5 top-0 right-0 left-0 pl-2 pt-0.5 font-black text-blue-600 text-sm bg-white/30 rounded-t-2xl">
|
|
{{ $pos = array_shift($destLabels) }}
|
|
</div>
|
|
|
|
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
|
|
<div id="{{ $listId }}" class="sortable-zone flex-1 rounded-b-lg p-1 ">
|
|
|
|
@foreach ($items as $item)
|
|
<div data-id="{{ $item['id'] }}" tooltip="{{ $item['info'] }}"
|
|
wire:key="item-dst-{{ $item['id'] }}-v-{{ $boardVersion }}"
|
|
class="static m-1 pt-4 text-sm cursor-grab active:cursor-grabbing transition-all">
|
|
<x-filament::button icon="phosphor-x" size="xs"
|
|
class="absolute top-0.5 right-1 z-10 p-0.5"
|
|
wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')" />
|
|
<x-filament::badge size="xs" color="{{ $item['pcolor'] }}">
|
|
{{ ucfirst(str_replace('source-', '', $item['origin'])) }}
|
|
</x-filament::badge>
|
|
<div
|
|
class="text-black text-wrap leading-4 tracking-tighter text-shadow-lg bg-white/50 drop-shadow p-0.5 rounded">
|
|
{{ $item['name'] }}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@elseif (str_starts_with($listId, 'blind-'))
|
|
<div class=""></div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
<div class="col-span-2">
|
|
<div class="rounded bg-gray-50 p-2 border border-gray-200 grid grid-cols-7 space-y-1 text-xs items-center">
|
|
@foreach ($results as $k => $result)
|
|
@if ($k < 11)
|
|
<x-filament::badge color="success" size="sm">
|
|
{{ $k + 1 }}
|
|
</x-filament::badge>
|
|
@else
|
|
<x-filament::badge color="danger" size="sm">
|
|
{{ $k + 1 }}
|
|
</x-filament::badge>
|
|
@endif
|
|
<span class="font-bold col-span-4 px-2">{{ $result['name'] }}</span>
|
|
<span class="font-bold px-2">{{ $result['position'] ?? 'none' }}</span>
|
|
<span class="font-bold text-blue-500 p-1">{{ number_format(mt_rand(1, 100) / 100, 2) }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</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
|