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

templates/device_add.html

@@ -18,6 +18,16 @@
              placeholder="e.g. Game Controller" required>
     </div>
 
+    {% if not prefill_parent %}
+    <div class="form-group">
+      <label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;cursor:pointer;">
+        <input type="checkbox" id="has-subcomponents" onchange="toggleSubcomponents(this)">
+        This device has sub-components (batteries tracked per sub-component, not directly)
+      </label>
+    </div>
+    {% endif %}
+
+    <div id="battery-fields">
     <div class="form-group">
       <label for="battery_slots">Battery Slots <span class="text-danger">*</span></label>
       <input type="number" id="battery_slots" name="battery_slots"
@@ -44,6 +54,7 @@
              placeholder="e.g. CR123A"
              style="display:{% if _cur_size and _cur_size not in _preset_sizes %}''{% else %}none{% endif %};margin-top:0.4rem;">
     </div>
+    </div><!-- #battery-fields -->
 
     <div class="form-group">
       <label>Type</label>
@@ -68,14 +79,18 @@
 
     <div class="form-group">
       <label>Location</label>
+      {% set _cur_loc = form_location|default('') %}
       <select id="location-select" onchange="metaSelectChanged(this,'location')">
         <option value="">— none —</option>
         {% for loc in device_locations|default([]) %}
-        <option value="{{ loc }}">{{ loc }}</option>
+        <option value="{{ loc }}" {% if _cur_loc == loc %}selected{% endif %}>{{ loc }}</option>
         {% endfor %}
+        {% if _cur_loc and _cur_loc not in device_locations|default([]) %}
+        <option value="{{ _cur_loc }}" selected>{{ _cur_loc }}</option>
+        {% endif %}
         <option value="__new__">➕ New location…</option>
       </select>
-      <input type="text" id="location" name="location" value=""
+      <input type="text" id="location" name="location" value="{{ _cur_loc }}"
              placeholder="e.g. Living Room, Bedroom"
              style="display:none;margin-top:0.4rem;">
     </div>
@@ -93,6 +108,26 @@
 </div>
 
 <script>
+function toggleSubcomponents(cb) {
+  var fields = document.getElementById('battery-fields');
+  var slots = document.getElementById('battery_slots');
+  var size = document.getElementById('battery_size');
+  if (cb.checked) {
+    fields.style.display = 'none';
+    slots.value = '0';
+    slots.removeAttribute('required');
+    slots.removeAttribute('min');
+    size.value = '';
+    size.removeAttribute('required');
+  } else {
+    fields.style.display = '';
+    slots.value = '1';
+    slots.setAttribute('required', '');
+    slots.setAttribute('min', '1');
+    size.setAttribute('required', '');
+  }
+}
+
 function metaSelectChanged(sel, inputId) {
   var input = document.getElementById(inputId);
   if (sel.value === '__new__') {

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