add item composition in projects.

svelte-ui/src/components/ItemProgress.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type Item from "../models/item";
+  import type { ProjectResult } from "../models/project";
+  import Icon from "./Icon.svelte";
+
+  interface ListEntry {
+    item: Item
+    amount: number
+    target: number
+    extras: number
+  }
+
+  export let project: ProjectResult;
+
+  let list: ListEntry[] = [];
+
+  $: {
+    list = [];
+    for (const task of project.tasks) {
+      let entry = list.find(e => e.item.id === task.item.id);
+      if (entry == null) {
+        entry = {item: task.item, amount: 0, target: 0, extras: 0};
+        list.push(entry);
+      }
+
+      if (task.completedAmount > task.itemAmount) {
+        entry.extras += task.completedAmount - task.itemAmount;
+        entry.amount += task.itemAmount;
+      } else {
+        entry.amount += task.completedAmount;
+      }
+      entry.target += task.itemAmount;
+
+      for (const log of task.logs) {
+        if (log.secondaryItem != null) {
+          let entry = list.find(e => e.item.id === log.secondaryItemId);
+          if (entry == null) {
+            entry = {item: log.secondaryItem, amount: 0, target: 0, extras: 0};
+            list.push(entry);
+          }
+
+          entry.extras += log.secondaryItemAmount;
+        }
+      }
+    }
+
+    list.sort((a,b) => {
+      if (a.target === b.target) {
+        return a.item.name.localeCompare(b.item.name);
+      } else {
+        return b.target - a.target;
+      }
+    })
+  }
+</script>
+
+<div class="ItemProgress">
+  {#each list as entry (entry.item.id)}
+    <div class="entry">
+      <div class="icon">
+        <Icon name={entry.item.icon} />
+      </div>
+      <div class="name">
+        {entry.item.name}
+      </div>
+      {#if entry.target !== 0}
+        <div class="amount">
+          <span>{entry.amount}</span>
+          <span> / </span>
+          <span>{entry.target}</span>
+          {#if entry.extras > 0}
+            <span class="extras">+ {entry.extras}</span>
+          {/if}
+        </div>
+
+      {:else}
+        <div class="extras">
+          &times;{entry.extras}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  div.ItemProgress {
+    display: inline-block;
+    padding: 0.25em;
+    font-size: 0.8em;
+  }
+  div.ItemProgress div.entry {
+    display: flex;
+    flex-direction: row;
+    color: #777;
+  }
+  div.ItemProgress div.entry div {
+    padding: 0.1em 0.25em;
+  }
+  div.ItemProgress div.entry .name {
+    color: #555;
+  }
+  div.ItemProgress div.entry .icon {
+    padding: 0.20em;
+  }
+  div.ItemProgress div.entry .extras {
+    color: #484;
+  }
+</style>

svelte-ui/src/components/ProjectEntry.svelte

@@ -7,6 +7,7 @@ import stuffLogClient from "../clients/stufflog";
   import type { ModalData } from "../stores/modal";
   import IS_MOBILE from "../utils/phone-check";
   import Icon from "./Icon.svelte";
+import ItemProgress from "./ItemProgress.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
   import ParentEntry from "./ParentEntry.svelte";
@@ -120,6 +121,8 @@ import stuffLogClient from "../clients/stufflog";
       {/if}
     </div>
     {#if showAllOptions}
+      <ItemProgress project={project} />
+
       <OptionRow>
         <Option open={mdAddTask}>Add Task</Option>
         <Option open={mdLinkTask}>Link Task</Option>

svelte-ui/src/models/log.ts

@@ -20,6 +20,10 @@ export interface LogFilter {
   projectGroupIds?: string[]
 }
 
+export interface LogWithSecondaryItem extends Log {
+  secondaryItem?: Item
+}
+
 export interface LogResult extends Log {
   task: TaskWithProject
   item: Item

svelte-ui/src/models/task.ts

@@ -1,6 +1,6 @@
 import type { IconName } from "../external/icons";
 import type Item from "./item";
-import type Log from "./log";
+import type { LogWithSecondaryItem } from "./log";
 import type Project from "./project";
 
 export default interface Task {
@@ -23,7 +23,7 @@ export interface TaskWithProject extends Task {
 
 export interface TaskResult extends Task {
   item: Item
-  logs: Log[]
+  logs: LogWithSecondaryItem[]
   completedAmount: number
   project?: Project
 }