Files
HAMeter/hameter/web/templates/meters.html
2026-03-06 12:25:27 -05:00

71 lines
2.6 KiB
HTML

{% extends "base.html" %}
{% block title %}Meters - HAMeter{% endblock %}
{% block page_title %}Meters{% endblock %}
{% block top_actions %}
<a href="/config/meters/add" class="btn btn-primary btn-sm">Add Meter</a>
{% endblock %}
{% block content %}
<div class="restart-banner hidden" id="restart-banner">
Pipeline restart required to apply changes.
<button class="btn btn-primary btn-sm" onclick="restartPipeline()">Restart Now</button>
</div>
{% if meters %}
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Protocol</th>
<th>Type</th>
<th>Unit</th>
<th>Multiplier</th>
<th>Cost Tracking</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for meter in meters %}
<tr>
<td>{{ meter.name }}</td>
<td><code>{{ meter.id }}</code></td>
<td><span class="badge badge-protocol">{{ meter.protocol|upper }}</span></td>
<td>{{ meter.device_class or '--' }}</td>
<td>{{ meter.unit_of_measurement }}</td>
<td>{{ meter.multiplier }}</td>
<td>{% if meter.cost_factors %}<span class="badge badge-cost">{{ meter.cost_factors|length }} rate{{ 's' if meter.cost_factors|length != 1 }}</span>{% else %}--{% endif %}</td>
<td class="actions-cell">
<a href="/config/meters/{{ meter.id }}/edit" class="btn btn-sm btn-secondary">Edit</a>
<a href="/calibration?meter={{ meter.id }}" class="btn btn-sm btn-secondary">Calibrate</a>
<button class="btn btn-sm btn-danger" onclick="deleteMeter({{ meter.id }}, '{{ meter.name }}')">Delete</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="empty-state">
<p>No meters configured.</p>
<p><a href="/config/meters/add" class="btn btn-primary">Add Meter</a> or <a href="/discovery" class="btn btn-secondary">Run Discovery</a></p>
</div>
{% endif %}
<script>
async function deleteMeter(id, name) {
if (!confirm('Delete meter "' + name + '" (ID: ' + id + ')?')) return;
const resp = await fetch('/api/config/meters/' + id, {method: 'DELETE'});
const data = await resp.json();
if (data.ok) {
showToast('Meter deleted', 'success');
setTimeout(() => location.reload(), 500);
} else {
showToast(data.error || 'Delete failed', 'error');
}
}
</script>
{% endblock %}