128 lines
4.6 KiB
HTML
128 lines
4.6 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Add Batteries — Battery Tracker{% endblock %}
|
||
|
||
{% block content %}
|
||
<h1>Add Batteries</h1>
|
||
|
||
<div class="card">
|
||
<form method="post" action="{{ url_for('battery_add') }}">
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;">
|
||
|
||
<div class="form-group" style="grid-column:1/-1;">
|
||
<label for="brand-select">Brand <span class="text-danger">*</span></label>
|
||
<select id="brand-select" onchange="metaSelectChanged(this, 'brand')">
|
||
<option value="">— select a brand —</option>
|
||
{% for b in brands|default([]) %}
|
||
<option value="{{ b }}">{{ b }}</option>
|
||
{% endfor %}
|
||
<option value="__new__">➕ New brand…</option>
|
||
</select>
|
||
<input type="text" id="brand" name="brand" value="{{ form_brand|default('') }}"
|
||
placeholder="Type new brand name" required
|
||
style="display:none;margin-top:0.4rem;">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="count">Quantity</label>
|
||
<input type="number" id="count" name="count" value="{{ form_count|default(1) }}" min="1" max="50">
|
||
<small class="text-muted">Labels are auto-generated (e.g. Eneloop 001, Eneloop 002)</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="capacity_mah">Capacity (mAh)</label>
|
||
<input type="number" id="capacity_mah" name="capacity_mah" min="0"
|
||
value="" placeholder="e.g. 2000 — optional">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Size</label>
|
||
<select id="size-select" onchange="metaSelectChanged(this,'size')">
|
||
<option value="">— none —</option>
|
||
{% for opt in ['AA','AAA','C','D','9V','18650','21700','14500','26650','CR2032','CR123A'] %}
|
||
<option value="{{ opt }}">{{ opt }}</option>
|
||
{% endfor %}
|
||
<option value="__new__">Other…</option>
|
||
</select>
|
||
<input type="text" id="size" name="size" value=""
|
||
placeholder="Enter size" style="display:none;margin-top:0.4rem;">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Chemistry</label>
|
||
<select id="chemistry-select" onchange="metaSelectChanged(this,'chemistry')">
|
||
<option value="">— none —</option>
|
||
{% for opt in ['NiMH','Alkaline','Li-ion','LiFePO4','NiCd','Zinc-Carbon','Li-MnO2'] %}
|
||
<option value="{{ opt }}">{{ opt }}</option>
|
||
{% endfor %}
|
||
<option value="__new__">Other…</option>
|
||
</select>
|
||
<input type="text" id="chemistry" name="chemistry" value=""
|
||
placeholder="Enter chemistry" style="display:none;margin-top:0.4rem;">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="purchase_date">Purchase Date</label>
|
||
<input type="date" id="purchase_date" name="purchase_date" value="">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Storage Location</label>
|
||
<select id="storage-select" onchange="metaSelectChanged(this,'storage_location')">
|
||
<option value="">— none —</option>
|
||
{% for loc in storage_locations|default([]) %}
|
||
<option value="{{ loc }}">{{ loc }}</option>
|
||
{% endfor %}
|
||
<option value="__new__">➕ New location…</option>
|
||
</select>
|
||
<input type="text" id="storage_location" name="storage_location" value=""
|
||
placeholder="e.g. Drawer 2, Toolbox, Shelf A"
|
||
style="display:none;margin-top:0.4rem;">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="notes">Notes</label>
|
||
<textarea id="notes" name="notes"
|
||
placeholder="Optional notes applied to all batteries…">{{ form_notes|default('') }}</textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button class="btn btn-primary" type="submit">Add Batteries</button>
|
||
<a class="btn btn-secondary" href="{{ url_for('dashboard') }}">Cancel</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
function metaSelectChanged(sel, inputId) {
|
||
var input = document.getElementById(inputId);
|
||
if (sel.value === '__new__') {
|
||
input.style.display = '';
|
||
input.value = '';
|
||
input.focus();
|
||
} else {
|
||
input.style.display = 'none';
|
||
input.value = sel.value;
|
||
}
|
||
}
|
||
|
||
// Restore brand state on error re-render
|
||
(function () {
|
||
var input = document.getElementById('brand');
|
||
var sel = document.getElementById('brand-select');
|
||
if (!input.value) return;
|
||
for (var i = 0; i < sel.options.length; i++) {
|
||
if (sel.options[i].value === input.value) {
|
||
sel.value = input.value;
|
||
input.style.display = 'none';
|
||
return;
|
||
}
|
||
}
|
||
sel.value = '__new__';
|
||
input.style.display = '';
|
||
}());
|
||
</script>
|
||
{% endblock %}
|