sam/family_home_lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(portal): fix card layout ejection bug & sync top-right status dot with live service state

Browse Source
This commit is contained in:
Sam Rolfe
2026-10-08 21:56:42 +11:00
parent 24227c527a
commit a639824fd0
2 changed files with 62 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
portal/templates/partials/_sections.html
View File

@@ -20,7 +20,8 @@
</div>
<div class="tool-grid">
{% for tool in section.tools %}
<a class="tool-card" href="/tool/{{ tool.id }}" data-dash-card>
<div class="tool-card" data-dash-card>
<a class="tool-card-link" href="/tool/{{ tool.id }}" title="Open {{ tool.name }}"></a>
<div class="tool-card-top">
<span class="tool-icon" style="background:{{ section.color }}">{{ tool.name[:1]|upper }}</span>
<span class="status-dot status-{{ tool.status }}"></span>
@@ -39,16 +40,20 @@
<div class="svc-strip" data-svc="{{ tool.service_id }}"
data-ram="{{ tool.ram_mb or '' }}" data-name="{{ tool.name }}"
data-logs="{{ tool.logs_url or '' }}"
onclick="event.preventDefault();event.stopPropagation();">
<span class="svc-state" data-svc-state>
<span class="svc-dot" data-svc-dot></span><span data-svc-label>…</span>
</span>
<a class="svc-logs" data-svc-logs style="display:none" target="_blank" rel="noopener">logs</a>
<span class="svc-ram" data-svc-ram></span>
<button type="button" class="button button-utility button-sm" data-svc-btn disabled>…</button>
onclick="event.stopPropagation();">
<div class="svc-strip-left">
<span class="svc-state" data-svc-state>
<span class="svc-dot" data-svc-dot></span><span data-svc-label>…</span>
</span>
<a class="svc-logs" data-svc-logs style="display:none" target="_blank" rel="noopener">logs</a>
</div>
<div class="svc-strip-right">
<span class="svc-ram" data-svc-ram></span>
<button type="button" class="button button-utility button-sm" data-svc-btn disabled>…</button>
</div>
</div>
{% endif %}
</a>
</div>
{% endfor %}
</div>
</section>
@@ -118,6 +123,8 @@
function paint(id, showPoll) {
var strip = document.querySelector('[data-svc="' + id + '"]');
if (!strip) return;
var card = strip.closest('[data-dash-card]');
var cardDot = card ? card.querySelector('.status-dot') : null;
var st = normState(svcState[id]);
var btn = strip.querySelector("[data-svc-btn]");
var lab = strip.querySelector("[data-svc-label]");
@@ -128,6 +135,13 @@
if (ram && svcState[id] && svcState[id].ram_mb) ram.textContent = "~" + svcState[id].ram_mb + "MB";
var cls = st === "running" ? "on" : st === "stopped" ? "off" : (st === "failed" ? "fail" : st === "partial" ? "part" : "trans");
dot.className = "svc-dot svc-" + cls;
// Synchronize top-right card status dot with live service state
if (cardDot) {
var topCls = st === "running" ? "status-online" : st === "stopped" ? "status-offline" : (st === "failed" ? "status-failed" : "status-starting");
cardDot.className = "status-dot " + topCls;
}
if (lab) lab.textContent = st === "running" ? "Running" : st === "stopped" ? "Stopped" : st === "failed" ? (svcState[id].error || "Failed") : st === "partial" ? "Partial" : (st[0].toUpperCase() + st.slice(1));
// partial behaves like running for the button (offered action: stop the rest)
// failed -> offer the logs deep link (dozzle)