152 lines
7.5 KiB
Plaintext
152 lines
7.5 KiB
Plaintext
{{--
|
|
<div class="h-full grid grid-cols-10 gap-3" x-data="{
|
|
activeTab: 'tab1';
|
|
|
|
// Übergibt das PHP Array sicher an JavaScript
|
|
sources: [
|
|
{ id: 'source-1', name: 'Kader', items: @js($players) }
|
|
],
|
|
dropzones: Array.from({ length: 21 }, (_, i) => ({ id: i + 1 })),
|
|
|
|
init() {
|
|
this.$nextTick(() => {
|
|
const allContainers = this.$el.querySelectorAll('.drag-container');
|
|
const drake = dragula(Array.from(allContainers), { revertOnSpill: true });
|
|
|
|
drake.on('drop', (el, target, source) => {
|
|
const playerId = el.getAttribute('data-item-id');
|
|
const targetZone = target.getAttribute('data-container-id');
|
|
console.log('Spieler ID ' + playerId + ' ist jetzt in Zone ' + targetZone);
|
|
|
|
// Optional: Sende die Daten zurück an PHP/Livewire
|
|
// $wire.updatePlayerPosition(playerId, targetZone);
|
|
});
|
|
});
|
|
}
|
|
}">
|
|
<div class="col-span-4 bg-gray-100 p-3 border border-gray-300">
|
|
<!-- Tab Navigation -->
|
|
<x-filament::tabs label="Content tabs">
|
|
<x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
|
|
ATTACK
|
|
</x-filament::tabs.item>
|
|
<x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
|
|
MIDFIELD
|
|
</x-filament::tabs.item>
|
|
<x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
|
|
DEFENCE
|
|
</x-filament::tabs.item>
|
|
<x-filament::tabs.item alpine-active="activeTab === 'tab4'" x-on:click="activeTab = 'tab4'">
|
|
GOALKEEPER
|
|
</x-filament::tabs.item>
|
|
</x-filament::tabs>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="mt-4">
|
|
<div x-show="activeTab === 'tab1'" class="grid grid-cols-4 gap-1 h-full justify-center"
|
|
x-ref="drag-container">
|
|
<!-- Die Filament-Komponente rendert das HTML, Alpine bindet die ID dynamisch -->
|
|
<template x-for="player in sources[0].items" :key="player.player_id">
|
|
<!-- Der Wrapper, den Dragula greift -->
|
|
<div class="drag-item mb-2" :data-item-id="player.player_id">
|
|
<!-- Die Filament-Komponente für das Styling -->
|
|
<x-filament::button size="sm" color="gray"
|
|
class="w-full pointer-events-none text-left justify-start">
|
|
⚽️ <span x-text="player.player_name"></span>
|
|
</x-filament::button>
|
|
</div>
|
|
</template>
|
|
{{-- @foreach ($grid as $key => $ele)
|
|
@if (isset($ele['player_id']) && $ele['position'] == 'ATTACK')
|
|
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
tooltip="{{ $ele['info'] }}">
|
|
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
{{ $ele['position'] }}
|
|
</div>
|
|
<div class="text-wrap font-bold mt-5">
|
|
{{ $ele['name'] }}
|
|
</div>
|
|
</x-filament::button>
|
|
@endif
|
|
@endforeach --}}
|
|
</div>
|
|
<div x-show="activeTab === 'tab2'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
{{-- @foreach ($grid as $key => $ele)
|
|
@if (isset($ele['player_id']) && $ele['position'] == 'MIDFIELD')
|
|
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
tooltip="{{ $ele['info'] }}">
|
|
<div
|
|
class="dragable absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
{{ $ele['position'] }}</div>
|
|
<div class="text-wrap font-bold mt-5">
|
|
{{ $ele['name'] }}
|
|
</div>
|
|
</x-filament::button>
|
|
@endif
|
|
@endforeach --}}
|
|
</div>
|
|
<div x-show="activeTab === 'tab3'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
{{-- @foreach ($grid as $key => $ele)
|
|
@if (isset($ele['player_id']) && $ele['position'] == 'DEFENCE')
|
|
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-25 h-25"
|
|
tooltip="{{ $ele['info'] }}">
|
|
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
{{ $ele['position'] }}</div>
|
|
<div class="text-wrap font-bold mt-5">
|
|
{{ $ele['name'] }}
|
|
</div>
|
|
</x-filament::button>
|
|
@endif
|
|
@endforeach --}}
|
|
</div>
|
|
<div x-show="activeTab === 'tab4'" class="grid grid-cols-4 gap-1 h-full justify-center" x-ref="drag-container">
|
|
{{-- @foreach ($grid as $key => $ele)
|
|
@if (isset($ele['player_id']) && $ele['position'] == 'GOALKEEPER')
|
|
<x-filament::button :data-item-id="{{ $ele['player_id'] }}" class="dragable size-24" tooltip="{{ $ele['info'] }}">
|
|
<div class="absolute top-0 left-0 w-full text-center text-xs p-1 rounded-t-xl bg-white/10">
|
|
{{ $ele['position'] }}</div>
|
|
<div class="text-wrap font-bold mt-5">
|
|
{{ $ele['name'] }}
|
|
</div>
|
|
</x-filament::button>
|
|
@endif
|
|
@endforeach --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-6 h-full flex flex-col gap-5">
|
|
<div class="py-2 w-full text-center">
|
|
<x-filament::button color="gray" icon="phosphor-arrows-counter-clockwise">
|
|
Reset
|
|
</x-filament::button>
|
|
<x-filament::button color="gray" icon="phosphor-copy">
|
|
Copy
|
|
</x-filament::button>
|
|
<x-filament::button color="gray" icon="phosphor-calculator">
|
|
Calculate
|
|
</x-filament::button>
|
|
<x-filament::button color="gray" icon="phosphor-floppy-disk">
|
|
Store
|
|
</x-filament::button>
|
|
<x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
|
|
Close
|
|
</x-filament::button>
|
|
</div>
|
|
<div class="grid grid-cols-5 grid-rows-7 w-full bg-cover bg-center border h-full"
|
|
style="background-image:url({{ asset('svg/soccerfield.svg') }})">
|
|
{{-- first row --}}
|
|
<div></div>
|
|
<div></div>
|
|
<div x-ref="drag-container" :data-container-id="a1" class="dropper">SW</div>
|
|
<div></div>
|
|
<div></div>
|
|
{{-- second row --}}
|
|
<div x-ref="drag-container" :data-container-id="b1" class="dropper">DR</div>
|
|
<div x-ref="drag-container" :data-container-id="b2" class="dropper">DC</div>
|
|
<div x-ref="drag-container" :data-container-id="b3" class="dropper">DC</div>
|
|
<div x-ref="drag-container" :data-container-id="b4" class="dropper">DC</div>
|
|
<div x-ref="drag-container" :data-container-id="b5" class="dropper">DL</div>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|