212 lines
6.3 KiB
HTML
212 lines
6.3 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>Schedules • Task & Workflow Manager</title>
|
|||
|
|
<link rel="stylesheet" href="style.css" />
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!-- app shell header -->
|
|||
|
|
<header class="app-header">
|
|||
|
|
<div class="brand">
|
|||
|
|
<div class="logo" aria-hidden="true">⏱️</div>
|
|||
|
|
<div class="titles">
|
|||
|
|
<h1>Schedules</h1>
|
|||
|
|
<p class="subtitle">manage your tasks and follow‑ups</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- theme toggle kept with same ids so your code still works -->
|
|||
|
|
<button id="themeToggle" class="theme-toggle card compact" aria-pressed="false" title="toggle dark / light">
|
|||
|
|
<span id="themeToggleIcon" aria-hidden="true">🌙</span>
|
|||
|
|
<span id="themeToggleLabel">Dark</span>
|
|||
|
|
</button>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- content grid -->
|
|||
|
|
<main class="content-grid">
|
|||
|
|
<!-- left column: auth + run now -->
|
|||
|
|
<aside class="stack col-left">
|
|||
|
|
<!-- login card (ids preserved) -->
|
|||
|
|
<section class="card" id="auth">
|
|||
|
|
<header class="card-header">
|
|||
|
|
<h2>login</h2>
|
|||
|
|
<p class="muted">enter your open webui user id (uuid). this is sent as the <code
|
|||
|
|
class="inline">x-user-id</code> header on api requests.</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<form id="loginForm" class="form-stack">
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="userId">user id (uuid)</label>
|
|||
|
|
<input id="userId" name="userId" type="text" required placeholder="e.g. 5a8d1d7e-..." />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="displayName">display name (optional)</label>
|
|||
|
|
<input id="displayName" name="displayName" type="text" placeholder="your name" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="actions">
|
|||
|
|
<button type="submit">save & set header</button>
|
|||
|
|
<button type="button" id="logoutBtn" aria-variant="ghost">logout</button>
|
|||
|
|
</div>
|
|||
|
|
<p id="authStatus" class="muted" aria-live="polite"></p>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- run now -->
|
|||
|
|
<section class="card">
|
|||
|
|
<header class="card-header">
|
|||
|
|
<h2>run now</h2>
|
|||
|
|
<p class="muted">trigger a workflow ad‑hoc with parameters</p>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<form id="runNowForm" class="form-stack">
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="rnName">name (label only)</label>
|
|||
|
|
<input id="rnName" type="text" placeholder="ad-hoc-run" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="rnTemplateName">workflow template</label>
|
|||
|
|
<input id="rnTemplateName" type="text" placeholder="report-template" required />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="rnEntrypoint">entrypoint (optional)</label>
|
|||
|
|
<input id="rnEntrypoint" type="text" placeholder="main" />
|
|||
|
|
</div>
|
|||
|
|
<div class="checkbox">
|
|||
|
|
<label>
|
|||
|
|
<input id="rnClusterScope" type="checkbox" /> template is cluster-scoped
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<label for="rnParams">parameters (json object)</label>
|
|||
|
|
<textarea id="rnParams" placeholder='{"report_kind":"summary"}'></textarea>
|
|||
|
|
|
|||
|
|
<div class="actions">
|
|||
|
|
<button type="submit">run now</button>
|
|||
|
|
</div>
|
|||
|
|
<p id="runNowStatus" class="muted" aria-live="polite"></p>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<!-- right column: schedules + create/update -->
|
|||
|
|
<section class="stack col-right">
|
|||
|
|
<!-- schedules list -->
|
|||
|
|
<section class="card">
|
|||
|
|
<header class="card-header actions between">
|
|||
|
|
<h2>your schedules</h2>
|
|||
|
|
<div class="actions">
|
|||
|
|
<button id="refreshBtn">refresh</button>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<p id="listStatus" class="muted" aria-live="polite"></p>
|
|||
|
|
|
|||
|
|
<div class="table-wrap" role="region" aria-label="schedules table" tabindex="0">
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th scope="col">name</th>
|
|||
|
|
<th scope="col">schedules</th>
|
|||
|
|
<th scope="col">tz</th>
|
|||
|
|
<th scope="col">template</th>
|
|||
|
|
<th scope="col">entrypoint</th>
|
|||
|
|
<th scope="col">one-shot</th>
|
|||
|
|
<th scope="col">actions</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="schedulesTbody"></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- create/update schedule -->
|
|||
|
|
<section class="card">
|
|||
|
|
<header class="card-header">
|
|||
|
|
<h2>create / update schedule</h2>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<form id="createForm" class="form-stack">
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="name">name</label>
|
|||
|
|
<input id="name" name="name" type="text" required placeholder="daily-report" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="tz">timezone</label>
|
|||
|
|
<input id="tz" name="tz" type="text" value="America/New_York" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="iso">run at (iso datetime, or leave empty if using cron)</label>
|
|||
|
|
<input id="iso" name="iso" type="datetime-local" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="cron">cron (min hour day month *)</label>
|
|||
|
|
<input id="cron" name="cron" type="text" placeholder="30 9 * * *" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div>
|
|||
|
|
<label for="templateName">workflow template</label>
|
|||
|
|
<input id="templateName" name="templateName" type="text" required
|
|||
|
|
placeholder="report-template" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label for="entrypoint">entrypoint (optional)</label>
|
|||
|
|
<input id="entrypoint" name="entrypoint" type="text" placeholder="main" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="checkbox">
|
|||
|
|
<label>
|
|||
|
|
<input id="clusterScope" type="checkbox" /> template is cluster-scoped
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="checkbox">
|
|||
|
|
<label>
|
|||
|
|
<input id="oneShot" type="checkbox" /> stop after first success (one-shot)
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<label for="params">parameters (json object)</label>
|
|||
|
|
<textarea id="params" name="params" placeholder='{"report_kind":"summary"}'></textarea>
|
|||
|
|
|
|||
|
|
<div class="actions between wrap">
|
|||
|
|
<div class="actions">
|
|||
|
|
<button type="submit">upsert schedule</button>
|
|||
|
|
<button type="button" id="loadTemplatesBtn" aria-variant="ghost">load workflow
|
|||
|
|
templates</button>
|
|||
|
|
</div>
|
|||
|
|
<span id="createStatus" class="muted" aria-live="polite"></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<details class="templates">
|
|||
|
|
<summary class="muted">available workflow templates</summary>
|
|||
|
|
<ul id="templatesUl" class="muted"></ul>
|
|||
|
|
</details>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<!-- scripts -->
|
|||
|
|
<script type="module" src="script.js"></script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|