Varaverk/Plugin/usr/local/emhttp/plugins/varaverk/pages/scheduler.php

<?php
require_once dirname(__DIR__) . '/include/scheduler.php';
$tree = vv_job_tree();
?>

<div id="vv-scheduler">
  <p class="vv-hint">Toggle enables/saves immediately. Edit cron expressions then hit
  <strong>Save</strong> at the bottom of the card. <strong>Run</strong> fires the script
  now and opens its log.</p>

  <?php foreach ($tree as $orch): $oid = htmlspecialchars($orch['id']); ?>
    <div class="vv-card vv-wide vv-sched-card" data-id="<?= $oid ?>">

      <!-- Orchestrator row -->
      <div class="vv-job-row">
        <label class="vv-toggle" title="Enable/disable (saves immediately)">
          <input type="checkbox" class="vv-enabled"
            <?= $orch['enabled'] ? 'checked' : '' ?>
            onchange="vvSaveJob(this)">
          <span class="vv-slider"></span>
        </label>
        <span class="vv-job-label"><?= htmlspecialchars($orch['label']) ?></span>
        <input type="text" class="vv-cron" value="<?= htmlspecialchars($orch['cron']) ?>"
          placeholder="cron expression">
        <button class="vv-btn-sm vv-run-btn" onclick="vvRunJob(this)">&#9654; Run</button>
        <button class="vv-log-btn vv-btn-sm" onclick="vvToggleLog(this)">Log</button>
        <span class="vv-job-status"></span>
        <?php if (!empty($orch['children'])): ?>
          <button class="vv-advanced-toggle" onclick="vvToggleAdvanced(this)">Advanced ▸</button>
        <?php endif; ?>
      </div>

      <!-- Orchestrator log panel -->
      <div class="vv-log-panel" style="display:none;">
        <div class="vv-log-toolbar">
          <span class="vv-log-ts"></span>
          <button class="vv-btn-sm" onclick="vvClearLog(this)">Clear</button>
        </div>
        <pre class="vv-log-pre">(no log yet)</pre>
      </div>

      <!-- Children (Advanced) -->
      <?php if (!empty($orch['children'])): ?>
        <div class="vv-children" style="display:none;">
          <?php foreach ($orch['children'] as $child): $cid = htmlspecialchars($child['id']); ?>
            <div class="vv-script" data-id="<?= $cid ?>">
              <div class="vv-job-row">
                <label class="vv-toggle" title="Enable/disable (saves immediately)">
                  <input type="checkbox" class="vv-enabled"
                    <?= $child['enabled'] ? 'checked' : '' ?>
                    onchange="vvSaveJob(this)">
                  <span class="vv-slider"></span>
                </label>
                <span class="vv-job-label"><?= htmlspecialchars($child['label']) ?></span>
                <input type="text" class="vv-cron" value="<?= htmlspecialchars($child['cron']) ?>"
                  placeholder="cron expression">
                <button class="vv-btn-sm vv-run-btn" onclick="vvRunJob(this)">&#9654; Run</button>
                <button class="vv-log-btn vv-btn-sm" onclick="vvToggleLog(this)">Log</button>
                <span class="vv-job-status"></span>
              </div>
              <div class="vv-log-panel" style="display:none;">
                <div class="vv-log-toolbar">
                  <span class="vv-log-ts"></span>
                  <button class="vv-btn-sm" onclick="vvClearLog(this)">Clear</button>
                </div>
                <pre class="vv-log-pre">(no log yet)</pre>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>

      <!-- Card footer: single Save for all crons in this card -->
      <div class="vv-card-footer">
        <button class="vv-save-btn" onclick="vvSaveCard(this)">Save Schedule</button>
        <span class="vv-save-status"></span>
      </div>

    </div>
  <?php endforeach; ?>
</div>

<script>
const vvLogTimers = {};

