wip
This commit is contained in:
salam committed
1 parent
fb48d5d321
commit
5ec9bd61c3
7 files changed
+827
-393
No files matched your search
@@ -0,0 +1,71 @@
|
||||
@php
|
||||
$record = $getRecord();
|
||||
/*
|
||||
'id' => $player_id,
|
||||
'name' => $val['player_name'],
|
||||
'preferred_foot' => $val['preferred_foot'],
|
||||
'player_position' => $player_position,
|
||||
'player_color' => $player_color,
|
||||
'timed_color' => $timed_color,
|
||||
'events_played' => $events_played,
|
||||
'everage_minutes' => $everage_minutes,
|
||||
*/
|
||||
@endphp
|
||||
@if ($record['active'])
|
||||
<div draggable="false"
|
||||
class="w-full mt-1 p-1 cursor-grab active:cursor-grabbing border border-gray-300 rounded hover:border-primary-500 transition-colors grid grid-cols-7 items-center gap-1"
|
||||
style="opacity:0.25 !important;">
|
||||
<div>
|
||||
<x-filament::badge color="{{ $record['player_color'] }}">
|
||||
{{ strtoupper($record['player_position']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
<div class="text-left font-medium dark:text-white col-span-3">
|
||||
{{ $record['name'] }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
{{ $record['preferred_foot'] }},
|
||||
Ev {{ $record['events_played'] }},
|
||||
Av {{ $record['everage_minutes'] }}min
|
||||
</div>
|
||||
<div class="flex justify-end row-span-2">
|
||||
<x-phosphor-arrows-out-cardinal class="h-4 w-4" />
|
||||
</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
|
||||
</div>
|
||||
@else
|
||||
<div draggable="true"
|
||||
x-on:dragstart="e => {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $record['id'] }} }));
|
||||
}"
|
||||
class="w-full mt-1 p-1 cursor-grab active:cursor-grabbing border border-gray-300 rounded hover:border-primary-500 transition-colors grid grid-cols-7 items-center gap-1">
|
||||
<div>
|
||||
<x-filament::badge color="{{ $record['player_color'] }}">
|
||||
{{ strtoupper($record['player_position']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
<div class="text-left font-medium dark:text-white col-span-3">
|
||||
{{ $record['name'] }}
|
||||
</div>
|
||||
<div class="text-xs col-span-2">
|
||||
{{ $record['preferred_foot'] }},
|
||||
Ev {{ $record['events_played'] }},
|
||||
Av {{ $record['everage_minutes'] }}min
|
||||
</div>
|
||||
<div class="flex justify-end row-span-2 p-1">
|
||||
<x-phosphor-dots-six-vertical class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Goal: 0.13</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Card: 0.41</div>
|
||||
<div class="bg-gray-100 text-xs text-center">Foul: 0.41</div>
|
||||
</div>
|
||||
@endif
|
||||
@@ -1,172 +1,52 @@
|
||||
<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 drop-shadow py-2 mb-4 ">
|
||||
<div class="flex-1 overflow-x-auto min-w-0 ">
|
||||
<x-filament::tabs class="border-gray-200">
|
||||
@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"
|
||||
icon="icon-soccerplayer-{{ str_replace('source-', '', $listId) }}">
|
||||
<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="$wire.copyResult()" />
|
||||
|
||||
<!-- 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>
|
||||
@php
|
||||
use Illuminate\Support\Facades\Log;
|
||||
@endphp
|
||||
<div class="grid grid-cols-3 gap-3 p-10">
|
||||
<div class="dispatcher-board-root">
|
||||
{{ $this->table }}
|
||||
</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 flex-row gap-0 items-center justify-between shadow-sm cursor-grab active:cursor-grabbing">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}
|
||||
</div>
|
||||
<x-filament::badge size="sm" color="{{ $item['ecolor'] }}">
|
||||
{{ $item['info'] }}
|
||||
</x-filament::badge>
|
||||
</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="col-span-2">
|
||||
<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"
|
||||
style="background-image: url({{ asset('images/soccerfield-middle.jpg') }});">
|
||||
@foreach ($beschriftung as $boxNumber => $benennung)
|
||||
@if ($benennung)
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
|
||||
@dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
isOver = false;
|
||||
const rawData = $event.dataTransfer.getData('text/plain');
|
||||
if (rawData) {
|
||||
const elementData = JSON.parse(rawData);
|
||||
$wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
|
||||
}
|
||||
"
|
||||
:class="isOver ? 'border-primary-500 bg-primary-500/10 ring-2 ring-primary-500/50 scale-[1.02]' :
|
||||
'border-gray-800 bg-white/30'"
|
||||
class="border rounded-xl p-2 transition-all flex flex-col justify-start shadow-2xs transform">
|
||||
<!-- Box Header -->
|
||||
<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) }}
|
||||
class="flex justify-between items-center border-b border-gray-100 dark:border-gray-800 p-1">
|
||||
<div class="border bg-white p-1 text-md m-1 rounded">
|
||||
{{ $benennung }}
|
||||
</div>
|
||||
|
||||
@if ($boxes[$boxNumber])
|
||||
<x-filament::icon-button icon="heroicon-m-trash" color="danger"
|
||||
wire:click="clearBox({{ $boxNumber }})" />
|
||||
@endif
|
||||
</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>
|
||||
<!-- Box Inhalt -->
|
||||
@if ($boxes[$boxNumber])
|
||||
<div class="border bg-white p-1 m-1 rounded leading-5">
|
||||
{{ $boxes[$boxNumber]['name'] }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@elseif (str_starts_with($listId, 'blind-'))
|
||||
<div class=""></div>
|
||||
@else
|
||||
<div></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
|
||||
@@ -0,0 +1,103 @@
|
||||
<x-filament-panels::page>
|
||||
<!-- Zentraler Alpine-Zustand für das Modal-Handling -->
|
||||
<div x-data="{ isOpen: false }" @open-kanban-modal.window="isOpen = true" class="space-y-6">
|
||||
|
||||
<!-- Steuerungsbar -->
|
||||
<div
|
||||
class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white dark:bg-gray-900 p-5 rounded-xl border border-gray-200 dark:border-gray-800 shadow-xs">
|
||||
<div>
|
||||
<h2 class="text-base font-bold text-gray-900 dark:text-white">Elemente-Kopierer (v5)</h2>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Ziehe einen Eintrag aus der Tabelle. Das Ziel-Modal
|
||||
öffnet sich synchron beim Ziehen.</p>
|
||||
</div>
|
||||
|
||||
<x-filament::button type="button" icon="heroicon-o-squares-2x2" @click="isOpen = true">
|
||||
Slots manuell öffnen (21 Boxen)
|
||||
</x-filament::button>
|
||||
</div>
|
||||
|
||||
<!-- Filament v5 Datenquelle -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-xs border border-gray-200 dark:border-gray-800 p-4">
|
||||
{{ $this->table }}
|
||||
</div>
|
||||
|
||||
<!-- Filament v5 Modal-Komponente -->
|
||||
<x-filament::modal id="kanban-boxes-modal" x-model="isOpen" width="7xl">
|
||||
<x-slot name="heading">
|
||||
<div class="flex items-center gap-2 text-gray-900 dark:text-white">
|
||||
<x-heroicon-o-tray class="h-5 w-5 text-gray-400" />
|
||||
<span>Ziel-Matrix (21 Slots)</span>
|
||||
</div>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="description">
|
||||
Lass das gezogene Element über der gewünschten Box los, um eine Kopie zuzuweisen.
|
||||
</x-slot>
|
||||
|
||||
<!-- 21 Boxen Grid (Verwendet optimierte Responsive-Spalten) -->
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-3 my-4 max-h-[65vh] overflow-y-auto p-1">
|
||||
@foreach ($boxes as $boxNumber => $items)
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
|
||||
@dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
isOver = false;
|
||||
const rawData = $event.dataTransfer.getData('text/plain');
|
||||
if (rawData) {
|
||||
const elementData = JSON.parse(rawData);
|
||||
// Nutzt die direkte Livewire v4 Brücke über das Proxy-Objekt ($wire)
|
||||
$wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
|
||||
}
|
||||
"
|
||||
:class="isOver ? 'border-primary-500 bg-primary-500/10 ring-2 ring-primary-500/50 scale-[1.03]' :
|
||||
'border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-950/50'"
|
||||
class="border rounded-xl p-3 min-h-[110px] transition-all flex flex-col justify-between shadow-2xs transform">
|
||||
<!-- Box Kopfzeile -->
|
||||
<div
|
||||
class="flex justify-between items-center border-b border-gray-200/50 dark:border-gray-800 pb-1 mb-2">
|
||||
<span
|
||||
class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 text-gray-500 dark:text-gray-400">
|
||||
Box {{ $boxNumber }}
|
||||
</span>
|
||||
|
||||
@if (count($items) > 0)
|
||||
<button type="button" wire:click="clearBox({{ $boxNumber }})"
|
||||
class="text-[10px] text-danger-600 hover:text-danger-500 font-semibold transition-colors">
|
||||
Leeren
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Listen-Inhalt der Box -->
|
||||
<div class="space-y-1 flex-grow overflow-y-auto max-h-[80px]">
|
||||
@forelse($items as $item)
|
||||
<div
|
||||
class="px-2 py-1 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800/80 rounded shadow-3xs text-[10px] flex flex-col">
|
||||
<span class="font-medium text-gray-800 dark:text-gray-200 truncate">
|
||||
{{ $item['title'] }}
|
||||
</span>
|
||||
<span class="text-[9px] text-gray-400 dark:text-gray-500">ID:
|
||||
{{ $item['id'] }}</span>
|
||||
</div>
|
||||
@empty
|
||||
<div
|
||||
class="h-full flex items-center justify-center py-4 text-center text-gray-400 dark:text-gray-600 text-[10px] italic">
|
||||
Bereit
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<x-slot name="footer">
|
||||
<div class="flex justify-end">
|
||||
<x-filament::button color="gray" @click="isOpen = false">
|
||||
Schließen
|
||||
</x-filament::button>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-filament::modal>
|
||||
|
||||
</div>
|
||||
</x-filament-panels::page>
|
||||
Reference in new issue
Block a user