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.
159 lines
3.6 KiB
159 lines
3.6 KiB
<script lang="ts">
|
|
import type { IconName } from "../external/icons";
|
|
import type { TaskResult } from "../models/task";
|
|
import DaysLeft from "./DaysLeft.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import LinkHook from "./LinkHook.svelte";
|
|
import Markdown from "./Markdown.svelte";
|
|
import ProjectIcon from "./ProjectIcon.svelte";
|
|
import ProjectProgress from "./ProjectProgress.svelte";
|
|
import TimeProgress from "./TimeProgress.svelte";
|
|
|
|
interface EntryIconHolder {
|
|
icon: IconName
|
|
}
|
|
|
|
interface EntryCommon {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
icon?: IconName
|
|
startTime?: string
|
|
endTime?: string
|
|
createdTime?: string
|
|
group?: EntryIconHolder
|
|
project?: EntryIconHolder
|
|
tasks?: TaskResult[]
|
|
active?: boolean
|
|
statusName?: string
|
|
}
|
|
|
|
export let entry: EntryCommon;
|
|
export let full = false;
|
|
export let headerLink = "";
|
|
export let hideProgress: boolean = false;
|
|
export let hideIcon: boolean = false;
|
|
export let showTimeProgress: boolean = false;
|
|
export let annotations: IconName[] = [];
|
|
export let removeHook: boolean = false;
|
|
|
|
let iconName: IconName;
|
|
|
|
$: {
|
|
if (entry.project != null) {
|
|
iconName = entry.project.icon;
|
|
} else if (entry.group != null) {
|
|
iconName = entry.group.icon;
|
|
} else {
|
|
iconName = entry.icon || "question";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="parent-entry" class:full={full}>
|
|
{#if !removeHook}
|
|
<LinkHook id={entry.id} />
|
|
{/if}
|
|
{#if !hideIcon}
|
|
<div class="icon" class:completed={entry.active === false}>
|
|
{#if entry.active != null}
|
|
<ProjectIcon project={entry} />
|
|
{:else}
|
|
<Icon block name={iconName} />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<div class="body">
|
|
<div class="header">
|
|
<div class="name">
|
|
{#if headerLink}
|
|
<a href={headerLink}>{entry.name}</a>
|
|
{:else}
|
|
{entry.name}
|
|
{/if}
|
|
</div>
|
|
<slot name="pre-annotation"></slot>
|
|
{#each annotations as annotation (annotation)}
|
|
<div class="annotation">
|
|
<Icon block name={annotation} />
|
|
</div>
|
|
{/each}
|
|
<div class="separator"></div>
|
|
<slot name="post-seprator"></slot>
|
|
{#if entry.endTime != null}
|
|
<div class="days-left">
|
|
<DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{#if (!hideProgress && entry.tasks != null)}
|
|
<ProjectProgress project={entry} />
|
|
{#if showTimeProgress && entry.endTime}
|
|
<TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
|
|
{/if}
|
|
{/if}
|
|
<slot name="above-description"></slot>
|
|
{#if (full)}
|
|
<Markdown source={entry.description} />
|
|
{/if}
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.parent-entry {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
div.parent-entry.full {
|
|
padding-bottom: 1em;
|
|
}
|
|
div.icon {
|
|
font-size: 2em;
|
|
padding: 0 0.5ch;
|
|
width: 2ch;
|
|
padding-top: 0.125em;
|
|
color: #444;
|
|
}
|
|
div.icon.completed {
|
|
color: #484;
|
|
}
|
|
div.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
div.name {
|
|
font-size: 1em;
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
font-weight: 100;
|
|
}
|
|
div.annotation {
|
|
margin: auto 0;
|
|
padding: 0 0.5ch;
|
|
line-height: 0em;
|
|
color: #333;
|
|
}
|
|
div.annotation + div.annotation {
|
|
padding-left: 0;
|
|
}
|
|
div.separator {
|
|
margin-left: auto;
|
|
}
|
|
div.days-left {
|
|
margin-right: 0.25ch;
|
|
margin-left: 1ch;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-color: #777;
|
|
}
|
|
</style>
|