beavergram/frontend/src/lib/components/jobs/JobList.svelte

<script lang="ts">
  import { cancelJob, listJobs } from "$lib/api/endpoints";
  import type { JobStatus, JobView } from "$lib/api/types";
  import Spinner from "$lib/components/ui/Spinner.svelte";
  import { formatFull } from "$lib/format/datetime";
  import { accounts } from "$lib/stores/accounts.svelte";
  import { toasts } from "$lib/stores/toasts.svelte";

  interface Props {
    version?: number;
  }

  let { version = 0 }: Props = $props();

  const POLL_MS = 2000;

  const KIND_LABELS: Record<string, string> = {
    backfill: "Бэкфилл",
    backfill_stories: "Бэкфилл сторис",
    enrich_chat: "Обогащение чата",
    fetch_avatar: "Аватар",
    fetch_custom_emoji: "Кастом-эмодзи",
    fetch_media: "Докачка медиа",
    sync_dialogs: "Синхронизация диалогов",
    transcribe: "Расшифровка",
  };

  const STATUS_LABELS: Record<JobStatus, string> = {
    canceled: "Отменено",
    done: "Готово",
    failed: "Ошибка",
    paused: "Пауза",
    pending: "В очереди",
    running: "Выполняется",
  };

  let jobs = $state<JobView[]>([]);
  let loading = $state(true);
  let canceling = $state<number | null>(null);
  let timer: ReturnType<typeof setTimeout> | null = null;

  function isActive(list: JobView[]): boolean {
    return list.some((j) => j.status === "pending" || j.status === "running");
  }

  function canCancel(job: JobView): boolean {
    return job.status === "pending" || job.status === "running";
  }

  async function cancel(job: JobView) {
    if (canceling !== null) {
      return;
    }
    canceling = job.id;
    try {
      await cancelJob(job.id);
      await load();
    } catch {
      toasts.error("Не удалось остановить задачу");
    } finally {
      canceling = null;
    }
  }

  function schedule() {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    if (isActive(jobs)) {
      timer = setTimeout(() => {
        load().catch(() => undefined);
      }, POLL_MS);
    }
  }

  async function load() {
    jobs = await listJobs();
    loading = false;
    schedule();
  }

  function kindLabel(job: JobView): string {
    const label = KIND_LABELS[job.kind] ?? job.kind;
    if (job.kind !== "backfill") {
      return label;
    }
    return job.params.full ? `${label} (полный)` : `${label} (новые)`;
  }

  function processed(job: JobView): number | null {
    const value = job.progress.processed ?? job.progress.saved;
    return typeof value === "number" ? value : null;
  }

  function chatId(job: JobView): number | null {
    const value = job.params.chat_id ?? job.params.peer_id;
    return typeof value === "number" ? value : null;
  }

  $effect(() => {
    if (version >= 0 && accounts.selectedId !== null) {
      load().catch(() => {
        loading = false;
      });
    }
    return () => {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
    };
  });
</script>

{#if loading}
  <div class="state"><Spinner /></div>
{:else if jobs.length === 0}
  <div class="state empty">Задач нет</div>
{:else}
  <div class="jobs">
    {#each jobs as job (job.id)}
      <div class="job">
        <div class="job-head">
          <span class="kind">{kindLabel(job)}</span>
          {#if canCancel(job)}
            <button
              class="stop"
              disabled={canceling === job.id}
              onclick={() => cancel(job)}
              type="button"
            >
              Стоп
            </button>
          {/if}
          <span class="badge {job.status}">{STATUS_LABELS[job.status]}</span>
        </div>
        <div class="meta">
          {#if chatId(job) !== null}
            <span>чат {chatId(job)}</span>
          {/if}
          {#if processed(job) !== null}
            <span>обработано {processed(job)}</span>
          {/if}
          {#if job.flood_waits > 0}
            <span>flood-wait {job.flood_waits}</span>
          {/if}
          <span class="time">{formatFull(job.created_at)}</span>
        </div>
        {#if job.error}
          <div class="error">{job.error}</div>
        {/if}
      </div>
    {/each}
  </div>
{/if}

<style lang="scss">
  .state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;

    &.empty {
      font-size: 0.9375rem;
      color: var(--color-text-secondary);
    }
  }

  .jobs {
    display: flex;
    flex-direction: column;
  }

  .job {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-borders);
  }

  .job-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .kind {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
  }

  .badge {
    flex-shrink: 0;

    padding: 0.0625rem 0.5rem;
    border-radius: 0.625rem;

    font-size: 0.75rem;
    color: var(--color-white);
    background-color: var(--color-text-secondary);

    &.pending {
      background-color: var(--color-text-secondary);
    }

    &.running {
      background-color: var(--color-primary);
    }

    &.done {
      background-color: var(--color-green);
    }

    &.failed {
      background-color: var(--color-error);
    }

    &.canceled {
      background-color: var(--color-text-secondary);
    }
  }

  .stop {
    flex-shrink: 0;

    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--color-error);
    border-radius: 0.625rem;

    font-size: 0.75rem;
    color: var(--color-error);
    cursor: pointer;
    background-color: transparent;

    &:hover:not(:disabled) {
      color: var(--color-white);
      background-color: var(--color-error);
    }

    &:disabled {
      opacity: 0.5;
      cursor: default;
    }
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
  }

  .time {
    margin-left: auto;
  }

  .error {
    overflow: hidden;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-error);
  }
</style>