refactored Item, Task and Log entry to share code. TaskEntry is still a bit messy, but that's because of the weird icon stuffs.

2021-01-17 12:48:29 +01:00
parent b01fca8065
commit 033abaa5bb
5 changed files with 199 additions and 288 deletions
@@ -0,0 +1,111 @@
+<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";
+
+  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">{entry.name}</div>
+      {#if (entry.endTime != null)}
+        <div class="times">
+          <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
+        </div>
+      {/if}
+    </div>
+    <div class="description">
+      <p>{entry.description}</p>
+      <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.description {
+    padding: 0.25em 1ch;
+    background: #222;
+    color: #aaa;
+    border-bottom-right-radius: 0.5em;
+  }
+  div.description p {
+    padding: 0;
+    margin: 0.25em 0;
+  }
+</style>