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 submitted = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'SUBMITTED').length)
|
||||
const rejected = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'REJECTED').length)
|
||||
</script>
|
||||
|
||||
<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>
|
||||
{#if items.length > 0}
|
||||
<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>
|
||||
<span class="text-xs font-medium text-primary">{approved}/{items.length}</span>
|
||||
<div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
|
||||
<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>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user