salam/nuhodds_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dnd wip

Browse Source
This commit is contained in:
salam committed 2025-12-27 07:38:53 +01:00
1 parent e04b12726d
commit 1c0738ec84
9 files changed
+155 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/extra-countries/caf.svg
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="590" height="545" viewBox="0 0 590 545" id="svg3996" version="1.1">
<svg viewBox="0 0 590 545" id="svg3996" version="1.1">
<defs id="defs3998">
<inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective4004" />
<inkscape:perspective id="perspective3885" inkscape:persp3d-origin="0.5 : 0.33333333 : 1" inkscape:vp_z="1 : 0.5 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_x="0 : 0.5 : 1" sodipodi:type="inkscape:persp3d" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

resources/views/filament/tables/columns/mapper-left-column.blade.php
+39 -7
View File
@@ -1,8 +1,40 @@
<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
<div x-sortable-handle x-sortable-item class="bg-white p-4 cursor-grab flex flex-row flex justify-between">
<div class="basis-9/20 text-right">{{ $record->home->name }}</div>
<div class="basis-1/20 text-center">-</div>
<div class="basis-9/20">{{ $record->away->name }}</div>
<div class="basis-1/20"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out" /></div>
<li class="bg-white w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item"
id={{ $record->id }}
x-on:dragstart.self="
dragging = true;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', event.target.id);
"
x-on:drop.prevent="
const id = event.dataTransfer.getData('text/plain');
const target = event.target.closest('ul');
const element = document.getElementById(id);
target.appendChild(element);
"
draggable="true">
<div class="w-6 flex-none mx-auto my-auto">
@if ($record->country->iso2)
<x-icon name="flag-country-{{ $record->country->iso2 }}" class="h5 w-5" />
@else
<x-icon name="{{ $record->country->icon }}" class="h5 w-5" />
@endif
</div>
</div>
<div class="flex-1 flex flex-col justify-center space-y-1">
<div class="flex justify-center text-primary-500">{{ $record->starttime }}</div>
<div class="flex justify-center space-x-4">
<div class="text-right font-bold">{{ $record->home->name }}</div>
<div class="w-6 text-center">-</div>
<div class="text-left font-bold">{{ $record->away->name }}</div>
</div>
<div class="flex justify-center space-x-4">
<div>{{ $record->country?->name }}</div>
<div>{{ $record->competition_group->name }}</div>
</div>
</div>
<div class="w-6 flex-none my-auto">
<x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
</div>
</li>
resources/views/filament/tables/columns/mapper-right-column.blade.php
+41 -11
View File
@@ -1,12 +1,42 @@
<div x-data="{}" x-sortable.x-on:end="console.log('Dropped!', $event.detail)" class="w-full">
<div x-sortable-handle x-sortable-item class="bg-white p-2 cursor-grab grid grid-cols-10 grid-rows-2 gap-1">
<div class="row-span-2 text-left"> <x-filament::icon-button icon="heroicon-o-arrows-pointing-out"
class="my-auto" /></div>
<div class="col-span-4 text-right">{{ $record->home }}</div>
<div class="text-center">-</div>
<div class="col-span-4">{{ $record->away }}</div>
<div><x-flag-country-at class="h5 w-5" /></div>
<div class="col-span-8">{{ $record->country_betsapi?->name }}
{{ $record->group }}</div>
<li class="w-full h-full overflow-hidden p-2 cursor-grab flex space-x-10 drag-and-drop__item" id={{ $record->event_id }}
x-on:dragstart.self="
dragging = true;
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', event.target.id);
"
x-on:drop.prevent="
const id = event.dataTransfer.getData('text/plain');
const target = event.target.closest('ul');
const element = document.getElementById(id);
target.appendChild(element);
"
draggable="true">
<div class="w-6 flex-none my-auto">
<x-filament::icon-button icon="heroicon-o-arrows-pointing-out" />
</div>
</div>
<div class="flex-1 flex flex-col justify-center space-y-1">
<div class="flex justify-center text-primary-500">
{{ $record->starttime }}
</div>
<div class="flex justify-center space-x-4">
<div class="text-right font-bold">{{ $record->home }}</div>
<div class="w-6 text-center">-</div>
<div class="text-left font-bold">{{ $record->away }}</div>
</div>
<div class="flex justify-center space-x-4">
<div>{{ $record->country_betsapi?->name }}</div>
<div>{{ $record->group }}</div>
</div>
</div>
<div class="w-6 flex-none mx-auto my-auto">
@if ($record->group_cc)
<x-icon name="flag-country-{{ $record->group_cc }}" class="h5 w-5" />
@endif
</div>
</li>
resources/views/livewire/mapper-left.blade.php
+9 -2
View File
@@ -1,3 +1,10 @@
<div>
<ul class="drag-and-drop__items" :class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
x-on:drop.prevent="
const id = event.dataTransfer.getData('text/plain');
const target = event.target.closest('ul');
const element = document.getElementById(id);
alert(element)
"
x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
{{ $this->table }}
</div>
</ul>
resources/views/livewire/mapper-right.blade.php
+5 -2
View File
@@ -1,3 +1,6 @@
<div>
{{ $this->table }}
<div class="text-xs drag-and-drop-right" x-data>
<div class="drag-and-drop-right__items" x-on:drop="alert('right')" x-on:dragover.prevent="adding = true"
x-on:dragleave.prevent="adding = false">
{{ $this->table }}
</div>
</div>
resources/views/livewire/top-menu-items.blade.php
+1 -1
View File
@@ -23,7 +23,7 @@
{{-- Modal content --}}
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-4 drag-and-drop text-sm" x-data="{ adding: false, removing: false }">
<div>
@livewire('mapper-left')
</div>