Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui: Fix order options bugs #1669

Merged
merged 2 commits into from
Jun 23, 2022
Merged

ui: Fix order options bugs #1669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a2db17
ui: Fix order options bugs
martonp Jun 17, 2022
016c348
Fix issue of slider jumping back
martonp Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 36 additions & 19 deletions client/webserver/site/src/html/forms.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,25 +418,7 @@
</div>
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="accelerateErr"></div>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{/* range option template goes here */}}
<div id="accelerateMsgDiv" class="d-hide">
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="preAccelerateErr"></div>
<div class="fs15 pt-3 text-left d-hide text-break" id="accelerateSuccess">
Expand Down Expand Up @@ -501,3 +483,38 @@
[[[pick a different asset]]]
</div>
{{end}}

{{define "orderOptionTemplates"}}
<div id="orderOptTmpl" class="order-opt d-flex align-items-start">
<div data-tmpl="toggle" class="opt-check selected"></div>
<div class="flex-grow-1" data-tmpl="controls">
<div class="d-flex align-items-center">
<span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
<span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="Prevent temporary overlocking of funds"></span>
<img data-tmpl="chainIcon" class="micro-icon me-1">
</div>
</div>
</div>
<div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
<span data-tmpl="reason"></span>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{end}}
39 changes: 1 addition & 38 deletions client/webserver/site/src/html/markets.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,45 +518,8 @@
<div class="grey fs18 text-start">[[[Options]]]</div>

<div id="vOrderOpts">
{{- /* Order Option Templates */ -}}
<div id="orderOptTmpl" class="order-opt d-flex align-items-start">
<div data-tmpl="toggle" class="opt-check selected"></div>
<div class="flex-grow-1" data-tmpl="controls">
<div class="d-flex align-items-center">
<span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
<span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="Prevent temporary overlocking of funds"></span>
<img data-tmpl="chainIcon" class="micro-icon me-1">
</div>

<div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
<span data-tmpl="reason"></span>
</div>

<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>

<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>

</div>
</div>
{{template "orderOptionTemplates"}}
</div>

</div> {{- /* END id="vPreorder" */ -}}

<div id="vUnlockPreorder">
Expand Down
5 changes: 3 additions & 2 deletions client/webserver/site/src/html/order.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<span class="fs18">{{$ord.ID}}</span>
<span class="float-end me-2"><a href="/orders" class="d-inline-block subtlelink fs15"><span class="fs12 ico-textfile"></span> [[[see all orders]]]</a></span>
</div>

{{- /* DATA CARDS */ -}}
<div class="d-flex flex-wrap">
<div class="order-datum">
Expand Down Expand Up @@ -219,7 +218,9 @@
</div>

</div>

