rsync page: window cards expand on click to show per-window enable toggle

This commit is contained in:
Gmer4Lfe
2026-06-03 16:24:24 -04:00
parent 65075ed599
commit abb4968487
+58 -8
View File
@@ -571,14 +571,24 @@ function _lastSyncCard(data) {
}
// ── Window cards row ──────────────────────────────────────────────────────────
const WIN_TOGGLE_KEYS = {
critical: 'CRITICAL_RSYNC_ENABLED',
intermediate: 'INTERMEDIATE_RSYNC_ENABLED',
daily: 'DAILY_RSYNC_ENABLED',
weekly: 'WEEKLY_RSYNC_ENABLED',
fallback: 'FALLBACK_RSYNC_ENABLED',
};
function _windowsRow(data) {
const windows = data.windows || {};
const lastSync = data.last_sync || {};
const cards = Object.entries(WIN_META).map(([key, meta]) => {
const enabled = windows[key] !== false;
const ls = lastSync[key];
const cls = enabled ? 'enabled' : 'disabled';
const enabled = windows[key] !== false;
const ls = lastSync[key];
const cls = enabled ? 'enabled' : 'disabled';
const toggleKey = WIN_TOGGLE_KEYS[key] || '';
const trackId = 'vv-ry-tog-win-' + key;
let statusHtml = '<div class="vv-ry-win-stat">No run history</div>';
if (ls && ls.ts) {
@@ -587,11 +597,26 @@ function _windowsRow(data) {
<div class="vv-ry-win-dur">${_rel(ls.ts)}${ls.duration ? ' · ' + _dur(ls.duration) : ''}</div>`;
}
return `<div class="vv-ry-win ${cls}">
<div class="vv-ry-win-lbl">${meta.cadence}</div>
<div class="vv-ry-win-name">${meta.label}</div>
<span class="vv-ry-pill ${enabled ? 'on' : 'off'}">${enabled ? 'enabled' : 'disabled'}</span>
${statusHtml}
const panelHtml = toggleKey ? `
<div class="vv-ry-win-panel" style="display:none;margin-top:9px;padding-top:8px;border-top:1px solid #1e1e1e;">
<label class="vv-ry-toggle" title="${toggleKey}" onclick="event.stopPropagation()">
<div class="vv-ry-toggle-track ${enabled ? 'on' : ''}" id="${trackId}"
onclick="event.stopPropagation();vvRyToggle(this,'${toggleKey}')"></div>
<span class="vv-ry-toggle-lbl" style="font-size:10px;color:#444;">${toggleKey}</span>
</label>
</div>` : '';
return `<div class="vv-ry-win ${cls}" data-win-key="${key}" onclick="vvRyWinExpand(this)" style="cursor:pointer;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:4px;">
<div style="min-width:0;">
<div class="vv-ry-win-lbl">${meta.cadence}</div>
<div class="vv-ry-win-name">${meta.label}</div>
<span class="vv-ry-pill ${enabled ? 'on' : 'off'}">${enabled ? 'enabled' : 'disabled'}</span>
${statusHtml}
</div>
<span class="vv-ry-win-chev" style="font-size:9px;color:#2a2a2a;flex-shrink:0;padding-top:2px;">▸</span>
</div>
${panelHtml}
</div>`;
});
@@ -741,6 +766,9 @@ function _settingsSection(data) {
</div>`;
}
// Track which window panels are open so they survive poll re-renders
const _vvRyWinOpen = new Set();
// ── Main render ───────────────────────────────────────────────────────────────
function _render(data) {
let html = '';
@@ -751,6 +779,16 @@ function _render(data) {
html += _settingsSection(data);
document.getElementById('vv-ry-grid').innerHTML = html;
// Restore any window panels that were open before the re-render
_vvRyWinOpen.forEach(key => {
const card = document.querySelector(`.vv-ry-win[data-win-key="${key}"]`);
if (!card) return;
const panel = card.querySelector('.vv-ry-win-panel');
const chev = card.querySelector('.vv-ry-win-chev');
if (panel) panel.style.display = '';
if (chev) chev.textContent = '▾';
});
const ts = data.ts
? new Date(data.ts * 1000).toLocaleString([], {
month:'numeric', day:'numeric', year:'numeric',
@@ -771,6 +809,18 @@ setInterval(vvRyLoad, 30000);
})();
// ── Window card expand/collapse ───────────────────────────────────────────────
function vvRyWinExpand(card) {
const key = card.dataset.winKey;
const panel = card.querySelector('.vv-ry-win-panel');
const chev = card.querySelector('.vv-ry-win-chev');
if (!panel) return;
const open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
if (chev) chev.textContent = open ? '▸' : '▾';
if (key) open ? _vvRyWinOpen.delete(key) : _vvRyWinOpen.add(key);
}
// ── Toggle a boolean flag — called by inline onclick ──────────────────────────
function vvRyToggle(trackEl, name) {
const on = !trackEl.classList.contains('on');