make larger trackers linked tables

This commit is contained in:
Fabian Dill
2020-06-30 07:32:05 +02:00
parent d2e3c457be
commit 521d3b0584
5 changed files with 171 additions and 33 deletions

View File

@@ -1,18 +1,24 @@
{% extends 'layout.html' %}
{% block head %}
<title>Multiworld Tracker for Room {{ room.id }}</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("static.css") }}"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.js"></script>
<script src="{{ static_autoversion("jquery.scrollsync.js") }}"></script>
<script>
$(document).ready(function () {
var tables = $(".table").DataTable({
"paging": false,
"ordering": true,
"info": false,
"fixedHeader": true,
"dom": "t"
"dom": "t",
"scrollY": "39vh",
"scrollCollapse": true,
});
$('#searchbox').keyup(function () {
@@ -26,8 +32,12 @@
target.find(".table").each(function (i, new_table) {
var new_trs = $(new_table).find("tbody>tr");
var old_table = tables.eq(i);
var topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
var 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);
});
} else {
console.log("Failed to connect to Server, in order to update Table Data.");
@@ -37,15 +47,28 @@
}
setInterval(update, 30000);
$(".dataTables_scrollBody").scrollsync({
y_sync: true,
x_sync: true
})
$(window).resize(function () {
tables.draw();
});
setTimeout(
tables.draw, {# this fixes the top header misalignment, for some reason #}
500
);
})
</script>
<link rel="stylesheet" type="text/css" href="{{ static_autoversion("static.css") }}"/>
{% endblock %}
{% block body %}
<input id="searchbox" class="form-control" type="text" placeholder="Search">
{% for team, players in inventory.items() %}
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-dark">
<div>
{% for team, players in inventory.items() %}
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Name</th>
@@ -86,8 +109,6 @@
</table>
{% endfor %}
{% for team, players in checks_done.items() %}
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-dark">
@@ -147,4 +168,5 @@
</tbody>
</table>
{% endfor %}
</div>
{% endblock %}