buy/sel double slider

This commit is contained in:
2023-10-13 20:11:20 +02:00
parent 4cb3de356f
commit c2c8f2a65b

View File

@@ -16,24 +16,32 @@ const props = withDefaults(defineProps<Props>(), {
}); });
const threshold = useStorage('reprocess-threshold', 0); const threshold = useStorage('reprocess-threshold', 0);
const useSellOrder = useStorage('reprocess-use-sell-order', false); const useSellOrderForMarket = useStorage('reprocess-market-use-sell-order', false);
const useSellOrderForMaterials = useStorage('reprocess-materials-use-sell-order', false);
const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r => ({ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r => {
...r, const market = useSellOrderForMarket.value ? r.sell : r.buy;
buy_ratio: r.buy === 0 ? 1 : (r.buy_reprocess / r.buy) - 1, const materials = useSellOrderForMaterials.value ? r.sell_reprocess : r.buy_reprocess;
sell_ratio: r.sell === 0 ? 1 : (r.sell_reprocess / r.sell) - 1 const ratio = market === 0 ? 1 : ((materials / market) - 1);
}))), {
return { ...r, market, materials, ratio };
})), {
defaultSortKey: 'name', defaultSortKey: 'name',
defaultSortDirection: 'asc' defaultSortDirection: 'asc'
}) })
</script> </script>
<template> <template>
<div class="grid grid-cols-2 mb-2 mt-4 ms-auto"> <div class="flex justify-self-end mb-2 mt-4 ms-auto">
<div class="justify-self-end"> <div class="justify-self-end me-4 flex flex-col">
<BuySellSlider v-model="useSellOrder" /> <div class="flex mb-1">
<BuySellSlider v-model="useSellOrderForMarket" class="me-2" /> Market
</div>
<div class="flex">
<BuySellSlider v-model="useSellOrderForMaterials" class="me-2" /> Materials
</div>
</div> </div>
<div class="justify-self-end ms-2"> <div class="justify-self-end mt-auto mb-auto">
<span>Threshold: </span> <span>Threshold: </span>
<input type="number" min="-100" max="100" step="1" v-model="threshold" /> <input type="number" min="-100" max="100" step="1" v-model="threshold" />
</div> </div>
@@ -42,21 +50,20 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
<thead> <thead>
<tr> <tr>
<SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader> <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
<SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell' : 'buy'">Market</SortableHeader> <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
<SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_reprocess' : 'buy_reprocess'">Reprocess</SortableHeader> <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
<SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_ratio' : 'buy_ratio'">Percent</SortableHeader> <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }"> <tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }">
<td> <td>
<MarketTypeLabel :id="r.typeID" :name="r.name" /> <MarketTypeLabel :id="r.typeID" :name="r.name" />
</td> </td>
<td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td> <td class="text-right">{{ formatIsk(r.market) }}</td>
<td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td> <td class="text-right">{{ formatIsk(r.materials) }}</td>
<td class="text-right">{{ percentFormater.format(useSellOrder ? r.sell_ratio : r.buy_ratio) }}</td> <td class="text-right">{{ percentFormater.format(r.ratio) }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</template> </template>
@/components/table