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",
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">
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>

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