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">Orchestrators run their child scripts in the correct order.
  Disable an orchestrator and enable individual scripts below it to run them
  in isolation for debugging or testing.</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">
          <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" onblur="vvSaveJob(this)">
        <button class="vv-btn-sm" onclick="vvSaveJob(this)">Save</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>

      <!-- 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 -->
      <?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">
                  <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" onblur="vvSaveJob(this)">
                <button class="vv-btn-sm" onclick="vvSaveJob(this)">Save</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; ?>

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

<script>
const vvLogTimers = {};

function vvSaveJob(el) {
  const row    = el.closest('.vv-job-row');
  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  = row.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);
  });
}

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]');
  const id    = job.dataset.id;
  fetch('/plugins/varaverk/api/log.php?id=' + encodeURIComponent(id) + '&clear=1', {method:'POST'})
    .then(() => vvFetchLog(panel, id))
    .catch(() => {});
}
</script>