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

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

// Build a flat lookup: rel_path → [enabled, cron, in_tree]
$treeMap = [];
foreach ($tree as $orch) {
    $treeMap[$orch['id']] = ['enabled' => $orch['enabled'], 'cron' => $orch['cron']];
    foreach ($orch['children'] ?? [] as $child) {
        $treeMap[$child['id']] = ['enabled' => $child['enabled'], 'cron' => $child['cron']];
    }
}
?>

<div id="vv-scheduler">
  <p class="vv-hint">Toggle saves immediately. Fill in cron expressions and hit
  <strong>Save Schedule</strong> at the bottom. <strong>Run</strong> fires now;
  <strong>Dry Run</strong> sets DRY_RUN=1. Log opens on the right.</p>

  <div id="vv-sched-layout">

    <!-- ── Left: script cards ── -->
    <div id="vv-sched-left">
      <div id="vv-sched-cards">

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

          <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">
            <span class="vv-save-check"></span>
          </div>
          <?php if (!empty($orch['desc'])): ?>
            <div class="vv-job-desc" title="<?= htmlspecialchars($orch['desc']) ?>"><?= htmlspecialchars($orch['desc']) ?></div>
          <?php endif; ?>
          <div class="vv-job-actions">
            <button class="vv-btn-sm vv-run-btn" onclick="vvRunJob(this)">&#9654; Run</button>
            <button class="vv-btn-sm vv-dry-btn" onclick="vvDryRun(this)">&#9654; Dry Run</button>
            <button class="vv-btn-sm" onclick="vvSelectLog(this)">Log</button>
            <label class="vv-log-label" title="Enable verbose --log output">
              <input type="checkbox" class="vv-log-enabled"
                <?= $orch['log_enabled'] ? 'checked' : '' ?>
                onchange="vvSaveJob(this)">
              <span>Verbose</span>
            </label>
            <span class="vv-job-dot"></span>
            <?php if (!empty($orch['children'])): ?>
              <button class="vv-advanced-toggle" style="margin-left:auto;width:110px" onclick="vvToggleAdvanced(this)">Advanced ▸</button>
            <?php endif; ?>
          </div>

          <?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">
                    <span class="vv-save-check"></span>
                  </div>
                  <?php if (!empty($child['desc'])): ?>
                    <div class="vv-job-desc" title="<?= htmlspecialchars($child['desc']) ?>"><?= htmlspecialchars($child['desc']) ?></div>
                  <?php endif; ?>
                  <div class="vv-job-actions">
                    <button class="vv-btn-sm vv-run-btn" onclick="vvRunJob(this)">&#9654; Run</button>
                    <button class="vv-btn-sm vv-dry-btn" onclick="vvDryRun(this)">&#9654; Dry Run</button>
                    <button class="vv-btn-sm" onclick="vvSelectLog(this)">Log</button>
                    <label class="vv-log-label" title="Enable verbose --log output">
                      <input type="checkbox" class="vv-log-enabled"
                        <?= $child['log_enabled'] ? 'checked' : '' ?>
                        onchange="vvSaveJob(this)">
                      <span>Verbose</span>
                    </label>
                    <span class="vv-job-dot"></span>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>

        </div>
      <?php endforeach; ?>

      </div><!-- /#vv-sched-cards -->

      <!-- Single global save -->
      <div class="vv-sched-footer">
        <button class="vv-save-btn" onclick="vvSaveAll(this)">Save Schedule</button>
        <span id="vv-save-all-status" class="vv-save-status"></span>
      </div>

    </div><!-- /#vv-sched-left -->

    <!-- ── Right: suggestions + log panel ── -->
    <div id="vv-sched-right" class="vv-panel-visible">
      <div class="vv-card vv-log-card">
        <div class="vv-log-toolbar" style="margin-bottom:8px;">
          <div style="display:flex;align-items:center;gap:8px;">
            <button id="vv-back-btn" class="vv-btn-sm" onclick="vvBackToSuggestions()" style="display:none">&#8592; Back</button>
            <span id="vv-log-title" style="font-size:13px;font-weight:bold;color:#ccc;">Suggested Schedules</span>
            <span id="vv-log-dot" style="display:none;width:8px;height:8px;border-radius:50%;background:#4caf50;flex-shrink:0;"></span>
          </div>
          <div style="display:flex;align-items:center;gap:12px;">
            <label id="vv-scroll-lock-label" class="vv-log-label" title="Lock auto-scroll" style="display:none">
              <input type="checkbox" id="vv-scroll-lock"> <span>Scroll Lock</span>
            </label>
            <label id="vv-invert-log-label" class="vv-log-label" title="Show newest lines at top" style="display:none">
              <input type="checkbox" id="vv-invert-log" onchange="vvFetchRight()"> <span>Invert</span>
            </label>
            <span id="vv-log-ts" class="vv-log-ts"></span>
            <button id="vv-clear-btn" class="vv-btn-sm" onclick="vvClearRightLog()" style="display:none">Clear</button>
          </div>
        </div>

        <!-- Suggestions view (default) -->
        <div id="vv-suggestions">
          <?php foreach ($blocks as $bi => $block):
            $scripts  = $block['scripts'];
            $schedule = $block['schedule'];
            // Extract just the 5-field cron from schedule string
            $schedParts = preg_split('/\s+/', $schedule, 6);
            $cronOnly   = (count($schedParts) >= 5) ? implode(' ', array_slice($schedParts, 0, 5)) : '';
            $schedLabel = (count($schedParts) >= 6) ? trim($schedParts[5], '() ') : $schedule;
            // Status: any matching script configured?
            $configured = false; $enabled = false;
            foreach ($scripts as $s) {
                if (isset($treeMap[$s['rel']])) {
                    $configured = true;
                    if ($treeMap[$s['rel']]['enabled']) $enabled = true;
                }
            }
            // Trim trailing blank desc lines
            $desc = $block['desc'];
            while (!empty($desc) && trim(end($desc)) === '') array_pop($desc);
          ?>
          <div class="vv-sug-block" data-bi="<?= $bi ?>">
            <div class="vv-sug-header" onclick="vvToggleSugBlock(<?= $bi ?>)">
              <span class="vv-sug-chevron">▸</span>
              <span class="vv-sug-title"><?= htmlspecialchars($block['title']) ?></span>
              <?php if ($cronOnly): ?>
                <code class="vv-sug-cron"><?= htmlspecialchars($cronOnly) ?></code>
              <?php endif; ?>
              <?php if ($schedLabel && $schedLabel !== $cronOnly): ?>
                <span class="vv-sug-label"><?= htmlspecialchars($schedLabel) ?></span>
              <?php endif; ?>
              <span class="vv-sug-status <?= $configured ? ($enabled ? 'vv-sug-on' : 'vv-sug-off') : 'vv-sug-none' ?>">
                <?= $configured ? ($enabled ? '● on' : '○ off') : '—' ?>
              </span>
            </div>
            <div class="vv-sug-body" id="vv-sug-body-<?= $bi ?>" style="display:none">
              <?php if (!empty($desc)): ?>
                <pre class="vv-sug-desc"><?= htmlspecialchars(implode("\n", $desc)) ?></pre>
              <?php endif; ?>
              <?php if (!empty($scripts)): ?>
                <div class="vv-sug-scripts">
                  <?php foreach ($scripts as $s):
                    $inTree = isset($treeMap[$s['rel']]);
                    $scron  = $s['cron'] ?: ($inTree ? $treeMap[$s['rel']]['cron'] : '');
                  ?>
                    <div class="vv-sug-script-row">
                      <?php if ($s['cron']): ?>
                        <code class="vv-sug-inline-cron"><?= htmlspecialchars($s['cron']) ?></code>
                      <?php endif; ?>
                      <code class="vv-sug-path"><?= htmlspecialchars($s['rel']) ?></code>
                      <?php if ($inTree): ?>
                        <span class="vv-sug-configured">✓ in scheduler</span>
                      <?php endif; ?>
                    </div>
                  <?php endforeach; ?>
                </div>
              <?php endif; ?>
            </div>
          </div>
          <?php endforeach; ?>
          <?php if (empty($blocks)): ?>
            <p style="color:#666;padding:12px;">user_script_plug-in.sh not found at <?= htmlspecialchars(SCRIPTS_DIR) ?></p>
          <?php endif; ?>
        </div>

        <!-- Log view (shown when a script is selected) -->
        <pre id="vv-log-pre" class="vv-log-pre vv-log-right-pre" style="display:none"></pre>
      </div>
      <?php
        $totalJobs = 0; $scheduledJobs = 0;
        foreach ($tree as $orch) {
            $totalJobs++;
            if (!empty($orch['cron']) && $orch['enabled']) $scheduledJobs++;
            foreach (($orch['children'] ?? []) as $child) {
                $totalJobs++;
                if (!empty($child['cron']) && $child['enabled']) $scheduledJobs++;
            }
        }
        $runningScripts = [];
        exec('pgrep -af bash 2>/dev/null', $psLines);
        foreach ($psLines as $line) {
            if (preg_match('#' . preg_quote(SCRIPTS_DIR, '#') . '/([^\s]+\.sh)#', $line, $rm)) {
                $runningScripts[] = basename($rm[1], '.sh');
            }
        }
        $runningScripts = array_unique($runningScripts);
      ?>
      <div class="vv-sched-footer vv-sched-info">
        <span><?= $scheduledJobs ?> of <?= $totalJobs ?> job<?= $totalJobs !== 1 ? 's' : '' ?> scheduled</span>
        <span><?= !empty($runningScripts) ? 'Currently Running: ' . htmlspecialchars(implode(', ', $runningScripts)) : 'Currently Running scripts: none' ?></span>
      </div>
    </div>

  </div><!-- /#vv-sched-layout -->
