wip
This commit is contained in:
salam committed
1 parent
d46fa5c51c
commit
2e829b984f
1 file changed
+151
@@ -0,0 +1,151 @@
|
||||
{{--
|
||||
<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> --}}
|
||||
Reference in new issue
Block a user