Skip to content

Commit 2a02f78

Browse files
Unreal-DanUnreal-Dan
committed
added pagination
1 parent a074172 commit 2a02f78

7 files changed

Lines changed: 357 additions & 42 deletions

File tree

‎public/css/pages/modes.css‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,17 +94,58 @@
9494
color: #eee;
9595
}
9696

97-
.pagination-wrapper {
98-
display: flex;
99-
justify-content: center;
100-
margin: 30px 0;
97+
.pagination-bar {
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
gap: 16px;
102+
margin: 0px;
103+
flex-wrap: wrap;
104+
}
105+
106+
#pagination-bar-top {
107+
margin-bottom: 30px;
108+
}
109+
110+
#pagination-bar-bottom {
111+
margin-top: 30px;
112+
margin-bottom: 30px;
113+
}
114+
115+
.per-page {
116+
display: flex;
117+
align-items: center;
118+
gap: 6px;
119+
color: #aaa;
120+
font-size: 13px;
121+
}
122+
123+
.per-page select {
124+
background: #222;
125+
color: #ccc;
126+
border: 1px solid #555;
127+
border-radius: 4px;
128+
padding: 6px 10px;
129+
font-size: 13px;
130+
cursor: pointer;
131+
outline: none;
132+
}
133+
134+
.per-page select:hover {
135+
border-color: #1abc9c;
136+
}
137+
138+
.per-page select:focus {
139+
border-color: #1abc9c;
140+
box-shadow: 0 0 4px rgba(26, 188, 156, 0.4);
101141
}
102142

103143
.pagination {
104144
list-style: none;
105145
display: flex;
106146
padding: 0;
107147
gap: 6px;
148+
margin: 0;
108149
}
109150

110151
.pagination li {
@@ -122,6 +163,7 @@
122163
text-decoration: none;
123164
font-weight: bold;
124165
transition: background-color 0.3s ease;
166+
font-size: 13px;
125167
}
126168

127169
.pagination li.active a {

‎public/css/pages/pats.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,92 @@
77
padding: 0 16px;
88
}
99

10+
.pagination-bar {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
gap: 16px;
15+
margin: 0px;
16+
flex-wrap: wrap;
17+
}
18+
19+
#pagination-bar-top {
20+
margin-bottom: 30px;
21+
}
22+
23+
#pagination-bar-bottom {
24+
margin-top: 30px;
25+
margin-bottom: 30px;
26+
}
27+
28+
.per-page {
29+
display: flex;
30+
align-items: center;
31+
gap: 6px;
32+
color: #aaa;
33+
font-size: 13px;
34+
}
35+
36+
.per-page select {
37+
background: #222;
38+
color: #ccc;
39+
border: 1px solid #555;
40+
border-radius: 4px;
41+
padding: 6px 10px;
42+
font-size: 13px;
43+
cursor: pointer;
44+
outline: none;
45+
}
46+
47+
.per-page select:hover {
48+
border-color: #1abc9c;
49+
}
50+
51+
.per-page select:focus {
52+
border-color: #1abc9c;
53+
box-shadow: 0 0 4px rgba(26, 188, 156, 0.4);
54+
}
55+
56+
.pagination {
57+
list-style: none;
58+
display: flex;
59+
padding: 0;
60+
gap: 6px;
61+
margin: 0;
62+
}
63+
64+
.pagination li {
65+
display: inline-block;
66+
}
67+
68+
.pagination a,
69+
.pagination span {
70+
display: block;
71+
padding: 8px 12px;
72+
color: white;
73+
background-color: #222;
74+
border: 1px solid #888;
75+
border-radius: 4px;
76+
text-decoration: none;
77+
font-weight: bold;
78+
transition: background-color 0.3s ease;
79+
font-size: 13px;
80+
}
81+
82+
.pagination li.active a {
83+
background-color: #1abc9c;
84+
color: white;
85+
border-color: #1abc9c;
86+
pointer-events: none;
87+
}
88+
89+
.pagination a:hover {
90+
background-color: #444;
91+
}
92+
93+
.pagination li.disabled span {
94+
opacity: 0.5;
95+
pointer-events: none;
96+
cursor: default;
97+
}
98+