</div>

<script>
let vvActiveId   = null;
let vvRunningId  = null;
let vvLastTs     = 0;
let vvStaleCount = 0;
let vvPollTimer  = null;

function vvPost(url, data) {
  const params = new URLSearchParams({csrf_token, ...data});
  return fetch(url, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: params
  }).then(r => r.json());
}

function vvFitRight() {
  const right = document.getElementById('vv-sched-right');
  if (!right.classList.contains('vv-panel-visible')) return;
  const left  = document.getElementById('vv-sched-left');

  const lf      = left.querySelector('.vv-sched-footer');
  const rf      = right.querySelector('.vv-sched-info');
  const toolbar = right.querySelector('.vv-log-toolbar');
  const pre     = document.getElementById('vv-log-pre');
  const sug     = document.getElementById('vv-suggestions');

  const leftRect  = left.getBoundingClientRect();
  const rightRect = right.getBoundingClientRect();

  rf.style.height    = lf.offsetHeight + 'px';
  right.style.height = Math.round(leftRect.bottom - rightRect.top) + 'px';

  const contentH = Math.max(80, lf.getBoundingClientRect().top - 32 - toolbar.getBoundingClientRect().bottom);
  // Apply to whichever content pane is visible
  if (pre.style.display !== 'none') {
    pre.style.maxHeight = 'none';
    pre.style.height    = contentH + 'px';
  }
  if (sug.style.display !== 'none') {
    sug.style.height    = contentH + 'px';
  }
}
window.addEventListener('resize', vvFitRight);

