From 5e87d5e898132ce1659d302325b9c82169914e6d Mon Sep 17 00:00:00 2001
From: Darek <idarekj@gmail.com>
Date: Sun, 12 Apr 2026 15:51:28 -0500
Subject: [PATCH] Add column picker to dashboard with localStorage persistence

Optional columns: Chemistry, Capacity, Storage Location, Purchase Date,
Charge Cycles. Selection persists across page loads via localStorage.
---
 templates/dashboard.html | 64 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 1 deletion(-)

diff --git a/templates/dashboard.html b/templates/dashboard.html
index beb10de..e434bf2 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -29,6 +29,20 @@
 </div>
 
 <div class="card">
+  <div style="display:flex;justify-content:flex-end;margin-bottom:0.5rem;">
+    <div style="position:relative;">
+      <button type="button" id="col-picker-btn" class="btn btn-sm btn-secondary">Columns ▾</button>
+      <div id="col-picker-panel" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:0.75rem 1rem;z-index:100;box-shadow:0 4px 8px rgba(0,0,0,0.1);min-width:180px;">
+        <div style="font-weight:600;font-size:0.8rem;color:#64748b;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em;">Show columns</div>
+        <label style="display:block;cursor:pointer;margin-bottom:0.3rem;font-size:0.875rem;"><input type="checkbox" data-col="chemistry" onchange="toggleCol(this)" style="margin-right:0.4rem;"> Chemistry</label>
+        <label style="display:block;cursor:pointer;margin-bottom:0.3rem;font-size:0.875rem;"><input type="checkbox" data-col="capacity" onchange="toggleCol(this)" style="margin-right:0.4rem;"> Capacity</label>
+        <label style="display:block;cursor:pointer;margin-bottom:0.3rem;font-size:0.875rem;"><input type="checkbox" data-col="storage" onchange="toggleCol(this)" style="margin-right:0.4rem;"> Storage Location</label>
+        <label style="display:block;cursor:pointer;margin-bottom:0.3rem;font-size:0.875rem;"><input type="checkbox" data-col="purchase" onchange="toggleCol(this)" style="margin-right:0.4rem;"> Purchase Date</label>
+        <label style="display:block;cursor:pointer;font-size:0.875rem;"><input type="checkbox" data-col="cycles" onchange="toggleCol(this)" style="margin-right:0.4rem;"> Charge Cycles</label>
+      </div>
+    </div>
+  </div>
+
   <form method="post" action="{{ url_for('battery_bulk_action') }}" id="bulk-form">
 
     <div id="bulk-toolbar" style="display:none;margin-bottom:0.75rem;padding:0.6rem 0.75rem;background:#f1f5f9;border-radius:6px;display:none;align-items:center;gap:0.5rem;flex-wrap:wrap;">
@@ -78,6 +92,11 @@
             <th>Label</th>
             <th>Brand</th>
             <th>Size</th>
+            <th class="col-chemistry" style="display:none;">Chemistry</th>
+            <th class="col-capacity" style="display:none;">Capacity</th>
+            <th class="col-storage" style="display:none;">Storage</th>
+            <th class="col-purchase" style="display:none;">Purchase Date</th>
+            <th class="col-cycles" style="display:none;">Cycles</th>
             <th>Status</th>
             <th>Assigned To</th>
             <th>Actions</th>
@@ -90,6 +109,16 @@
             <td><a href="{{ url_for('battery_detail', battery_id=b.id) }}"><strong>{{ b.label }}</strong></a></td>
             <td>{{ b.brand }}</td>
             <td>{{ b.size or '—' }}</td>
+            <td class="col-chemistry" style="display:none;">{{ b.chemistry or '—' }}</td>
+            <td class="col-capacity" style="display:none;">
+              {% if b.capacity_mah %}
+                {% if b.tested_capacity_mah %}{{ b.tested_capacity_mah }}/{{ b.capacity_mah }} mAh
+                {% else %}{{ b.capacity_mah }} mAh{% endif %}
+              {% else %}—{% endif %}
+            </td>
+            <td class="col-storage" style="display:none;">{{ b.storage_location or '—' }}</td>
+            <td class="col-purchase" style="display:none;">{{ b.purchase_date or '—' }}</td>
+            <td class="col-cycles" style="display:none;">{{ b.charge_cycles or '—' }}</td>
             <td>
               <span class="badge badge-{{ b.status }}">{{ b.status|capitalize }}</span>
             </td>
@@ -122,7 +151,7 @@
             </td>
           </tr>
           {% else %}
-          <tr><td colspan="7" class="text-muted" style="text-align:center;padding:1rem;">No batteries found. <a href="{{ url_for('battery_add') }}">Add some.</a></td></tr>
+          <tr><td colspan="12" class="text-muted" style="text-align:center;padding:1rem;">No batteries found. <a href="{{ url_for('battery_add') }}">Add some.</a></td></tr>
           {% endfor %}
         </tbody>
       </table>
@@ -165,6 +194,39 @@ function updateBulkField(sel) {
 // initialise disabled state on page load
 document.getElementById('bulk-field-value-brand').disabled = true;
 
+// Column picker
+var COL_KEY = 'battery_cols';
+var ALL_COLS = ['chemistry','capacity','storage','purchase','cycles'];
+
+function toggleCol(cb) {
+  var col = cb.dataset.col;
+  document.querySelectorAll('.col-' + col).forEach(function(el) {
+    el.style.display = cb.checked ? '' : 'none';
+  });
+  var prefs = JSON.parse(localStorage.getItem(COL_KEY) || '{}');
+  prefs[col] = cb.checked;
+  localStorage.setItem(COL_KEY, JSON.stringify(prefs));
+}
+
+(function loadColPrefs() {
+  var prefs = JSON.parse(localStorage.getItem(COL_KEY) || '{}');
+  ALL_COLS.forEach(function(col) {
+    if (prefs[col]) {
+      var cb = document.querySelector('[data-col="' + col + '"]');
+      if (cb) { cb.checked = true; toggleCol(cb); }
+    }
+  });
+}());
+
+document.getElementById('col-picker-btn').addEventListener('click', function(e) {
+  var panel = document.getElementById('col-picker-panel');
+  panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
+  e.stopPropagation();
+});
+document.addEventListener('click', function() {
+  document.getElementById('col-picker-panel').style.display = 'none';
+});
+
 function bulkStorageChanged(sel) {
   var text = document.getElementById('bulk-storage-text');
   var hidden = document.getElementById('bulk-field-value-storage');