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

templates/dashboard.html

@@ -300,6 +300,13 @@
         </tbody>
       </table>
     </div>
+    <div id="pagination-bar" style="display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem;flex-wrap:wrap;">
+      <button id="prev-page" class="btn btn-sm btn-secondary" type="button"
+              onclick="currentPage--; applyPagination();" disabled>&#8592; Prev</button>
+      <span id="page-info" style="color:var(--text-muted);font-size:0.9rem;"></span>
+      <button id="next-page" class="btn btn-sm btn-secondary" type="button"
+              onclick="currentPage++; applyPagination();" disabled>Next &#8594;</button>
+    </div>
 
   </form>
 </div>
@@ -309,6 +316,8 @@ var selectAll = document.getElementById('select-all');
 var toolbar = document.getElementById('bulk-toolbar');
 var countEl = document.getElementById('selected-count');
 var selectAllBtn = document.getElementById('select-all-btn');
+var PAGE_SIZE = 50;
+var currentPage = 1;
 
 function visibleCbs() {
   return Array.prototype.filter.call(
@@ -358,7 +367,7 @@ function applyFilters() {
   document.getElementById('filter-reset').style.display = anyActive ? '' : 'none';
 
   var rows = document.querySelectorAll('tbody tr[data-brand]');
-  var visible = 0;
+  var filtered = 0;
   rows.forEach(function(row) {
     var show = true;
     if (status === 'active') {
@@ -370,12 +379,34 @@ function applyFilters() {
     if (size    && row.dataset.size    !== size)     show = false;
     if (storage && row.dataset.storage !== storage)  show = false;
     if (text    && row.textContent.toLowerCase().indexOf(text) === -1) show = false;
-    row.style.display = show ? '' : 'none';
-    if (show) visible++;
+    row.dataset.filteredOut = show ? '' : '1';
+    if (show) filtered++;
   });
 
   var fc = document.getElementById('filter-count');
-  fc.textContent = anyActive ? (visible + ' of ' + rows.length + ' shown') : '';
+  fc.textContent = anyActive ? (filtered + ' of ' + rows.length + ' shown') : '';
+  currentPage = 1;
+  applyPagination();
+}
+
+function applyPagination() {
+  var allRows = Array.from(document.querySelectorAll('tbody tr[data-brand]'));
+  var visible = allRows.filter(function(r) { return !r.dataset.filteredOut; });
+  var totalPages = Math.max(1, Math.ceil(visible.length / PAGE_SIZE));
+  if (currentPage > totalPages) currentPage = totalPages;
+  var start = (currentPage - 1) * PAGE_SIZE;
+
+  allRows.forEach(function(r) { r.style.display = 'none'; });
+  visible.slice(start, start + PAGE_SIZE).forEach(function(r) { r.style.display = ''; });
+
+  var info = document.getElementById('page-info');
+  var prev = document.getElementById('prev-page');
+  var next = document.getElementById('next-page');
+  if (info) info.textContent = visible.length > PAGE_SIZE
+    ? 'Page ' + currentPage + ' of ' + totalPages : '';
+  if (prev) prev.disabled = currentPage <= 1;
+  if (next) next.disabled = currentPage >= totalPages;
+
   updateToolbar();
 }
 
@@ -514,6 +545,7 @@ document.querySelectorAll('th[data-sortable]').forEach(function(th) {
       _captureOrder();
       var tbody = document.querySelector('tbody');
       _origOrder.forEach(function(r) { tbody.appendChild(r); });
+      applyPagination();
       return;
     }
     ind.textContent = _sortDir === 1 ? ' \u25b2' : ' \u25bc';
@@ -534,6 +566,7 @@ document.querySelectorAll('th[data-sortable]').forEach(function(th) {
       return av.localeCompare(bv) * _sortDir;
     });
     rows.forEach(function(r) { tbody.appendChild(r); });
+    applyPagination();
   });
 });
 

templates/device_detail.html

@@ -197,27 +197,73 @@ function addInstallRow() {
   {% else %}
     <p class="text-muted">No batteries installed.</p>
   {% endif %}
+  {% if installed %}
+  <form class="inline" method="post"
+        action="{{ url_for('device_unassign_all', device_id=device.id) }}"
+        data-confirm="Unassign all batteries from {{ device.name }}?"
+        data-confirm-ok="Unassign" data-confirm-class="btn-warning"
+        style="margin-top:0.5rem;">
+    <input type="hidden" name="next" value="{{ url_for('device_detail', device_id=device.id) }}#installed">
+    <button class="btn btn-sm btn-warning" type="submit">Unassign All</button>
+  </form>
+  {% endif %}
 </div>
 
 <div class="card">
-  <h2>Install Specific Battery{% if device.battery_size %} <small class="text-muted" style="font-weight:normal;font-size:0.8rem;">({{ device.battery_size }} only)</small>{% endif %}</h2>
+  <h2>Install Specific Batteries{% if device.battery_size %} <small class="text-muted" style="font-weight:normal;font-size:0.8rem;">({{ device.battery_size }} only)</small>{% endif %}</h2>
   {% if available_batteries %}
-  <form method="post" action="{{ url_for('device_install_one', device_id=device.id) }}">
-    <div class="form-group">
-      <label for="battery_id">Battery</label>
-      <select name="battery_id" id="battery_id">
-        <option value="">— select —</option>
-        {% for b in available_batteries %}
-        <option value="{{ b.id }}">{{ b.label }} — {{ b.brand }}
-          {%- if b.size %} {{ b.size }}{% endif %}
-          {%- if b.notes %} ({{ b.notes }}){% endif %}</option>
-        {% endfor %}
-      </select>
+  <form method="post" action="{{ url_for('device_install_batch', device_id=device.id) }}">
+    <div style="margin-bottom:0.5rem;">
+      <label style="font-size:0.85rem;cursor:pointer;">
+        <input type="checkbox" id="select-all-avail" onchange="toggleAllAvail(this)"> Select all
+      </label>
     </div>
-    <button class="btn btn-primary" type="submit">Install</button>
+    <div style="max-height:200px;overflow-y:auto;border:1px solid #cbd5e1;border-radius:4px;padding:0.4rem 0.6rem;">
+      {% for b in available_batteries %}
+      <div>
+        <label style="font-size:0.9rem;cursor:pointer;">
+          <input type="checkbox" name="battery_ids" value="{{ b.id }}">
+          {{ b.label }} — {{ b.brand }}{% if b.battery_percentage is not none %} ({{ b.battery_percentage }}%){% endif %}
+        </label>
+      </div>
+      {% endfor %}
+    </div>
+    <button class="btn btn-sm btn-primary" type="submit" style="margin-top:0.5rem;">Install Selected</button>
   </form>
+  <script>
+  var FREE_SLOTS = {{ device.battery_slots - device.installed_count() }};
+  var checkedQueue = [];
+
+  document.querySelectorAll('input[name="battery_ids"]').forEach(function(cb) {
+    cb.addEventListener('change', function() {
+      if (cb.checked) {
+        checkedQueue.push(cb);
+        if (checkedQueue.length > FREE_SLOTS) {
+          var oldest = checkedQueue.shift();
+          oldest.checked = false;
+        }
+      } else {
+        checkedQueue = checkedQueue.filter(function(c) { return c !== cb; });
+      }
+      document.getElementById('select-all-avail').checked = false;
+    });
+  });
+
+  function toggleAllAvail(masterCb) {
+    var all = Array.from(document.querySelectorAll('input[name="battery_ids"]'));
+    if (masterCb.checked) {
+      checkedQueue = [];
+      all.forEach(function(c) { c.checked = false; });
+      all.slice(0, FREE_SLOTS).forEach(function(c) { c.checked = true; checkedQueue.push(c); });
+      if (all.length > FREE_SLOTS) masterCb.checked = false;
+    } else {
+      all.forEach(function(c) { c.checked = false; });
+      checkedQueue = [];
+    }
+  }
+  </script>
   {% else %}
-    <p class="text-muted">No available batteries.</p>
+    <p class="text-muted">No compatible batteries available.</p>
   {% endif %}
 </div>
 

templates/device_list.html

@@ -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 %}