wip

app/Filament/Pages/Selections/LoadPlayer.php

@@ -11,14 +11,8 @@ use Filament\Schemas\Components\Utilities\Get;
 
 class LoadPlayer
 {
-    public static function load(Get $get)
+    public static function load(int|null $team_id, string|null $team_position, int|null $sofascore_category_id, array|null $season, string|null $seasonmode)
     {
-        $team_id = $get('team_id');
-        $team_position = $get('team_position');
-        $sofascore_category_id = $get('sofascore_category_id');
-        $season = $get('season');
-        $seasonmode = $get('seasonmode');
-
         $season = GetSeason::load($season, $seasonmode);
 
         $hash = hash('crc32', $team_id . $team_position . $sofascore_category_id . serialize($season));

app/Filament/Pages/Statistic.php

@@ -23,6 +23,8 @@ use Filament\Schemas\Components\Grid;
 use Filament\Schemas\Components\Utilities\Get;
 use Filament\Schemas\Components\Utilities\Set;
 use Filament\Schemas\Schema;
+use Filament\Support\Enums\SlideOverPosition;
+use Filament\Support\Enums\Width;
 use Filament\Support\RawJs;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Support\HtmlString;
@@ -76,6 +78,29 @@ class Statistic extends BaseDashboard
         return '';
     }
 
+    protected function getHeaderActions(): array
+    {
+        return [
+            Action::make('esc')
+                ->label('Reset')
+                ->icon('phosphor-x-circle')
+                ->color('gray')
+                ->keyBindings(['esc'])
+                ->action('resetFilters'),
+            Action::make('calculator')
+                ->modalSubmitAction(false) // Hides the submit button
+                ->modalCancelAction(false) // Optional: hides the cancel button too
+                ->label('Calculate')
+                ->icon('icon-player')
+                ->color(fn(): string => $this->filters['team_id'] ? 'primary' : 'gray')
+                ->disabled(fn(): string => $this->filters['team_id'] ? false : true)
+                ->modalContent(view('filament.modals.player-calculator-modal', ['filters' => $this->filters]))
+                ->slideOver()
+                ->slideOverPosition(SlideOverPosition::Start)
+                ->modalWidth(Width::SevenExtraLarge)
+        ];
+    }
+
     public function filtersForm(Schema $schema): Schema
     {
         return $schema
@@ -314,7 +339,12 @@ class Statistic extends BaseDashboard
                                     ->tooltip(fn() => $this->tooltip_player_info())
                             )
                             ->options(function (Get $get) {
-                                return LoadPlayer::load($get);
+                                $team_id = $get('team_id');
+                                $team_position = $get('team_position');
+                                $sofascore_category_id = $get('sofascore_category_id');
+                                $season = $get('season');
+                                $seasonmode = $get('seasonmode');
+                                return LoadPlayer::load($team_id, $team_position, $sofascore_category_id, $season, $seasonmode);
                             }),
                         Select::make('player_on_field')
                             ->live()
@@ -427,13 +457,6 @@ class Statistic extends BaseDashboard
                             ->color('gray')
                             ->action(fn(Set $set) => $set('end_date', null))
                     ),
-                Action::make('esc')
-                    ->label('')
-                    ->tooltip('Reset [esc]')
-                    ->icon('phosphor-x-circle')
-                    ->color('gray')
-                    ->keyBindings(['esc'])
-                    ->action('resetFilters'),
             ]);
     }
 

app/Livewire/AlarmBookmaker.php

@@ -33,11 +33,11 @@ class AlarmBookmaker extends Component implements HasActions, HasSchemas, HasTab
         'refreshAlarmBookmaker' => '$refresh',
     ];
 
-    public static $default_filter;
+    public static int $default_filter;
 
-    public static function load_filter($sport_id)
+    public static function load_filter(int $sport_id)
     {
-        self::$default_filter = MultilineSetting::where('sport_id', $sport_id)
+        self::$default_filter = MultilineSetting::where('sport_id', (int) $sport_id)
             ->orderBy('id')->pluck('id')->first();
     }
 
@@ -64,7 +64,7 @@ class AlarmBookmaker extends Component implements HasActions, HasSchemas, HasTab
                 //     }),
                 // TextColumn::make('sport.name'),
                 TextColumn::make('alarm_level.name')
-                    ->color(fn ($record) => $record->alarm_level->color)
+                    ->color(fn($record) => $record->alarm_level->color)
                     ->weight(FontWeight::Black),
                 TextInputColumn::make('alarm_threshold')
                     ->tooltip('Between 0.01 - 2.00')
@@ -88,13 +88,13 @@ class AlarmBookmaker extends Component implements HasActions, HasSchemas, HasTab
                             ->default(self::$default_filter)
                             ->columnSpanFull()
                             ->hiddenLabel()
