109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
const adjustTableHeight = () => {
|
|
const tablesContainer = document.getElementById('tables-container');
|
|
const upperDistance = tablesContainer.getBoundingClientRect().top;
|
|
|
|
const containerHeight = window.innerHeight - upperDistance;
|
|
tablesContainer.style.maxHeight = `calc(${containerHeight}px - 1rem)`;
|
|
|
|
const tableWrappers = document.getElementsByClassName('table-wrapper');
|
|
for(let i=0; i < tableWrappers.length; i++){
|
|
const maxHeight = (window.innerHeight - upperDistance) / 2;
|
|
tableWrappers[i].style.maxHeight = `calc(${maxHeight}px - 1rem)`;
|
|
}
|
|
};
|
|
|
|
window.addEventListener('load', () => {
|
|
const tables = $(".table").DataTable({
|
|
paging: false,
|
|
info: false,
|
|
dom: "t",
|
|
columnDefs: [
|
|
{
|
|
targets: 'hours',
|
|
render: function (data, type, row) {
|
|
if (type === "sort" || type === 'type') {
|
|
if (data === "None")
|
|
return -1;
|
|
|
|
return parseInt(data);
|
|
}
|
|
if (data === "None")
|
|
return data;
|
|
|
|
let hours = Math.floor(data / 3600);
|
|
let minutes = Math.floor((data - (hours * 3600)) / 60);
|
|
|
|
if (minutes < 10) {minutes = "0"+minutes;}
|
|
return hours+':'+minutes;
|
|
}
|
|
},
|
|
{
|
|
targets: 'number',
|
|
render: function (data, type, row) {
|
|
if (type === "sort" || type === 'type') {
|
|
return parseFloat(data);
|
|
}
|
|
return data;
|
|
}
|
|
},
|
|
{
|
|
targets: 'fraction',
|
|
render: function (data, type, row) {
|
|
let splitted = data.split("/", 1);
|
|
let current = splitted[0]
|
|
if (type === "sort" || type === 'type') {
|
|
return parseInt(current);
|
|
}
|
|
return data;
|
|
}
|
|
},
|
|
],
|
|
|
|
// DO NOT use the scrollX or scrollY options. They cause DataTables to split the thead from
|
|
// the tbody and render two separate tables.
|
|
});
|
|
|
|
document.getElementById('search').addEventListener('keyup', (event) => {
|
|
tables.search(event.target.value);
|
|
console.info(tables.search());
|
|
tables.draw();
|
|
});
|
|
|
|
const update = () => {
|
|
const target = $("<div></div>");
|
|
const tracker = document.getElementById('tracker-wrapper').getAttribute('data-tracker');
|
|
target.load("/tracker/" + tracker, function (response, status) {
|
|
if (status === "success") {
|
|
target.find(".table").each(function (i, new_table) {
|
|
const new_trs = $(new_table).find("tbody>tr");
|
|
const old_table = tables.eq(i);
|
|
const topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
|
|
const leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft();
|
|
old_table.clear();
|
|
old_table.rows.add(new_trs).draw();
|
|
$(old_table.settings()[0].nScrollBody).scrollTop(topscroll);
|
|
$(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll);
|
|
});
|
|
$("#multi-stream-link").replaceWith(target.find("#multi-stream-link"));
|
|
} else {
|
|
console.log("Failed to connect to Server, in order to update Table Data.");
|
|
console.log(response);
|
|
}
|
|
})
|
|
}
|
|
|
|
setInterval(update, 30000);
|
|
|
|
window.addEventListener('resize', () => {
|
|
adjustTableHeight();
|
|
tables.draw();
|
|
});
|
|
|
|
$(".table-wrapper").scrollsync({
|
|
y_sync: true,
|
|
x_sync: true
|
|
});
|
|
|
|
adjustTableHeight();
|
|
});
|