Skip to content

Commit 34b02bb

Browse files
velocity23velocity23
committed
Add Table Pagination(ish)
1 parent 8a3cac5 commit 34b02bb

File tree

5 files changed

+25
-16
lines changed

5 files changed

+25
-16
lines changed

‎assets/js/tailwind.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,7 @@ async function fetchLiveries(aircraftid) {
401401

402402
function updateDataTable(allEntries, data) {
403403
let current = allEntries;
404+
let actualLength = allEntries.length;
404405
if (data.search) {
405406
current = current.filter((x) => {
406407
return Object.values(x).some(
@@ -412,6 +413,7 @@ function updateDataTable(allEntries, data) {
412413
.includes(data.search.toLowerCase())
413414
);
414415
});
416+
actualLength = current.length;
415417
}
416418
if (data.orderBy) {
417419
current = current.sort((a, b) => {
@@ -447,9 +449,15 @@ function updateDataTable(allEntries, data) {
447449
for (const f of data.filters) {
448450
current = current.filter(f);
449451
}
452+
actualLength = current.length;
453+
}
454+
if (data.limit) {
455+
actualLength = current.length;
456+
current = current.slice(0, data.limit);
450457
}
451458

452459
data.current = [...current];
460+
data.current.actualLength = actualLength;
453461
}
454462

455463
function dataTableOrder(fn, name, tableData) {

‎themes/tailwind/includes/footer.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
</div>
3232
</div>
3333
</div>
34-
<script src="https://unpkg.com/alpinejs@3.0.1/dist/cdn.min.js" defer></script>
34+
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
35+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
3536
</body>
3637

3738
</html>

‎themes/tailwind/views/admin/pireps.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
const defaultColumns = ['date', 'pilotname', 'route', 'status', 'flighttime'];
1313
var columns = localStorage.getItem('table__pireps-admin') ? JSON.parse(localStorage.getItem('table__pireps-admin')) : defaultColumns;
1414
</script>
15-
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.date, orderByName: 'Date', order: 'desc', search: '', filters: [acceptedFilter] }, refresh() { return updateDataTable(allEntries, this.table) }, }">
15+
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.date, orderByName: 'Date', order: 'desc', search: '', filters: [acceptedFilter], limit: 25 }, refresh() { return updateDataTable(allEntries, this.table) }, }">
1616
<div class="flex w-full p-5 dark:bg-gray-600 bg-gray-100 py-7 mb-4 items-center gap-2">
1717
<h2 class="flex-1 text-2xl font-bold lg:text-4xl">
1818
All PIREPs
@@ -21,10 +21,10 @@
2121

2222
<div class="md:px-5 px-2 max-w-full">
2323
<div class="flex gap-2 items-center mb-2">
24-
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; updateDataTable(allEntries, table);" />
24+
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; table.limit = 25; refresh();" />
2525
<div class="text-sm">
2626
<p x-text="`Ordering by ${table.orderByName}`"></p>
27-
<p x-text="`${table.current.length} result${table.current.length == 1 ? '' : 's'}`"></p>
27+
<p x-text="`${table.current.actualLength} result${table.current.actualLength == 1 ? '' : 's'}`"></p>
2828
</div>
2929
</div>
3030
<div class="table-wrapper mb-1">
@@ -50,8 +50,8 @@
5050
<input type="hidden" name="action" value="delpirep" />
5151
<input type="hidden" name="id" x-ref="delpirep-id" value="" />
5252
</form>
53-
<template x-for="pirep in table.current" :key="pirep.id">
54-
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/pireps/${pirep.id}`">
53+
<template x-for="(pirep, index) in table.current" :key="pirep.id">
54+
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/pireps/${pirep.id}`" x-intersect="if ((index + 1) % 25 === 0 && table.limit === index + 1) { table.limit = index + 26; refresh(); }">
5555
<td class="hidden md:table-cell" x-text="new Date(pirep.date).toLocaleDateString()" x-show="columns.includes('date')"></td>
5656
<td class="hidden md:table-cell" x-text="pirep.pilotname" x-show="columns.includes('pilotname')"></td>
5757
<td class="hidden md:table-cell" x-text="pirep.pilotcallsign" x-show="columns.includes('callsign')"></td>

‎themes/tailwind/views/admin/routes.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
const defaultColumns = ['fltnum', 'route', 'duration'];
1212
var columns = localStorage.getItem('table__routes-admin') ? JSON.parse(localStorage.getItem('table__routes-admin')) : defaultColumns;
1313
</script>
14-
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.fltnum, orderByName: 'Flight Number', order: 'asc', search: '' }, refresh() { return updateDataTable(allEntries, this.table) }, }">
14+
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.fltnum, orderByName: 'Flight Number', order: 'asc', search: '', limit: 25 }, refresh() { return updateDataTable(allEntries, this.table) }, }">
1515
<div class="flex w-full p-5 dark:bg-gray-600 bg-gray-100 py-7 mb-4 items-center gap-2">
1616
<h2 class="flex-1 text-2xl font-bold lg:text-4xl">
1717
Manage Routes
@@ -26,10 +26,10 @@
2626

