wip

app/Filament/Pages/Monitor.php

@@ -2,6 +2,7 @@
 
 namespace App\Filament\Pages;
 
+use App\Models\Comparatore;
 use BackedEnum;
 use Filament\Actions\Action;
 use Filament\Pages\Page;
@@ -24,6 +25,8 @@ class Monitor extends Page
 
     protected static ?string $title = '';
 
+    public $data = [];
+
     // protected array $extraBodyAttributes = ['class' => 'border border-red-500'];
 
     public function getMaxContentWidth(): Width
@@ -31,6 +34,16 @@ class Monitor extends Page
         return Width::Full;
     }
 
+    public function mount()
+    {
+        $tmp = Comparatore::limit(100)->get();
+        $data = [];
+        foreach ($tmp as $value) {
+            $data[] = json_decode($value['fdata'], 1);
+        }
+        $this->data = json_encode($data);
+    }
+
     // protected static string|UnitEnum|null $navigationGroup = 'Administration';
 
     // public function onboardingAction(): Action

app/Models/Comparatore.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Comparatore extends Model
+{
+    protected $fillable = [
+        'match_id',
+        'sport_id',
+        'bookmaker_id',
+        'pushmode',
+        'hash',
+        'fdata',
+    ];
+}

app/Providers/AppServiceProvider.php

