threshold

src/reprocess/ReprocessResultTable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { iskFormater, percentFormater } from '@/formaters';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { ReprocessItemValues } from './reprocess';
 
 interface Props {
@@ -16,9 +16,17 @@ const computedResult = computed(() => props.result.map(r =>({
     buy_ratio: (r.buy_reprocess / r.buy) - 1,
     sell_ratio: (r.sell_reprocess / r.sell) - 1
 })))
+
+const threshold = ref(10);
 </script>
 
 <template>
+        <div class="grid mb-2 mt-4 px-4">
+        <div class="justify-self-end">
+            <span>Threshold: </span>
+            <input type="number" min="-100" max="1000" step="1" class="border rounded" v-model="threshold" />
+        </div>
+    </div>
     <table class="table-auto border-collapse border w-full">
         <thead>
             <tr>
@@ -30,7 +38,7 @@ const computedResult = computed(() => props.result.map(r =>({
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-green-200': r.buy_reprocess >= r.sell}">
+            <tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-green-200': r.buy_ratio >= threshold / 100 || r.sell_ratio >= threshold / 100 }">
                 <td class="border px-1">{{ r.typeID }}</td>
                 <td class="border text-right px-1">{{ iskFormater.format(r.buy) }}</td>
                 <td class="border text-right px-1">{{ iskFormater.format(r.buy_reprocess) }} ({{percentFormater.format(r.buy_ratio)}})</td>