You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
1.9 KiB
84 lines
1.9 KiB
<script lang="ts">
|
|
import type { IconName } from "../external/icons";
|
|
|
|
import type { TaskResult } from "../models/task";
|
|
import Icon from "./Icon.svelte";
|
|
|
|
export let task: TaskResult;
|
|
export let iconName: IconName;
|
|
|
|
let showNumbersAnyway;
|
|
let inactive;
|
|
|
|
$: {
|
|
switch (task.statusTag) {
|
|
case "to do": iconName = "lightbulb"; break;
|
|
case "on hold": iconName = "hourglass"; break;
|
|
case "declined": iconName = "times"; break;
|
|
case "failed": iconName = "times"; break;
|
|
default: iconName = "check"; break;
|
|
}
|
|
}
|
|
|
|
$: showNumbersAnyway = ["to do", "on hold"].includes(task.statusTag) && task.itemAmount > 1;
|
|
$: inactive = !task.active || showNumbersAnyway;
|
|
</script>
|
|
|
|
<div class="icon sccsi" class:targetonly={showNumbersAnyway} class:inactive={inactive}>
|
|
{#if !task.active || showNumbersAnyway}
|
|
<span class="on">
|
|
{#if showNumbersAnyway}
|
|
{task.itemAmount}
|
|
{:else}
|
|
<Icon block name={iconName} />
|
|
{/if}
|
|
</span>
|
|
<span class="off">
|
|
{task.completedAmount} / {task.itemAmount}
|
|
</span>
|
|
{:else}
|
|
{task.completedAmount} / {task.itemAmount}
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
div.icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1em;
|
|
padding: 0.2em .5ch;
|
|
|
|
margin-right: 0.5em;
|
|
background: #444;
|
|
color: #CCC;
|
|
}
|
|
div.icon.inactive {
|
|
padding-top: 0.295em;
|
|
padding-bottom: 0.115em;
|
|
|
|
background: #484;
|
|
color: #78ff78;
|
|
}
|
|
div.icon.targetonly {
|
|
min-width: 1.5ch;
|
|
text-align: center;
|
|
padding-top: 0.205em;
|
|
padding-bottom: 0.225em;
|
|
}
|
|
div.icon.targetonly span.on {
|
|
font-weight: 800;
|
|
}
|
|
div.icon.inactive span.off {
|
|
display: none;
|
|
}
|
|
div.icon.inactive:hover {
|
|
padding-top: 0.16em;
|
|
padding-bottom: 0.27em;
|
|
}
|
|
div.icon.inactive:hover span.on {
|
|
display: none;
|
|
}
|
|
div.icon.inactive:hover span.off {
|
|
display: inline;
|
|
}
|
|
</style>
|