-                            ->options(fn () => MultilineSetting::where('sport_id', auth()->user()->sport_id)->orderBy('name')->pluck('name', 'id')),
+                            ->options(fn() => MultilineSetting::where('sport_id', auth()->user()->sport_id)->orderBy('name')->pluck('name', 'id')),
                     ])
                     ->query(function (Builder $query, array $data): Builder {
                         return $query
                             ->when(
                                 $data['multiline_setting_id'],
-                                fn (Builder $query, $multiline_setting_id): Builder => $query->where('multiline_setting_id', $multiline_setting_id),
+                                fn(Builder $query, $multiline_setting_id): Builder => $query->where('multiline_setting_id', $multiline_setting_id),
                             );
                     })
                     ->columns(6)->columnSpan(6),

app/Livewire/Mapper/LoadPositions.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Livewire\Mapper;
+
+class LoadPositions
+{
+
+    public static function load()
+    {
+        $arr = [];
+
+        $arr[] = 0;
+        $arr[] = 0;
+        $arr[] = 'SW';
+        $arr[] = 0;
+        $arr[] = 0;
+
+        $arr[] = 'DR';
+        $arr[] = 'DC';
+        $arr[] = 'DC';
+        $arr[] = 'DC';
+        $arr[] = 'DL';
+
+        $arr[] = 0;
+        $arr[] = 'DM';
+        $arr[] = 'DM';
+        $arr[] = 'DM';
+        $arr[] = 0;
+
+        $arr[] = 'MR';
+        $arr[] = 'MC';
+        $arr[] = 'MC';
+        $arr[] = 'MC';
+        $arr[] = 'ML';
+
+        $arr[] = 0;
+        $arr[] = 'AM';
+        $arr[] = 'AM';
+        $arr[] = 'AM';
+        $arr[] = 0;
+
+        $arr[] = 'RW';
+        $arr[] = 0;
+        $arr[] = 'SM';
+        $arr[] = 0;
+        $arr[] = 'LW';
+
+        $arr[] = 0;
+        $arr[] = 0;
+        $arr[] = 'ST';
+        $arr[] = 0;
+        $arr[] = 0;
+
+        $arr = array_reverse($arr);
+
+        return $arr;
+    }
+}

app/Livewire/PlayerCalculator.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Filament\Pages\Selections\LoadPlayer;
+use App\Livewire\Mapper\LoadPositions;
+use Filament\Widgets\Concerns\InteractsWithPageFilters;
+use Livewire\Component;
+
+class PlayerCalculator extends Component
+{
+    use InteractsWithPageFilters;
+    public $player = [];
+    public $positions = [];
+
+    public function mount(array $filters)
+    {
+        $this->positions = LoadPositions::load();
+        $team_position = $filters['team_position'];
+        $sofascore_category_id = $filters['sofascore_category_id'];
+        $season = $filters['season'];
+        $seasonmode = $filters['seasonmode'];
+        $team_id = $filters['team_id'];
+        $this->player =  LoadPlayer::load($team_id, $team_position, $sofascore_category_id, $season, $seasonmode);
+    }
+}

public/svg/soccerfield.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="740" height="1110" viewBox="0 0 74 111">
+<rect id="" width="74" height="111" fill="#00a000"/>
+<g fill="none" stroke="#fff" stroke-width="0.5" transform="translate(3 3)">
+	<path id="Border" d="M 0 0 h 68 v 105 h -68 Z"/>
+	<path id="Centre line" d="M 0 52.5 h 68"/>
+	<circle id="Centre circle" r="9.15" cx="34" cy="52.5"/>
+	<circle id="Centre mark" r="0.75" cx="34" cy="52.5" fill="#fff" stroke="none"/>
+	<g id="Penalty area">
+		<path id="Penalty area line" d="M 13.84 0 v 16.5 h 40.32 v -16.5"/>
+		<path id="Goal area line" d="M 24.84 0 v 5.5 h 18.32 v -5.5"/>
+		<circle id="Penalty mark" r="0.75" cx="34" cy="10.94" fill="#fff" stroke="none"/>
+		<path id="Penalty arc" d="M 26.733027 16.5 a 9.15 9.15 0 0 0 14.533946 0"/>
+	</g>
+	<use xlink:href="#Penalty area" transform="rotate(180,34,52.5)" />
+	<path id="Corner arcs" d="M 0 2 a 2 2 0 0 0 2 -2M 66 0 a 2 2 0 0 0 2 2M 68 103 a 2 2 0 0 0 -2 2M 2 105 a 2 2 0 0 0 -2 -2"/>
+</g>
+</svg>

resources/css/filament/admin/theme.css

@@ -234,3 +234,7 @@ less padding in table
         }
     }
 }
+
+.dragging {
+    @apply border-red-500
+}

