wip
This commit is contained in:
salam committed
1 parent
9f157adc96
commit
29de0c2c6c
13 files changed
+324
-789
No files matched your search
@@ -9,33 +9,36 @@
|
||||
'timed_color' => $timed_color,
|
||||
'events_played' => $events_played,
|
||||
'everage_minutes' => $everage_minutes,
|
||||
style="opacity:0.25 !important;"
|
||||
*/
|
||||
@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']) }}
|
||||
class="w-full text-xs mt-1 p-1 select-none border border-gray-300 rounded hover:border-primary-500 transition-colors flex justify-end content-center items-center gap-1">
|
||||
<div class="w-86 text-[11px] min-w-86 text-center grid grid-cols-11 content-center items-center gap-1">
|
||||
<div class="bg-gray-200">{{ $record['preferred_foot'] }}</div>
|
||||
<div class="bg-gray-200">{{ $record['events_played'] }}</div>
|
||||
<div class="bg-gray-200">{{ $record['everage_minutes'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['gls'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['crn'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['fls'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['ofs'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['snt'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['tsh'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['crd'] }}</div>
|
||||
<div class="bg-black text-white rounded font-bold">{{ $record['position'] }}</div>
|
||||
</div>
|
||||
<div class="w-18 font-stretch-ultra-condensed">
|
||||
<x-filament::badge size="sm" color="{{ $record['player_color'] }}">
|
||||
{{ ucfirst($record['player_position']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
<div class="text-left font-medium dark:text-white col-span-3">
|
||||
<div class="text-left font-bold tracking-tight flex-1">
|
||||
{{ $record['name'] }}
|
||||
</div>
|
||||
<div class="text-xs">
|
||||
{{ $record['preferred_foot'] }},
|
||||
Ev {{ $record['events_played'] }},
|
||||
Av {{ $record['everage_minutes'] }}min
|
||||
<div class="w-8 flex justify-end">
|
||||
<x-phosphor-map-pin class="h-5 w-5 text-orange-500" />
|
||||
</div>
|
||||
<div class="flex justify-end row-span-2">
|
||||
</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"
|
||||
@@ -43,28 +46,30 @@
|
||||
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']) }}
|
||||
class="w-full text-xs mt-1 p-1 select-none cursor-grab active:cursor-grabbing border border-gray-300 rounded hover:border-primary-500 transition-colors flex justify-end content-center items-center gap-1">
|
||||
<div class="w-86 text-[11px] min-w-86 text-center grid grid-cols-11 content-center items-center gap-1">
|
||||
<div class="bg-gray-200">{{ $record['preferred_foot'] }}</div>
|
||||
<div class="bg-gray-200">{{ $record['events_played'] }}</div>
|
||||
<div class="bg-gray-200">{{ $record['everage_minutes'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['gls'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['crn'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['fls'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['ofs'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['snt'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['tsh'] }}</div>
|
||||
<div class="bg-blue-100">{{ $record['crd'] }}</div>
|
||||
<div class="bg-black text-white rounded font-bold">{{ $record['position'] }}</div>
|
||||
</div>
|
||||
<div class="w-18 font-stretch-ultra-condensed">
|
||||
<x-filament::badge size="sm" color="{{ $record['player_color'] }}">
|
||||
{{ ucfirst($record['player_position']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
<div class="text-left font-medium dark:text-white col-span-3">
|
||||
<div class="text-left font-bold tracking-tight flex-1">
|
||||
{{ $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">
|
||||
<div class="w-8 flex justify-end">
|
||||
<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
|
||||
@endif
|
||||
@@ -1,7 +1,7 @@
|
||||
@php
|
||||
use Illuminate\Support\Facades\Log;
|
||||
@endphp
|
||||
<div class="grid grid-cols-3 gap-3 p-10">
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="dispatcher-board-root">
|
||||
{{ $this->table }}
|
||||
</div>
|
||||
@@ -22,11 +22,12 @@
|
||||
"
|
||||
: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">
|
||||
class="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs transform">
|
||||
<!-- Box Header -->
|
||||
<div
|
||||
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">
|
||||
class="grid grid-cols-6 items-center border-b p-1">
|
||||
<div></div>
|
||||
<div class="w-16 text-center mx-auto bg-black text-white p-1 text-xl font-black rounded col-span-4">
|
||||
{{ $benennung }}
|
||||
</div>
|
||||
|
||||
@@ -38,7 +39,7 @@
|
||||
|
||||
<!-- Box Inhalt -->
|
||||
@if ($boxes[$boxNumber])
|
||||
<div class="border bg-white p-1 m-1 rounded leading-5">
|
||||
<div class="border bg-white p-2 m-2 rounded leading-5">
|
||||
{{ $boxes[$boxNumber]['name'] }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
<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