Enforce parent device hierarchy: slots/size unset, battery summary, sub-component toggle

templates/device_detail.html

@@ -37,7 +37,7 @@
   <table style="width:auto;border:none;">
     <tr>
       <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">Slots</td>
-      <td style="border:none;">{{ device.installed_count() }} / {{ device.battery_slots }} used</td>
+      <td style="border:none;">{% if device.has_children() %}{% set ns = namespace(inst=0, slots=0) %}{% for c in device.children %}{% set ns.inst = ns.inst + c.installed_count() %}{% set ns.slots = ns.slots + c.battery_slots %}{% endfor %}{{ ns.inst }} / {{ ns.slots }} (across sub-components){% else %}{{ device.installed_count() }} / {{ device.battery_slots }} used{% endif %}</td>
     </tr>
     {% if device.device_type %}
     <tr>
@@ -115,6 +115,39 @@
 </div>
 {% endif %}
 
+{% if device.has_children() %}
+<div class="card">
+  <h2>Batteries in Sub-components</h2>
+  {% for child in device.children %}
+  {% set child_installed = child.batteries | selectattr('status', 'eq', 'installed') | list %}
+  <h3 style="margin:0.75rem 0 0.4rem;font-size:1rem;">
+    <a href="{{ url_for('device_detail', device_id=child.id) }}">{{ child.name }}</a>
+    <small class="text-muted" style="font-weight:normal;">&nbsp;{{ child_installed|length }}/{{ child.battery_slots }}</small>
+  </h3>
+  {% if child_installed %}
+  <div class="table-wrap">
+    <table class="responsive-table">
+      <thead><tr><th>Label</th><th>Brand</th>{% if ha_enabled %}<th>Bat %</th>{% endif %}<th>Last Charged</th></tr></thead>
+      <tbody>
+        {% for b in child_installed %}
+        <tr>
+          <td data-label="Label"><a href="{{ url_for('battery_detail', battery_id=b.id) }}">{{ b.label }}</a></td>
+          <td data-label="Brand">{{ b.brand }}</td>
+          {% if ha_enabled %}<td data-label="Bat %">{% if b.battery_percentage is not none %}{{ b.battery_percentage }}%{% else %}—{% endif %}</td>{% endif %}
+          <td data-label="Last Charged" class="text-muted">{{ b.charge_logs[-1].charged_date if b.charge_logs else '—' }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  {% else %}
+  <p class="text-muted" style="margin:0 0 0.5rem;">No batteries installed.</p>
+  {% endif %}
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if not device.has_children() %}
 <div class="card">
   <h2>Install Batteries</h2>
   {% set free_slots = device.battery_slots - device.installed_count() %}
@@ -191,7 +224,9 @@ function addInstallRow() {
 }
 </script>
 </div>
+{% endif %}
 
+{% if not device.has_children() %}
 <div class="card" id="installed">
   <h2>Installed Batteries</h2>
   {% set installed = device.batteries | selectattr('status', 'eq', 'installed') | list %}
@@ -326,6 +361,7 @@ function addInstallRow() {
     <p class="text-muted">No compatible batteries available.</p>
   {% endif %}
 </div>
+{% endif %}
 
 <div class="card">
   <h2>Logbook</h2>
@@ -365,10 +401,12 @@ function addInstallRow() {
       <label for="edit-name">Name</label>
       <input type="text" id="edit-name" name="name" value="{{ device.name }}" required>
     </div>
+    {% if not device.has_children() %}
     <div class="form-group">
       <label for="edit-slots">Battery Slots</label>
       <input type="number" id="edit-slots" name="battery_slots" value="{{ device.battery_slots }}" min="1" required>
     </div>
+    {% endif %}
     <div class="form-group">
       <label>Type</label>
       {% set _preset_types = ['Remote Control','Game Controller','Flashlight','Lock','Sensor','Toy','Clock','Smoke Detector'] %}
@@ -389,6 +427,7 @@ function addInstallRow() {
              placeholder="Enter device type"
              style="display:{% if device.device_type and device.device_type not in _preset_types %}''{% else %}none{% endif %};margin-top:0.4rem;">
     </div>
+    {% if not device.has_children() %}
     <div class="form-group">
       <label>Battery Size</label>
       {% set _preset_sizes = ['AA','AAA','C','D','9V','CR2032','CR2025','CR2016','18650','14500','16340','26650','LR44/AG13'] %}
@@ -412,6 +451,7 @@ function addInstallRow() {
              placeholder="e.g. CR123A"
              style="display:{% if device.battery_size and device.battery_size not in _preset_sizes %}''{% else %}none{% endif %};margin-top:0.4rem;">
     </div>
+    {% endif %}
     <div class="form-group">
       <label>Location</label>
       <select id="edit-location-select" onchange="editLocationSelectChanged(this)">
@@ -440,7 +480,7 @@ function addInstallRow() {
       <select id="edit-parent" name="parent_id">
         <option value="">— none (top-level device) —</option>
         {% for d in device_list_all|default([]) %}
-          {% if d.id != device.id and not d.is_subcomponent() %}
+          {% if d.id != device.id and not d.is_subcomponent() and d.battery_slots == 0 and d.battery_size is none %}
           <option value="{{ d.id }}" {% if device.parent_id == d.id %}selected{% endif %}>{{ d.name }}</option>
           {% endif %}
         {% endfor %}