// Toggle auto-saves its single job immediately
function vvSaveJob(el) {
  const job     = el.closest('[data-id]');
  const id      = job.dataset.id;
  const enabled = job.querySelector('.vv-enabled').checked;
  const cron    = job.querySelector('.vv-cron').value.trim();
  const status  = job.querySelector('.vv-job-status');
  fetch('/plugins/varaverk/api/scheduler.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id, enabled, cron})
  })
  .then(r => r.json())
  .then(d => { if (status) vvFlashStatus(status, d.ok ? '✓' : '✗ ' + (d.error ?? ''), d.ok); });
}

// Save button at card bottom: saves all jobs (orch + children) in this card
function vvSaveCard(btn) {
  const card    = btn.closest('.vv-sched-card');
  const status  = card.querySelector('.vv-save-status');
  const jobs    = card.querySelectorAll('[data-id]');
  let pending   = jobs.length;
  let allOk     = true;

  status.textContent = 'Saving…';
  jobs.forEach(job => {
    const id      = job.dataset.id;
    const enabled = job.querySelector('.vv-enabled').checked;
    const cron    = job.querySelector('.vv-cron').value.trim();
    fetch('/plugins/varaverk/api/scheduler.php', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({id, enabled, cron})
    })
    .then(r => r.json())
    .then(d => {
      if (!d.ok) allOk = false;
      if (--pending === 0) vvFlashStatus(status, allOk ? '✓ Saved' : '✗ Some failed', allOk);
    });
  });
}

// Run: fires script immediately, opens log panel
function vvRunJob(btn) {
  const job    = btn.closest('[data-id]');
  const id     = job.dataset.id;
  const logBtn = job.querySelector('.vv-log-btn');

  if (logBtn && !logBtn.classList.contains('active')) vvToggleLog(logBtn);

  fetch('/plugins/varaverk/api/run.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id})
  })
  .then(r => r.json())
  .then(d => {
    if (!d.ok) {
      const pre = job.querySelector('.vv-log-pre');
      if (pre) pre.textContent = '✗ ' + (d.error ?? 'Failed to start');
    }
  });
}

function vvToggleAdvanced(btn) {
  const card     = btn.closest('.vv-sched-card');
  const children = card.querySelector('.vv-children');
  const visible  = children.style.display !== 'none';
  children.style.display = visible ? 'none' : 'block';
  btn.textContent = visible ? 'Advanced ▸' : 'Advanced ▾';
}

function vvToggleLog(btn) {
  const job   = btn.closest('[data-id]');
  const id    = job.dataset.id;
  const panel = job.querySelector('.vv-log-panel');
  const open  = panel.style.display !== 'none';

  if (open) {
    panel.style.display = 'none';
    btn.textContent = 'Log';
    btn.classList.remove('active');
    clearInterval(vvLogTimers[id]);
    delete vvLogTimers[id];
  } else {
    panel.style.display = 'block';
    btn.textContent = 'Log ▾';
    btn.classList.add('active');
    vvFetchLog(panel, id);
    vvLogTimers[id] = setInterval(() => vvFetchLog(panel, id), 3000);
  }
}

function vvFetchLog(panel, id) {
  fetch('/plugins/varaverk/api/log.php?id=' + encodeURIComponent(id))
    .then(r => r.json())
    .then(d => {
      const pre = panel.querySelector('.vv-log-pre');
      const ts  = panel.querySelector('.vv-log-ts');
      if (!d.ok) { pre.textContent = '✗ ' + (d.error ?? 'Error'); return; }
      pre.textContent = d.content || '(no log yet)';
      pre.scrollTop   = pre.scrollHeight;
      ts.textContent  = d.ts ? 'Last run: ' + new Date(d.ts * 1000).toLocaleString() : '';
    })
    .catch(() => {});
}

function vvClearLog(btn) {
  const panel = btn.closest('.vv-log-panel');
  const job   = btn.closest('[data-id]');
  fetch('/plugins/varaverk/api/log.php?id=' + encodeURIComponent(job.dataset.id) + '&clear=1',
    {method: 'POST'})
    .then(() => vvFetchLog(panel, job.dataset.id))
    .catch(() => {});
}
</script>