From d1f46afe3df570fbd1f57c59885fa1e7a1935fc9 Mon Sep 17 00:00:00 2001
From: Josha von Gizycki <josha.von.gizycki@triology.de>
Date: Tue, 9 Apr 2019 11:03:09 +0200
Subject: [PATCH] current page

---
 resources/app/stylesheets/app.less |  6 ++++-
 resources/public/js/scripts.js     | 38 +++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/resources/app/stylesheets/app.less b/resources/app/stylesheets/app.less
index 0d481e3..f67e74e 100644
--- a/resources/app/stylesheets/app.less
+++ b/resources/app/stylesheets/app.less
@@ -248,7 +248,11 @@ table {
 }
 
 .tbl-toolbar {
-    text-align: right;
+    display: flex;
+
+    .curr-page {
+        flex-grow: 99;
+    }
 
     .prev::before {
         content: "<< ";
diff --git a/resources/public/js/scripts.js b/resources/public/js/scripts.js
index aaab2ec..e87bb86 100644
--- a/resources/public/js/scripts.js
+++ b/resources/public/js/scripts.js
@@ -46,9 +46,9 @@ document.addEventListener('DOMContentLoaded', function () {
         const pageSize = 25
 
         const range = (x, y) =>
-            x > y ? [] : [x, ...range(x + 1, y)];
+              x > y ? [] : [x, ...range(x + 1, y)];
         const visibleRows = page =>
-            range(page * pageSize, (page + 1) * pageSize - 1)
+              range(page * pageSize, (page + 1) * pageSize - 1)
 
         function toggleVisibilities(tbl, ixsToShow) {
             const rows = [...tbl.tBodies[0].rows]
@@ -57,15 +57,28 @@ document.addEventListener('DOMContentLoaded', function () {
             })
         }
 
+        function setCurrPage(tbl, currPageIx) {
+            const elems = document.querySelectorAll('.tbl-toolbar .curr-page')
+            const rows = tbl.tBodies[0].rows.length
+            const pages = Math.ceil(rows / pageSize)
+
+            elems.forEach(function(elem) {
+                elem.innerText = (currPageIx + 1) + ' / ' + pages + ' (' + rows + ' rows)'
+            })
+        }
+
         function prevButton(tbl) {
             const btn = document.createElement('button')
             btn.classList.add('prev')
             btn.innerText = 'Prev'
             btn.addEventListener('click', function () {
                 const page = tbl.getAttribute('data-page') * 1
+
                 if (page > 0) {
-                    tbl.setAttribute('data-page', page - 1)
-                    toggleVisibilities(tbl, visibleRows(page - 1))
+                    const newPageIx = page - 1
+                    tbl.setAttribute('data-page', newPageIx)
+                    toggleVisibilities(tbl, visibleRows(newPageIx))
+                    setCurrPage(tbl, newPageIx)
                 }
             })
             return btn;
@@ -78,22 +91,34 @@ document.addEventListener('DOMContentLoaded', function () {
             btn.addEventListener('click', function () {
                 const page = tbl.getAttribute('data-page') * 1
                 const lastRowNum = (page + 1) * pageSize
+
                 if (lastRowNum < tbl.tBodies[0].rows.length) {
-                    tbl.setAttribute('data-page', page + 1)
-                    toggleVisibilities(tbl, visibleRows(page + 1))
+                    const newPageIx = page + 1
+                    tbl.setAttribute('data-page', newPageIx)
+                    toggleVisibilities(tbl, visibleRows(newPageIx))
+                    setCurrPage(tbl, newPageIx)
                 }
             })
             return btn
         }
 
+        function currPage() {
+            const span = document.createElement('span')
+            span.classList.add('curr-page')
+            span.innerText = 1
+            return span
+        }
+
         function addToolbar(tbl) {
             const toolbarTop = document.createElement('section')
             toolbarTop.classList.add('tbl-toolbar')
+            toolbarTop.insertAdjacentElement('beforeend', currPage())
             toolbarTop.insertAdjacentElement('beforeend', prevButton(tbl))
             toolbarTop.insertAdjacentElement('beforeend', nextButton(tbl))
 
             const toolbarBottom = document.createElement('section')
             toolbarBottom.classList.add('tbl-toolbar')
+            toolbarBottom.insertAdjacentElement('beforeend', currPage())
             toolbarBottom.insertAdjacentElement('beforeend', prevButton(tbl))
             toolbarBottom.insertAdjacentElement('beforeend', nextButton(tbl))
 
@@ -105,6 +130,7 @@ document.addEventListener('DOMContentLoaded', function () {
             toggleVisibilities(tbl, visibleRows(0))
             tbl.setAttribute('data-page', 0)
             addToolbar(tbl)
+            setCurrPage(tbl, 0)
         })
     }