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

Plugin/unraid/pages/rsync.php

@@ -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 enabled    = windows[key] !== false;
-    const ls      = lastSync[key];
+    const ls         = lastSync[key];
-    const cls     = enabled ? 'enabled' : 'disabled';
+    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}">
+    const panelHtml = toggleKey ? `
-      <div class="vv-ry-win-lbl">${meta.cadence}</div>
+      <div class="vv-ry-win-panel" style="display:none;margin-top:9px;padding-top:8px;border-top:1px solid #1e1e1e;">
-      <div class="vv-ry-win-name">${meta.label}</div>
+        <label class="vv-ry-toggle" title="${toggleKey}" onclick="event.stopPropagation()">
-      <span class="vv-ry-pill ${enabled ? 'on' : 'off'}">${enabled ? 'enabled' : 'disabled'}</span>
+          <div class="vv-ry-toggle-track ${enabled ? 'on' : ''}" id="${trackId}"
-      ${statusHtml}
+               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');