You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.1 KiB
85 lines
2.1 KiB
<script lang="ts">
|
|
import type { GoalCompositionMode, GoalLogResult } from "../models/goal";
|
|
import type { LogResult } from "../models/log";
|
|
|
|
interface CompositionItem {
|
|
link: string
|
|
amount: number
|
|
name: string
|
|
}
|
|
|
|
export let logs: LogResult[] = [];
|
|
export let mode: GoalCompositionMode = "item";
|
|
|
|
let list: CompositionItem[] = [];
|
|
|
|
$: {
|
|
const map: {[k: string]: CompositionItem} = {}
|
|
|
|
if (mode === "item") {
|
|
for (const log of logs) {
|
|
if (log.itemCounted !== false) {
|
|
const item = log.item;
|
|
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 (!map[item.id]) {
|
|
map[item.id] = {name: item.name, amount: log.secondaryItemAmount, link: `/items#${item.id}`};
|
|
} else {
|
|
map[item.id].amount += log.secondaryItemAmount;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
for (const log of logs) {
|
|
const task = log.task;
|
|
|
|
const amount = log.secondaryItem ? log.secondaryItemAmount + log.itemAmount : log.itemAmount;
|
|
|
|
if (!map[task.id]) {
|
|
map[task.id] = {name: task.name, amount, link: `/questlog#${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);
|
|
}
|
|
</script>
|
|
|
|
<div class="composition">
|
|
{#each list as item (item.name)}
|
|
<div class="item">
|
|
<span class="amount">{item.amount}x </span>
|
|
<a href={item.link}>{item.name}</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
div.composition {
|
|
padding: 0.25em 0ch;
|
|
color: #555;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
div.item {
|
|
padding: 0.125em 0.5ch;
|
|
display: inline-block;
|
|
}
|
|
|
|
span.amount {
|
|
color: #777;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
</style>
|