mapper new

resources/views/filament/tables/columns/mapper-left-column.blade.php

@@ -1,17 +1,32 @@
-<li class="cursor-grab drag-and-drop__item" x-data="{ moveoverleft: false }" id={{ $record->id }}
+<li class="cursor-grab drag-and-drop__item p-3 flex flex-1 justify-between w-full gap-3" 
+    id="{{ $record->id }}"
+    x-data="{ moveoverleft: false }" 
     x-on:dragstart.self="
         dragging = true;
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/plain', event.target.id);"
-    x-on:dragover.prevent="moveoverleft = true" x-on:dragleave.prevent="moveoverleft = false"
-    x-on:drop="moveoverleft = false" :class="moveoverleft ? 'bg-primary-500/20!' : ''"
+    x-on:dragover.prevent="moveoverleft = true" 
+    x-on:dragleave.prevent="moveoverleft = false"
+    x-on:drop="moveoverleft = false" :class="moveoverleft ? 'bg-blue-600/20! rounded':''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
-        const target = event.target.closest('div');
+        const target = event.target.closest('li');
         if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
-        $wire.mountAction('left', { event_id: id, id: target.id });"
-    draggable="true" mapper="left">
+        $wire.mountAction('left', { event_id: id, id: target.id, mover:'left' });"
+    draggable="true" 
+    mapper="left">
 
+    <div class="flex justify-center gap-4 w-full my-calendar">
+        <div class="text-lime-500 text-wrap text-right">{{ $record->home->name }}</div>
+        <div>-</div>
+        <div class="text-sky-500 text-wrap">{{ $record->away->name }}</div>
+    </div>
 
-    @include('filament.tables.columns.parts.move-botton')
+    <div class="grid grid-cols-3 gap-4">
+        @include('filament.tables.columns.parts.search-left', ['find' => $record->home->name, 'color' => 'away'])
+
+        @include('filament.tables.columns.parts.search-left', ['find' => $record->away->name, 'color' => 'home'])
+
+        @include('filament.tables.columns.parts.move-botton')
+    </div>
 </li>

resources/views/filament/tables/columns/mapper-right-column.blade.php

@@ -1,16 +1,32 @@
-<li class="cursor-grab drag-and-drop__item" x-data="{ moveoverright: false }" id={{ $record->event_id }}
+<li class="cursor-grab drag-and-drop__item p-3 flex flex-1 gap-3 justify-between" 
+    id="{{ $record->event_id }}"
+    x-data="{ moveoverright: false }" 
     x-on:dragstart.self="
         dragging = true;
         event.dataTransfer.effectAllowed = 'move';
         event.dataTransfer.setData('text/plain', event.target.id);"
-    x-on:dragover.prevent="moveoverright = true" x-on:dragleave.prevent="moveoverright = false"
-    x-on:drop="moveoverright = false" :class="moveoverright ? 'bg-primary-500/20!' : ''"
+    x-on:dragover.prevent="moveoverright = true" 
+    x-on:dragleave.prevent="moveoverright = false"
+    x-on:drop="moveoverright = false" :class="moveoverright ? 'bg-blue-600/20! rounded':''"
     x-on:drop.prevent="
         const id = event.dataTransfer.getData('text/plain');
         const target = event.target.closest('li');
         if(document.getElementById(id).getAttribute('mapper') !=target.getAttribute('mapper'))
-        $wire.mountAction('right', { id: id, event_id: target.id });"
-    draggable="true" mapper="right">
+        $wire.mountAction('right', { id: id, event_id: target.id, mover:'right' });"
+    draggable="true" 
+    mapper="right">
 
-    @include('filament.tables.columns.parts.move-botton')
+    <div class="grid grid-cols-3 gap-4">
+        @include('filament.tables.columns.parts.move-botton')
+        
+        @include('filament.tables.columns.parts.search-right', ['find' => $record->away, 'color' => 'home'])
+
+        @include('filament.tables.columns.parts.search-right', ['find' => $record->home, 'color' => 'away'])
+    </div>
+
+    <div class="flex justify-center gap-4 w-full">
+        <div class="text-sky-500 text-wrap text-right">{{ $record->home }}</div>
+        <div>-</div>
+        <div class="text-lime-500 text-wrap">{{ $record->away }}</div>
+    </div>
 </li>

resources/views/filament/tables/columns/parts/move-botton.blade.php

@@ -1,3 +1,4 @@
 <div class="my-auto">
-    <x-filament::button icon="phosphor-arrows-out" color="gray" size="xs" />
+    {{-- <x-filament::icon-button icon="phosphor-arrows-out" size="xs" outlined/> --}}
+    <x-phosphor-arrows-out class="h-4" color="gray"></x-phosphor-arrows-out>
 </div>

resources/views/filament/tables/columns/parts/search-left.blade.php

@@ -0,0 +1,3 @@
+<div class="my-auto">
+    <x-filament::icon-button icon="phosphor-magnifying-glass" color="{{ $color }}" outlined size="xs" x-on:click="search_right='{{ $find }}';" />
+</div>

resources/views/filament/tables/columns/parts/search-right.blade.php

@@ -0,0 +1,3 @@
+<div class="my-auto">
+    <x-filament::icon-button icon="phosphor-magnifying-glass" color="{{ $color }}" outlined size="xs" x-on:click="search_left='{{ $find }}'; " />
+</div>

resources/views/livewire/confirm-mapping.blade.php

@@ -1,8 +1,6 @@
 @php
     use Illuminate\Support\Carbon;
 
-    dd($event, $mapper);
-
     $e = Carbon::parse($event->starttime);
 
     $m = Carbon::parse($mapper->starttime);
@@ -54,7 +52,7 @@
 
         <div class="row-span-2 text-center py-auto">
             <div x-data="{ elements_swopped: false, toggle() { this.elements_swopped = !this.elements_swopped } }" x-init="elements_swopped = true">
-                <x-filament::button color="gray" outlined @click="toggle()" wire:click="toggle()">
+                <x-filament::button color="gray" outlined @click="toggle()" wire:click="toggle()" onkeydown="return event.key != 'Enter';">
                     <div x-show="elements_swopped">
                         <x-icon-paralell class="h-14 w-14 mx-auto" />
                     </div>

resources/views/livewire/top-menu-items.blade.php

@@ -70,7 +70,7 @@
             </x-slot>
 
             <x-slot name="heading">
-                <div class="flex justify-between items-center w-5xl">
+                <div class="flex justify-between items-center w-screen pr-24">
                     <x-sport-header>
                         {{ auth()->user()->sport->name }} Event Mapper
                     </x-sport-header>