From c2c8f2a65b01f25c8bc60dbe7e6bd0fcdef6a01c Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Fri, 13 Oct 2023 20:11:20 +0200
Subject: [PATCH] buy/sel double slider

---
 src/reprocess/ReprocessResultTable.vue | 43 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/reprocess/ReprocessResultTable.vue b/src/reprocess/ReprocessResultTable.vue
index 18457d6..50ee9da 100644
--- a/src/reprocess/ReprocessResultTable.vue
+++ b/src/reprocess/ReprocessResultTable.vue
@@ -16,24 +16,32 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 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 => ({
-    ...r,
-    buy_ratio: r.buy === 0 ? 1 : (r.buy_reprocess / r.buy) - 1,
-    sell_ratio: r.sell === 0 ? 1 : (r.sell_reprocess / r.sell) - 1
-}))), {
+const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r => {
+    const market = useSellOrderForMarket.value ? r.sell : r.buy;
+    const materials = useSellOrderForMaterials.value ? r.sell_reprocess : r.buy_reprocess;
+    const ratio = market === 0 ? 1 : ((materials / market) - 1);
+
+    return { ...r, market, materials, ratio };
+})), {
     defaultSortKey: 'name',
     defaultSortDirection: 'asc'
 })
 </script>
 
 <template>
-    <div class="grid grid-cols-2 mb-2 mt-4 ms-auto">
-        <div class="justify-self-end">
-            <BuySellSlider v-model="useSellOrder" />
+    <div class="flex justify-self-end mb-2 mt-4 ms-auto">
+        <div class="justify-self-end me-4 flex flex-col">
+            <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 class="justify-self-end ms-2">
+        <div class="justify-self-end mt-auto mb-auto">
             <span>Threshold: </span>
             <input type="number" min="-100" max="100" step="1" v-model="threshold" />
         </div>
@@ -42,21 +50,20 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
         <thead>
             <tr>
                 <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
-                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell' : 'buy'">Market</SortableHeader>
-                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_reprocess' : 'buy_reprocess'">Reprocess</SortableHeader>
-                <SortableHeader v-bind="headerProps" :sortKey="useSellOrder ? 'sell_ratio' : 'buy_ratio'">Percent</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="market">Market</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="materials">Materials</SortableHeader>
+                <SortableHeader v-bind="headerProps" sortKey="ratio">Percent</SortableHeader>
             </tr>
         </thead>
         <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>
                     <MarketTypeLabel :id="r.typeID" :name="r.name" />
                 </td>
-                <td class="text-right">{{ formatIsk(useSellOrder ? r.sell : r.buy) }}</td>
-                <td class="text-right">{{ formatIsk(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>
-                <td class="text-right">{{ percentFormater.format(useSellOrder ? r.sell_ratio : r.buy_ratio) }}</td>
+                <td class="text-right">{{ formatIsk(r.market) }}</td>
+                <td class="text-right">{{ formatIsk(r.materials) }}</td>
+                <td class="text-right">{{ percentFormater.format(r.ratio) }}</td>
             </tr>
         </tbody>
     </table>
 </template>
-@/components/table
\ No newline at end of file