61156a97b0
* feat(frontend): Update progress bar component * feat(frontend): Add progress to flow run (WIP) * feat(frontend): Add progress to flow run (WIP 2) * fix(frontend): Fix loop progress loading * fix(frontend): Rethink progress bar * fix(frontend): Remove comment * feat(front): Add error state and instant loading * fix(frontend): Fix disappearing progress bits * feat(frontend): Add progress to run page * fix(frontend): Fix parallel progress loading issue * progress bar + up to fix Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
38 lines
1.3 KiB
Svelte
38 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte'
|
|
import { get, type Writable } from 'svelte/store'
|
|
import ProgressBarLoopAccessor from './ProgressBarLoopAccessor.svelte'
|
|
import { getTween, type LoopState, type ProgressStateStoreValue } from './model'
|
|
|
|
export let step: LoopState
|
|
export let index: number
|
|
export let duration = 200
|
|
const state = getContext<Writable<ProgressStateStoreValue>>('state')
|
|
let progresses = getTweenArray()
|
|
|
|
$: finishedAndNotLast = $state.finished && $state.length - 1 !== index
|
|
$: if (!$state.error && ($state.index > index || finishedAndNotLast)) {
|
|
progresses = getTweenArray(100)
|
|
}
|
|
$: if (!$state.error && step.indexChanged) {
|
|
progresses.filter((p, i) => get(p) === 0 && i < step.index).forEach((p) => p.set(100))
|
|
progresses.forEach((p, i) => {
|
|
if (get(p) === 0 && i < step.index) {
|
|
p.set(100)
|
|
if (index > $state.index) {
|
|
state.update((prev) => ({ ...prev, index }))
|
|
}
|
|
}
|
|
})
|
|
}
|
|
$: if (!$state.error && $state.finished) progresses.forEach((p) => p.set(100))
|
|
|
|
function getTweenArray(initial = 0) {
|
|
return Array.from({ length: step.length }, () => getTween(initial, duration))
|
|
}
|
|
</script>
|
|
|
|
{#each progresses as progress, i}
|
|
<ProgressBarLoopAccessor {progress} index={i} length={step.length} />
|
|
{/each}
|