rsync page: window cards expand on click to show per-window enable toggle
This commit is contained in:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user