125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
import { SortableHeader, useSort } from '@/components/table';
|
|
import { formatIsk, percentFormater } from '@/formaters';
|
|
import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
|
|
import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
|
|
import { useStorage } from '@vueuse/core';
|
|
import { computed, ref } from 'vue';
|
|
import { AcquiredType } from './AcquiredType';
|
|
import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
|
|
|
|
type Result = {
|
|
type: MarketType;
|
|
typeID: number;
|
|
name: string;
|
|
buy: number;
|
|
sell: number;
|
|
price: number;
|
|
count: number;
|
|
precentProfit: number;
|
|
iskProfit: number;
|
|
}
|
|
|
|
interface Props {
|
|
items?: AcquiredType[];
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'buy', type: MarketType, price: number, buy: number, sell: number): void;
|
|
(e: 'sell', type: MarketType): void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
items: () => []
|
|
});
|
|
defineEmits<Emits>();
|
|
|
|
const marketTaxStore = useMarketTaxStore();
|
|
|
|
const threshold = useStorage('market-acquisition-threshold', 10);
|
|
const filter = ref("");
|
|
const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
|
|
.filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
|
|
.map(r => {
|
|
const precentProfit = marketTaxStore.calculateProfit(r.price, r.sell);
|
|
|
|
return {
|
|
type: r.type,
|
|
typeID: r.type.id,
|
|
name: r.type.name,
|
|
buy: r.buy,
|
|
sell: r.sell,
|
|
price: r.price,
|
|
count: r.remaining,
|
|
precentProfit,
|
|
iskProfit: r.price * precentProfit * r.remaining
|
|
};
|
|
})), {
|
|
defaultSortKey: 'precentProfit',
|
|
defaultSortDirection: 'desc'
|
|
})
|
|
const getLineColor = (result: Result) => {
|
|
if (result.precentProfit >= (threshold.value / 100)) {
|
|
return 'line-green';
|
|
} else if (result.precentProfit < 0) {
|
|
return 'line-red';
|
|
}
|
|
return '';
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex">
|
|
<div class="flex justify-self-end mb-2 mt-4 ms-auto">
|
|
<TaxInput />
|
|
<div class="end">
|
|
<span>Profit Threshold: </span>
|
|
<input type="number" min="0" max="1000" step="1" v-model="threshold" />
|
|
</div>
|
|
<div class="end">
|
|
<span>Filter: </span>
|
|
<input type="search" class="w-96" v-model="filter" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="count">Bought Amount</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
|
|
<SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
|
|
<td>
|
|
<div class="flex">
|
|
<MarketTypeLabel :id="r.typeID" :name="r.name" />
|
|
<AcquisitionQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
|
|
</div>
|
|
</td>
|
|
<td class="text-right">{{ formatIsk(r.buy) }}</td>
|
|
<td class="text-right">{{ formatIsk(r.sell) }}</td>
|
|
<td class="text-right">{{ formatIsk(r.price) }}</td>
|
|
<td class="text-right">{{ r.count }}</td>
|
|
<td class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
|
|
<td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
|
|
<td class="text-right">
|
|
<button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
|
|
<button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped lang="postcss">
|
|
div.end {
|
|
@apply justify-self-end ms-2;
|
|
}
|
|
</style>@/components/table |