function vvShowLogMode(id) {
  document.getElementById('vv-suggestions').style.display = 'none';
  document.getElementById('vv-log-pre').style.display     = '';
  document.getElementById('vv-back-btn').style.display    = '';
  document.getElementById('vv-clear-btn').style.display   = '';
  document.getElementById('vv-scroll-lock-label').style.display = '';
  document.getElementById('vv-invert-log-label').style.display  = '';
  const name = id.replace(/\.sh$/, '').split('/').pop();
  document.getElementById('vv-log-title').textContent = name;
}

function vvBackToSuggestions() {
  if (vvActiveId) {
    const old = document.querySelector('[data-id="' + CSS.escape(vvActiveId) + '"]');
    if (old) old.querySelector('.vv-job-row').classList.remove('vv-row-selected');
  }
  vvActiveId = null;
  if (vvPollTimer) { clearInterval(vvPollTimer); vvPollTimer = null; }
  vvSetRunning(null);

  document.getElementById('vv-log-pre').style.display     = 'none';
  document.getElementById('vv-suggestions').style.display = '';
  document.getElementById('vv-back-btn').style.display    = 'none';
  document.getElementById('vv-clear-btn').style.display   = 'none';
  document.getElementById('vv-scroll-lock-label').style.display = 'none';
  document.getElementById('vv-invert-log-label').style.display  = 'none';
  document.getElementById('vv-log-title').textContent = 'Suggested Schedules';
  document.getElementById('vv-log-ts').textContent    = '';
  document.getElementById('vv-log-dot').style.display = 'none';
  requestAnimationFrame(vvFitRight);
}

