salam/nuhodds_fi4
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
salam committed 2025-08-21 16:12:26 +02:00
1 parent a1ba7adbbe
commit 0543823a4f
18 files changed
+3257 -363
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/filament/pages/monitor.blade.php
+43 -108
View File
@@ -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>