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.
108 lines
2.2 KiB
108 lines
2.2 KiB
<script lang="ts">
|
|
import type { IconName, iconNames } from "../external/icons";
|
|
import DaysLeft from "./DaysLeft.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import LinkHook from "./LinkHook.svelte";
|
|
import Markdown from "./Markdown.svelte";
|
|
|
|
interface EntryCommon {
|
|
id: string
|
|
name?: string
|
|
description: string
|
|
icon?: IconName
|
|
|
|
startTime?: string
|
|
endTime?: string
|
|
createdTime?: string
|
|
|
|
active?: boolean
|
|
completedAmount?: number
|
|
itemAmount?: number
|
|
task?: EntryCommonSub
|
|
}
|
|
|
|
interface EntryCommonSub {
|
|
name: string
|
|
icon: IconName
|
|
}
|
|
|
|
export let entry: EntryCommon = null;
|
|
|
|
let iconName: IconName;
|
|
let displayName: string;
|
|
|
|
$: iconName = entry.task?.icon || entry.icon;
|
|
$: displayName = entry.name || entry.task?.name || "";
|
|
</script>
|
|
|
|
<div class="child-entry">
|
|
<LinkHook id={entry.id} />
|
|
<div class="body">
|
|
<div class="header">
|
|
<slot name="icon">
|
|
<div class="icon">
|
|
<Icon name={iconName} />
|
|
</div>
|
|
</slot>
|
|
<div class="name">{displayName}</div>
|
|
{#if (entry.endTime != null)}
|
|
<div class="times">
|
|
<DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="entry-body">
|
|
<Markdown source={entry.description} />
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.child-entry {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0.25em 0 0.75em 0;
|
|
}
|
|
div.icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1em;
|
|
padding: 0.2em .5ch;
|
|
|
|
margin-right: 0.5em;
|
|
background: #444;
|
|
color: #CCC;
|
|
}
|
|
|
|
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.entry-body {
|
|
padding: 0.25em 1ch;
|
|
background: #222;
|
|
color: #aaa;
|
|
border-bottom-right-radius: 0.5em;
|
|
}
|
|
</style>
|