function vvOpenRight(id) {
  if (vvActiveId) {
    const old = document.querySelector('[data-id="' + CSS.escape(vvActiveId) + '"]');
    if (old) old.querySelector('.vv-job-row').classList.remove('vv-row-selected');
  }
  vvActiveId = id;
  const job = document.querySelector('[data-id="' + CSS.escape(id) + '"]');
  if (job) job.querySelector('.vv-job-row').classList.add('vv-row-selected');

  vvShowLogMode(id);
  requestAnimationFrame(vvFitRight);

  vvFetchRight();
  if (!vvPollTimer) vvPollTimer = setInterval(vvFetchRight, 2000);
}

function vvFetchRight() {
  if (!vvActiveId) return;
  fetch('/plugins/varaverk/api/log.php?id=' + encodeURIComponent(vvActiveId))
    .then(r => r.json())
    .then(d => {
      const pre        = document.getElementById('vv-log-pre');
      const ts         = document.getElementById('vv-log-ts');
      const scrollLock = document.getElementById('vv-scroll-lock')?.checked;
      const invert     = document.getElementById('vv-invert-log')?.checked;
      if (!d.ok) { pre.textContent = '✗ ' + (d.error ?? 'Error'); return; }
      const content = d.content || '(no log yet)';
      pre.textContent = invert ? content.split('\n').reverse().join('\n') : content;
      if (!scrollLock) pre.scrollTop = invert ? 0 : pre.scrollHeight;
      ts.textContent  = d.ts ? 'Last run: ' + new Date(d.ts * 1000).toLocaleString() : '';

      // Running indicator: clear when log stops changing
      if (vvRunningId === vvActiveId) {
        if (d.ts && d.ts === vvLastTs) {
          if (++vvStaleCount >= 2) vvSetRunning(null);
        } else {
          vvLastTs = d.ts || 0;
          vvStaleCount = 0;
        }
      }
    })
    .catch(() => {});
}

function vvSetRunning(id) {
  // Clear old dot
  if (vvRunningId) {
    const old = document.querySelector('[data-id="' + CSS.escape(vvRunningId) + '"]');
    if (old) { const dot = old.querySelector('.vv-job-dot'); dot.className = 'vv-job-dot'; }
  }
  vvRunningId  = id;
  vvLastTs     = 0;
  vvStaleCount = 0;
  const headerDot = document.getElementById('vv-log-dot');
  if (id) {
    headerDot.style.display = 'inline-block';
    const job = document.querySelector('[data-id="' + CSS.escape(id) + '"]');
    if (job) job.querySelector('.vv-job-dot').classList.add('vv-dot-running');
  } else {
    headerDot.style.display = 'none';
  }
}

