ION606
299 lines
9.4 KiB
HTML
299 lines
9.4 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" />
|
||
<link rel="stylesheet" href="modelList.css" />
|
||
<link rel="stylesheet" href="toolList.css" />
|
||
<link rel="stylesheet" href="featureList.css" />
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.css">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.4.1/jsoneditor.min.js"></script>
|
||
</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">
|
||
<!-- user summary card (shows when logged in) -->
|
||
<section class="card user-card" id="userCard" aria-hidden="true">
|
||
<header class="card-header">
|
||
<h2 style="margin-top: 0px;">Account</h2>
|
||
</header>
|
||
|
||
<div class="user-compact">
|
||
<img id="userAvatar" class="avatar" src="" alt="" aria-hidden="true" />
|
||
<div class="user-info">
|
||
<div id="userName" class="user-name muted">not logged in</div>
|
||
<div id="userEmail" class="muted user-email"></div>
|
||
<div id="userRole" class="muted user-role"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- permissions summary -->
|
||
<div id="userPermissions" class="permissions" aria-live="polite" hidden>
|
||
<h3 class="small">Permissions</h3>
|
||
<ul class="perms-list">
|
||
<li>
|
||
<span class="perm-key">Workspace</span>
|
||
<ul class="nested-perms">
|
||
<li>
|
||
<span class="perm-val" data-perm="workspace.tools"></span>
|
||
<span class="perm-key">Tools</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<span class="perm-key">Chat</span>
|
||
<ul class="nested-perms">
|
||
<li>
|
||
<span class="perm-val" data-perm="chat.file_upload"></span>
|
||
<span class="perm-key">File Upload</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<span class="perm-key">Features</span>
|
||
<ul class="nested-perms">
|
||
<li>
|
||
<span class="perm-val" data-perm="features.web_search"></span>
|
||
<span class="perm-key">Web Search</span>
|
||
</li>
|
||
<li>
|
||
<span class="perm-val" data-perm="features.code_interpreter"></span>
|
||
<span class="perm-key">Code Interpreter</span>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="userLogoutBtn" aria-variant="danger">Logout</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Login panel -->
|
||
<section class="auth-card">
|
||
<h2>Login</h2>
|
||
<p id="authStatus" role="status">not logged in</p>
|
||
|
||
<form id="loginForm" autocomplete="off">
|
||
<label>
|
||
Username
|
||
<input id="username" name="username" required />
|
||
</label>
|
||
|
||
<label>
|
||
Password
|
||
<input id="password" name="password" type="password" required />
|
||
</label>
|
||
|
||
<div class="row actions">
|
||
<button type="submit">Login</button>
|
||
<button type="button" id="logoutBtn">Logout</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</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">start</th>
|
||
<th scope="col">template</th>
|
||
<th scope="col">prompt</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 class="row">
|
||
<div>
|
||
<label for="templateName">workflow template</label>
|
||
<input id="templateName" name="templateName" type="text" required
|
||
placeholder="report-template" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div>
|
||
<label for="startAt">start at (optional)</label>
|
||
<input id="startAt" name="startAt" type="datetime-local" />
|
||
</div>
|
||
<div>
|
||
<label for="cron">cron (min hour day month day-of-week) *</label>
|
||
<input id="cron" name="cron" type="text" placeholder="30 9 * * *" />
|
||
<div id="cronError"></div>
|
||
</div>
|
||
|
||
<div style="justify-content: center; height: 100%;">
|
||
<div class="warning-box">
|
||
<!-- exclamation icon -->
|
||
<svg class="warning-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-13h-2v6h2V7zm0 8h-2v2h2v-2z" />
|
||
</svg>
|
||
<span>Cron is in EST (America/New_York)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="params">parameters (json object)</label>
|
||
<div id="params" name="params" placeholder=''></div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="label">Run Settings</div>
|
||
<ul class="row">
|
||
<li class="checkbox">
|
||
<label>
|
||
<input id="clusterScope" type="checkbox" /> template is cluster-scoped
|
||
</label>
|
||
</li>
|
||
<li class="checkbox">
|
||
<label>
|
||
<input id="oneShot" type="checkbox" /> stop after first success (one-shot)
|
||
</label>
|
||
</li>
|
||
</ul>
|
||
|
||
<details class="templates">
|
||
<summary class="muted">available workflow templates</summary>
|
||
<ul id="templatesUl" class="muted"></ul>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div>
|
||
<label for="model-select">Model</label>
|
||
<select id="model-select" name="model">
|
||
<option value="">choose a model</option>
|
||
</select>
|
||
<button id="selected-model-card" type="button" class="selected-model-card" hidden></button>
|
||
</div>
|
||
<div>
|
||
<label id="tools-select-label">Tools</label>
|
||
<div id="tools-select" class="tool-pill-group" role="listbox"
|
||
aria-labelledby="tools-select-label" aria-multiselectable="true"></div>
|
||
<input type="hidden" id="tools-select-input" name="tools" value="" />
|
||
|
||
<section class="feature-section" aria-labelledby="features-select-label">
|
||
<header class="feature-section-header">
|
||
<h3 id="features-select-label">Features</h3>
|
||
<p class="muted">Toggle optional capabilities for the run.</p>
|
||
</header>
|
||
<div id="features-select" class="feature-pill-group" role="listbox"
|
||
aria-labelledby="features-select-label" aria-multiselectable="true"></div>
|
||
<input type="hidden" id="features-select-input" name="features" value="{}" />
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="form-subsection">
|
||
<h3>Prompt</h3>
|
||
<p class="muted" style="margin-top: 0;">Supports Markdown formatting.</p>
|
||
<textarea id="prompt" name="prompt" placeholder="Write your prompt in Markdown..."
|
||
rows="10"></textarea>
|
||
</section>
|
||
|
||
<section class="form-subsection">
|
||
<h3>Attachments</h3>
|
||
<p class="muted" style="margin-top: 0;">Optional files are uploaded with the schedule and shared with the run.</p>
|
||
<label class="file-input">
|
||
<span class="file-input-label">Select file(s)</span>
|
||
<input type="file" id="scheduleFiles" name="scheduleFiles" multiple />
|
||
</label>
|
||
<ul id="scheduleFilesList" class="file-list"></ul>
|
||
</section>
|
||
|
||
<div>
|
||
<hr style="width: 100%;">
|
||
|
||
<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>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- scripts -->
|
||
<script src="modelList.js"></script>
|
||
<script src="toolList.js"></script>
|
||
<script src="featureList.js"></script>
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
|
||
</html>
|