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 07:36:26 +02:00
1 parent 2e829b984f
commit c2e0e0b89b
18 files changed
+343 -246
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/filament/admin/theme.css
+3 -3
View File
@@ -274,6 +274,6 @@ less padding in table
}
/* 3. Sicherstellen, dass die Dropzones Platz für das Element bieten */
.drag-box {
@apply flex flex-col gap-0 size-24 bg-gray-100/50 border-2 border-dashed border-gray-300 rounded-xl text-xs p-0;
}
/* .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;
} */
resources/js/alpine-sort.js
+1
View File
@@ -0,0 +1 @@
(() => { function l(f) { f.directive("sort", (m, { modifiers: E, expression: I }, { Alpine: g, effect: v, evaluateLater: w }) => { let a = m.closest("[x-data]"); if (!a) return; let x = w(I), o = g.$data(a), [r] = E; v(() => { x(e => { let n = [...o[r]]; if (["asc", "desc"].includes(e)) { let c = e === "asc" ? n.sort((s, t) => s > t ? 1 : -1) : n.sort((s, t) => s < t ? 1 : -1); o[r] = c; return } let [y, ...p] = e.split("."), A = n.sort((c, s) => { let t = p.reduce((i, d) => i[d], c), u = p.reduce((i, d) => i[d], s); return y === "asc" ? t > u ? 1 : -1 : t < u ? 1 : -1 }); o[r] = A }) }) }) } document.addEventListener("alpine:init", () => window.Alpine.plugin(l)); })();
resources/js/dragndrop-store.js
-44
View File
@@ -1,44 +0,0 @@
document.addEventListener("alpine:init", () => {
Alpine.store("main", {
attack: true,
midfield: true,
defence: true,
goalkeeper: true,
players: [],
groups: [],
toggleAttack() {
this.attack = !this.attack;
// Loop through them and add Tailwind's invisible class
elements.forEach((el) => el.classList.add("invisible"));
},
console(index) {
console.log(this.players[index].player_id);
var p = this.players[index].player_id;
},
loadPlayer(data) {
this.players = data;
},
setPosGroup(group) {
this.groups = group;
console.log(this.groups, group);
},
hasVisible(type) {
console.log(type);
return true;
},
toggleType(toggleStates) {
var toggleState = toggleStates;
// var toggleState = JSON.parse(mode);
// this.visa = toggleState[0].data.status;
// console.log(this.visabilities);
},
findByPlayerId(player_id) {
const index = this.items.findIndex(
(item) => item.player_id === player_id,
);
if (index > -1) {
return item;
}
},
});
});
resources/js/filament-dragula.js
-6
View File
@@ -1,6 +0,0 @@
import dragula from "dragula";
import "dragula/dist/dragula.css";
document.addEventListener("alpine:init", () => {
window.dragula = dragula;
});
resources/js/filament-sort.js
+6
View File
@@ -0,0 +1,6 @@
import sort from '@alpinejs/sort';
// Intercept the global document event before Filament initializes its engine
document.addEventListener('alpine:init', () => {
window.Alpine.plugin(sort);
});
resources/views/filament/modals/player-calculator-modal.blade.php
-1
View File
@@ -1 +0,0 @@
@livewire('player-calculator', ['filters' => $filters])
resources/views/livewire/board-dispatcher-modal-wrapper.blade.php
+4
View File
@@ -0,0 +1,4 @@
<div>
<!-- Render the livewire element smoothly within the Filament modal context -->
@livewire('board-dispatcher')
</div>
resources/views/livewire/board-dispatcher.blade.php
+139
View File
@@ -0,0 +1,139 @@
<!-- 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-')) }}' }">
<!-- 🌟 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">
@foreach($lists as $listId => $items)
@if(str_starts_with($listId, 'source-'))
<x-filament::tabs.item icon="heroicon-m-bell"
: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">
{{ count($items) }}
</x-filament::badge>
</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>
<!-- 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
</div>
</div>
<!-- 🌟 SEKTION 2: DIE 21 DESTINATION BAYS -->
<div wire:key="destinations-main-container">
<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">
@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>
</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">
@foreach($items as $item)
<div data-id="{{ $item['id'] }}"
wire:key="item-dest-{{ $item['id'] }}"
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">
{{ $item['name'] }}
</span>
<div class="flex items-center space-x-1 shrink-0">
<!-- Return Button -->
<button type="button"
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
@click.stop="$wire.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>
@endforeach
</div>
</div>
@endif
@endforeach
</div>
</div>
</div>
resources/views/livewire/player-calculator.blade.php
+4 -71
View File
@@ -1,71 +1,4 @@
<!-- 1. Der Alpine-Wrapper (Komplett clean, ohne 'dropzones' oder 'sources') -->
<div x-data="{
init() {
this.$nextTick(() => {
// Findet alle 22 Container (1 Quelle + 21 Ziele) im HTML
const allContainers = this.$el.querySelectorAll('.drag-container');
if (allContainers.length === 0) return;
// Dragula initialisieren
const drake = dragula(Array.from(allContainers), {
revertOnSpill: true,
copy: false
});
// Drop-Event verarbeiten
drake.on('drop', (el, target, source) => {
const playerId = el.getAttribute('data-item-id');
const targetZone = target.getAttribute('data-container-id');
const sourceZone = source.getAttribute('data-container-id');
console.log('Spieler ' + playerId + ' von ' + sourceZone + ' nach ' + targetZone);
{{-- If the item lands in the "trash" zone, remove it entirely
if (targetZone === 'trash') {
el.remove();
}
--}}
});
});
}
}" class="grid grid-cols-12 gap-1">
<div class="col-span-5 drag-container flex flex-row flex-wrap gap-2" data-container-id="source-1">
@foreach ($players as $player)
<x-filament::button class="h-12" size="sm" color="gray" data-item-id="{{ $player['player_id'] }}">
⚽️ {{ $player['player_name'] }}
</x-filament::button>
@endforeach
</div>
<div class="col-span-6 bg-cover bg-center" style="background-image:url({{ asset('svg/soccerfield.svg') }})">
<div class="grid grid-cols-5 grid-rows-7 gap-4 justify-between items-center border">
{{-- first row --}}
<div></div>
<div></div>
<div class="drag-container drag-box" data-container-id="zone-1">
<div class="font-black text-center">SW</div>
</div>
<div></div>
<div></div>
{{-- second row --}}
<div class="drag-container drag-box" data-container-id="zone-2">
<div class="font-black text-black/30 text-center">DR</div>
</div>
<div class="drag-container drag-box" data-container-id="zone-3">
<div class="font-black text-black/30 text-center">DC</div>
</div>
<div class="drag-container drag-box" data-container-id="zone-4">
<div class="font-black text-black/30 text-center">DC</div>
</div>
<div class="drag-container drag-box" data-container-id="zone-5">
<div class="font-black text-black/30 text-center">DC</div>
</div>
<div class="drag-container drag-box" data-container-id="zone-6">
<div class="font-black text-black/30 text-center">DL</div>
</div>
</div>
</div>
<div>Actions</div>
</div>
<!-- Inside your Custom Filament Page Blade Template -->
<x-filament-panels::page>
<livewire:board-dispatcher />
</x-filament-panels::page>