resources/svg/soccerfield.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="740" height="1110" viewBox="0 0 74 111">
+<rect id="" width="74" height="111" fill="#00a000"/>
+<g fill="none" stroke="#fff" stroke-width="0.5" transform="translate(3 3)">
+	<path id="Border" d="M 0 0 h 68 v 105 h -68 Z"/>
+	<path id="Centre line" d="M 0 52.5 h 68"/>
+	<circle id="Centre circle" r="9.15" cx="34" cy="52.5"/>
+	<circle id="Centre mark" r="0.75" cx="34" cy="52.5" fill="#fff" stroke="none"/>
+	<g id="Penalty area">
+		<path id="Penalty area line" d="M 13.84 0 v 16.5 h 40.32 v -16.5"/>
+		<path id="Goal area line" d="M 24.84 0 v 5.5 h 18.32 v -5.5"/>
+		<circle id="Penalty mark" r="0.75" cx="34" cy="10.94" fill="#fff" stroke="none"/>
+		<path id="Penalty arc" d="M 26.733027 16.5 a 9.15 9.15 0 0 0 14.533946 0"/>
+	</g>
+	<use xlink:href="#Penalty area" transform="rotate(180,34,52.5)" />
+	<path id="Corner arcs" d="M 0 2 a 2 2 0 0 0 2 -2M 66 0 a 2 2 0 0 0 2 2M 68 103 a 2 2 0 0 0 -2 2M 2 105 a 2 2 0 0 0 -2 -2"/>
+</g>
+</svg>

resources/views/filament/modals/player-calculator-modal.blade.php

@@ -0,0 +1 @@
+@livewire('player-calculator', ['filters' => $filters])

resources/views/filament/pages/split-header-action.blade.php

@@ -0,0 +1,15 @@
+<div class="flex flex-rows justify-between gap-4 sm:flex-row sm:items-center">
+    <!-- Left Aligned Actions -->
+    <div class="flex flex-rows items-center gap-3">
+        @foreach ($leftActions as $action)
+            {{ $action }}
+        @endforeach
+    </div>
+
+    <!-- Right Aligned Actions -->
+    <div class="flex flex-rows items-center gap-3 sm:ms-auto">
+        @foreach ($rightActions as $action)
+            {{ $action }}
+        @endforeach
+    </div>
+</div>

resources/views/filament/pages/statistic.blade.php

@@ -3,7 +3,7 @@
         'player_name',
     );
 @endphp
-<x-filament-panels::page>
+<x-filament-panels::page class="gap-0">
 
     <script>
         window.addEventListener('reset-tab', () => {

resources/views/livewire/player-calculator.blade.php

@@ -0,0 +1,68 @@
+@php
+    use Illuminate\Support\HtmlString;
+@endphp
+
+
+<div class="grid grid-cols-6 gap-10" class="drag-and-drop" x-data="{ adding: false, removing: false }">
+    <div class="col-span-2 h-full drag-and-drop__container drag-and-drop__container--from">
+        @foreach ($player as $position => $names)
+            <div class="text-bold py-2"> {{ ucfirst(strtolower($position)) }}</div>
+            <div class="grid grid-cols-2 gap-2 cursor-grab drag-and-drop__items"
+                :class="{ 'drag-and-drop__items--removing': removing }" x-on:drop="removing = false"
+                x-on:drop.prevent="
+                    const target = event.target.closest('div');
+                    const element = document.getElementById(event.dataTransfer.getData('text/plain'));
+                    target.appendChild(element);
+                "
+                x-on:dragover.prevent="removing = true" x-on:dragleave.prevent="removing = false">
+                @foreach ($names as $ss_player_id => $name)
+                    <div color="gray" id="{{ $ss_player_id }}"
+                        class="border border-gray-200 bg-gray-100 p-1 rounded text-xs cursor-grap drag-and-drop__item"
+                        :class="{ 'drag-and-drop__item--dragging': dragging }"
+                        x-on:dragstart.self="
+                            dragging = true;
+                            event.dataTransfer.effectAllowed='move';
+                            event.dataTransfer.setData('text/plain', event.target.id);
+                        "
+                        x-on:dragend="dragging = false" x-data="{ dragging: false }" draggable="true">
+                        {{ new HtmlString($name) }}
+                    </div>
+                @endforeach
+            </div>
+        @endforeach
+    </div>
+    <div class="col-span-3 h-full drag-and-drop__container drag-and-drop__container--to">
+        <div class="drag-and-drop__items grid grid-cols-5 gap-2 justify-center w-130 bg-size-[100%_100%] p-2 border-5 border-green-600"
+            style="background-image:url({{ asset('images/soccerfield.png') }});">
+            @foreach ($positions as $pos)
+                @if ($pos)
+                    <div class="border-5 border-white/30 h-full aspect-square p-1 m-1 rounded-xl"
+                        :class="{ 'drag-and-drop__items--adding': adding }" x-on:drop="adding = false"
+                        x-on:drop.prevent="
+                const target = event.target.closest('ul');
+                const element = document.getElementById(event.dataTransfer.getData('text/plain'));
+                target.appendChild(element);
+            "
+                        x-on:dragover.prevent="adding = true" x-on:dragleave.prevent="adding = false">
+                        <div class="text-white/30 font-black text-center text-xl">
+                            {{ $pos }}
+                        </div>
+                    </div>
+                @else
+                    <div></div>
+                @endif
+            @endforeach
+        </div>
+    </div>
+    <div class="flex flex-col gap-3">
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-x-circle">
+            Reset
+        </x-filament::button>
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-calculator">
+            Calculate
+        </x-filament::button>
+        <x-filament::button wire:click="openNewUserModal" color="gray" icon="phosphor-copy">
+            Copy
+        </x-filament::button>
+    </div>
+</div>