stufflog2/svelte-ui/src/components/ChildEntry.svelte

<script lang="ts">
  import type { IconName, iconNames } from "../external/icons";
  import { formatTime } from "../utils/time";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import LinkHook from "./LinkHook.svelte";
  import Markdown from "./Markdown.svelte";

  interface ActualParent {
    id: string
    name: string
  }

  interface EntryCommon {
    id: string
    name?: string
    description: string
    icon?: IconName

    startTime?: string
    endTime?: string
    createdTime?: string
    loggedTime?: string

    active?: boolean
    completedAmount?: number
    itemAmount?: number
    task?: EntryCommonSub
  }
  
  interface EntryCommonSub {
    name: string
    icon: IconName
  }

  export let entry: EntryCommon = null;
  export let actualParent: ActualParent = null;
  export let hideParentName: boolean = false;

  let iconName: IconName;
  let displayName: string;
  let displayTime: string;

  $: iconName = entry.task?.icon || entry.icon;
  $: displayName = entry.name || entry.task?.name || "";
  $: displayTime = entry.loggedTime ? formatTime(entry.loggedTime) : "";
</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>
      {#if (actualParent != null)}
        {#if !hideParentName}
          <div class="actual-parent-icon">
            <Icon block name="link" />
          </div>
          <div class="actual-parent">
            <a href={`/questlog#${actualParent.id}`}>{actualParent.name}</a>
          </div>
        {/if}
      {/if}
      <div class="name">{displayName}</div>
      {#if (entry.endTime != null)}
        <div class="times">
          <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
        </div>
      {/if}
      {#if (displayTime != null)}
        <div class="times">
          {displayTime}
        </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, div.child-entry div.header :global(div.icon-like) {
    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.actual-parent-icon {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    padding: 0.3em 0;
    padding-bottom: 0.1em;

    margin-right: 0.5em;
    color: #555;
  }
  div.actual-parent {
    font-size: 1em;
    font-weight: 100;
    margin: auto 0;
    vertical-align: middle;
    padding: 0.125em 0;
    padding-right: 1ch;

    display: flex;
    flex-direction: row;
  }
  div.actual-parent :global(div.icon) {
    display: none !important;
  }

  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>