<div id="vOrderOpts">
{{template "orderOptionTemplates"}}
</div>
<div id="forms" class="d-hide">
<form class="d-hide" id="cancelForm" autocomplete="off">
{{template "cancelOrderForm" .}}
Expand Down
1 change: 0 additions & 1 deletion client/webserver/site/src/js/forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1027,7 +1027,6 @@ export class AccelerateOrderForm {
this.currencyUnit = preAccelerate.suggestedRange.yUnit
page.accelerateAvgFeeRate.textContent = `${preAccelerate.swapRate} ${preAccelerate.suggestedRange.yUnit}`
page.accelerateCurrentFeeRate.textContent = `${preAccelerate.suggestedRate} ${preAccelerate.suggestedRange.yUnit}`
OrderUtil.setOptionTemplates(page)
this.acceleratedRate = preAccelerate.suggestedRange.start.y
const selected = () => { /* do nothing */ }
const roundY = true
Expand Down
8 changes: 2 additions & 6 deletions client/webserver/site/src/js/markets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ export default class MarketsPage extends BasePage {
const success = () => { /* do nothing */ }
// Do not call cleanTemplates before creating the AccelerateOrderForm
this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success)
Doc.cleanTemplates(page.rangeOptTmpl)

// TODO: Store user's state and reload last known configuration.
this.candleChart.hide()
Expand All @@ -240,8 +239,8 @@ export default class MarketsPage extends BasePage {
}

// Prepare templates for the buy and sell tables and the user's order table.
Doc.cleanTemplates(page.rowTemplate, page.liveTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl)
OrderUtil.setOptionTemplates(page)
Doc.cleanTemplates(page.rowTemplate, page.liveTemplate, page.durBttnTemplate, page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl)

// Prepare the list of markets.
this.marketList = new MarketList(page.marketList)
Expand Down Expand Up @@ -1786,12 +1785,9 @@ export default class MarketsPage extends BasePage {
async submitOrder () {
const page = this.page
Doc.hide(page.orderErr, page.vErr)
const order = this.parseOrder()
const order = this.currentOrder
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the reason the order options weren't being passed to the client.

const pw = page.vPass.value
page.vPass.value = ''
// order options must be a string -> string map.
const stringyOptions: Record<string, string> = {}
for (const [k, v] of Object.entries(order.options)) stringyOptions[k] = JSON.stringify(v)
const req = {
order: wireOrder(order),
pw: pw
Expand Down
3 changes: 2 additions & 1 deletion client/webserver/site/src/js/order.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,9 @@ export default class OrderPage extends BasePage {
this.refreshOnPopupClose = true
}
// Do not call cleanTemplates before creating the AccelerateOrderForm
OrderUtil.setOptionTemplates(page)
Copy link
Member

@buck54321 buck54321 Jun 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setOptionTemplates thing is kinda a hack anyway. We should really just pass the page.*Tmpl elements to the form constructors. But no reason to mix it up now.

this.accelerateOrderForm = new AccelerateOrderForm(page.accelerateForm, success)
Doc.cleanTemplates(page.rangeOptTmpl)
Doc.cleanTemplates(page.booleanOptTmpl, page.rangeOptTmpl, page.orderOptTmpl)

// If the user clicks outside of a form, it should close the page overlay.
Doc.bind(page.forms, 'mousedown', (e: MouseEvent) => {
Expand Down
5 changes: 4 additions & 1 deletion client/webserver/site/src/js/orderutil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,10 @@ class XYRangeOrderOption extends OrderOption {
} else {
this.x = opt.default
}
const onUpdate = (x: number) => { this.order.options[this.opt.key] = x }
const onUpdate = (x: number) => {
this.x = x
this.order.options[this.opt.key] = x
}
const onChange = () => { this.changed() }
const selected = () => { this.node.classList.add('selected') }
this.handler = new XYRangeHandler(cfg, this.x, onUpdate, onChange, selected)
Expand Down
55 changes: 36 additions & 19 deletions client/webserver/site/src/localized_html/en-US/forms.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,25 +418,7 @@
</div>
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="accelerateErr"></div>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{/* range option template goes here */}}
<div id="accelerateMsgDiv" class="d-hide">
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="preAccelerateErr"></div>
<div class="fs15 pt-3 text-left d-hide text-break" id="accelerateSuccess">
Expand Down Expand Up @@ -501,3 +483,38 @@
pick a different asset
</div>
{{end}}

{{define "orderOptionTemplates"}}
<div id="orderOptTmpl" class="order-opt d-flex align-items-start">
<div data-tmpl="toggle" class="opt-check selected"></div>
<div class="flex-grow-1" data-tmpl="controls">
<div class="d-flex align-items-center">
<span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
<span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="Prevent temporary overlocking of funds"></span>
<img data-tmpl="chainIcon" class="micro-icon me-1">
</div>
</div>
</div>
<div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
<span data-tmpl="reason"></span>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{end}}
39 changes: 1 addition & 38 deletions client/webserver/site/src/localized_html/en-US/markets.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,45 +518,8 @@
<div class="grey fs18 text-start">Options</div>

<div id="vOrderOpts">
{{- /* Order Option Templates */ -}}
<div id="orderOptTmpl" class="order-opt d-flex align-items-start">
<div data-tmpl="toggle" class="opt-check selected"></div>
<div class="flex-grow-1" data-tmpl="controls">
<div class="d-flex align-items-center">
<span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
<span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="Prevent temporary overlocking of funds"></span>
<img data-tmpl="chainIcon" class="micro-icon me-1">
</div>

<div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
<span data-tmpl="reason"></span>
</div>

<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>

<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>

</div>
</div>
{{template "orderOptionTemplates"}}
</div>

</div> {{- /* END id="vPreorder" */ -}}

<div id="vUnlockPreorder">
Expand Down
5 changes: 3 additions & 2 deletions client/webserver/site/src/localized_html/en-US/order.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<span class="fs18">{{$ord.ID}}</span>
<span class="float-end me-2"><a href="/orders" class="d-inline-block subtlelink fs15"><span class="fs12 ico-textfile"></span> see all orders</a></span>
</div>

{{- /* DATA CARDS */ -}}
<div class="d-flex flex-wrap">
<div class="order-datum">
Expand Down Expand Up @@ -219,7 +218,9 @@
</div>

</div>

<div id="vOrderOpts">
{{template "orderOptionTemplates"}}
</div>
<div id="forms" class="d-hide">
<form class="d-hide" id="cancelForm" autocomplete="off">
{{template "cancelOrderForm" .}}
Expand Down
55 changes: 36 additions & 19 deletions client/webserver/site/src/localized_html/pl-PL/forms.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,25 +418,7 @@
</div>
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="accelerateErr"></div>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{/* range option template goes here */}}
<div id="accelerateMsgDiv" class="d-hide">
<div class="fs15 pt-3 text-center d-hide errcolor text-break" id="preAccelerateErr"></div>
<div class="fs15 pt-3 text-left d-hide text-break" id="accelerateSuccess">
Expand Down Expand Up @@ -501,3 +483,38 @@
wybierz inne aktywo
</div>
{{end}}

{{define "orderOptionTemplates"}}
<div id="orderOptTmpl" class="order-opt d-flex align-items-start">
<div data-tmpl="toggle" class="opt-check selected"></div>
<div class="flex-grow-1" data-tmpl="controls">
<div class="d-flex align-items-center">
<span data-tmpl="optName" class="flex-grow-1 text-start fs16 ps-2"></span>
<span data-tmpl="tooltip" class="ico-info me-2" data-tooltip="Prevent temporary overlocking of funds"></span>
<img data-tmpl="chainIcon" class="micro-icon me-1">
</div>
</div>
</div>
<div id="booleanOptTmpl" class="d-flex justify-content-between align-items-center fs14 ps-2">
<span data-tmpl="reason"></span>
</div>
<div id="rangeOptTmpl">
<div class="d-flex flex-nowrap fs12">
<span data-tmpl="rangeLblStart"></span>
<div data-tmpl="slider" class="slider flex-grow-1">
<div data-tmpl="handle" class="slider-handle"></div>
</div>
<span data-tmpl="rangeLblEnd"></span>
</div>
<div class="d-flex justify-content-between align-items-center fs14">
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="xInput" class="xy-range-input d-hide">
<span data-tmpl="x" class="pointer"></span> <span data-tmpl="xUnit"></span>
</span>
<span>
<input type="text" pattern="[0-9]+([\.,][0-9]+)?" data-tmpl="yInput" class="xy-range-input d-hide">
<span data-tmpl="y" class="pointer"></span> <span data-tmpl="yUnit"></span>
</span>
</div>
</div>
{{end}}
Loading