From 0ff0c0d55e8975864770245bd55190adcdd5dc6b Mon Sep 17 00:00:00 2001
From: Leopold Strobl <leopold.strobl@vt-media.de>
Date: Thu, 9 Oct 2025 20:42:19 +0200
Subject: [PATCH] Endlos Scrollen der Listen implementiert (falls notwendig)

---
 PackAufgabenMonitor.php | 213 ++++++++++++++++++++++++++++++++--------
 1 file changed, 170 insertions(+), 43 deletions(-)

diff --git a/PackAufgabenMonitor.php b/PackAufgabenMonitor.php
index 15bb296..2f00a77 100644
--- a/PackAufgabenMonitor.php
+++ b/PackAufgabenMonitor.php
@@ -22,53 +22,181 @@ $Epi = new Epirent();
         <link href="css/sticky-footer.css" rel="stylesheet">
         <script src="https://kit.fontawesome.com/93d71de8bc.js" crossorigin="anonymous"></script>
 
-        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
-        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-        <!--[if lt IE 9]>
-          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-        <![endif]-->
 
-        <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';
-                });
-            }
 
-            // 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;
+<script type="text/javascript">
+  // === Höhe der Scroll-Container bis Viewport-Ende anpassen ===
+  function sizeScrollContainers() {
+    $('.tableFixHead').each(function () {
+      const rect = this.getBoundingClientRect();
+      const bottomMargin = 16;
+      const available = window.innerHeight - rect.top - bottomMargin;
+      this.style.maxHeight = (available > 120 ? available : 120) + 'px';
+    });
+  }
 
-                $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);
+  // === Scroll-/Interaktionsstatus je Scroller ===
+  const scrollState = new WeakMap(); // { userActive:boolean, autoTimer:number|null, loopHeight:number }
 
