UI fixes including loop suppression when model doesnt change

This commit is contained in:
Tim
2024-03-11 19:31:36 -04:00
parent 4362d12f0f
commit f4f1122b89
10 changed files with 173 additions and 110 deletions

View File

@@ -2,21 +2,22 @@
<row-bar :color="color">
<color-band :color="color"/>
<div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="os.amount" variant="outlined" density="compact" hide-details
min="0" :step="os.amount?Math.floor(os.amount/1000):1"
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined" density="compact" hide-details
min="0" :step="order.amount?Math.floor(order.amount/1000):1"
style="max-width:24em; display: inline-grid"
class="py-2" :color="color"
:label="os.amountIsTokenA ? 'Amount':('Value in '+os.quote.s)"
:label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
>
<template v-slot:prepend>
<v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="tonal" :color="color" @click="os.buy=!os.buy"/>
<v-btn :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s" variant="tonal" :color="color" @click="order.buy=!order.buy"/>
</template>
<template v-slot:append-inner>
<v-btn :text="os.amountToken.s+(os.amountIsTokenA?'':' worth')" :color="color" variant="text" @click="os.amountIsTokenA=!os.amountIsTokenA"/>
<v-btn :text="order.amountIsTokenA?co.selectedSymbol.base.s:co.selectedSymbol.quote.s+' worth'"
:color="color" variant="text" @click="order.amountIsTokenA=!order.amountIsTokenA"/>
</template>
</v-text-field>
<template v-for="b in builders(order)">
<builder-factory :order="order" :builder="b" :color="color"/>
<builder-factory :order="order" :builder="b"/>
</template>
<div class="my-3">
<span :style="colorStyle" class="ma-3">Add condition:</span>
@@ -51,6 +52,7 @@ const props = defineProps(['order'])
const co = useChartOrderStore()
const os = useOrderStore()
console.log('order', props.order)
function build(order, component, options={}) {
order.builders.push(newBuilder(component, options))
}
@@ -61,7 +63,7 @@ function builders(order) {
}
const theme = useTheme().current
const color = computed(()=>os.buy?theme.value.colors.success:theme.value.colors.error)
const color = computed(()=>props.order.buy?theme.value.colors.success:theme.value.colors.error)
const lightColor = computed(() => lightenColor(color.value))
const faintColor = computed(() => lightenColor2(color.value))
const colorStyle = computed(() => { return {'color': color.value} })
@@ -69,9 +71,9 @@ const bgColorStyle = computed(() => { return {'background-color': color.value} }
const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
const inToken = computed( ()=>os.buy ? os.tokenB : os.tokenA )
const inToken = computed( ()=>props.order.buy ? co.selectedSymbol.quote : co.selectedSymbol.base )
const maxAmount = computed(()=>{
const balance = s.balances[inToken]
const balance = s.balances[inToken.value]
if( !balance )
return 0
const divisor = os.amountIsTotal ? 1 : os.tranches