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

<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>