iterminate/battery-tracker-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Device detail UI cleanup: battery icon, HA live % unknown state, remove redundant entity row

Browse Source
This commit is contained in:
Darek
2026-04-14 01:55:29 -05:00
parent a9d0b3fc63
commit d00695cd51
1 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/device_detail.html
+31 -10
View File
@@ -4,7 +4,30 @@
{% block content %}
<h1>{{ device.name }}</h1>
<div class="card">
<div class="card" style="position:relative;">
{% if ha_enabled and device.ha_entity_id and ha_live_pct is not none %}
{% set _pct = ha_live_pct %}
{% set _fill = ((_pct / 100) * 48) | int %}
{% if _pct < 20 %}{% set _color = '#ef4444' %}
{% elif _pct < 60 %}{% set _color = '#f59e0b' %}
{% else %}{% set _color = '#22c55e' %}{% endif %}
<div title="HA battery: {{ _pct }}%"
style="position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;align-items:center;gap:0.2rem;opacity:0.9;">
<svg width="54" height="26" viewBox="0 0 60 28" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="4" width="52" height="20" rx="3" ry="3"
fill="none" stroke="var(--text-muted)" stroke-width="2"/>
<rect x="54" y="10" width="5" height="8" rx="1.5"
fill="var(--text-muted)"/>
{% if _fill > 0 %}
<rect x="3" y="6" width="{{ _fill }}" height="16" rx="2"
fill="{{ _color }}"/>
{% endif %}
<text x="27" y="19" text-anchor="middle"
font-size="10" font-weight="600" fill="#fff"
style="text-shadow:0 0 3px rgba(0,0,0,0.6);">{{ _pct }}%</text>
</svg>
</div>
{% endif %}
<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>
@@ -29,23 +52,21 @@
</tr>
{% endif %}
{% if ha_enabled and device.ha_entity_id %}
<tr>
<td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Entity</td>
<td style="border:none;"><code style="word-break:break-all;">{{ device.ha_entity_id }}</code></td>
</tr>
{% if ha_live_pct is not none %}
<tr>
<td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Live %</td>
<td style="border:none;">
{% if ha_live_pct < 20 %}
<span class="badge badge-warning">⚠ {{ ha_live_pct }}%</span>
{% if ha_live_pct is not none %}
{% if ha_live_pct < 20 %}
<span class="badge badge-warning">⚠ {{ ha_live_pct }}%</span>
{% else %}
{{ ha_live_pct }}%
{% endif %}
{% else %}
{{ ha_live_pct }}%
<span class="text-muted">—</span>
{% endif %}
</td>
</tr>
{% endif %}
{% endif %}
</table>
</div>