iterminate/battery-tracker-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination, device detail unassign-all, and batch install with slot limit

Browse Source
This commit is contained in:
iterminate
2026-04-30 18:31:48 -05:00
parent 3b2029d3b8
commit 4ec7d22138
5 changed files with 200 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/device_list.html
+37 -4
View File
@@ -110,11 +110,21 @@
</tbody>
</table>
</div>
<div id="dev-pagination-bar" style="display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem;flex-wrap:wrap;">
<button id="dev-prev-page" class="btn btn-sm btn-secondary" type="button"
onclick="devCurrentPage--; applyDevicePagination();" disabled>&#8592; Prev</button>
<span id="dev-page-info" style="color:var(--text-muted);font-size:0.9rem;"></span>
<button id="dev-next-page" class="btn btn-sm btn-secondary" type="button"
onclick="devCurrentPage++; applyDevicePagination();" disabled>Next &#8594;</button>
</div>
</div>
<a class="btn btn-primary" href="{{ url_for('device_add') }}">+ Add Device</a>
<script>
var DEV_PAGE_SIZE = 25;
var devCurrentPage = 1;
function applyDeviceFilters() {
var typeVal = document.getElementById('filter-type').value;
var batterySizeVal = document.getElementById('filter-battery-size').value;
@@ -122,7 +132,7 @@ function applyDeviceFilters() {
var fillVal = document.getElementById('filter-fill').value;
var textVal = document.getElementById('filter-device-text').value.toLowerCase();
var rows = document.querySelectorAll('tbody tr[data-name]');
var visible = 0;
var filtered = 0;
rows.forEach(function(row) {
var rowType = row.dataset.type || '';
var rowBatterySize = row.dataset.batterySize || '';
@@ -137,13 +147,34 @@ function applyDeviceFilters() {
rowType.toLowerCase().includes(textVal) ||
rowBatterySize.toLowerCase().includes(textVal) ||
rowLocation.toLowerCase().includes(textVal));
row.style.display = show ? '' : 'none';
if (show) visible++;
row.dataset.filteredOut = show ? '' : '1';
if (show) filtered++;
});
var active = typeVal || batterySizeVal || locationVal || fillVal || textVal;
document.getElementById('device-filter-reset').style.display = active ? '' : 'none';
document.getElementById('device-filter-count').textContent =
active ? (visible + ' of ' + rows.length + ' shown') : '';
active ? (filtered + ' of ' + rows.length + ' shown') : '';
devCurrentPage = 1;
applyDevicePagination();
}
function applyDevicePagination() {
var allRows = Array.from(document.querySelectorAll('tbody tr[data-name]'));
var visible = allRows.filter(function(r) { return !r.dataset.filteredOut; });
var totalPages = Math.max(1, Math.ceil(visible.length / DEV_PAGE_SIZE));
if (devCurrentPage > totalPages) devCurrentPage = totalPages;
var start = (devCurrentPage - 1) * DEV_PAGE_SIZE;
allRows.forEach(function(r) { r.style.display = 'none'; });
visible.slice(start, start + DEV_PAGE_SIZE).forEach(function(r) { r.style.display = ''; });
var info = document.getElementById('dev-page-info');
var prev = document.getElementById('dev-prev-page');
var next = document.getElementById('dev-next-page');
if (info) info.textContent = visible.length > DEV_PAGE_SIZE
? 'Page ' + devCurrentPage + ' of ' + totalPages : '';
if (prev) prev.disabled = devCurrentPage <= 1;
if (next) next.disabled = devCurrentPage >= totalPages;
}
function resetDeviceFilters() {
@@ -154,5 +185,7 @@ function resetDeviceFilters() {
document.getElementById('filter-device-text').value = '';
applyDeviceFilters();
}
applyDeviceFilters();
</script>
{% endblock %}