redesign for mulituser
change validation concept (client and server) using entities
This commit is contained in:
88
public/js/tab_overview.js
Normal file
88
public/js/tab_overview.js
Normal file
@@ -0,0 +1,88 @@
|
||||
var bookingdata;
|
||||
|
||||
function createDtOverviewBookings(){
|
||||
document.bookings = new simpleDatatables.DataTable("#bookings", {
|
||||
searchable: false,
|
||||
paging: false,
|
||||
data: {
|
||||
headings: ["","Datum","Empfänger","Betrag"],
|
||||
data: bookingdata,
|
||||
},
|
||||
rowRender: (row, tr, _index) => {
|
||||
//tr.childNodes[1].childNodes[0].attributes.href = `editBill/${row.cells[0].data}`;
|
||||
tr.childNodes[1].attributes.onclick = `location.href='editBill/${row.cells[0].data}'`;
|
||||
// tr.childNodes[2].attributes.onclick = `collapseDetails(this, ${_index})`;
|
||||
},
|
||||
classes: {
|
||||
active: "active",
|
||||
disabled: "disabled",
|
||||
table: "table table-striped table-sm",
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
select:0,
|
||||
// render: (data, _cell, _dataIndex, _cellIndex) => { return `<a data-bs-toggle="modal" role="button" data-bs-id="'${data}'" data-bs-target="#mymodal" ><i class="fa-solid fa-trash"></a>` },
|
||||
cellClass: "datatable-icon",
|
||||
type: "number",
|
||||
hidden:true,
|
||||
},{
|
||||
select:1,
|
||||
type: 'date',
|
||||
format: 'dd.mm.yyyy',
|
||||
cellClass:"dt-datum",
|
||||
sortable: true,
|
||||
sort: "desc",
|
||||
},{
|
||||
select:2,
|
||||
type: 'string',
|
||||
cellClass:"dt-receiver",
|
||||
// render: (data, _cell, _dataIndex, _cellIndex) => { return `<a onclick="collapseDetails(this,document.bookings)">${data}</a>` },
|
||||
|
||||
},{
|
||||
select:3,
|
||||
type: 'number',
|
||||
headerClass: "dt-amount",
|
||||
cellClass:"dt-amount",
|
||||
render: renderAmount
|
||||
}
|
||||
],
|
||||
template: (options, dom) => `<div class='${options.classes.top}'>
|
||||
<div class='float-start'>
|
||||
<a class="btn btn-sm btn-secondary" href="newBill">Neue Rechnung</a>
|
||||
<a class="btn btn-sm btn-secondary" href="newTransfer">Neuer Transfer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
|
||||
<div class='${options.classes.bottom}'>
|
||||
</div>`
|
||||
});
|
||||
loadOverviewData();
|
||||
}
|
||||
|
||||
function loadOverviewData(){
|
||||
document.bookings.setMessage("Loading Data");
|
||||
fetch("/getOverviewData", { method: "GET",headers: {"X-Requested-With": "XMLHttpRequest"},})
|
||||
.then(response => {
|
||||
let status = response.statusText;
|
||||
if (!response.ok) {
|
||||
throw "HTTP error: " + response.status + "; " + status;
|
||||
} else
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (document.bookings.hasRows){
|
||||
document.bookings.data.data.splice(0,document.bookings.data.data.length);
|
||||
document.bookings.hasRows = false;
|
||||
}
|
||||
//document.bookings.insert({data:data});
|
||||
document.bookings.insert({data:data.map(item => [item.id,item.datum,item.receiver,item.amount])});
|
||||
document.bookings.update(true);
|
||||
})
|
||||
.catch(err => {
|
||||
document.bookings.setMessage(err);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
createDtOverviewBookings();
|
||||
});
|
||||
Reference in New Issue
Block a user