wip
This commit is contained in:
salam committed
1 parent
aee337e75e
commit
a1ba7adbbe
12 files changed
+2349
-164
No files matched your search
@@ -2,4 +2,5 @@
|
||||
|
||||
@source '../../../../app/Filament/**/*';
|
||||
@source '../../../../resources/views/filament/**/*';
|
||||
@source '../../../../resources/views/filament/pages/**/*';
|
||||
@source '../../../../vendor/awcodes/light-switch/resources/**/*.blade.php';
|
||||
@@ -1,6 +1,12 @@
|
||||
<x-filament-panels::page class="h-[calc(100vh-100px)]">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.fi-page-content {
|
||||
row-gap: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
import {
|
||||
TabulatorFull as Tabulator
|
||||
@@ -8,80 +14,118 @@
|
||||
|
||||
|
||||
|
||||
var tabledata = [{
|
||||
var nestedData = [{
|
||||
id: 1,
|
||||
name: "Oli Bob",
|
||||
age: "12",
|
||||
col: "red",
|
||||
dob: ""
|
||||
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: 2,
|
||||
name: "Mary May",
|
||||
age: "1",
|
||||
col: "blue",
|
||||
dob: "14/05/1982"
|
||||
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"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Christine Lobowski",
|
||||
age: "42",
|
||||
col: "green",
|
||||
dob: "22/05/1982"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Brendon Philips",
|
||||
age: "125",
|
||||
col: "orange",
|
||||
dob: "01/08/1980"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Margret Marmajuke",
|
||||
age: "16",
|
||||
col: "yellow",
|
||||
dob: "31/01/1999"
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
// var tmp document.getElementsById("monitor");
|
||||
// console.log(tmp)
|
||||
const element = document.getElementById("monitor");
|
||||
var h = element.offsetWidth - 824 + "px";
|
||||
|
||||
//define table
|
||||
var table = new Tabulator("#example-table", {
|
||||
height: "100%",
|
||||
data: tabledata, //assign data to table
|
||||
layout: "fitColumns", //fit columns to width of table (optional)
|
||||
height: h,
|
||||
pagination: true,
|
||||
layout: "fitColumns",
|
||||
columnDefaults: {
|
||||
resizable: true,
|
||||
},
|
||||
data: nestedData,
|
||||
columns: [{
|
||||
title: "Name",
|
||||
field: "name"
|
||||
title: "Make",
|
||||
field: "make"
|
||||
},
|
||||
{
|
||||
title: "Progress",
|
||||
field: "progress",
|
||||
sorter: "number"
|
||||
title: "Model",
|
||||
field: "model"
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
field: "gender"
|
||||
title: "Registration",
|
||||
field: "reg"
|
||||
},
|
||||
{
|
||||
title: "Rating",
|
||||
field: "rating"
|
||||
},
|
||||
{
|
||||
title: "Favourite Color",
|
||||
field: "col"
|
||||
},
|
||||
{
|
||||
title: "Date Of Birth",
|
||||
field: "dob",
|
||||
hozAlign: "center"
|
||||
title: "Color",
|
||||
field: "color"
|
||||
},
|
||||
],
|
||||
});
|
||||
rowFormatter: function(row) {
|
||||
//create and style holder elements
|
||||
var holderEl = document.createElement("div");
|
||||
var tableEl = document.createElement("div");
|
||||
|
||||
table.on("rowClick", function(e, row) {
|
||||
alert("Row " + row.getData().id + " Clicked!!!!");
|
||||
// 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"
|
||||
},
|
||||
]
|
||||
})
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<div id="example-table">
|
||||
|
||||
<div id="example-table" class="h-20">
|
||||
</div>
|
||||
</x-filament-panels::page>
|
||||
Reference in new issue
Block a user