From fb0143f5e4e5e62110566a64e5b9648b3f0b29dc Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Wed, 26 Jul 2023 15:59:58 +0200
Subject: [PATCH] buy sel slider

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

diff --git a/src/reprocess/ReprocessResultTable.vue b/src/reprocess/ReprocessResultTable.vue
index 96213e6..e901d39 100644
--- a/src/reprocess/ReprocessResultTable.vue
+++ b/src/reprocess/ReprocessResultTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { iskFormater, percentFormater } from '@/formaters';
 import { useStorage } from '@vueuse/core';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { ReprocessItemValues } from './reprocess';
 
 interface Props {
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const threshold = useStorage('reprocess-threshold', 0);
+const useSellOrder = ref(false);
 
 const computedResult = computed(() => {
     return props.result.map(r =>({
@@ -26,9 +27,17 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
 </script>
 
 <template>
-    <div class="grid mb-2 mt-4">
+    <div class="grid grid-cols-2 mb-2 mt-4 ms-auto">
         <div class="justify-self-end">
-            <span class="ms-2">Threshold: </span>
+            <label class="flex items-center relative w-max cursor-pointer select-none">
+                <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black" v-model="useSellOrder" />
+                <span class="absolute font-medium text-xs right-1 text-white"> Buy </span>
+                <span class="absolute font-medium text-xs right-8 text-white"> Sell </span>
+                <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200" />
+            </label>
+        </div>
+        <div class="justify-self-end ms-2">
+            <span>Threshold: </span>
             <input type="number" min="-100" max="100" step="1" v-model="threshold" />
         </div>
     </div>
@@ -36,20 +45,24 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
         <thead>
             <tr>
                 <th>Item</th>
-                <th>Buy</th>
-                <th>Buy reprocess</th>
                 <th>Sell</th>
-                <th>Sell reprocess</th>
+                <th>Reprocess</th>
+                <th>Percent</th>
             </tr>
         </thead>
         <tbody>
-            <tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': r.buy_ratio >= threshold / 100 }" @click="copyToClipboard(r.name)">
+            <tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
                 <td>{{ r.name }}</td>
-                <td class="text-right">{{ iskFormater.format(r.buy) }}</td>
-                <td class="text-right">{{ iskFormater.format(r.buy_reprocess) }} ({{percentFormater.format(r.buy_ratio)}})</td>
-                <td class="text-right">{{ iskFormater.format(r.sell) }}</td>
-                <td class="text-right">{{ iskFormater.format(r.sell_reprocess) }} ({{percentFormater.format(r.sell_ratio)}})</td>
+                <td class="text-right">{{ iskFormater.format(useSellOrder ? r.sell : r.buy) }}</td>
+                <td class="text-right">{{ iskFormater.format(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>
+                <td class="text-right">{{percentFormater.format(useSellOrder ? r.sell_ratio : r.buy_ratio)}}</td>
             </tr>
         </tbody>
     </table>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+    input:checked ~ span:last-child {
+        --tw-translate-x: 1.75rem;
+    }
+</style>
\ No newline at end of file