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.
161 lines
3.7 KiB
161 lines
3.7 KiB
<script lang="ts">
|
|
import type { IconName } from "../external/icons";
|
|
import type { TaskResult } from "../models/task";
|
|
import type { ModalData } from "../stores/modal";
|
|
import DateSpan from "./DateSpan.svelte";
|
|
import DaysLeft from "./DaysLeft.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import Option from "./Option.svelte";
|
|
import OptionRow from "./OptionRow.svelte";
|
|
|
|
export let task: TaskResult = null;
|
|
export let showAllOptions: boolean = false;
|
|
|
|
let itomIconName: IconName = "question";
|
|
let showLogs = false;
|
|
let mdLogAdd: ModalData;
|
|
let mdTaskEdit: ModalData;
|
|
let mdTaskDelete: ModalData;
|
|
|
|
function toggleShowLogs() {
|
|
showLogs = !showLogs;
|
|
}
|
|
|
|
$: itomIconName = task.item.icon as IconName;
|
|
$: mdLogAdd = {name: "log.add", task};
|
|
$: mdTaskEdit = {name: "task.edit", task};
|
|
$: mdTaskDelete = {name: "task.delete", task};
|
|
</script>
|
|
|
|
<div class="task">
|
|
<div class="body">
|
|
<div class="header">
|
|
{#if !task.active}
|
|
<div class="icon done">
|
|
<Icon name="check" />
|
|
</div>
|
|
{:else}
|
|
<div class="icon">
|
|
{task.completedAmount} / {task.itemAmount}
|
|
</div>
|
|
{/if}
|
|
<div class="name">{task.name}</div>
|
|
{#if (task.endTime != null)}
|
|
<div class="times">
|
|
<DaysLeft startTime={task.createdTime} endTime={task.endTime} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="description">
|
|
<p>{task.description}</p>
|
|
<div class="item">
|
|
<div class="item-icon">
|
|
<Icon name={itomIconName} />
|
|
</div>
|
|
<div class="item-name">{task.item.name} ({task.item.groupWeight})</div>
|
|
</div>
|
|
<OptionRow>
|
|
{#if task.logs.length > 0}
|
|
<Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>
|
|
{/if}
|
|
<Option open={mdLogAdd}>Add Log</Option>
|
|
{#if showAllOptions}
|
|
<Option open={mdTaskEdit}>Edit</Option>
|
|
<Option open={mdTaskDelete}>Delete</Option>
|
|
{/if}
|
|
</OptionRow>
|
|
{#if showLogs && task.logs.length > 0}
|
|
<div class="log-list">
|
|
{#each task.logs as log (log.id)}
|
|
<div class="log">
|
|
<div class="log-time"><DateSpan time={log.loggedTime} /></div>
|
|
<div class="log-description">{log.description}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.task {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0.25em 0 0.75em 0;
|
|
}
|
|
div.icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1em;
|
|
padding: 0.125em .5ch;
|
|
|
|
margin-right: 0.5em;
|
|
background: #444;
|
|
color: #CCC;
|
|
}
|
|
div.icon.done {
|
|
padding-top: 0.2em;
|
|
background: #484;
|
|
color: #78ff78;
|
|
}
|
|
div.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #333;
|
|
}
|
|
|
|
div.name {
|
|
font-size: 1em;
|
|
font-weight: 100;
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
padding: 0.125em .5ch;
|
|
}
|
|
div.times {
|
|
margin-left: auto;
|
|
margin-right: 0.25ch;
|
|
padding: 0.125em 0;
|
|
}
|
|
|
|
div.description {
|
|
padding: 0.25em 1ch;
|
|
background: #222;
|
|
color: #aaa;
|
|
border-bottom-right-radius: 0.5em;
|
|
}
|
|
div.description p {
|
|
padding: 0;
|
|
margin: 0.25em 0;
|
|
}
|
|
|
|
div.log-list {
|
|
padding: 0.5em 0;
|
|
}
|
|
div.log {
|
|
padding: 0.25em 1ch;
|
|
}
|
|
div.log-time {
|
|
font-size: 0.75em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
div.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 0.25em;
|
|
margin-bottom: 0em;
|
|
font-size: 0.75em;
|
|
}
|
|
div.item div.item-icon {
|
|
padding: 0.25em 0.5ch 0.25em 0;
|
|
}
|
|
div.item div.item-name {
|
|
padding: 0.125em;
|
|
}
|
|
</style>
|