eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

precents

Browse Source
This commit is contained in:
Sirttas
2023-07-26 11:22:25 +02:00
parent 18dc329932
commit 760df64876
3 changed files with 55 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/utils.ts → src/formaters.ts
View File

@@ -3,3 +3,8 @@ export const iskFormater = new Intl.NumberFormat("is-IS", {
currency: "ISK", currency: "ISK",
minimumFractionDigits: 2, minimumFractionDigits: 2,
}); });
export const percentFormater = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 0
});

32
src/reprocess/Reprocess.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { iskFormater } from '@/utils';
import { useStorage } from '@vueuse/core'; import { useStorage } from '@vueuse/core';
import { ref } from 'vue'; import { ref } from 'vue';
import ReprocessInput from './ReprocessInput.vue'; import ReprocessInput from './ReprocessInput.vue';
import ReprocessResultTable from './ReprocessResultTable.vue';
import { ReprocessItemValues, reprocess } from './reprocess'; import { ReprocessItemValues, reprocess } from './reprocess';
const items = ref(""); 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="Item JSON" v-model="items" />
<ReprocessInput name="Mineral JSON" v-model="minerals" /> <ReprocessInput name="Mineral JSON" v-model="minerals" />
</div> </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> <button class="py-0.5 px-2 justify-self-end border rounded bg-slate-200" @click="send">Send</button>
</div> </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> </div>
<th class="border bg-slate-200">Buy</th> </template>
<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>

42
src/reprocess/ReprocessResultTable.vue Normal file
View File

@@ -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