|
|
@ -250,6 +250,14 @@ class TradePortal extends LitElement { |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab-text { |
|
|
|
|
|
|
|
color: var(--tradehave); |
|
|
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
text-align: left; |
|
|
|
|
|
|
|
margin-top: 2px; |
|
|
|
|
|
|
|
margin-bottom: -12px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.historic-trades { |
|
|
|
.historic-trades { |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
@ -529,6 +537,7 @@ class TradePortal extends LitElement { |
|
|
|
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="openOrdersGrid" aria-label="Open Orders" .items="${this.listedCoins.get(this.selectedCoin).openFilteredOrders}"> |
|
|
|
<vaadin-grid multi-sort="true" theme="compact column-borders row-stripes wrap-cell-content" id="openOrdersGrid" aria-label="Open Orders" .items="${this.listedCoins.get(this.selectedCoin).openFilteredOrders}"> |
|
|
|
<vaadin-grid-column |
|
|
|
<vaadin-grid-column |
|
|
|
auto-width |
|
|
|
auto-width |
|
|
|
|
|
|
|
resizable |
|
|
|
header="${translate("tradepage.tchange8")} (QORT)" |
|
|
|
header="${translate("tradepage.tchange8")} (QORT)" |
|
|
|
id="qortAmountColumn" |
|
|
|
id="qortAmountColumn" |
|
|
|
path="qortAmount" |
|
|
|
path="qortAmount" |
|
|
@ -587,11 +596,13 @@ class TradePortal extends LitElement { |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button> |
|
|
|
<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearBuyForm()}"></mwc-icon-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span class="tab-text">${translate("tradepage.tchange8")} (QORT)*</span> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="buyAmountInput" |
|
|
|
id="buyAmountInput" |
|
|
|
required readOnly label="${translate("tradepage.tchange8")} (QORT)" |
|
|
|
required readOnly |
|
|
|
|
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
type="text"
|
|
|
|
type="text"
|
|
|
|
auto-validate="false" |
|
|
|
auto-validate="false" |
|
|
@ -599,12 +610,13 @@ class TradePortal extends LitElement { |
|
|
|
> |
|
|
|
> |
|
|
|
</mwc-textfield> |
|
|
|
</mwc-textfield> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
<span class="tab-text">${translate("tradepage.tchange14")} (${this.listedCoins.get(this.selectedCoin).coinCode})*</span> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="buyPriceInput" |
|
|
|
id="buyPriceInput" |
|
|
|
required readOnly |
|
|
|
required readOnly |
|
|
|
label="${translate("tradepage.tchange14")} (${this.listedCoins.get(this.selectedCoin).coinCode})" |
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
auto-validate="false" |
|
|
|
auto-validate="false" |
|
|
@ -612,12 +624,13 @@ class TradePortal extends LitElement { |
|
|
|
> |
|
|
|
> |
|
|
|
</mwc-textfield> |
|
|
|
</mwc-textfield> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p style="margin-bottom: 10px;"> |
|
|
|
<span class="tab-text">${translate("tradepage.tchange10")} (${this.listedCoins.get(this.selectedCoin).coinCode})*</span> |
|
|
|
|
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="buyTotalInput" |
|
|
|
id="buyTotalInput" |
|
|
|
required readOnly |
|
|
|
required readOnly |
|
|
|
label="${translate("tradepage.tchange10")} (${this.listedCoins.get(this.selectedCoin).coinCode})" |
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
auto-validate="false" |
|
|
|
auto-validate="false" |
|
|
@ -649,12 +662,14 @@ class TradePortal extends LitElement { |
|
|
|
<div class="card"> |
|
|
|
<div class="card"> |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<div style="margin-left: auto"> |
|
|
|
<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button> |
|
|
|
<mwc-icon-button class="btn-clear" title="${translate("tradepage.tchange15")}" icon="clear_all" @click="${() => this.clearSellForm()}"></mwc-icon-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<span class="tab-text">${translate("tradepage.tchange8")} (QORT)*</span> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="sellAmountInput" |
|
|
|
id="sellAmountInput" |
|
|
|
required label="${translate("tradepage.tchange8")} (QORT)" |
|
|
|
required |
|
|
|
|
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
@input="${(e) => { this._checkSellAmount(e) }}" |
|
|
|
@input="${(e) => { this._checkSellAmount(e) }}" |
|
|
|
type="number" |
|
|
|
type="number" |
|
|
@ -663,11 +678,13 @@ class TradePortal extends LitElement { |
|
|
|
> |
|
|
|
> |
|
|
|
</mwc-textfield> |
|
|
|
</mwc-textfield> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
<span class="tab-text">${translate("tradepage.tchange14")} (${this.listedCoins.get(this.selectedCoin).coinCode})*</span> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="sellPriceInput" |
|
|
|
id="sellPriceInput" |
|
|
|
required label="${translate("tradepage.tchange14")} (${this.listedCoins.get(this.selectedCoin).coinCode})" |
|
|
|
required |
|
|
|
|
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
@input="${(e) => { this._checkSellAmount(e) }}" |
|
|
|
@input="${(e) => { this._checkSellAmount(e) }}" |
|
|
|
type="number" |
|
|
|
type="number" |
|
|
@ -676,12 +693,13 @@ class TradePortal extends LitElement { |
|
|
|
> |
|
|
|
> |
|
|
|
</mwc-textfield> |
|
|
|
</mwc-textfield> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p style="margin-bottom: 10px;"> |
|
|
|
<span class="tab-text">${translate("tradepage.tchange10")} (${this.listedCoins.get(this.selectedCoin).coinCode})*</span> |
|
|
|
|
|
|
|
<p> |
|
|
|
<mwc-textfield |
|
|
|
<mwc-textfield |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
style="width: 100%; color: var(--black);" |
|
|
|
id="sellTotalInput" |
|
|
|
id="sellTotalInput" |
|
|
|
required readOnly |
|
|
|
required readOnly |
|
|
|
label="${translate("tradepage.tchange10")} (${this.listedCoins.get(this.selectedCoin).coinCode})" |
|
|
|
label="" |
|
|
|
placeholder="0.0000" |
|
|
|
placeholder="0.0000" |
|
|
|
type="number" |
|
|
|
type="number" |
|
|
|
auto-validate="false" |
|
|
|
auto-validate="false" |
|
|
@ -1027,7 +1045,8 @@ class TradePortal extends LitElement { |
|
|
|
this.isLoadingOpenTrades = true |
|
|
|
this.isLoadingOpenTrades = true |
|
|
|
this.createConnection() |
|
|
|
this.createConnection() |
|
|
|
this._openOrdersGrid.querySelector('#priceColumn').headerRenderer = function (root) { |
|
|
|
this._openOrdersGrid.querySelector('#priceColumn').headerRenderer = function (root) { |
|
|
|
root.innerHTML = '<vaadin-grid-sorter path="price" direction="asc">Price (' + _this.listedCoins.get(_this.selectedCoin).coinCode + ')</vaadin-grid-sorter>' |
|
|
|
const priceString2 = get("tradepage.tchange9") |
|
|
|
|
|
|
|
root.innerHTML = '<vaadin-grid-sorter path="price" direction="asc">' + priceString2 + ' (' + _this.listedCoins.get(_this.selectedCoin).coinCode + ')</vaadin-grid-sorter>' |
|
|
|
} |
|
|
|
} |
|
|
|
this.clearSellForm() |
|
|
|
this.clearSellForm() |
|
|
|
this.clearBuyForm() |
|
|
|
this.clearBuyForm() |
|
|
|