@@ -121,6 +177,31 @@ export async function renderNewJob() {
}
const form = document.getElementById("new-job-form");
+ const recurrenceFields = document.getElementById("recurrence-fields");
+ const weeklyField = form.querySelector("[data-weekly-field]");
+ const monthlyField = form.querySelector("[data-monthly-field]");
+ const recurrenceKindInputs = Array.from(form.querySelectorAll('input[name="recurrenceKind"]'));
+ const updateScheduleFields = () => {
+ const isRecurring = form.elements.scheduleType.value === "recurring";
+ const recurrenceKind = getRecurrenceKind(form);
+ recurrenceFields.hidden = !isRecurring;
+ weeklyField.hidden = !isRecurring || recurrenceKind !== "weekly";
+ monthlyField.hidden = !isRecurring || recurrenceKind !== "monthly";
+ recurrenceKindInputs.forEach((input) => {
+ input.required = isRecurring;
+ });
+ form.elements.scheduleTime.required = isRecurring;
+ form.elements.scheduleWeekday.required = isRecurring && recurrenceKind === "weekly";
+ form.elements.scheduleMonthday.required = isRecurring && recurrenceKind === "monthly";
+ };
+ form.querySelectorAll('input[name="scheduleType"]').forEach((input) => {
+ input.addEventListener("change", updateScheduleFields);
+ });
+ recurrenceKindInputs.forEach((input) => {
+ input.addEventListener("change", updateScheduleFields);
+ });
+ updateScheduleFields();
+
form.querySelector('[data-pick="src"]').addEventListener("click", () => {
openFolderPicker({
location: form.elements.srcRemote.value,
@@ -143,6 +224,7 @@ export async function renderNewJob() {
const dstRemote = form.elements.dstRemote.value;
const srcPath = form.elements.srcPath.value.trim();
const dstPath = form.elements.dstPath.value.trim();
+ const scheduleType = form.elements.scheduleType.value;
try {
const src = buildJobFs(srcRemote, srcPath);
const dst = buildJobFs(dstRemote, dstPath);
@@ -154,18 +236,24 @@ export async function renderNewJob() {
toast(t("error.no_paths_selected"), "error");
return;
}
- const body = {
- srcFs: src,
- dstFs: dst,
- _group: `${WEBGUI_JOB_GROUP_PREFIX}/${action}`,
- };
- if (action === "move") body.deleteEmptySrcDirs = true;
+
+ if (scheduleType === "recurring") {
+ const schedule = readRecurringSchedule(form);
+ const job = await createRecurringJob({
+ action,
+ src,
+ dst,
+ ...schedule,
+ });
+ toast(t("jobs.recurring_saved", job && job.id), "success");
+ location.hash = "#/jobs";
+ return;
+ }
+
+ const body = buildTransferBody(action, src, dst);
const res = await postAsync(`sync/${action}`, body);
const jobid = res && res.jobid;
- if (jobid != null) {
- rememberJob(jobid, { action, src, dst });
- }
- toast(t("jobs.started", action, jobid), "success");
+ toast(t("jobs.started_once", action, jobid), "success");
location.hash = "#/jobs";
} catch (e) {
toast(`${t("jobs.start_failed")}: ${e.message}`, "error");
@@ -173,6 +261,37 @@ export async function renderNewJob() {
});
}
+function renderWeekdayOptions() {
+ return [
+ [1, t("jobs.weekday_monday")],
+ [2, t("jobs.weekday_tuesday")],
+ [3, t("jobs.weekday_wednesday")],
+ [4, t("jobs.weekday_thursday")],
+ [5, t("jobs.weekday_friday")],
+ [6, t("jobs.weekday_saturday")],
+ [7, t("jobs.weekday_sunday")],
+ ]
+ .map(([value, label]) => `
`)
+ .join("");
+}
+
+function renderMonthdayOptions() {
+ return Array.from({ length: 31 }, (_, index) => {
+ const day = index + 1;
+ return `
`;
+ }).join("");
+}
+
+function buildTransferBody(action, src, dst) {
+ const body = {
+ srcFs: src,
+ dstFs: dst,
+ _group: `${WEBGUI_JOB_GROUP_PREFIX}/${action}`,
+ };
+ if (action === "move") body.deleteEmptySrcDirs = true;
+ return body;
+}
+
function buildJobFs(location, rawPath) {
if (location === LOCAL_FS_VALUE) {
return rawPath.trim();
@@ -181,6 +300,39 @@ function buildJobFs(location, rawPath) {
return remotePath ? `${location}${remotePath}` : location;
}
+function readRecurringSchedule(form) {
+ const scheduleKind = getRecurrenceKind(form);
+ const scheduleTime = form.elements.scheduleTime.value;
+ if (!["daily", "weekly", "monthly"].includes(scheduleKind)) {
+ throw new Error(t("error.no_schedule_selected"));
+ }
+ if (!/^\d{2}:\d{2}$/.test(scheduleTime)) {
+ throw new Error(t("error.invalid_schedule_time"));
+ }
+ const schedule = {
+ scheduleKind,
+ scheduleTime,
+ timezoneOffsetMinutes: -new Date().getTimezoneOffset(),
+ };
+ if (scheduleKind === "weekly") {
+ schedule.scheduleWeekday = Number(form.elements.scheduleWeekday.value);
+ if (!Number.isInteger(schedule.scheduleWeekday) || schedule.scheduleWeekday < 1 || schedule.scheduleWeekday > 7) {
+ throw new Error(t("error.no_schedule_selected"));
+ }
+ }
+ if (scheduleKind === "monthly") {
+ schedule.scheduleMonthday = Number(form.elements.scheduleMonthday.value);
+ if (!Number.isInteger(schedule.scheduleMonthday) || schedule.scheduleMonthday < 1 || schedule.scheduleMonthday > 31) {
+ throw new Error(t("error.no_schedule_selected"));
+ }
+ }
+ return schedule;
+}
+
+function getRecurrenceKind(form) {
+ return form.elements.recurrenceKind.value || "daily";
+}
+
async function openFolderPicker({ location, pathInput, title }) {
const root = document.getElementById("modal-root");
let current = initialPickerPath(location, pathInput.value);
@@ -303,10 +455,21 @@ async function refreshJobs() {
const card = document.getElementById("jobs-card");
if (!card) return false;
- const trackedJobs = listJobMeta();
- const jobIds = trackedJobs.map((job) => job.jobid);
+ let jobs = [];
+ try {
+ jobs = await listRecurringJobs();
+ } catch (e) {
+ card.innerHTML = `
+
+ `;
+ return false;
+ }
- if (jobIds.length === 0) {
+ if (jobs.length === 0) {
card.innerHTML = `
${t("jobs.empty_title")}
@@ -316,51 +479,24 @@ async function refreshJobs() {
return false;
}
- const statuses = await Promise.all(
- jobIds.map((id) =>
- post("job/status", { jobid: id })
- .then((status) => ({ ...status, jobid: id }))
- .catch((e) => {
- if (e.message.includes("job not found")) {
- forgetJob(id);
- expandedJobs.delete(id);
- return null;
- }
- return {
- jobid: id,
- error: e.message,
- finished: true,
- };
- }),
- ),
- );
-
- const tracked = statuses.filter(Boolean);
- if (tracked.length === 0) {
- card.innerHTML = `
-
- `;
- return false;
- }
-
- card.innerHTML = renderJobTable(tracked);
+ card.innerHTML = renderJobTable(jobs);
card.querySelectorAll("[data-detail]").forEach((btn) => {
btn.addEventListener("click", () => onToggleDetails(parseInt(btn.dataset.detail, 10)));
});
+ card.querySelectorAll("[data-start]").forEach((btn) => {
+ btn.addEventListener("click", () => onStartAgain(parseInt(btn.dataset.start, 10)));
+ });
card.querySelectorAll("[data-stop]").forEach((btn) => {
btn.addEventListener("click", () => onStop(parseInt(btn.dataset.stop, 10)));
});
card.querySelectorAll("[data-delete]").forEach((btn) => {
btn.addEventListener("click", () => onDelete(parseInt(btn.dataset.delete, 10)));
});
- return tracked.some((status) => !status.finished);
+ return jobs.length > 0;
}
function renderJobTable(statuses) {
- statuses.sort((a, b) => (b.jobid ?? 0) - (a.jobid ?? 0));
+ statuses.sort((a, b) => (b.id ?? 0) - (a.id ?? 0));
const rows = statuses.map(renderJobRows).join("");
@@ -371,6 +507,7 @@ function renderJobTable(statuses) {
${t("jobs.col.id")} |
${t("jobs.col.job")} |
${t("jobs.col.status")} |
+
${t("jobs.col.next_run")} |
${t("jobs.col.progress")} |
${t("jobs.col.speed")} |
${t("jobs.col.eta")} |
@@ -388,42 +525,36 @@ function renderJobTable(statuses) {
function renderJobRows(s) {
const row = renderJobRow(s);
- if (!expandedJobs.has(Number(s.jobid))) {
+ if (!expandedJobs.has(Number(s.id))) {
return row;
}
return row + renderJobDetailsRow(s);
}
-function renderJobRow(s) {
- const p = s.progress || {};
- const id = s.jobid;
- const finished = s.finished;
- const success = s.success;
- const errored = !!s.error;
+function renderJobRow(job) {
+ const snapshot = job.statusSnapshot || {};
+ const p = snapshot.progress || {};
+ const id = job.id;
+ const running = !!job.running;
+ const jobid = job.currentJobid || job.lastJobid;
- let badge;
- if (!finished) {
- badge = `
${t("jobs.status.running")}`;
- } else if (errored || (!success && errored)) {
- badge = `
${t("jobs.status.failed")}`;
- } else if (success) {
- badge = `
${t("jobs.status.done")}`;
- } else {
- badge = `
${t("jobs.status.finished")}`;
- }
+ const badge = renderStatusBadge(job.status);
+ const jobCell = `
+
+ ${escapeHtml(job.action)}
+
+ ${escapeHtml(job.src)}
+ →
+ ${escapeHtml(job.dst)}
+
+
`;
- const meta = getJobMeta(id);
- const jobCell = meta
- ? `
-
- ${escapeHtml(meta.action)}
-
- ${escapeHtml(meta.src)}
- →
- ${escapeHtml(meta.dst)}
-
-
`
- : `
${t("jobs.submitted_cli")}`;
+ const scheduleCell = `
+
+ ${escapeHtml(formatDateTime(job.nextRunAt))}
+ ${escapeHtml(formatSchedule(job))}
+
+ `;
const pct = p && p.totalBytes > 0 ? Math.min(100, (p.bytes / p.totalBytes) * 100) : 0;
const progress = `
@@ -436,24 +567,32 @@ function renderJobRow(s) {
`;
const detailBtn = `
`;
- const stopBtn = !finished
+ const startBtn = running
+ ? ""
+ : `
`;
+ const stopBtn = running
? `
`
: "";
const deleteBtn = `
`;
return `
- | ${id} |
+
+ ${id}
+ ${jobid ? `
job ${escapeHtml(jobid)}` : ""}
+ |
${jobCell} |
${badge} |
+ ${scheduleCell} |
${progress} |
- ${finished ? "—" : escapeHtml(formatSpeed(p.speed || 0))} |
- ${finished ? "—" : escapeHtml(formatDuration(p.eta || 0))} |
+ ${running ? escapeHtml(formatSpeed(p.speed || 0)) : "—"} |
+ ${running ? escapeHtml(formatDuration(p.eta || 0)) : "—"} |
${p.transfers ?? 0} / ${p.totalTransfers ?? 0} |
${(p.errors && p.errors.length) || 0} |
${detailBtn}
+ ${startBtn}
${stopBtn}
${deleteBtn}
@@ -462,26 +601,48 @@ function renderJobRow(s) {
`;
}
-function renderJobDetailsRow(s) {
- const id = s.jobid;
+function renderStatusBadge(status) {
+ switch (status) {
+ case "running":
+ return `${t("jobs.status.running")}`;
+ case "failed":
+ return `${t("jobs.status.failed")}`;
+ case "done":
+ return `${t("jobs.status.done")}`;
+ case "stopped":
+ return `${t("jobs.status.stopped")}`;
+ case "scheduled":
+ return `${t("jobs.status.scheduled")}`;
+ default:
+ return `${t("jobs.status.finished")}`;
+ }
+}
+
+function renderJobDetailsRow(job) {
+ const id = job.id;
+ const snapshot = job.statusSnapshot || {};
+ const jobid = job.currentJobid || job.lastJobid || "";
const details = [
- [t("jobs.detail_id"), id],
- [t("jobs.detail_status"), detailStatus(s)],
- [t("jobs.detail_error"), s.error || t("jobs.detail_none")],
- [t("jobs.detail_started"), formatDateTime(s.startTime)],
- [t("jobs.detail_finished"), s.finished ? formatDateTime(s.endTime) : t("jobs.status.running")],
- [t("jobs.detail_duration"), formatDuration(s.duration || 0)],
- [t("jobs.detail_group"), s.group || ""],
- [t("jobs.detail_execute_id"), s.executeId || ""],
+ [t("jobs.detail_schedule_id"), id],
+ [t("jobs.detail_id"), jobid],
+ [t("jobs.detail_status"), detailStatus(job)],
+ [t("jobs.detail_error"), job.error || snapshot.error || t("jobs.detail_none")],
+ [t("jobs.detail_started"), formatDateTime(job.startedAt || snapshot.startTime)],
+ [t("jobs.detail_finished"), job.running ? t("jobs.status.running") : formatDateTime(job.finishedAt || snapshot.endTime)],
+ [t("jobs.detail_duration"), formatDuration(snapshot.duration || 0)],
+ [t("jobs.detail_next_run"), formatDateTime(job.nextRunAt)],
+ [t("jobs.detail_schedule"), formatSchedule(job)],
+ [t("jobs.detail_group"), snapshot.group || ""],
+ [t("jobs.detail_execute_id"), snapshot.executeId || ""],
];
- const output = s.output && Object.keys(s.output).length > 0
- ? JSON.stringify(s.output, null, 2)
+ const output = snapshot && Object.keys(snapshot).length > 0
+ ? JSON.stringify(snapshot, null, 2)
: "";
return `
|
|
-
+ |
${details.map(([label, value]) => `
@@ -503,17 +664,16 @@ function renderJobDetailsRow(s) {
`;
}
-function detailStatus(s) {
- if (!s.finished) return t("jobs.status.running");
- if (s.error) return t("jobs.status.failed");
- if (s.success) return t("jobs.status.done");
- return t("jobs.status.finished");
+function detailStatus(job) {
+ const status = job.status || "scheduled";
+ const key = `jobs.status.${status}`;
+ return t(key) === key ? status : t(key);
}
async function onStop(jobid) {
if (!confirm(t("jobs.stop_confirm", jobid))) return;
try {
- await post("job/stop", { jobid });
+ await stopRecurringJob(jobid);
toast(t("jobs.stopped", jobid), "success");
await refreshJobs();
} catch (e) {
@@ -530,11 +690,25 @@ async function onToggleDetails(jobid) {
await refreshJobs();
}
+async function onStartAgain(jobid) {
+ try {
+ await runRecurringJobNow(jobid);
+ toast(t("jobs.restarted", jobid), "success");
+ await refreshJobs();
+ } catch (e) {
+ toast(`${t("jobs.restart_failed")}: ${e.message}`, "error");
+ }
+}
+
async function onDelete(jobid) {
if (!confirm(t("jobs.delete_confirm", jobid))) return;
- forgetJob(jobid);
- expandedJobs.delete(jobid);
- await refreshJobs();
+ try {
+ await deleteRecurringJob(jobid);
+ expandedJobs.delete(jobid);
+ await refreshJobs();
+ } catch (e) {
+ toast(`${t("jobs.delete_failed")}: ${e.message}`, "error");
+ }
}
function startPolling() {
@@ -548,7 +722,7 @@ function startPolling() {
if (!hasRunning) {
stopPolling();
}
- }, 1500);
+ }, 5000);
}
function stopPolling() {
@@ -581,3 +755,30 @@ function formatDateTime(value) {
if (Number.isNaN(date.getTime())) return String(value);
return date.toLocaleString();
}
+
+function formatSchedule(job) {
+ const time = job.scheduleTime || "";
+ switch (job.scheduleKind) {
+ case "daily":
+ return t("jobs.schedule_label_daily", time);
+ case "weekly":
+ return t("jobs.schedule_label_weekly", weekdayName(job.scheduleWeekday), time);
+ case "monthly":
+ return t("jobs.schedule_label_monthly", job.scheduleMonthday, time);
+ default:
+ return "";
+ }
+}
+
+function weekdayName(value) {
+ const names = {
+ 1: t("jobs.weekday_monday"),
+ 2: t("jobs.weekday_tuesday"),
+ 3: t("jobs.weekday_wednesday"),
+ 4: t("jobs.weekday_thursday"),
+ 5: t("jobs.weekday_friday"),
+ 6: t("jobs.weekday_saturday"),
+ 7: t("jobs.weekday_sunday"),
+ };
+ return names[Number(value)] || "";
+}
diff --git a/webgui/web/assets/js/views/remotes.js b/webgui/web/assets/js/views/remotes.js
index 41d904c..710e097 100644
--- a/webgui/web/assets/js/views/remotes.js
+++ b/webgui/web/assets/js/views/remotes.js
@@ -1,8 +1,8 @@
// views/remotes.js — connector-tile grid of configured remotes with CRUD.
import { post } from "../rc.js";
-import { getState, setState, toast } from "../state.js";
-import { t } from "../i18n.js";
+import { getState, setState, toast } from "../state.js?v=recurring-jobs-5";
+import { t } from "../i18n.js?v=recurring-jobs-5";
export async function renderRemotes() {
const app = document.getElementById("app");
diff --git a/webgui/web/assets/styles/components.css b/webgui/web/assets/styles/components.css
index ae174de..8ab07c4 100644
--- a/webgui/web/assets/styles/components.css
+++ b/webgui/web/assets/styles/components.css
@@ -1,5 +1,9 @@
/* Component library — all UI primitives map to DESIGN.md tokens. */
+[hidden] {
+ display: none !important;
+}
+
/* ---------- Top Navigation ---------- */
.top-nav {
display: flex;
@@ -318,6 +322,63 @@
flex-shrink: 0;
}
+.input-action .select {
+ flex: 0 0 150px;
+ width: auto;
+}
+
+.segmented {
+ display: inline-flex;
+ width: fit-content;
+ padding: 3px;
+ border: 1px solid var(--color-hairline);
+ border-radius: var(--radius-md);
+ background-color: var(--color-surface-soft);
+}
+
+.segmented label {
+ position: relative;
+ color: var(--color-muted);
+}
+
+.segmented input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.segmented span {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 92px;
+ height: 32px;
+ padding: 0 var(--space-sm);
+ border-radius: var(--radius-sm);
+ cursor: pointer;
+ font: var(--typo-button);
+}
+
+.segmented input:checked + span {
+ background-color: var(--color-canvas);
+ color: var(--color-ink);
+ box-shadow: 0 1px 2px rgba(20, 20, 19, 0.06);
+}
+
+.segmented-wide {
+ max-width: 100%;
+ flex-wrap: wrap;
+}
+
+.recurrence-fields {
+ display: grid;
+ gap: var(--space-md);
+}
+
+.recurrence-fields[hidden] {
+ display: none;
+}
+
/* ---------- Badges ---------- */
.badge {
display: inline-flex;
diff --git a/webgui/web/index.html b/webgui/web/index.html
index 7899c9f..6ccfccc 100644
--- a/webgui/web/index.html
+++ b/webgui/web/index.html
@@ -7,7 +7,7 @@
-
+
|