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

Make low battery summary card clickable to reveal which batteries

Browse Source
This commit is contained in:
Darek
2026-04-14 19:05:38 -05:00
parent c7b7c24a7e
commit 5d8fb5aa68
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/dashboard.html
+9 -5
View File
@@ -29,10 +29,14 @@
{% if ha_enabled %} {% if ha_enabled %}
{% set low_pct = batteries | selectattr('battery_percentage', 'ne', none) | selectattr('battery_percentage', 'lt', 20) | list %} {% set low_pct = batteries | selectattr('battery_percentage', 'ne', none) | selectattr('battery_percentage', 'lt', 20) | list %}
{% if low_pct %} {% if low_pct %}
<div class="card" style="flex:1;min-width:120px;text-align:center;border:2px solid #f59e0b;"> <a href="#needs-attention"
<div style="font-size:1.8rem;font-weight:700;color:#f59e0b;">{{ low_pct|length }}</div> onclick="var d=document.getElementById('needs-attention');d.open=true;"
<div class="text-muted">Low Battery</div> style="flex:1;min-width:120px;text-decoration:none;">
</div> <div class="card" style="text-align:center;border:2px solid #f59e0b;cursor:pointer;">
<div style="font-size:1.8rem;font-weight:700;color:#f59e0b;">{{ low_pct|length }}</div>
<div class="text-muted">Low Battery</div>
</div>
</a>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
@@ -47,7 +51,7 @@
{% set na_low_cap = needs_attention.low_capacity %} {% set na_low_cap = needs_attention.low_capacity %}
{% set na_low_pct = needs_attention.low_pct %} {% set na_low_pct = needs_attention.low_pct %}
{% if na_low_cap or na_low_pct %} {% if na_low_cap or na_low_pct %}
<details class="card" style="margin-bottom:1rem;"> <details id="needs-attention" class="card" style="margin-bottom:1rem;">
<summary style="cursor:pointer;font-weight:600;color:var(--text-warning);list-style:none;display:flex;align-items:center;gap:0.5rem;"> <summary style="cursor:pointer;font-weight:600;color:var(--text-warning);list-style:none;display:flex;align-items:center;gap:0.5rem;">
<span>&#9888;</span> <span>&#9888;</span>
<span>Needs Attention &nbsp;<span class="badge badge-warning">{{ (na_low_cap|length) + (na_low_pct|length) }}</span></span> <span>Needs Attention &nbsp;<span class="badge badge-warning">{{ (na_low_cap|length) + (na_low_pct|length) }}</span></span>