From 760df648766fd58b31936cdb6d4fc8802ef55111 Mon Sep 17 00:00:00 2001
From: Sirttas <calloch.gael@gmail.com>
Date: Wed, 26 Jul 2023 11:22:25 +0200
Subject: [PATCH] precents

---
 src/{utils.ts => formaters.ts}         |  5 +++
 src/reprocess/Reprocess.vue            | 32 +++++---------------
 src/reprocess/ReprocessResultTable.vue | 42 ++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 24 deletions(-)
 rename src/{utils.ts => formaters.ts} (53%)
 create mode 100644 src/reprocess/ReprocessResultTable.vue

diff --git a/src/utils.ts b/src/formaters.ts
similarity index 53%
rename from src/utils.ts
rename to src/formaters.ts
index 93fe8b2..3778dfb 100644
--- a/src/utils.ts
+++ b/src/formaters.ts
@@ -3,3 +3,8 @@ export const iskFormater = new Intl.NumberFormat("is-IS", {
     currency: "ISK",
     minimumFractionDigits: 2,
 });
+
+export const percentFormater = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    minimumFractionDigits: 0
+});
\ No newline at end of file
diff --git a/src/reprocess/Reprocess.vue b/src/reprocess/Reprocess.vue
index af47af3..45aba06 100644
--- a/src/reprocess/Reprocess.vue
+++ b/src/reprocess/Reprocess.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { iskFormater } from '@/utils';
 import { useStorage } from '@vueuse/core';
 import { ref } from 'vue';
 import ReprocessInput from './ReprocessInput.vue';
+import ReprocessResultTable from './ReprocessResultTable.vue';
 import { ReprocessItemValues, reprocess } from './reprocess';
 
 const items = ref("");
@@ -26,29 +26,13 @@ const send = async () => result.value = await reprocess(items.value, minerals.va
         <ReprocessInput name="Item JSON" v-model="items" />
         <ReprocessInput name="Mineral JSON" v-model="minerals" />
     </div>
-    <div class="grid mt-2 px-4">
+    <div class="grid my-2 px-4">
         <button class="py-0.5 px-2 justify-self-end border rounded bg-slate-200" @click="send">Send</button>
     </div>
-    <div v-if="result.length > 0" class="grid mt-2 px-4">
-        <table class="table-auto border-collapse border w-full">
-            <thead>
-                <tr>
-                    <th class="border bg-slate-200">Item</th>
-                    <th class="border bg-slate-200">Buy</th>
-                    <th class="border bg-slate-200">Buy reprocess</th>
-                    <th class="border bg-slate-200">Sell</th>
-                    <th class="border bg-slate-200">Sell reprocess</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="r in result" :key="r.typeID" :class="{'bg-green-200': r.buy_reprocess >= r.sell}">
-                    <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) }}</td>
-                    <td class="border text-right px-1">{{ iskFormater.format(r.sell) }}</td>
-                    <td class="border text-right px-1">{{ iskFormater.format(r.sell_reprocess) }}</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+    <template v-if="result.length > 0">
+        <hr />
+        <div class="grid mt-2 px-4">
+            <ReprocessResultTable :result="result" />
+        </div>
+    </template>
 </template>
\ No newline at end of file
diff --git a/src/reprocess/ReprocessResultTable.vue b/src/reprocess/ReprocessResultTable.vue
new file mode 100644
index 0000000..7541b3f
--- /dev/null
+++ b/src/reprocess/ReprocessResultTable.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { iskFormater, percentFormater } from '@/formaters';
+import { computed } from 'vue';
+import { ReprocessItemValues } from './reprocess';
+
+interface Props {
+    result?: ReprocessItemValues[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    result: () => []
+});
+
+const computedResult = computed(() => props.result.map(r =>({
+    ...r,
+    buy_ratio: (r.buy_reprocess / r.buy) - 1,
+    sell_ratio: (r.sell_reprocess / r.sell) - 1
+})))
+</script>
+
+<template>
+    <table class="table-auto border-collapse border w-full">
+        <thead>
+            <tr>
+                <th class="border bg-slate-200">Item</th>
+                <th class="border bg-slate-200">Buy</th>
+                <th class="border bg-slate-200">Buy reprocess</th>
+                <th class="border bg-slate-200">Sell</th>
+                <th class="border bg-slate-200">Sell reprocess</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-green-200': r.buy_reprocess >= r.sell}">
+                <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>
+                <td class="border text-right px-1">{{ iskFormater.format(r.sell) }}</td>
+                <td class="border text-right px-1">{{ iskFormater.format(r.sell_reprocess) }} ({{percentFormater.format(r.sell_ratio)}})</td>
+            </tr>
+        </tbody>
+    </table>
+</template>@/formaters
\ No newline at end of file