KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): pause and resume jobs (#2125)

Browse Source 
* feat(web): pause and resume jobs

* add bg color to status instead of using badge

* styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Michel Heusschen
2023-04-01 06:53:20 +02:00
committed by GitHub
parent 23e4449f27
commit aaaf1a6cf8
7 changed files with 219 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/lib/components/admin-page/jobs/job-tile.svelte
View File

@@ -1,52 +1,60 @@
<script lang="ts">
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
import Play from 'svelte-material-icons/Play.svelte';
import Pause from 'svelte-material-icons/Pause.svelte';
import FastForward from 'svelte-material-icons/FastForward.svelte';
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
import { locale } from '$lib/stores/preferences.store';
import { createEventDispatcher } from 'svelte';
import { JobCountsDto } from '@api';
import { JobCommand, JobCommandDto, JobCountsDto } from '@api';
import Badge from '$lib/components/elements/badge.svelte';
export let title: string;
export let subtitle: string;
export let subtitle: string | undefined = undefined;
export let jobCounts: JobCountsDto;
/**
* Show options to run job on all assets of just missing ones
*/
export let showOptions = true;
export let allowForceCommand = true;
$: isRunning = jobCounts.active > 0 || jobCounts.waiting > 0;
$: waitingCount = jobCounts.waiting + jobCounts.paused;
$: isPause = jobCounts.paused > 0;
const dispatch = createEventDispatcher();
const run = (force: boolean) => {
dispatch('click', { force });
};
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
</script>
<div class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray">
<div id="job-info" class="w-[70%] p-9">
<div class="flex flex-col gap-2">
<div class="text-xl font-semibold text-immich-primary dark:text-immich-dark-primary">
{title.toUpperCase()}
<div
class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray transition-all
{isRunning ? 'dark:bg-immich-primary/30 bg-immich-primary/20' : ''}
{isPause ? 'dark:bg-yellow-100/30 bg-yellow-500/20' : ''}"
>
<div id="job-info" class="w-full p-9">
<div class="flex flex-col gap-2 ">
<div
class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
>
<span>{title.toUpperCase()}</span>
<div class="flex gap-2">
{#if jobCounts.failed > 0}
<Badge color="danger">
{jobCounts.failed.toLocaleString($locale)} failed
</Badge>
{/if}
</div>
</div>
{#if subtitle.length > 0}
<div class="text-sm dark:text-white">{subtitle}</div>
{#if subtitle}
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
{/if}
<div class="text-sm dark:text-white"><slot /></div>
<div class="text-sm dark:text-white">
<slot />
</div>
<div class="flex w-full mt-4">
<div class="flex w-full max-w-md mt-2">
<div
class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
>
<p>Active</p>
<p class="text-2xl">
{#if jobCounts.active !== undefined}
{jobCounts.active.toLocaleString($locale)}
{:else}
<LoadingSpinner />
{/if}
{jobCounts.active.toLocaleString($locale)}
</p>
</div>
@@ -54,49 +62,50 @@
class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
>
<p class="text-2xl">
{#if jobCounts.waiting !== undefined}
{jobCounts.waiting.toLocaleString($locale)}
{:else}
<LoadingSpinner />
{/if}
{waitingCount.toLocaleString($locale)}
</p>
<p>Waiting</p>
</div>
</div>
</div>
</div>
<div id="job-action" class="flex flex-col">
<div id="job-action" class="flex flex-col rounded-r-3xl w-32 overflow-hidden">
{#if isRunning}
<button
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl disabled:cursor-not-allowed"
disabled
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
>
<LoadingSpinner />
<Pause size="48" /> PAUSE
</button>
{:else if jobCounts.paused > 0}
<button
class="job-play-button bg-gray-300 dark:bg-gray-600/90"
on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
>
<span class=" {isPause ? 'animate-pulse' : ''}">
<FastForward size="48" /> RESUME
</span>
</button>
{:else if allowForceCommand}
<button
class="job-play-button bg-gray-300 dark:bg-gray-600"
on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}
>
<AllInclusive size="18" /> ALL
</button>
<button
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
>
<SelectionSearch size="18" /> MISSING
</button>
{:else}
<button
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90"
on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
>
<Play size="48" /> START
</button>
{/if}
{#if !isRunning}
{#if showOptions}
<button
class="job-play-button bg-gray-300 dark:bg-gray-600 rounded-tr-3xl"
on:click={() => run(true)}
>
<AllInclusive size="18" /> ALL
</button>
<button
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl"
on:click={() => run(false)}
>
<SelectionSearch size="18" /> MISSING
</button>
{:else}
<button
class="job-play-button bg-gray-300/90 dark:bg-gray-600/90 rounded-br-3xl rounded-tr-3xl"
on:click={() => run(true)}
>
<Play size="48" />
</button>
{/if}
{/if}
</div>
</div>