epi/EpiWebview
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 6 Wiki Activity

v1.5.0 Checkout / Checkin Datumsspalten können ausgeblendet werden

Browse Source
This commit is contained in:
Leopold Strobl
2025-10-09 11:59:49 +02:00
parent f5106d83ea
commit a5ff147042
7 changed files with 165 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
PackAufgabenMonitor.php
View File

@@ -29,73 +29,147 @@ $Epi = new Epirent();
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
refreshCheckOutTable();
refreshCheckInTable();
<script type="text/javascript">
// Dynamische Höhe: Wrapper exakt bis Viewport-Unterkante
function sizeScrollContainers() {
$('.tableFixHead').each(function () {
const rect = this.getBoundingClientRect();
const bottomMargin = 16; // kleiner Abstand zum Rand
const available = window.innerHeight - rect.top - bottomMargin;
this.style.maxHeight = (available > 120 ? available : 120) + 'px';
});
}
function refreshCheckOutTable(){
$('#getCheckOutTableHolder').load('sources/getCheckOutTable.php', function(){
setTimeout(refreshCheckOutTable, 5000);
});
}
function refreshCheckInTable(){
$('#getCheckInTableHolder').load('sources/getCheckInTable.php', function(){
setTimeout(refreshCheckInTable, 5000);
});
}
// Lädt tbody via AJAX und erhält die Scrollposition relativ zum unteren Rand
function smartLoad($scroller, $target, url, intervalMs) {
const scroller = $scroller.get(0);
// Abstand vom unteren Rand merken (wichtiger als absolute scrollTop)
const fromBottomBefore = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
$target.load(url, function () {
// Nach dem Ersetzen: dieselbe Distanz zum unteren Rand wiederherstellen
const newScrollTop = scroller.scrollHeight - scroller.clientHeight - fromBottomBefore;
// Begrenzen, falls weniger Inhalt
scroller.scrollTop = Math.max(0, newScrollTop);
// Nächstes Update planen
setTimeout(function () {
smartLoad($scroller, $target, url, intervalMs);
}, intervalMs);
});
}
$(document).ready(function () {
sizeScrollContainers();
$(window).on('resize', sizeScrollContainers);
// Initial laden + Auto-Refresh, jeweils eigener Scroller
smartLoad($('#checkout-scroll'), $('#getCheckOutTableHolder'), 'sources/getCheckOutTable.php', 5000);
smartLoad($('#checkin-scroll'), $('#getCheckInTableHolder'), 'sources/getCheckInTable.php', 5000);
smartLoad($('#aufgaben-scroll'), $('#AufgabenTableHolder'), 'sources/getAufgabenTable.php', 30000);
});
</script>
<style>
/* Scroll-Wrapper je Tabelle */
.tableFixHead {
overflow-y: auto;
/* Höhe wird per JS dynamisch gesetzt, damit genau bis zum Viewport-Ende gescrollt wird */
max-height: 60vh; /* Fallback */
border: 1px solid rgba(255,255,255,.1);
border-radius: .25rem;
}
/* Sticky Header */
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 2; /* über Body-Zellen */
}
/* Saubere Hintergrundfarbe für sticky Header (Bootstrap .table-dark) */
.table-dark thead th {
background-color: #212529; /* gleiche Farbe wie .table-dark header */
}
/* Optional: dünne Trennlinien */
.table-dark tbody tr + tr td {
border-top: 1px solid rgba(255,255,255,.08);
}
</style>
</head>
<body style="background-color: black;">
<div class="container-fluid">
<div class="row">
<div class="col-lg">
<h2 class="text-light">Check-Out</h2>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kunde</th>
<th scope="col">Event</th>
<th scope="col">Dispo-Start</th>
<th scope="col">Dispo-Ende</th>
</tr>
</thead>
<tbody id="getCheckOutTableHolder">
</tbody>
</table>
<div class="col-sm">
<h2 class="text-light">Check-Out</h2>
<div class="tableFixHead" id="checkout-scroll">
<table class="table table-dark mb-0" id="checkout-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kunde</th>
<th scope="col">Event</th>
<th scope="col">Dispo-Start<br><i>VB-Start</i></th>
<?php
if(!HideCheckInTimeOnCheckout){
echo "<th scope='col'>Dispo-Ende<br><i>VB-Ende</i></th>";
}
?>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="getCheckOutTableHolder"></tbody>
</table>
</div>
</div>
<div class="col-sm">
<h2 class="text-light">Check-In</h2>
<div class="tableFixHead" id="checkin-scroll">
<table class="table table-dark mb-0" id="checkin-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kunde</th>
<th scope="col">Event</th>
<?php
if(!HideCheckOutTimeOnCheckin){
echo "<th scope='col'>Dispo-Start<br><i>RP-Start</i></th>";
}
?>
<th scope="col">Dispo-Ende<br><i>RP-Ende</i></th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="getCheckInTableHolder"></tbody>
</table>
</div>
</div>
<div class="col-sm">
<h2 class="text-light">Aufgaben</h2>
<div class="tableFixHead" id="aufgaben-scroll">
<table class="table table-dark mb-0" id="aufgaben-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Bearbeiter</th>
<th scope="col">Aufgabe</th>
<th scope="col">Zieldatum</th>
<th scope="col">Priorität</th>
</tr>
</thead>
<tbody id="AufgabenTableHolder"></tbody>
</table>
</div>
</div>
</div>
<div class="col-lg">
<h2 class="text-light">Check-In</h2>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Kunde</th>
<th scope="col">Event</th>
<th scope="col">Dispo-Start</th>
<th scope="col">Dispo-Ende</th>
</tr>
</thead>
<tbody id="getCheckInTableHolder">
</tbody>
</table>
</div>
</div>