ddc/web/static/js/jobs.js

import { button, element } from "./dom.js";
import { formatBytes, formatDuration, percentOf, statusLabels } from "./format.js";

const activeStatuses = new Set(["queued", "downloading", "extracting", "moving"]);
const pausableStatuses = new Set(["queued", "downloading"]);
const speedSmoothing = 0.3;
const speedSamples = new Map();

export function isActive(job) {
  return activeStatuses.has(job.status);
}

export function matchesFilter(job, filter) {
  if (filter === "all") return true;
  if (filter === "active") return isActive(job);
  return job.status === filter;
}

export function updateSpeeds(jobs) {
  const now = performance.now();
  const seenIds = new Set();

  for (const job of jobs) {
    seenIds.add(job.id);
    const previous = speedSamples.get(job.id);
    let speed = 0;
    if (previous && job.bytesDone >= previous.bytes && now > previous.time) {
      const instantSpeed = ((job.bytesDone - previous.bytes) * 1000) / (now - previous.time);
      speed = previous.speed > 0 ? previous.speed + speedSmoothing * (instantSpeed - previous.speed) : instantSpeed;
    }
    speedSamples.set(job.id, { bytes: job.bytesDone, time: now, speed });
  }

  for (const id of speedSamples.keys()) {
    if (!seenIds.has(id)) speedSamples.delete(id);
  }
}

function displayRank(job) {
  if (isActive(job) && !job.queuePosition) return 0;
  if (job.queuePosition) return 1;
  return 2;
}

function sortForDisplay(jobs) {
  return [...jobs].sort((first, second) => {
    const rankDifference = displayRank(first) - displayRank(second);
    if (rankDifference !== 0) return rankDifference;
    if (first.queuePosition && second.queuePosition) return first.queuePosition - second.queuePosition;
    return 0;
  });
}

export function renderJobs(container, jobs, selectedId, handlers) {
  const queueLength = jobs.filter((job) => job.queuePosition).length;
  const context = { ...handlers, queueLength };
  container.replaceChildren(...sortForDisplay(jobs).map((job) => renderJob(job, job.id === selectedId, context)));
}

function renderJob(job, selected, handlers) {
  const item = element("li", selected ? "job selected" : "job");

  const header = element("div", "job-header");
  header.append(
    element("span", "job-name", job.fileName || job.sourceUrl),
    element("span", `badge badge-${job.status}`, statusLabels[job.status] || job.status),
  );
  item.append(header);

  if (job.sourceUrl) item.append(element("p", "job-source muted", job.sourceUrl));
  if (job.moveTarget && job.status !== "completed") {
    item.append(element("p", "job-source muted", `Download to: ${job.moveTarget}`));
  }
  if (job.queuePosition) {
    item.append(element("p", "job-source muted", `Queue position ${job.queuePosition} of ${handlers.queueLength}`));
  }
  if (job.status !== "completed") item.append(renderProgress(job));
  if (job.message) {
    const messageClass = job.status === "failed" ? "job-message error" : "job-message muted";
    item.append(element("p", messageClass, job.message));
  }
  item.append(renderActions(job, handlers));
  return item;
}

function renderProgress(job) {
  const wrapper = element("div");
  const track = element("div", "progress");
  const bar = element("div", "progress-bar");
  const percent = percentOf(job.bytesDone, job.bytesTotal);

  if (percent === null && isActive(job)) {
    bar.classList.add("indeterminate");
  } else {
    const width = percent === null ? (job.status === "ready" ? 100 : 0) : percent;
    bar.style.width = `${width}%`;
  }

  track.append(bar);
  wrapper.append(track, element("div", "progress-text muted", progressText(job, percent)));
  return wrapper;
}

function progressText(job, percent) {
  const parts = [];
  if (job.bytesTotal > 0) {
    parts.push(`${formatBytes(job.bytesDone)} of ${formatBytes(job.bytesTotal)}`);
  } else if (job.bytesDone > 0) {
    parts.push(formatBytes(job.bytesDone));
  }
  if (percent !== null) parts.push(`${percent.toFixed(1)}%`);

  const sample = speedSamples.get(job.id);
  if (isActive(job) && sample && sample.speed > 0) {
    parts.push(`${formatBytes(sample.speed)}/s`);
    if (job.bytesTotal > job.bytesDone) {
      parts.push(`${formatDuration((job.bytesTotal - job.bytesDone) / sample.speed)} left`);
    }
  }
  return parts.join("  |  ");
}

function renderActions(job, handlers) {
  const actions = element("div", "job-actions");
  if (job.status === "ready") {
    actions.append(button("Browse files", "secondary small", () => handlers.onBrowse(job)));
  }
  if (job.queuePosition > 1) {
    actions.append(button("Start next", "secondary small", () => handlers.onReorder(job, "first")));
    actions.append(button("Move up", "secondary small", () => handlers.onReorder(job, "up")));
  }
  if (job.queuePosition && job.queuePosition < handlers.queueLength) {
    actions.append(button("Move down", "secondary small", () => handlers.onReorder(job, "down")));
  }
  if (pausableStatuses.has(job.status)) {
    actions.append(button("Pause", "secondary small", () => handlers.onPause(job)));
  }
  if (job.status === "paused" || job.status === "failed") {
    const label = job.status === "paused" ? "Resume" : "Retry";
    actions.append(button(label, "secondary small", () => handlers.onResume(job)));
  }
  if (job.status !== "moving") {
    actions.append(button(isActive(job) ? "Cancel" : "Remove", "danger small", () => handlers.onDelete(job)));
  }
  return actions;
}