-                    // Nächstes Update planen
-                    setTimeout(function () {
-                        smartLoad($scroller, $target, url, intervalMs);
-                    }, intervalMs);
-                });
-            }
+  function ensureState(el) {
+    if (!scrollState.get(el)) scrollState.set(el, { userActive: false, autoTimer: null, loopHeight: 0 });
+    return scrollState.get(el);
+  }
+
+  function attachScrollGuards($scroller) {
+    const el = $scroller.get(0);
+    if (!el || el.__guardsBound) return;
+    const state = ensureState(el);
+
+    const markActive = () => {
+      state.userActive = true;
+      clearTimeout(state._quietT);
+      state._quietT = setTimeout(() => { state.userActive = false; }, 800);
+      stopAutoScroll($scroller);
+    };
+
+    $scroller.on('wheel touchstart touchmove keydown mousedown mouseenter', markActive);
+    $scroller.on('mouseleave', () => setTimeout(() => maybeStartAutoScroll($scroller), 600));
+    el.__guardsBound = true;
+  }
+
+  // === Loop aufbauen: nahtloses Doppel nur bei Bedarf ===
+  // Klont den ersten <tbody> als __loopClone ans Tabellenende, wenn Inhalt > Sichtbereich.
+  function buildSeamlessLoop($table, $scroller) {
+    $table.find('tbody.__loopClone').remove();
+
+    const $main = $table.find('tbody').first();
+    const scEl = $scroller.get(0);
+    const st = ensureState(scEl);
+
+    if ($main.length === 0 || $main.children().length === 0) {
+      st.loopHeight = 0;
+      return;
+    }
+
+    const mainH = $main.get(0).offsetHeight;
+    const needScroll = mainH > scEl.clientHeight + 1;
+
+    if (!needScroll) {
+      st.loopHeight = 0;
+      return;
+    }
+
+    const $clone = $main.clone(false, false).addClass('__loopClone').attr('aria-hidden', 'true');
+    $table.append($clone);
+    st.loopHeight = mainH; // Höhe des Original-Inhalts als Loop-Länge
+  }
+
+  // === Auto-Scroll (nahtlos) ===
+  function startAutoScroll($scroller, speedPx = 1, stepMs = 40) {
+    const el = $scroller.get(0);
+    const st = ensureState(el);
+
+    if (st.autoTimer) return;                 // schon aktiv
+    if (st.loopHeight <= 0) return;           // kein Overflow => nicht scrollen
+
+    const tick = () => {
+      if (st.userActive) { stopAutoScroll($scroller); return; }
+      el.scrollTop += speedPx;
+      // Nahtlos: sobald wir das Ende des Original-Blocks überschreiten, ziehen wir loopHeight ab
+      if (el.scrollTop >= st.loopHeight) {
+        el.scrollTop -= st.loopHeight;
+      }
+    };
+
+    st.autoTimer = setInterval(tick, stepMs);
+  }
+
+  function stopAutoScroll($scroller) {
+    const el = $scroller.get(0);
+    const st = ensureState(el);
+    if (st.autoTimer) {
+      clearInterval(st.autoTimer);
+      st.autoTimer = null;
+    }
+  }
+
+  function maybeStartAutoScroll($scroller) {
+    const el = $scroller.get(0);
+    const st = ensureState(el);
+    if (st.userActive) return;
+    if (st.loopHeight > 0) startAutoScroll($scroller, 1, 40);
+    else stopAutoScroll($scroller);
+  }
+
+  // === AJAX-Reload: relative Position innerhalb der Loop erhalten ===
+  // Wir merken die Position modulo loopHeight; nach dem Reload setzen wir proportional um.
+  function smartLoad($scroller, $table, $target, url, intervalMs) {
+    const scEl = $scroller.get(0);
+    const st = ensureState(scEl);
+
+    const oldLoop = st.loopHeight > 0 ? st.loopHeight : Math.max(1, scEl.scrollHeight - scEl.clientHeight);
+    const posInLoop = st.loopHeight > 0 ? (scEl.scrollTop % oldLoop) : scEl.scrollTop;
+    const posRatio  = Math.min(1, posInLoop / oldLoop);
+
+    $target.load(url, function () {
+      // Loop neu bewerten/aufbauen
+      buildSeamlessLoop($table, $scroller);
+
+      if (st.loopHeight > 0) {
+        // Neue relative Position setzen (proportional)
+        const newPos = Math.floor(posRatio * st.loopHeight);
+        if (Math.abs(scEl.scrollTop - newPos) > 1) {
+          // rAF für flüssiges Setzen außerhalb des load()-Layouts
+          requestAnimationFrame(() => { scEl.scrollTop = newPos; });
+        }
+        // Auto-Scroll (wieder) starten
+        stopAutoScroll($scroller);
+        startAutoScroll($scroller, 1, 40);
+      } else {
+        // kein Overflow -> ganz oben und Auto-Scroll aus
+        if (scEl.scrollTop !== 0) requestAnimationFrame(() => { scEl.scrollTop = 0; });
+        stopAutoScroll($scroller);
+      }
+
+      setTimeout(() => smartLoad($scroller, $table, $target, url, intervalMs), intervalMs);
+    });
+  }
+
+  // === Initialisierung ===
+  $(document).ready(function () {
+    sizeScrollContainers();
+    $(window).on('resize', function () {
+      sizeScrollContainers();
+      // Nach Layoutwechsel neu entscheiden
+      ['#checkout', '#checkin', '#aufgaben'].forEach(prefix => {
+        const $scroller = $(`${prefix}-scroll`);
+        const $table    = $(`${prefix}-table`);
+        buildSeamlessLoop($table, $scroller);
+        maybeStartAutoScroll($scroller);
+      });
+    });
+
+    // Guards pro Scroller
+    attachScrollGuards($('#checkout-scroll'));
+    attachScrollGuards($('#checkin-scroll'));
+    attachScrollGuards($('#aufgaben-scroll'));
+
+    // Erstladen je Tabelle: laden -> Loop bauen -> ggf. Auto-Scroll -> zyklisch refreshen
+    function initOne(scrollerSel, tableSel, tbodySel, url, ms) {
+      const $scroller = $(scrollerSel);
+      const $table    = $(tableSel);
+      const $target   = $(tbodySel);
+
+      $target.load(url, function () {
+        buildSeamlessLoop($table, $scroller);
+        maybeStartAutoScroll($scroller);
+        setTimeout(() => smartLoad($scroller, $table, $target, url, ms), ms);
+      });
+    }
+
+    initOne('#checkout-scroll', '#checkout-table', '#getCheckOutTableHolder', 'sources/getCheckOutTable.php', 5000);
+    initOne('#checkin-scroll',  '#checkin-table',  '#getCheckInTableHolder',  'sources/getCheckInTable.php',  5000);
+    initOne('#aufgaben-scroll', '#aufgaben-table', '#AufgabenTableHolder',     'sources/getAufgabenTable.php', 30000);
+  });
+</script>
 
-            $(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 */
@@ -98,7 +226,7 @@ $Epi = new Epirent();
             }
         </style>
     </head>
-    <body style="background-color: black;">
+    <body style="margin-bottom:0px; background-color: black;">
 
         <div class="container-fluid">
             <div class="row">
@@ -218,7 +346,6 @@ if (UsePackingNoteDateForCheckin) {
 
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="vendor/twbs/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 </body>