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

buy sel slider

Browse Source
This commit is contained in:
Sirttas
2023-07-26 15:59:58 +02:00
parent b78501208e
commit fb0143f5e4
1 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/reprocess/ReprocessResultTable.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { iskFormater, percentFormater } from '@/formaters';
import { useStorage } from '@vueuse/core';
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { ReprocessItemValues } from './reprocess';
interface Props {
@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<Props>(), {
});
const threshold = useStorage('reprocess-threshold', 0);
const useSellOrder = ref(false);
const computedResult = computed(() => {
return props.result.map(r =>({
@@ -26,9 +27,17 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
</script>
<template>
<div class="grid mb-2 mt-4">
<div class="grid grid-cols-2 mb-2 mt-4 ms-auto">
<div class="justify-self-end">
<span class="ms-2">Threshold: </span>
<label class="flex items-center relative w-max cursor-pointer select-none">
<input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black" v-model="useSellOrder" />
<span class="absolute font-medium text-xs right-1 text-white"> Buy </span>
<span class="absolute font-medium text-xs right-8 text-white"> Sell </span>
<span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200" />
</label>
</div>
<div class="justify-self-end ms-2">
<span>Threshold: </span>
<input type="number" min="-100" max="100" step="1" v-model="threshold" />
</div>
</div>
@@ -36,20 +45,24 @@ const copyToClipboard = (s: string) => navigator.clipboard.writeText(s);
<thead>
<tr>
<th>Item</th>
<th>Buy</th>
<th>Buy reprocess</th>
<th>Sell</th>
<th>Sell reprocess</th>
<th>Reprocess</th>
<th>Percent</th>
</tr>
</thead>
<tbody>
<tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': r.buy_ratio >= threshold / 100 }" @click="copyToClipboard(r.name)">
<tr v-for="r in computedResult" :key="r.typeID" class="cursor-pointer" :class="{'bg-emerald-500': (useSellOrder ? r.sell_ratio : r.buy_ratio) >= threshold / 100 }" @click="copyToClipboard(r.name)">
<td>{{ r.name }}</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>
<td class="text-right">{{ iskFormater.format(useSellOrder ? r.sell : r.buy) }}</td>
<td class="text-right">{{ iskFormater.format(useSellOrder ? r.sell_reprocess : r.buy_reprocess) }}</td>
<td class="text-right">{{percentFormater.format(useSellOrder ? r.sell_ratio : r.buy_ratio)}}</td>
</tr>
</tbody>
</table>
</template>
</template>
<style scoped>
input:checked ~ span:last-child {
--tw-translate-x: 1.75rem;
}
</style>