add new fields to logs and goals.

svelte-ui/src/components/GroupItemSelect.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { GroupResult } from "../models/group";
+
+  export let value = "";
+  export let name = "";
+  export let disabled = false;
+  export let optional = false;
+  export let optionalLabel = "None";
+  export let group: GroupResult = null;
+
+  $: {
+    if (group != null && !group.items.find(t => t.id === value)) {
+      if (optional) {
+        value = "";
+      } else {
+        value = group.items[0]?.id || "";
+      }
+    }
+  }
+</script>
+
+<select name={name} bind:value={value} disabled={disabled || group == null || group.items.length === 0}>
+  {#if optional}
+    <option value={""} selected={"" === value}>{optionalLabel}</option>
+  {/if}
+  {#if group != null}
+    {#each group.items as item (item.id)}
+      <option value={item.id} selected={item.id === value}>{item.name} ({item.groupWeight})</option>
+    {/each}
+  {/if}
+</select>

svelte-ui/src/components/ItemLink.svelte

@@ -3,9 +3,14 @@
   import Icon from "./Icon.svelte";
 
   export let item: Item = null;
+  export let amount: number = null;
+  export let noPadding: boolean = false;
 </script>
 
-<div class="item">
+<div class="item" class:noPadding>
+  {#if amount != null}
+    <div class="item-amount">{amount}x</div>
+  {/if}
   <div class="item-icon">
     <Icon name={item.icon} />
   </div>
@@ -22,13 +27,21 @@
     margin-bottom: 0em;
     font-size: 0.75em;
   }
-  div.item a {
+  a {
     color: inherit;
   }
-  div.item div.item-icon {
+  div.item-icon {
     padding: 0.25em 0.5ch 0.25em 0;
   }
-  div.item div.item-name {
+  div.item-name {
     padding: 0.125em;
   }
+  div.item-amount {
+    padding: 0.125em;
+    padding-right: 1ch;
+  }
+
+  div.item.noPadding {
+    margin-top: 0em;
+  }
 </style>

svelte-ui/src/components/ItemSelect.svelte

@@ -4,6 +4,7 @@
   export let value = "";
   export let name = "";
   export let disabled = false;
+  export let optional = false;
 
   $: {
     if ($groupStore.stale && !$groupStore.loading) {
@@ -12,7 +13,7 @@
   }
 
   $: {
-    if ($groupStore.groups.length > 0 && value === "") {
+    if ($groupStore.groups.length > 0 && value === "" && !optional) {
       const nonEmpty = $groupStore.groups.find(g => g.items.length > 0);
       if (nonEmpty != null) {
         value = nonEmpty.items[0].id;
@@ -22,6 +23,9 @@
 </script>
 
 <select name={name} bind:value={value} disabled={disabled || $groupStore.loading}>
+  {#if optional}
+    <option value={""} selected={"" === value}>None</option>
+  {/if}
   {#each $groupStore.groups as group (group.id)}
     <optgroup label={group.name}>
       {#each group.items as item (item.id)}

svelte-ui/src/components/LogEntry.svelte

@@ -21,7 +21,10 @@
 </script>
 
 <ChildEntry entry={log}>
-  <ItemLink item={log.item} />
+  <ItemLink amount={log.itemAmount} item={log.item} />
+  {#if log.secondaryItem != null}
+    <ItemLink noPadding amount={log.secondaryItemAmount} item={log.secondaryItem} />
+  {/if}
   <OptionRow>
     <Option open={mdLogEdit}>Edit Log</Option>
     <Option open={mdLogDelete}>Delete Log</Option>

svelte-ui/src/components/Modal.svelte

@@ -186,9 +186,6 @@ div.modal :global(textarea:disabled) {
   color: #aaa;
 }
 
-div.modal :global(input:last-of-type) {
-  margin-bottom: 1em;
-}
 div.modal :global(input.nolast) {
   margin-bottom: 0.5em;
 }

svelte-ui/src/components/TaskEntry.svelte

@@ -5,6 +5,7 @@
   import ChildEntry from "./ChildEntry.svelte";
   import DateSpan from "./DateSpan.svelte";
   import Icon from "./Icon.svelte";
+  import ItemLink from "./ItemLink.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
 
@@ -37,14 +38,7 @@
       {task.completedAmount} / {task.itemAmount}
     {/if}
   </div>
-  <div class="item">
-    <div class="item-icon">
-      <Icon name={task.item.icon} />
-    </div>
-    <div class="item-name">
-      <a href="/items#{task.item.groupId}">{task.item.name} ({task.item.groupWeight})</a>
-    </div>
-  </div>
+  <ItemLink item={task.item} />
   <OptionRow>
     {#if task.logs.length > 0}
       <Option on:click={toggleShowLogs}>{showLogs ? "Hide Logs" : "Show Logs"}</Option>