place calculator an separate page
This commit is contained in:
salam committed
1 parent
26052c6cfd
commit
ed8a50d044
14 files changed
+777
-306
No files matched your search
@@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<div class="mt-3">
|
||||
<div x-data="{ activeTab: 'tab1' }">
|
||||
<x-filament::tabs label="Content tabs">
|
||||
<x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
|
||||
|
||||
@@ -1,29 +1,10 @@
|
||||
@php
|
||||
$record = $getRecord();
|
||||
/***
|
||||
"id" => 1218016
|
||||
"name" => "Walter Nuñez"
|
||||
"pos_ori" => "LW"
|
||||
"pos" => "LW"
|
||||
"foot" => "Right"
|
||||
"tot_evt" => 2
|
||||
"tot_min" => 102
|
||||
"ave_min" => 51
|
||||
"gls" => 0
|
||||
"fls" => 3
|
||||
"ofs" => 0
|
||||
"crd" => 0
|
||||
"snt" => 0
|
||||
"tsh" => 0
|
||||
"color_evt" => "success"
|
||||
"area" => "attack"
|
||||
"color_pos" => "warning"
|
||||
*/
|
||||
@endphp
|
||||
@if ($record['active'])
|
||||
<div draggable="false"
|
||||
class="bgFade w-140 max-w-140 border dark:border-gray-600 border-gray-200 text-xs my-0.5 py-1 select-none rounded transition-colors flex justify-end content-center items-center gap-1 ">
|
||||
<div class="w-86 text-[11px] min-w-86 text-center grid grid-cols-10 content-center items-center gap-1">
|
||||
class="w-full mt-1 border dark:border-gray-600 border-gray-200 text-xs select-none rounded transition-colors grid grid-cols-16 gap-1 items-center">
|
||||
<div class="col-span-10 text-[10px] text-center grid grid-cols-10 content-center items-center gap-1">
|
||||
<div>{{ $record['gls'] }}</div>
|
||||
<div>{{ $record['fls'] }}</div>
|
||||
<div>{{ $record['ofs'] }}</div>
|
||||
@@ -52,8 +33,8 @@
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $record['id'] }} }));
|
||||
}"
|
||||
class="w-140 max-w-140 border dark:border-gray-600 border-gray-200 hover:border-blue-500 text-xs my-0.5 mx-0 py-1 select-none cursor-grab active:cursor-grabbing rounded transition-colors flex justify-end content-center items-center gap-1">
|
||||
<div class="w-86 text-[11px] min-w-86 text-center grid grid-cols-10 content-center items-center gap-1">
|
||||
class="w-full mt-1 border dark:border-gray-600 border-gray-200 hover:border-blue-500 text-xs select-none cursor-grab active:cursor-grabbing rounded transition-colors grid grid-cols-16 gap-1 items-center">
|
||||
<div class="col-span-10 text-[10px] text-center grid grid-cols-10 content-center items-center gap-1">
|
||||
<div>{{ $record['gls'] }}</div>
|
||||
<div>{{ $record['fls'] }}</div>
|
||||
<div>{{ $record['ofs'] }}</div>
|
||||
@@ -65,15 +46,15 @@
|
||||
<div>{{ $record['ave_min'] }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="w-18 font-stretch-ultra-condensed">
|
||||
<x-filament::badge size="sm" color="{{ $record['color_pos'] }}">
|
||||
<div class="text-center">
|
||||
<div class="{{ $record['color_pos'] }}">
|
||||
{{ ucfirst($record['pos_ori']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left text-sm tracking-tight flex-1">
|
||||
<div class="col-span-4 overflow-hidden font-medium">
|
||||
{{ $record['name'] }}
|
||||
</div>
|
||||
<div class="w-8 flex justify-end">
|
||||
<div class="flex justify-end">
|
||||
<x-phosphor-dots-six-vertical class="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,43 @@
|
||||
<div class="mx-3 p-3 rounded-2xl col-span-3 grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5 shadow"
|
||||
style="background-image: url({{ asset('images/soccerfield-af.jpg') }});">
|
||||
@foreach ($beschriftung as $boxNumber => $benennung)
|
||||
@if ($benennung)
|
||||
@if (in_array($boxNumber, $lineup))
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true"
|
||||
@dragenter.prevent="isOver = true" @dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
@php
|
||||
use Illuminate\Support\Facades\Log;
|
||||
@endphp
|
||||
<div class="mt-5 col-span-3 flex flex-col gap-3">
|
||||
<div class="flex justify-between">
|
||||
<div class="text-3xl font-bold"> {{ $team_name }} <span
|
||||
class="text-sm font-light">({{ $player_on_field_counter }})</span></div>
|
||||
<div class="flex gap-3">
|
||||
<x-filament::modal id="custom-view-modal" slide-over width="xl">
|
||||
<x-slot name="trigger">
|
||||
<x-filament::button icon="phosphor-question-mark" tooltip="Lineup code explanation" />
|
||||
</x-slot>
|
||||
<x-slot name="header">
|
||||
</x-slot>
|
||||
@include('filament.modals.position-abbreviation')
|
||||
<x-slot name="footer">
|
||||
<div class="flex justify-end gap-x-3">
|
||||
<x-filament::button color="gray"
|
||||
x-on:click="$dispatch('close-modal', { id: 'custom-view-modal' })">
|
||||
Close
|
||||
</x-filament::button>
|
||||
</div>
|
||||
</x-slot>
|
||||
</x-filament::modal>
|
||||
<x-filament::button icon="phosphor-arrows-clockwise" tooltip="Clear all" wire:click="clearResultTable()" />
|
||||
<x-filament::button icon="phosphor-calculator" tooltip="Calculate" wire:click="calculateAspg(1)" />
|
||||
<x-filament::button icon="phosphor-copy" tooltip="Copy results for pasting into a spread sheet"
|
||||
wire:click="copyResult()" />
|
||||
<x-filament::button icon="phosphor-copy" color="warning" tooltip="Copy calculation variables"
|
||||
wire:click="copyDevelopment()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-500 w-full p-3 rounded grid grid-cols-7 grid-rows-5 gap-2 bg-cover bg-center bg-no-repeat aspect-7/5 shadow"
|
||||
style="background-image: url({{ asset('images/soccerfield-af4.jpg') }});">
|
||||
@foreach ($beschriftung as $boxNumber => $benennung)
|
||||
@if ($benennung)
|
||||
@if (in_array($boxNumber, $lineup))
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
|
||||
@dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
isOver = false;
|
||||
const rawData = $event.dataTransfer.getData('text/plain');
|
||||
if (rawData) {
|
||||
@@ -13,44 +45,44 @@
|
||||
$wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
|
||||
}
|
||||
"
|
||||
:class="isOver ? 'border-red-500 bg-white/20 ring-2 ring-red-500/50 scale-[1.02]' :
|
||||
@if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/40'
|
||||
:class="isOver ? 'border-red-500 bg-white/20 ring-2 ring-red-500/50 scale-[1.02]' :
|
||||
@if (in_array($benennung, ['SW', 'DR', 'DC', 'DL'])) 'border-gray-800 bg-green-500/40'
|
||||
@elseif (in_array($benennung, ['DM', 'MR', 'MC', 'ML', 'AM']))
|
||||
'border-gray-800 bg-blue-500/40'
|
||||
@else
|
||||
'border-gray-800 bg-amber-500/40' @endif"
|
||||
class="border-2 rounded-xl transition-all px-1 pt-0 flex flex-col justify-start transform inset-shadow-sm inset-shadow-white/50 shadow-lg">
|
||||
<!-- Box Header -->
|
||||
<div class="grid grid-cols-6 items-center">
|
||||
<div></div>
|
||||
<div
|
||||
class="w-10 2xl:w-16 text-center mx-auto bg-black text-white p-0.5 2xl:p-1 text-md 2xl:text-xl font-black rounded-b col-span-4">
|
||||
{{ $benennung }}
|
||||
class="border-2 rounded-xl transition-all px-1 pt-0 flex flex-col justify-start transform inset-shadow-sm inset-shadow-white/50 shadow-lg">
|
||||
<!-- Box Header -->
|
||||
<div class="grid grid-cols-6 items-center">
|
||||
<div></div>
|
||||
<div
|
||||
class="w-10 2xl:w-16 text-center mx-auto bg-black text-white p-0.5 2xl:p-1 text-md 2xl:text-xl font-black rounded-b col-span-4">
|
||||
{{ $benennung }}
|
||||
</div>
|
||||
|
||||
@if ($boxes[$boxNumber])
|
||||
<x-filament::icon-button icon="heroicon-m-trash" color="black"
|
||||
class="dark:[&_svg]:text-black" size="sm"
|
||||
wire:click="clearBox({{ $boxNumber }})" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Box Inhalt -->
|
||||
@if ($boxes[$boxNumber])
|
||||
<x-filament::icon-button icon="heroicon-m-trash" color="black"
|
||||
class="dark:[&_svg]:text-black" size="sm"
|
||||
wire:click="clearBox({{ $boxNumber }})" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Box Inhalt -->
|
||||
@if ($boxes[$boxNumber])
|
||||
<div draggable="true"
|
||||
x-on:dragstart="e => {
|
||||
<div draggable="true"
|
||||
x-on:dragstart="e => {
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
e.dataTransfer.setData('text/plain', JSON.stringify({ id: {{ $boxes[$boxNumber]['id'] }} }));
|
||||
}"
|
||||
class="cursor-grab active:cursor-grabbing bg-black border border-black hover:border-blue-500 text-white p-0.5 2xl:p-1 m-0.5 rounded leading-4 2xl:leading-5 text-ms">
|
||||
{{ $boxes[$boxNumber]['name'] }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true"
|
||||
@dragenter.prevent="isOver = true" @dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
class="cursor-grab active:cursor-grabbing bg-black border border-black hover:border-blue-500 text-white p-0.5 2xl:p-1 m-0.5 rounded leading-4 2xl:leading-5 text-ms">
|
||||
{{ $boxes[$boxNumber]['name'] }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div x-data="{ isOver: false }" @dragover.prevent="isOver = true" @dragenter.prevent="isOver = true"
|
||||
@dragleave.prevent="isOver = false"
|
||||
@drop.prevent="
|
||||
isOver = false;
|
||||
const rawData = $event.dataTransfer.getData('text/plain');
|
||||
if (rawData) {
|
||||
@@ -58,11 +90,12 @@
|
||||
$wire.dispatch('element-dropped-in-box', { elementData: elementData, boxNumber: {{ $boxNumber }} });
|
||||
}
|
||||
"
|
||||
class="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs invisible">
|
||||
</div>
|
||||
class="border rounded-xl transition-all pt-0 flex flex-col justify-start shadow-2xs invisible">
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div></div>
|
||||
@endif
|
||||
@else
|
||||
<div></div>
|
||||
@endif
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user