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

<script lang="ts">
  import { Link } from "svelte-routing";

  import type { GoalCompositionMode } from "../models/goal";
  import type { LogResult } from "../models/log";

  interface CompositionItem {
    link: string
    amount: number
    name: string
  }

  export let logs: LogResult[] = [];
  export let unweighted: boolean = false;
  export let mode: GoalCompositionMode = "item";
  export let ignoreZeroWeight: boolean = false;

  let list: CompositionItem[] = [];
  let allOnes: boolean = false;

  function calculateAmount(log: LogResult, unweighted: boolean) {
    let amount = 0;
    if (log.itemCounted) {
      amount += log.itemAmount * (unweighted ? 1 : log.item.groupWeight);
    }
    if (log.secondaryItemCounted) {
      amount += log.secondaryItemAmount * (unweighted ? 1 : log.secondaryItem.groupWeight);
    }

    return amount;
  }

  $: {
    const map: {[k: string]: CompositionItem} = {}
  
    if (mode === "item") {
      for (const log of logs) {
        if (log.itemCounted !== false) {
          const item = log.item;
          if (!ignoreZeroWeight || item.groupWeight > 0) {
            if (!map[item.id]) {
              map[item.id] = {name: item.name, amount: log.itemAmount, link: `/items#${item.id}`};
            } else {
              map[item.id].amount += log.itemAmount;
            }
          }
        }

        if (log.secondaryItem && log.secondaryItemCounted !== false) {
          const item = log.secondaryItem;
          if (!ignoreZeroWeight || item.groupWeight > 0) {
            if (!map[item.id]) {
              map[item.id] = {name: item.name, amount: log.secondaryItemAmount, link: `/items#${item.id}`};
            } else {
              map[item.id].amount += log.secondaryItemAmount;
            }
          }
        }
      }
    } else if (mode === "project") {
      for (const log of logs) {
        const project = log.task.project;
        const amount = calculateAmount(log, unweighted);

        if (!map[project.id]) {
          map[project.id] = {name: project.name, amount, link: `/questlog/${project.groupId}/${project.id}`};
        } else {
          map[project.id].amount += amount;
        }
      }
    } else {
      for (const log of logs) {
        const task = log.task;

        const amount = calculateAmount(log, unweighted);

        if (!map[task.id]) {
          map[task.id] = {name: task.name, amount, link: `/questlog/${task.project.groupId}/${task.projectId}`};
        } else {
          map[task.id].amount += amount;
        }
      }
    }
  
    list = Object.keys(map).sort((a, b) => map[b].amount - map[a].amount).map(k => map[k]).filter(e => e.amount > 0);
  }

  $: allOnes = list.find(l => l.amount !== 1) == null;
</script>

<div class="composition">
  {#each list as item}
    <div class="item">
      {#if !allOnes}
        <span class="amount">{item.amount}&times;&nbsp;</span>
      {/if}
      <Link to={item.link}>{item.name}</Link>
    </div>
  {/each}
</div>

<style>
  div.composition {
    padding: 0.25em 0ch;
    color: #555;
    font-size: 0.75em;
  }

  div.item {
    padding: 0.125em 0.75ch;
    display: inline-block;
  }

  span.amount {
    color: #777;
  }

  div.item :global(a) {
    color: inherit;
  }
</style>