‎public/js/page_modes.js‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import { initLightshow, getLedPositions } from './initLightshow.js';
22

3-
const PAGE_SIZE = 40;
3+
let PAGE_SIZE = parseInt(document.getElementById('per-page-select')?.value) || 40;
44
let currentPage = 1;
55

66
const checkboxes = document.querySelectorAll('input[name="device"]');
77
const modesList = document.getElementById('modes-list');
88
const allTiles = Array.from(document.querySelectorAll('.mode-tile'));
99

10+
function getPerPage() {
11+
const sel = document.getElementById('per-page-select') || document.getElementById('per-page-select-bottom');
12+
return sel ? parseInt(sel.value) : 40;
13+
}
14+
15+
function syncPerPage(value) {
16+
document.getElementById('per-page-select').value = value;
17+
document.getElementById('per-page-select-bottom').value = value;
18+
}
19+
1020
function filterModes() {
1121
const selectedDevices = Array.from(checkboxes).filter(cb => cb.checked).map(cb => cb.value);
1222
allTiles.forEach(tile => {
@@ -16,25 +26,29 @@ function filterModes() {
1626
}
1727

1828
function updatePagination() {
29+
PAGE_SIZE = getPerPage();
1930
const visible = allTiles.filter(t => t._visible);
20-
const pageCount = Math.ceil(visible.length / PAGE_SIZE) || 1;
31+
const effectiveSize = PAGE_SIZE || visible.length;
32+
const pageCount = Math.ceil(visible.length / effectiveSize) || 1;
2133
if (currentPage > pageCount) currentPage = pageCount;
2234

23-
const start = (currentPage - 1) * PAGE_SIZE;
24-
const end = start + PAGE_SIZE;
35+
const start = (currentPage - 1) * effectiveSize;
36+
const end = start + effectiveSize;
2537
const visibleOnPage = visible.slice(start, end);
2638

2739
allTiles.forEach(tile => {
2840
tile.style.display = visibleOnPage.includes(tile) ? '' : 'none';
2941
});
3042

31-
const container = document.getElementById('pagination-container');
3243
if (pageCount <= 1) {
33-
container.innerHTML = '';
44+
['pagination-container', 'pagination-container-top'].forEach(id => {
45+
const c = document.getElementById(id);
46+
if (c) c.innerHTML = '';
47+
});
3448
return;
3549
}
3650

37-
let html = '<div class="pagination-wrapper"><ul class="pagination">';
51+
let html = '<ul class="pagination">';
3852

3953
if (currentPage > 1) {
4054
html += `<li><a href="#" data-page="${currentPage - 1}">&laquo;</a></li>`;
@@ -53,14 +67,18 @@ function updatePagination() {
5367
html += '<li class="disabled"><span>&raquo;</span></li>';
5468
}
5569

56-
html += '</ul></div>';
57-
container.innerHTML = html;
58-
59-
container.querySelectorAll('a[data-page]').forEach(a => {
60-
a.addEventListener('click', e => {
61-
e.preventDefault();
62-
currentPage = parseInt(a.getAttribute('data-page'), 10);
63-
updatePagination();
70+
html += '</ul>';
71+
72+
['pagination-container', 'pagination-container-top'].forEach(id => {
73+
const container = document.getElementById(id);
74+
if (!container) return;
75+
container.innerHTML = html;
76+
container.querySelectorAll('a[data-page]').forEach(a => {
77+
a.addEventListener('click', e => {
78+
e.preventDefault();
79+
currentPage = parseInt(a.getAttribute('data-page'), 10);
80+
updatePagination();
81+
});
6482
});
6583
});
6684
}
@@ -72,6 +90,13 @@ function onFilterChange() {
7290
}
7391

7492
checkboxes.forEach(cb => cb.addEventListener('change', onFilterChange));
93+
['per-page-select', 'per-page-select-bottom'].forEach(id => {
94+
document.getElementById(id)?.addEventListener('change', function() {
95+
syncPerPage(this.value);
96+
currentPage = 1;
97+
updatePagination();
98+
});
99+
});
75100

76101
onFilterChange();
77102

0 commit comments

Comments
 (0)