Makes the progress bar more informative
This commit is contained in:
@@ -171,6 +171,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const approved = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'APPROVED').length)
|
const approved = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'APPROVED').length)
|
||||||
|
const submitted = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'SUBMITTED').length)
|
||||||
|
const rejected = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'REJECTED').length)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="pb-20">
|
<div class="pb-20">
|
||||||
@@ -189,8 +191,12 @@
|
|||||||
<p class="text-sm text-base-content/50 mt-0.5">Team: <span class="font-medium text-base-content/70">{myTeam.name}</span></p>
|
<p class="text-sm text-base-content/50 mt-0.5">Team: <span class="font-medium text-base-content/70">{myTeam.name}</span></p>
|
||||||
{#if items.length > 0}
|
{#if items.length > 0}
|
||||||
<div class="flex items-center gap-2 mt-2">
|
<div class="flex items-center gap-2 mt-2">
|
||||||
<progress class="progress progress-primary flex-1 h-1.5" value={approved} max={items.length}></progress>
|
<div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
|
||||||
<span class="text-xs font-medium text-primary">{approved}/{items.length}</span>
|
<div class="bg-success h-full transition-all" style="width: {approved / items.length * 100}%"></div>
|
||||||
|
<div class="bg-warning h-full transition-all" style="width: {submitted / items.length * 100}%"></div>
|
||||||
|
<div class="bg-error h-full transition-all" style="width: {rejected / items.length * 100}%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs font-medium text-base-content/60">{approved}/{items.length}</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user