2727
<div class="md:px-5 px-2 max-w-full">
2828
<div class="flex gap-2 items-center mb-2">
29-
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; updateDataTable(allEntries, table);" />
29+
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; table.limit = 25; refresh();" />
3030
<div class="text-sm">
3131
<p x-text="`Ordering by ${table.orderByName}`"></p>
32-
<p x-text="`${table.current.length} result${table.current.length == 1 ? '' : 's'}`"></p>
32+
<p x-text="`${table.current.actualLength} result${table.current.actualLength == 1 ? '' : 's'}`"></p>
3333
</div>
3434
</div>
3535
<div class="table-wrapper mb-2">
@@ -50,8 +50,8 @@
5050
<input type="hidden" name="action" value="deleteroute" />
5151
<input type="hidden" name="delete" value="" x-ref="deleteroute-id" />
5252
</form>
53-
<template x-for="route in table.current" :key="route.id">
54-
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/admin/routes/${route.id}`">
53+
<template x-for="(route, index) in table.current" :key="route.id">
54+
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/admin/routes/${route.id}`" x-intersect="if ((index + 1) % 25 === 0 && table.limit === index + 1) { table.limit = index + 26; refresh(); }">
5555
<td class="hidden md:table-cell" x-text="route.fltnum" x-show="columns.includes('fltnum')"></td>
5656
<td x-text="route.dep" x-show="columns.includes('dep')"></td>
5757
<td x-text="route.arr" x-show="columns.includes('arr')"></td>

‎themes/tailwind/views/admin/users.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
const defaultColumns = ['callsign', 'name', 'email', 'flighttime', 'rank'];
5151
var columns = localStorage.getItem('table__users-admin') ? JSON.parse(localStorage.getItem('table__users-admin')) : defaultColumns;
5252
</script>
53-
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.name, orderByName: 'Name', order: 'asc', search: '', filters: [activeFilter] }, refresh() { return updateDataTable(allEntries, this.table) }, }">
53+
<div id="content" class="text-black dark:text-white" x-data="{ table: { current: [], orderBy: (x) => x.name, orderByName: 'Name', order: 'asc', search: '', limit: 25, filters: [activeFilter] }, refresh() { return updateDataTable(allEntries, this.table) }, }">
5454
<div class="flex w-full p-5 dark:bg-gray-600 bg-gray-100 py-7 mb-4 items-center gap-2">
5555
<h2 class="flex-1 text-2xl font-bold lg:text-4xl">
5656
Manage Users
@@ -59,10 +59,10 @@
5959

6060
<div class="md:px-5 px-2 max-w-full">
6161
<div class="flex gap-2 items-center mb-2">
62-
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; updateDataTable(allEntries, table);" />
62+
<input type="text" :value="table.search" class="form-control flex-1" placeholder="Search" @input="table.search = $event.target.value; table.limit = 25; refresh();" />
6363
<div class="text-sm">
6464
<p x-text="`Ordering by ${table.orderByName}`"></p>
65-
<p x-text="`${table.current.length} result${table.current.length == 1 ? '' : 's'}`"></p>
65+
<p x-text="`${table.current.actualLength} result${table.current.actualLength == 1 ? '' : 's'}`"></p>
6666
</div>
6767
</div>
6868
<div class="table-wrapper mb-1">
@@ -89,8 +89,8 @@
8989
<input type="hidden" name="permanent" value="1" />
9090
<input type="hidden" name="id" x-ref="deluser-id" value="" />
9191
</form>
92-
<template x-for="user in table.current" :key="user.id">
93-
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/admin/users/${user.id}`">
92+
<template x-for="(user, index) in table.current" :key="user.id">
93+
<tr class="hover:bg-black/20 cursor-pointer" @click="window.location.href = `/admin/users/${user.id}`" x-intersect="if ((index + 1) % 25 === 0 && table.limit === index + 1) { table.limit = index + 26; refresh(); }">
9494
<td class="hidden md:table-cell" x-text="user.callsign" x-show="columns.includes('callsign')"></td>
9595
<td x-text="user.name" x-show="columns.includes('name')"></td>
9696
<td x-data="{ ifc: user.ifc.split('/')[4] }" x-show="columns.includes('ifc')">

0 commit comments

Comments
 (0)