precents

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
+});

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">
+    <template v-if="result.length > 0">
-        <table class="table-auto border-collapse border w-full">
+        <hr />
-            <thead>
+        <div class="grid mt-2 px-4">
-                <tr>
+            <ReprocessResultTable :result="result" />
-                    <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>
+</template>

src/reprocess/ReprocessInput.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { evepraisalAxiosInstance } from '@/service';
 import { useVModel } from '@vueuse/core';
 
 interface Props {
@@ -16,11 +17,28 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 const value = useVModel(props, 'modelValue', emit);
+
+const loadFromId = async (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    const id = input.value;
+
+    if (!id) {
+        return;
+    }
+    const response = await evepraisalAxiosInstance.get(`/a/${id}.json`);
+
+    if (response.status !== 200) {
+        return;
+    }
+
+    value.value = JSON.stringify(response.data);
+    input.value = '';
+}
 </script>
 
 <template>
     <div class="flex-1 mx-1">
-        <span>{{ name }}</span>
+        <span>{{ name }}</span><input type="text" class="border rounded ms-2 px-1" @change="loadFromId" placeholder="id evepraisal" />
-        <textarea class="w-full border rounded" v-model="value" />
+        <textarea class="w-full border rounded mt-1" v-model="value" />
     </div>
 </template>

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

src/service.ts

@@ -7,3 +7,11 @@ export const apiAxiosInstance = axios.create({
         "Content-Type": "application/json"
     },
 })
+
+export const evepraisalAxiosInstance = axios.create({
+    baseURL: '/appraisal/',
+    headers: {
+        'accept': 'application/json',
+        "Content-Type": "application/json"
+    },
+})

vite.config.ts

@@ -20,6 +20,12 @@ export default defineConfig({
                 changeOrigin: true,
                 followRedirects: true,
                 rewrite: (path) => path.replace(/^\/api/, ''),
+            },
+            '/appraisal/': {
+                target: 'https://evepraisal.shendai.rip/',
+                changeOrigin: true,
+                followRedirects: true,
+                rewrite: (path) => path.replace(/^\/appraisal/, ''),
             }
         }
     },