207 lines
9.8 KiB
HTML
207 lines
9.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Devices — Battery Tracker{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>Devices</h1>
|
|
|
|
<div class="card">
|
|
<div id="device-filter-bar" style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:0.75rem;">
|
|
<select id="filter-type" onchange="applyDeviceFilters()"
|
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">
|
|
<option value="">All Types</option>
|
|
{% for t in device_types|default([]) %}
|
|
<option value="{{ t }}">{{ t }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="filter-location" onchange="applyDeviceFilters()"
|
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">
|
|
<option value="">All Locations</option>
|
|
{% for loc in device_locations|default([]) %}
|
|
<option value="{{ loc }}">{{ loc }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="filter-battery-size" onchange="applyDeviceFilters()"
|
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">
|
|
<option value="">Any Size</option>
|
|
{% for sz in device_battery_sizes|default([]) %}
|
|
<option value="{{ sz }}">{{ sz }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="filter-fill" onchange="applyDeviceFilters()"
|
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">
|
|
<option value="">Any Fill</option>
|
|
<option value="empty">Empty</option>
|
|
<option value="partial">Partial</option>
|
|
<option value="full">Full</option>
|
|
</select>
|
|
<input type="text" id="filter-device-text" oninput="applyDeviceFilters()" placeholder="Search…"
|
|
style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;width:140px;">
|
|
<button type="button" onclick="resetDeviceFilters()" class="btn btn-sm btn-secondary"
|
|
id="device-filter-reset" style="display:none;">✕ Reset</button>
|
|
<span id="device-filter-count" style="font-size:0.8rem;color:#64748b;"></span>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<table class="responsive-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Size</th>
|
|
<th>Location</th>
|
|
<th>Slots</th>
|
|
<th>Installed</th>
|
|
<th>Brands</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for d in devices %}
|
|
{% set installed = d.installed_count() %}
|
|
{% if installed == 0 %}{% set fill_state = 'empty' %}
|
|
{% elif installed >= d.battery_slots %}{% set fill_state = 'full' %}
|
|
{% else %}{% set fill_state = 'partial' %}{% endif %}
|
|
<tr data-type="{{ d.device_type or '' }}"
|
|
data-battery-size="{{ d.battery_size or '' }}"
|
|
data-location="{{ d.location or '' }}"
|
|
data-fill="{{ fill_state }}"
|
|
data-name="{{ d.name|lower }}">
|
|
<td data-label="Device">
|
|
<a href="{{ url_for('device_detail', device_id=d.id) }}"><strong>{{ d.name }}</strong></a>
|
|
{% if d.parent %}
|
|
<br><small class="text-muted">↳ <a href="{{ url_for('device_detail', device_id=d.parent.id) }}">{{ d.parent.name }}</a></small>
|
|
{% elif d.has_children() %}
|
|
<br><small class="text-muted">{{ d.children|length }} sub-component{{ 's' if d.children|length != 1 }}</small>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Type">{{ d.device_type or '—' }}</td>
|
|
<td data-label="Size">{{ d.battery_size or '—' }}</td>
|
|
<td data-label="Location">{{ d.location or '—' }}</td>
|
|
<td data-label="Slots">{{ d.battery_slots }}</td>
|
|
<td data-label="Installed">
|
|
{{ installed }} / {{ d.battery_slots }}
|
|
{% if installed >= d.battery_slots %}
|
|
<span class="badge badge-retired">Full</span>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Brands">
|
|
{% set brands = d.installed_brands() %}
|
|
{% if brands %}
|
|
{{ brands|join(', ') }}
|
|
{% if d.has_mixed_brands() %}
|
|
<span class="badge badge-warning">⚠ mixed</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td data-label="Actions" style="white-space:nowrap;">
|
|
<a class="btn btn-sm btn-secondary" href="{{ url_for('device_detail', device_id=d.id) }}">View</a>
|
|
{% if installed > 0 %}
|
|
<form class="inline" method="post" action="{{ url_for('device_unassign_all', device_id=d.id) }}"
|
|
data-confirm="Unassign all batteries from {{ d.name }}?"
|
|
data-confirm-ok="Unassign" data-confirm-class="btn-warning">
|
|
<button class="btn btn-sm btn-warning" type="submit">Unassign All</button>
|
|
</form>
|
|
{% endif %}
|
|
<form class="inline" method="post" action="{{ url_for('device_delete', device_id=d.id) }}"
|
|
data-confirm="Delete {{ d.name }}? All installed batteries will be unassigned."
|
|
data-confirm-ok="Delete" data-confirm-class="btn-danger">
|
|
<button class="btn btn-sm btn-danger" type="submit">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="8" class="text-muted" style="text-align:center;padding:1rem;">No devices yet. <a href="{{ url_for('device_add') }}">Add one.</a></td></tr>
|
|
{% endfor %}
|
|
</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>← 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 →</button>
|
|
<select id="dev-page-size-select" onchange="DEV_PAGE_SIZE=+this.value||Infinity;devCurrentPage=1;applyDevicePagination();"
|
|
style="padding:0.2rem 0.4rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">
|
|
<option value="10">10 / page</option>
|
|
<option value="25" selected>25 / page</option>
|
|
<option value="50">50 / page</option>
|
|
<option value="100">100 / page</option>
|
|
<option value="">All</option>
|
|
</select>
|
|
</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;
|
|
var locationVal = document.getElementById('filter-location').value;
|
|
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 filtered = 0;
|
|
rows.forEach(function(row) {
|
|
var rowType = row.dataset.type || '';
|
|
var rowBatterySize = row.dataset.batterySize || '';
|
|
var rowLocation = row.dataset.location || '';
|
|
var rowFill = row.dataset.fill || '';
|
|
var rowName = row.dataset.name || '';
|
|
var show = (!typeVal || rowType === typeVal) &&
|
|
(!batterySizeVal || rowBatterySize === batterySizeVal) &&
|
|
(!locationVal || rowLocation === locationVal) &&
|
|
(!fillVal || rowFill === fillVal) &&
|
|
(!textVal || rowName.includes(textVal) ||
|
|
rowType.toLowerCase().includes(textVal) ||
|
|
rowBatterySize.toLowerCase().includes(textVal) ||
|
|
rowLocation.toLowerCase().includes(textVal));
|
|
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 ? (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() {
|
|
document.getElementById('filter-type').value = '';
|
|
document.getElementById('filter-battery-size').value = '';
|
|
document.getElementById('filter-location').value = '';
|
|
document.getElementById('filter-fill').value = '';
|
|
document.getElementById('filter-device-text').value = '';
|
|
applyDeviceFilters();
|
|
}
|
|
|
|
applyDeviceFilters();
|
|
</script>
|
|
{% endblock %}
|