style = treshold

This commit is contained in:
2023-07-26 12:56:44 +02:00
parent d92349d6b5
commit 0d9b47c69d
5 changed files with 62 additions and 20 deletions

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { iskFormater, percentFormater } from '@/formaters';
import { computed, ref } from 'vue';
import { useStorage } from '@vueuse/core';
import { computed } from 'vue';
import { ReprocessItemValues } from './reprocess';
interface Props {
@@ -17,33 +18,33 @@ const computedResult = computed(() => props.result.map(r =>({
sell_ratio: (r.sell_reprocess / r.sell) - 1
})))
const threshold = ref(10);
const threshold = useStorage('reprocess-threshold', 90);
</script>
<template>
<div class="grid mb-2 mt-4">
<div class="justify-self-end">
<span>Threshold: </span>
<input type="number" min="-100" max="1000" step="1" class="border rounded" v-model="threshold" />
<input type="number" min="-100" max="1000" step="1" v-model="threshold" />
</div>
</div>
<table class="table-auto border-collapse border w-full">
<table>
<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>
<th>Item</th>
<th>Buy</th>
<th>Buy reprocess</th>
<th>Sell</th>
<th>Sell reprocess</th>
</tr>
</thead>
<tbody>
<tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-green-200': r.buy_ratio >= threshold / 100 || r.sell_ratio >= threshold / 100 }">
<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 v-for="r in computedResult" :key="r.typeID" :class="{'bg-emerald-500': r.buy_ratio * threshold >= 100 }">
<td>{{ r.typeID }}</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>
</tr>
</tbody>
</table>