106 lines
3.0 KiB
PHP
106 lines
3.0 KiB
PHP
<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 {
|
|
row-gap: 0;
|
|
}
|
|
|
|
#monitor-table {
|
|
border: 1px solid #e7e7e8;
|
|
}
|
|
|
|
.tabulator {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tabulator .tabulator-header {
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #e7e7e8;
|
|
}
|
|
|
|
.tabulator .tabulator-footer {
|
|
background-color: #fff;
|
|
border-top: 1px solid #e7e7e8;
|
|
}
|
|
|
|
.dark {
|
|
#monitor-table {
|
|
border: 1px solid #525252;
|
|
}
|
|
|
|
.tabulator {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tabulator .tabulator-header {
|
|
border-bottom: 1px solid #525252;
|
|
}
|
|
|
|
.tabulator .tabulator-footer {
|
|
border-top: 1px solid #525252;
|
|
}
|
|
|
|
.tabulator .tabulator-header .tabulator-col {
|
|
border-right: 1px solid #525252;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
import {
|
|
TabulatorFull as Tabulator
|
|
} from './js/app/tabulator-js.js';
|
|
|
|
var r = 10;
|
|
|
|
var tabledata = {!! $data !!}
|
|
var table = new Tabulator("#monitor-table", {
|
|
rowHeight: 80,
|
|
height: screen.height - 382 + "px",
|
|
pagination: true,
|
|
dataLoader: true,
|
|
data: tabledata,
|
|
|
|
layout: "fitColumns",
|
|
pagination: "local",
|
|
paginationSize: r,
|
|
paginationCounter: "rows",
|
|
|
|
columns: [{
|
|
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;
|
|
|
|
return "<span style='font-weight:bold;'>" + value +
|
|
"</span><br/><span style='padding:3px;'>" + country + ' > ' + liga + "</span>";
|
|
}
|
|
}],
|
|
});
|
|
</script>
|
|
|
|
|
|
<div id="monitor-table" class="h-20">
|
|
</div>
|
|
</x-filament-panels::page>
|