wip calculator

This commit is contained in:
salam committed 2026-09-05 16:15:18 +02:00
1 parent 3d3748c353
commit 217636b564
14 files changed
+146 -230

No files matched your search

+1 -44
View File
@@ -233,47 +233,4 @@ less padding in table
@apply bg-gray-100 dark:bg-gray-600/30 drop-shadow
}
}
}
/* 1. Das Element, das am Mauszeiger klebt (Der Mirror) */
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.95 !important;
pointer-events: none;
/* Verhindert, dass der Klon Maus-Events blockiert */
/* Styling für den Klon (Hell-Modus) */
background-color: rgb(255, 255, 255) !important;
border: 1px solid rgb(226, 232, 240) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
border-radius: 0.5rem !important;
transform: rotate(3deg);
/* Optionale leichte Drehung für einen dynamischen Look */
transition: transform 0.15s ease;
}
/* Dark Mode Anpassung für den Mirror (Wichtig in Filament!) */
.dark .gu-mirror {
background-color: rgb(31, 41, 55) !important;
border-color: rgb(55, 65, 81) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
/* 2. Der „Schatten“ am ursprünglichen Platz (Transit-Element) */
.gu-transit {
opacity: 0.3 !important;
border: 2px dashed rgb(99, 102, 241) !important;
/* Indigo-farbener gestrichelter Rahmen */
background-color: rgba(99, 102, 241, 0.05) !important;
}
.dark .gu-transit {
background-color: rgba(99, 102, 241, 0.1) !important;
}
/* 3. Sicherstellen, dass die Dropzones Platz für das Element bieten */
/* .drag-box {
@apply flex flex-col gap-0 bg-gray-100/50 border-2 border-dashed border-gray-300 rounded-xl text-xs p-0;
} */
}
@@ -1,4 +1,3 @@
<div>
<!-- Render the livewire element smoothly within the Filament modal context -->
@livewire('board-dispatcher')
@livewire('board-dispatcher', ['filters' => $this->filters])
</div>
@@ -1,15 +1,15 @@
<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-')) }}' }" id="dispatcher-board-root">
<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-700 pb-2 mb-4">
<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 class="border-none p-0 m-0 flex items-center space-x-1">
<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">
<div class="flex items-center space-x-1.5 leading-none">
<span class="uppercase">{{ str_replace('source-', 'S', $listId) }}</span>
<span class="uppercase">{{ str_replace('source-', '', $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) }}
@@ -21,119 +21,90 @@
</x-filament::tabs>
</div>
<!-- RECHTE SEITE DES HEADERS: AKTIONEN -->
<div class="flex items-center space-x-2 pl-4 shrink-0" wire:key="modal-actions-right-side">
<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"
x-on:click="$wire.resetBoard()" class="cursor-pointer" />
<!-- Calculate-Button -->
<x-filament::button icon="heroicon-o-calculator" size="md" tooltip="Calculate"
x-on:click="$wire.resetBoard()" class="cursor-pointer" />
<!-- 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
}
}
});
// 💡 ERST JETZT DEN SERVER-RESET AUSFÜHREN
$wire.resetBoard();
}
"
class="cursor-pointer" />
<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::icon-button icon="heroicon-m-x-mark" color="gray" size="md" label="Schließen"
x-on:click="close()" class="cursor-pointer" />
<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>
<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]">
<!-- Reiner HTML-Container mit Sortable-Klassenerkennung -->
@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 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>
<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">
<div class="mt-7">
<div class="rounded-2xl 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-middle.jpg') }});">
@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]"
<div class="rounded-xl flex flex-col bg-white/30 backdrop-blur-none drop-shadow-xl"
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>
<div class="font-bold text-md mx-auto">
{{-- {{ $destLabels[str_replace('dest-', '', $listId)] }} --}}
{{ array_shift($destLabels) }}
</div>
<!-- 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]">
<div id="{{ $listId }}" class="sortable-zone flex-1 rounded-b-lg p-1">
@foreach ($items as $item)
<div data-id="{{ $item['id'] }}"
<x-filament::badge color="{{ $item['pcolor'] }}" data-id="{{ $item['id'] }}"
tooltip="{{ $item['info'] }}" icon="phosphor-dots-six-vertical"
icon-position="after"
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">
class="m-0 p-2 w-full h-full 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">
<div class=" font-medium text-gray-900 dark:text-gray-100 flex-1 text-wrap my-1">
{{ $item['name'] }}
</span>
<div class="flex items-center space-x-1 shrink-0">
<!-- Zuverlässiger, direkter Livewire-Löschcall -->
<button type="button"
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
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>
</div>
</div>
<div class=" flex flex-row gap-1 items-center justify-between">
<x-filament::icon-button icon="phosphor-x-circle" size="sm" color="gray"
wire:click="returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')" />
{{ ucfirst(str_replace('source-', '', $item['origin'])) }}
</div>
</x-filament::badge>
@endforeach
</div>
</div>
@elseif (str_starts_with($listId, 'blind-'))
<div class=""></div>
@endif
@endforeach
</div>