@@ -23,9 +23,9 @@ class AppServiceProvider extends ServiceProvider
     public function boot(): void
     {
         FilamentAsset::register([
-            Css::make('tabulator-css', __DIR__.'/../../node_modules/tabulator-tables/dist/css/tabulator.min.css')
+            Css::make('tabulator-light', __DIR__.'/../../node_modules/tabulator-tables/dist/css/tabulator_modern.min.css')
                 ->loadedOnRequest(),
-            Css::make('tabulator-custom-css', __DIR__.'/../../resources/css/tabulator-custom.css')
+            Css::make('tabulator-dark', __DIR__.'/../../resources/css/tabulator-dark.css')
                 ->loadedOnRequest(),
             Js::make('tabulator-js', __DIR__.'/../../node_modules/tabulator-tables/dist/js/tabulator_esm.min.mjs')
                 ->loadedOnRequest(),

app/Providers/Filament/AdminPanelProvider.php

@@ -45,7 +45,7 @@ class AdminPanelProvider extends PanelProvider
             ->brandLogoHeight('1.8rem')
             ->unsavedChangesAlerts()
             ->colors([
-                'primary' => Color::Slate,
+                'primary' => Color::Blue,
                 'secondary' => '#d7d533',
             ])
             ->viteTheme('resources/css/filament/admin/theme.css')

composer.lock

@@ -2391,16 +2391,16 @@
         },
         {
             "name": "joaopaulolndev/filament-edit-profile",
-            "version": "v2.0.6",
+            "version": "v2.0.8",
             "source": {
                 "type": "git",
                 "url": "https://github.com/joaopaulolndev/filament-edit-profile.git",
-                "reference": "a29e364ea47b16208413cf74268c7d3c8025148d"
+                "reference": "f50ed328b43839e80e0e4071aac09439e46bd77c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/joaopaulolndev/filament-edit-profile/zipball/a29e364ea47b16208413cf74268c7d3c8025148d",
-                "reference": "a29e364ea47b16208413cf74268c7d3c8025148d",
+                "url": "https://api.github.com/repos/joaopaulolndev/filament-edit-profile/zipball/f50ed328b43839e80e0e4071aac09439e46bd77c",
+                "reference": "f50ed328b43839e80e0e4071aac09439e46bd77c",
                 "shasum": ""
             },
             "require": {
@@ -2460,7 +2460,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2025-08-17T23:39:01+00:00"
+            "time": "2025-08-19T23:50:20+00:00"
         },
         {
             "name": "kirschbaum-development/eloquent-power-joins",
@@ -7218,7 +7218,7 @@
         },
         {
             "name": "symfony/polyfill-ctype",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-ctype.git",
@@ -7277,7 +7277,7 @@
                 "portable"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7288,6 +7288,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
@@ -7297,16 +7301,16 @@
         },
         {
             "name": "symfony/polyfill-intl-grapheme",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-intl-grapheme.git",
-                "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe"
+                "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe",
-                "reference": "b9123926e3b7bc2f98c02ad54f6a4b02b91a8abe",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/380872130d3a5dd3ace2f4010d95125fde5d5c70",
+                "reference": "380872130d3a5dd3ace2f4010d95125fde5d5c70",
                 "shasum": ""
             },
             "require": {
@@ -7355,7 +7359,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-intl-grapheme/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7366,16 +7370,20 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-09-09T11:45:10+00:00"
+            "time": "2025-06-27T09:58:17+00:00"
         },
         {
             "name": "symfony/polyfill-intl-idn",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-intl-idn.git",
@@ -7438,7 +7446,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-intl-idn/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7449,6 +7457,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
@@ -7458,7 +7470,7 @@
         },
         {
             "name": "symfony/polyfill-intl-normalizer",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-intl-normalizer.git",
@@ -7519,7 +7531,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7530,6 +7542,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
@@ -7539,7 +7555,7 @@
         },
         {
             "name": "symfony/polyfill-mbstring",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-mbstring.git",
@@ -7600,7 +7616,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7611,6 +7627,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
@@ -7620,7 +7640,7 @@
         },
         {
             "name": "symfony/polyfill-php80",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-php80.git",
@@ -7680,7 +7700,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-php80/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-php80/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7691,6 +7711,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
@@ -7700,16 +7724,16 @@
         },
         {
             "name": "symfony/polyfill-php83",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-php83.git",
-                "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491"
+                "reference": "17f6f9a6b1735c0f163024d959f700cfbc5155e5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/2fb86d65e2d424369ad2905e83b236a8805ba491",
-                "reference": "2fb86d65e2d424369ad2905e83b236a8805ba491",
+                "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/17f6f9a6b1735c0f163024d959f700cfbc5155e5",
+                "reference": "17f6f9a6b1735c0f163024d959f700cfbc5155e5",
                 "shasum": ""
             },
             "require": {
@@ -7756,7 +7780,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-php83/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-php83/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7767,25 +7791,29 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-09-09T11:45:10+00:00"
+            "time": "2025-07-08T02:45:35+00:00"
         },
         {
             "name": "symfony/polyfill-php84",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-php84.git",
-                "reference": "000df7860439609837bbe28670b0be15783b7fbf"
+                "reference": "d8ced4d875142b6a7426000426b8abc631d6b191"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-php84/zipball/000df7860439609837bbe28670b0be15783b7fbf",
-                "reference": "000df7860439609837bbe28670b0be15783b7fbf",
+                "url": "https://api.github.com/repos/symfony/polyfill-php84/zipball/d8ced4d875142b6a7426000426b8abc631d6b191",
+                "reference": "d8ced4d875142b6a7426000426b8abc631d6b191",
                 "shasum": ""
             },
             "require": {
@@ -7832,7 +7860,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-php84/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-php84/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7843,25 +7871,29 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-02-20T12:04:08+00:00"
+            "time": "2025-06-24T13:30:11+00:00"
         },
         {
             "name": "symfony/polyfill-php85",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-php85.git",
-                "reference": "6fedf31ce4e3648f4ff5ca58bfd53127d38f05fd"
+                "reference": "d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/polyfill-php85/zipball/6fedf31ce4e3648f4ff5ca58bfd53127d38f05fd",
-                "reference": "6fedf31ce4e3648f4ff5ca58bfd53127d38f05fd",
+                "url": "https://api.github.com/repos/symfony/polyfill-php85/zipball/d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91",
+                "reference": "d4e5fcd4ab3d998ab16c0db48e6cbb9a01993f91",
                 "shasum": ""
             },
             "require": {
@@ -7908,7 +7940,7 @@
                 "shim"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-php85/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-php85/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7919,16 +7951,20 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"
                 }
             ],
-            "time": "2025-05-02T08:40:52+00:00"
+            "time": "2025-06-23T16:12:55+00:00"
         },
         {
             "name": "symfony/polyfill-uuid",
-            "version": "v1.32.0",
+            "version": "v1.33.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/polyfill-uuid.git",
@@ -7987,7 +8023,7 @@
                 "uuid"
             ],
             "support": {
-                "source": "https://github.com/symfony/polyfill-uuid/tree/v1.32.0"
+                "source": "https://github.com/symfony/polyfill-uuid/tree/v1.33.0"
             },
             "funding": [
                 {
@@ -7998,6 +8034,10 @@
                     "url": "https://github.com/fabpot",
                     "type": "github"
                 },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                 {
                     "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                     "type": "tidelift"

database/migrations/2025_08_20_073550_create_comparatores_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('comparatores', function (Blueprint $table) {
+            $table->id();
+
+            $table->integer('match_id');
+            $table->integer('sport_id')->default(0);
+            $table->integer('bookmaker_id')->default(0);
+            $table->string('pushmode')->nullable();
+            $table->string('hash')->nullable();
+            $table->longText('fdata')->nullable()->default('text');
+
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('comparatores');
+    }
+};

formatting.json

@@ -0,0 +1,163 @@
+{
+    "id": 13523903,
+    "e": "Colorado Springs Switchbacks v New Mexico United",
+    "x": 0,
+    "s": 1758762000,
+    "stc": 1743890400,
+    "day": 25,
+    "g": "USL Championship > Regular Season",
+    "gid": 172998,
+    "cid": 1133,
+    "c": "USA",
+    "fav": 0,
+    "i": "us",
+    "hip": 0,
+    "sid": 1,
+    "blc": 0,
+    "lc_ht": 0,
+    "lc_hp": 0,
+    "note": 0,
+    "sb": true,
+    "mode": 0,
+    "meth": "Nigeria - Base",
+    "cm3w": 0,
+    "ml1": 0,
+    "p3w": 0,
+    "a5": 14,
+    "ax": 0,
+    "a1": 1.79,
+    "a2": 3.95,
+    "a3": 3.65,
+    "a4": 108.6,
+    "aval": {
+        "f": 11,
+        "t": 12,
+        "v": 1,
+        "p": 8
+    },
+    "b1": 1.8,
+    "b2": 3.95,
+    "b3": 3.7,
+    "b4": 107.9,
+    "b11": 0,
+    "b21": 0,
+    "b31": 0,
+    "b41": 0,
+    "b12": 0,
+    "b22": 0,
+    "b32": 0,
+    "b42": 0,
+    "b13": 0,
+    "b23": 0,
+    "b33": 0,
+    "b43": 0,
+    "b14": 0,
+    "b24": 0,
+    "b34": 0,
+    "b44": 0,
+    "b15": 1.78,
+    "b25": 4.1,
+    "b35": 3.7,
+    "b45": 107.6,
+    "b55": 1,
+    "cmto": 0,
+    "ml2": 0,
+    "pto": 0,
+    "c5": 14,
+    "cx": 0,
+    "c1": 2.5,
+    "c2": 1.74,
+    "c3": 1.9,
+    "c4": 110.1,
+    "cval": {
+        "f": 11,
+        "t": 12,
+        "v": 1,
+        "p": 8
+    },
+    "d1": 2.5,
+    "d2": 1.77,
+    "d3": 1.94,
+    "d4": 108,
+    "d11": 0,
+    "d21": 0,
+    "d31": 0,
+    "d41": 0,
+    "d12": 0,
+    "d22": 0,
+    "d32": 0,
+    "d42": 0,
+    "d13": 0,
+    "d23": 0,
+    "d33": 0,
+    "d43": 0,
+    "d14": 0,
+    "d24": 0,
+    "d34": 0,
+    "d44": 0,
+    "d15": 2.5,
+    "d25": 1.78,
+    "d35": 1.96,
+    "d45": 107.2,
+    "d55": 1,
+    "m5": 0,
+    "mx": 0,
+    "m1": 0,
+    "m2": 0,
+    "m3": 0,
+    "mval": {
+        "f": 0,
+        "t": 0,
+        "v": 0,
+        "p": 0
+    },
+    "n1": 0,
+    "n2": 0,
+    "n3": 0,
+    "n11": 0,
+    "n21": 0,
+    "n31": 0,
+    "n12": 0,
+    "n22": 0,
+    "n32": 0,
+    "n13": 0,
+    "n23": 0,
+    "n33": 0,
+    "n14": 0,
+    "n24": 0,
+    "n34": 0,
+    "n15": 0,
+    "n25": 0,
+    "n35": 0,
+    "n55": 0,
+    "g5": 539,
+    "gx": 1,
+    "g1": 1.72,
+    "g2": 1.95,
+    "g3": 109.4,
+    "gval": {
+        "f": 4,
+        "t": 12,
+        "v": 8,
+        "p": 67
+    },
+    "h1": 1.69,
+    "h2": 2.03,
+    "h3": 108.4,
+    "h11": 1.72,
+    "h21": 1.95,
+    "h31": 109.4,
+    "h12": 0,
+    "h22": 0,
+    "h32": 0,
+    "h13": 0,
+    "h23": 0,
+    "h33": 0,
+    "h14": 0,
+    "h24": 0,
+    "h34": 0,
+    "h15": 1.73,
+    "h25": 2.04,
+    "h35": 106.8,
+    "h55": 1
+}

public/css/app/tabulator-light.css

@@ -0,0 +1,2 @@
+.tabulator{background-color:#fff;border:1px solid #fff;font-size:16px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){user-select:none}.tabulator .tabulator-header{background-color:#fff;border-bottom:1px solid #3759d7;box-sizing:border-box;color:#3759d7;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#fff;border-right:1px solid #fff;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#e6e6e6;border:1px solid #3759d7;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{background-color:#3759d7;color:#fff}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{background-color:#2544b7;color:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #b7c3f1;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #fff;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#e6e6e6;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#b7c3f1}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #b7c3f1;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#3759d7}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabLine truncated
+/*# sourceMappingURL=tabulator_modern.min.css.map */

resources/css/tabulator-custom.css

@@ -1,211 +0,0 @@
-.dark {
-    border: 1px solid #282828;
-    background-color: #111111;
-}
-
-.dark[tabulator-layout="fitColumns"] .tabulator-header .tabulator-col:last-child {
-    border-right: none;
-}
-
-.dark .tabulator-header {
-    background-color: #080808;
-}
-
-.dark .tabulator-header .tabulator-calcs-holder {
-    border-top: 1px solid #393838;
-}
-
-.dark .tabulator-header .tabulator-calcs-holder .tabulator-row {
-    background-color: #292929 !important;
-}
-
-.dark .tabulator-header .tabulator-col {
-    border-right-color: #393838;
-    background-color: #101010;
-}
-
-.dark .tabulator-header .tabulator-col.tabulator-row-header {
-    border-right: 1px solid #393838 !important;
-}
-
-.dark .tabulator-header .tabulator-col.range-header-col {
-    border-right: 2px solid #3FB449;
-}
-
-
-.dark .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
-    border-top-color: #393838;
-    border-bottom-color: #393838;
-}
-
-.dark .tabulator-header .tabulator-col input,
-.dark .tabulator-header .tabulator-col select {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    padding: 4px 10px;
-    border: 1px solid #4b4b4b;
-    border-radius: 2px;
-    background: #1f1f1f;
-    color: #fff;
-    outline: none;
-}
-
-.dark .tabulator-header .tabulator-col input:focus,
-.dark .tabulator-header .tabulator-col select:focus {
-    border-color: #3FB449;
-}
-
-.dark .tabulator-header .tabulator-col input+input {
-    margin-left: 5px;
-}
-
-.dark .tabulator-header .tabulator-cell {
-    color: #ccc !important;
-}
-
-.dark .tabulator-tableholder::-webkit-scrollbar {
-    width: 12px;
-    /* width of the entire scrollbar */
-}
-
-.dark .tabulator-tableholder::-webkit-scrollbar-track {
-    background: #333;
-    /* color of the tracking area */
-}
-
-.dark .tabulator-tableholder::-webkit-scrollbar-thumb {
-    background-color: #666;
-    /* color of the scroll thumb */
-    border-radius: 20px;
-    /* roundness of the scroll thumb */
-    border: 3px solid #333;
-    /* creates padding around scroll thumb */
-}
-
-.dark .tabulator-tableholder::-webkit-scrollbar-corner {
-    background: #222;
-}
-
-.dark .tabulator-tableholder .tabulator-table {
-    color: #fff;
-    background-color: #111111;
-}
-
-.dark .tabulator-row {
-    background-color: #151515;
-}
-
-.dark .tabulator-row.tabulator-row-even {
-    background-color: #202020;
-}
-
-.dark .tabulator-row.tabulator-selectable:hover {
-    background-color: #000;
-}
-
-.dark .tabulator-row.tabulator-selected {
-    background-color: #009136;
-}
-
-.dark .tabulator-row.tabulator-selected:hover {
-    background-color: #00531f;
-}
-
-.dark .tabulator-row.tabulator-group {
-    border-right-color: #393838;
-}
-
-.dark .tabulator-row .tabulator-cell {
-    border-right-color: #393838;
-}
-
-.dark .tabulator-row .tabulator-cell.tabulator-editing {
-    border: 1px solid #3FB449;
-}
-
-.dark .tabulator-row .tabulator-cell input,
-.dark .tabulator-row .tabulator-cell select,
-.dark .tabulator-row .tabulator-cell textarea {
-    background-color: #121212;
-    color: #ccc;
-}
-
-.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control {
-    height: 14px;
-    width: 14px;
-    border: 2px solid #3FB449 !important;
-}
-
-.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {
-    position: absolute;
-    content: "";
-    left: -3px;
-    top: 2px;
-    height: 2px;
-    width: 6px;
-    background: #3FB449;
-}
-
-.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {
-    height: 8px;
-    width: 2px;
-    background: #3FB449;
-}
-
-.dark .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {
-    position: absolute;
-    content: "";
-    left: -3px;
-    top: 3px;
-    height: 2px;
-    width: 8px;
-    background: #3FB449;
-}
-
-.dark .tabulator-row .tabulator-cell .tabulator-data-tree-branch {
-    border-left: 2px solid #3FB449;
-    border-bottom: 2px solid #3FB449;
-}
-
-.dark .tabulator-row .tabulator-responsive-collapse {
-    border-top: 1px solid #393838;
-    border-bottom: 1px solid #393838;
-}
-
-.dark .tabulator-footer {
-    background-color: #101010;
-}
-
-.dark .tabulator-footer .tabulator-calcs-holder {
-    border-bottom: 1px solid #393838;
-}
-
-.dark .tabulator-footer .tabulator-calcs-holder .tabulator-row {
-    background-color: #292929 !important;
-}
-
-.dark .tabulator-footer .tabulator-spreadsheet-tabs {
-    margin-bottom: -2px;
-}
-
-.dark .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab {
-    padding: 4px 10px;
-    border-width: 0 1px 1px 1px;
-    background-color: #000;
-    color: #ececec;
-    font-weight: normal;
-}
-
-.dark .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active {
-    font-weight: bold;
-}
-
-.dark .tabulator-footer .tabulator-page,
-.dark .tabulator-footer .tabulator-page-size {
-    background: #ebebeb;
-}
-
-.dark .tabulator-popup,
-.dark .tabulator-tooltip {
-    color: #000;
-}

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

@@ -1,6 +1,6 @@
-<x-filament-panels::page class="h-[calc(100vh-70px)]" id="monitor">
-    <link href="css/app/tabulator-css.css" rel="stylesheet">
-    <div x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-custom-css'))]"></div>
+<x-filament-panels::page class="h-[calc(100vh-150px)]" id="monitor">
+    <div x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-light'))]"></div>
+    <div x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('tabulator-dark'))]"></div>
 
     <style>
         .fi-page-content {
@@ -12,120 +12,55 @@
             TabulatorFull as Tabulator
         } from './js/app/tabulator-js.js';
 
+        var r = 10;
 
-
-        var nestedData = [{
-                id: 1,
-                make: "Ford",
-                model: "focus",
-                reg: "P232 NJP",
-                color: "white",
-                serviceHistory: [{
-                        date: "01/02/2016",
-                        engineer: "Steve Boberson",
-                        actions: "Changed oli filter"
-                    },
-                    {
-                        date: "07/02/2017",
-                        engineer: "Martin Stevenson",
-                        actions: "Break light broken"
-                    },
-                ]
-            },
-            {
-                id: 1,
-                make: "BMW",
-                model: "m3",
-                reg: "W342 SEF",
-                color: "red",
-                serviceHistory: [{
-                        date: "22/05/2017",
-                        engineer: "Jimmy Brown",
-                        actions: "Aligned wheels"
-                    },
-                    {
-                        date: "11/02/2018",
-                        engineer: "Lotty Ferberson",
-                        actions: "Changed Oil"
-                    },
-                    {
-                        date: "04/04/2018",
-                        engineer: "Franco Martinez",
-                        actions: "Fixed Tracking"
-                    },
-                ]
-            },
-        ]
-
-        // var tmp document.getElementsById("monitor");
-        // console.log(tmp)
-        const element = document.getElementById("monitor");
-        var h = element.offsetWidth - 824 + "px";
-
-        //define table
+        var tabledata = {!! $data !!}
         var table = new Tabulator("#example-table", {
-            height: h,
+            rowHeight: 80,
+            height: screen.height - 382 + "px",
             pagination: true,
+            dataLoader: true,
+            data: tabledata,
+
             layout: "fitColumns",
-            columnDefaults: {
-                resizable: true,
-            },
-            data: nestedData,
+            pagination: "local",
+            paginationSize: r,
+            paginationCounter: "rows",
+
             columns: [{
-                    title: "Make",
-                    field: "make"
-                },
-                {
-                    title: "Model",
-                    field: "model"
-                },
-                {
-                    title: "Registration",
-                    field: "reg"
-                },
-                {
-                    title: "Color",
-                    field: "color"
-                },
-            ],
-            rowFormatter: function(row) {
-                //create and style holder elements
-                var holderEl = document.createElement("div");
-                var tableEl = document.createElement("div");
+                title: "",
+                width: 30,
+                field: "sid",
+                headerSort: false,
+                hozAlign: "center",
+                formatter: function(cell, formatterParams) {
+                    var value = cell.getValue();
+                    return "<img style='height:20px; width:20px; margin: 3px 0' src='svg/" + value +
+                        ".svg'>";
+                }
+            }, {
+                title: "Id",
+                field: "id",
+                hozAlign: "center",
+                width: 100
+            }, {
+                title: "Event",
+                field: "e",
+                hozAlign: "center",
+                width: 500,
+                formatter: function(cell, formatterParams) {
+                    var value = cell.getValue();
+                    var liga = cell.getData().g;
+                    var country = cell.getData().c;
 
-                // holderEl.style.boxSizing = "border-box";
-                // holderEl.style.padding = "10px 30px 10px 10px";
-                // holderEl.style.borderTop = "1px solid #333";
-                // holderEl.style.borderBotom = "1px solid #333";
-                // tableEl.style.border = "1px solid #333";
-
-                holderEl.appendChild(tableEl);
-
-                row.getElement().appendChild(holderEl);
-
-                var subTable = new Tabulator(tableEl, {
-                    headerVisible: false,
-                    layout: "fitColumns",
-                    data: row.getData().serviceHistory,
-                    columns: [{
-                            title: "Date",
-                            field: "date",
-                            sorter: "date"
-                        },
-                        {
-                            title: "Engineer",
-                            field: "engineer"
-                        },
-                        {
-                            title: "Action",
-                            field: "actions"
-                        },
-                    ]
-                })
-            },
+                    return "<span style='font-weight:bold;'>" + value +
+                        "</span><br/><span style='padding:3px;'>" + country + ' > ' + liga + "</span>";
+                }
+            }],
         });
     </script>
 
+
     <div id="example-table" class="h-20">
     </div>
 </x-filament-panels::page>