function vvSelectLog(btn) {
  const job = btn.closest('[data-id]');
  vvOpenRight(job.dataset.id);
}

function vvRunJob(btn) {
  const job = btn.closest('[data-id]');
  const id  = job.dataset.id;
  vvOpenRight(id);
  vvSetRunning(id);
  vvPost('/plugins/varaverk/api/run.php', {id})
    .then(d => {
      if (!d.ok) {
        document.getElementById('vv-log-pre').textContent = '✗ ' + (d.error ?? 'Failed to start');
        vvSetRunning(null);
      }
    });
}

function vvDryRun(btn) {
  const job = btn.closest('[data-id]');
  const id  = job.dataset.id;
  vvOpenRight(id);
  vvSetRunning(id);
  vvPost('/plugins/varaverk/api/dryrun.php', {id})
    .then(d => {
      if (!d.ok) {
        document.getElementById('vv-log-pre').textContent = '✗ ' + (d.error ?? 'Failed to start');
        vvSetRunning(null);
      }
    });
}

function vvFlashSaved(job) {
  const check = job.querySelector('.vv-save-check');
  if (!check) return;
  check.textContent = '✓';
  check.classList.remove('vv-check-show');
  void check.offsetWidth; // force reflow to restart animation
  check.classList.add('vv-check-show');
}

function vvFlashStatus(el, msg, ok) {
  el.textContent = msg;
  el.style.color = ok ? '#4caf50' : '#f44336';
  clearTimeout(el._t);
  el._t = setTimeout(() => { el.textContent = ''; }, 3000);
}

function vvSaveJob(el) {
  const job         = el.closest('[data-id]');
  const id          = job.dataset.id;
  const enabled     = job.querySelector('.vv-enabled').checked ? '1' : '0';
  const cron        = job.querySelector('.vv-cron').value.trim();
  const log_enabled = job.querySelector('.vv-log-enabled')?.checked ? '1' : '0';
  vvPost('/plugins/varaverk/api/scheduler.php', {id, enabled, cron, log_enabled})
    .then(d => { if (d.ok) vvFlashSaved(job); });
}

function vvSaveAll() {
  const status = document.getElementById('vv-save-all-status');
  const jobs   = document.querySelectorAll('#vv-sched-left [data-id]');
  let pending  = jobs.length, allOk = true;
  if (!pending) { vvFlashStatus(status, '✗ No jobs found', false); return; }
  status.textContent = 'Saving…';
  jobs.forEach(job => {
    const id          = job.dataset.id;
    const enabled     = job.querySelector('.vv-enabled').checked ? '1' : '0';
    const cron        = job.querySelector('.vv-cron').value.trim();
    const log_enabled = job.querySelector('.vv-log-enabled')?.checked ? '1' : '0';
    vvPost('/plugins/varaverk/api/scheduler.php', {id, enabled, cron, log_enabled})
      .then(d => {
        if (d.ok) vvFlashSaved(job); else allOk = false;
        if (--pending === 0) vvFlashStatus(status, allOk ? '✓ All saved' : '✗ Some failed', allOk);
      });
  });
}

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 vvClearRightLog() {
  if (!vvActiveId) return;
  vvPost('/plugins/varaverk/api/log.php', {id: vvActiveId, clear: '1'})
    .then(() => vvFetchRight())
    .catch(() => {});
}

function vvToggleSugBlock(bi) {
  const body    = document.getElementById('vv-sug-body-' + bi);
  const chevron = body.closest('.vv-sug-block').querySelector('.vv-sug-chevron');
  const open    = body.style.display !== 'none';
  body.style.display    = open ? 'none' : 'block';
  chevron.textContent   = open ? '▸' : '▾';
}
</script>

<script>requestAnimationFrame(vvFitRight);</script>