feat: basic use of custom components
This commit is contained in:
parent
f102928812
commit
b96bdf25f6
|
@ -0,0 +1,5 @@
|
||||||
|
<div class="checkbox-wrapper" @click="check">
|
||||||
|
<div :class="{ checkbox: true, checked: checked }"></div>
|
||||||
|
<div class="title">{{ title }}</div>
|
||||||
|
<q-btn color="primary">XXX</q-btn>
|
||||||
|
</div>
|
|
@ -0,0 +1,18 @@
|
||||||
|
async function initMyCheckbox(path) {
|
||||||
|
const t = await loadTemplateAsync(path)
|
||||||
|
Vue.component('my-checkbox', {
|
||||||
|
name:'my-checkbox',
|
||||||
|
template: t,
|
||||||
|
data() {
|
||||||
|
return { checked: false, title: 'Check me' }
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
check() {
|
||||||
|
this.checked = !this.checked;
|
||||||
|
console.log('### checked', this.checked)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
|
const watchOnly = async () => {
|
||||||
Vue.component(VueQrcode.name, VueQrcode)
|
Vue.component(VueQrcode.name, VueQrcode)
|
||||||
|
await initMyCheckbox('static/js/components/my-checkbox/my-checkbox.html')
|
||||||
|
|
||||||
Vue.filter('reverse', function (value) {
|
Vue.filter('reverse', function (value) {
|
||||||
// slice to make a copy of array, then reverse the copy
|
// slice to make a copy of array, then reverse the copy
|
||||||
|
@ -8,6 +10,10 @@ Vue.filter('reverse', function (value) {
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#vue',
|
el: '#vue',
|
||||||
mixins: [windowMixin],
|
mixins: [windowMixin],
|
||||||
|
mounted: function () {
|
||||||
|
console.log('### mounted')
|
||||||
|
},
|
||||||
|
// components: ['my-checkbox'],
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
DUST_LIMIT: 546,
|
DUST_LIMIT: 546,
|
||||||
|
@ -147,7 +153,9 @@ new Vue({
|
||||||
'/watchonly/api/v1/wallet/' + walletAccountId,
|
'/watchonly/api/v1/wallet/' + walletAccountId,
|
||||||
this.g.user.wallets[0].adminkey
|
this.g.user.wallets[0].adminkey
|
||||||
)
|
)
|
||||||
this.walletAccounts = _.reject(this.walletAccounts, function (obj) {
|
this.walletAccounts = _.reject(this.walletAccounts, function (
|
||||||
|
obj
|
||||||
|
) {
|
||||||
return obj.id === walletAccountId
|
return obj.id === walletAccountId
|
||||||
})
|
})
|
||||||
await this.refreshWalletAccounts()
|
await this.refreshWalletAccounts()
|
||||||
|
@ -163,7 +171,8 @@ new Vue({
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.$q.notify({
|
this.$q.notify({
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
message: 'Error while deleting wallet account. Please try again.',
|
message:
|
||||||
|
'Error while deleting wallet account. Please try again.',
|
||||||
timeout: 10000
|
timeout: 10000
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -229,7 +238,8 @@ new Vue({
|
||||||
)
|
)
|
||||||
|
|
||||||
const lastAcctiveAddress =
|
const lastAcctiveAddress =
|
||||||
uniqueAddresses.filter(a => !a.isChange && a.hasActivity).pop() || {}
|
uniqueAddresses.filter(a => !a.isChange && a.hasActivity).pop() ||
|
||||||
|
{}
|
||||||
|
|
||||||
uniqueAddresses.forEach(a => {
|
uniqueAddresses.forEach(a => {
|
||||||
a.expanded = false
|
a.expanded = false
|
||||||
|
@ -326,7 +336,8 @@ new Vue({
|
||||||
const lastAcctiveAddress =
|
const lastAcctiveAddress =
|
||||||
this.addresses.data
|
this.addresses.data
|
||||||
.filter(
|
.filter(
|
||||||
a => a.wallet === addressData.wallet && !a.isChange && a.hasActivity
|
a =>
|
||||||
|
a.wallet === addressData.wallet && !a.isChange && a.hasActivity
|
||||||
)
|
)
|
||||||
.pop() || {}
|
.pop() || {}
|
||||||
addressData.gapLimitExceeded =
|
addressData.gapLimitExceeded =
|
||||||
|
@ -472,7 +483,8 @@ new Vue({
|
||||||
},
|
},
|
||||||
getFeeRateLabel: function (feeRate) {
|
getFeeRateLabel: function (feeRate) {
|
||||||
const fees = this.payment.recommededFees
|
const fees = this.payment.recommededFees
|
||||||
if (feeRate >= fees.fastestFee) return `High Priority (${feeRate} sat/vB)`
|
if (feeRate >= fees.fastestFee)
|
||||||
|
return `High Priority (${feeRate} sat/vB)`
|
||||||
if (feeRate >= fees.halfHourFee)
|
if (feeRate >= fees.halfHourFee)
|
||||||
return `Medium Priority (${feeRate} sat/vB)`
|
return `Medium Priority (${feeRate} sat/vB)`
|
||||||
if (feeRate >= fees.hourFee) return `Low Priority (${feeRate} sat/vB)`
|
if (feeRate >= fees.hourFee) return `Low Priority (${feeRate} sat/vB)`
|
||||||
|
@ -718,7 +730,8 @@ new Vue({
|
||||||
else if (msg[0] == COMMAND_PASSWORD) this.handleLoginResponse(msg[1])
|
else if (msg[0] == COMMAND_PASSWORD) this.handleLoginResponse(msg[1])
|
||||||
else if (msg[0] == COMMAND_PASSWORD_CLEAR)
|
else if (msg[0] == COMMAND_PASSWORD_CLEAR)
|
||||||
this.handleLogoutResponse(msg[1])
|
this.handleLogoutResponse(msg[1])
|
||||||
else if (msg[0] == COMMAND_SEND_PSBT) this.handleSendPsbtResponse(msg[1])
|
else if (msg[0] == COMMAND_SEND_PSBT)
|
||||||
|
this.handleSendPsbtResponse(msg[1])
|
||||||
else if (msg[0] == COMMAND_WIPE) this.handleWipeResponse(msg[1])
|
else if (msg[0] == COMMAND_WIPE) this.handleWipeResponse(msg[1])
|
||||||
else console.log('### handleSerialPortResponse', value)
|
else console.log('### handleSerialPortResponse', value)
|
||||||
},
|
},
|
||||||
|
@ -1038,7 +1051,9 @@ new Vue({
|
||||||
|
|
||||||
if (addressHistory.length) {
|
if (addressHistory.length) {
|
||||||
// search only if it ever had any activity
|
// search only if it ever had any activity
|
||||||
const utxos = await this.getAddressTxsUtxoDelayed(addrData.address)
|
const utxos = await this.getAddressTxsUtxoDelayed(
|
||||||
|
addrData.address
|
||||||
|
)
|
||||||
this.updateUtxosForAddress(addrData, utxos)
|
this.updateUtxosForAddress(addrData, utxos)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1123,9 +1138,7 @@ new Vue({
|
||||||
getAddressTxsDelayed: async function (addrData) {
|
getAddressTxsDelayed: async function (addrData) {
|
||||||
const {
|
const {
|
||||||
bitcoin: {addresses: addressesAPI}
|
bitcoin: {addresses: addressesAPI}
|
||||||
} = mempoolJS({
|
} = mempoolJS()
|
||||||
hostname: new URL(this.config.data.mempool_endpoint).hostname
|
|
||||||
})
|
|
||||||
|
|
||||||
const fn = async () =>
|
const fn = async () =>
|
||||||
addressesAPI.getAddressTxs({
|
addressesAPI.getAddressTxs({
|
||||||
|
@ -1138,9 +1151,7 @@ new Vue({
|
||||||
refreshRecommendedFees: async function () {
|
refreshRecommendedFees: async function () {
|
||||||
const {
|
const {
|
||||||
bitcoin: {fees: feesAPI}
|
bitcoin: {fees: feesAPI}
|
||||||
} = mempoolJS({
|
} = mempoolJS()
|
||||||
hostname: new URL(this.config.data.mempool_endpoint).hostname
|
|
||||||
})
|
|
||||||
|
|
||||||
const fn = async () => feesAPI.getFeesRecommended()
|
const fn = async () => feesAPI.getFeesRecommended()
|
||||||
this.payment.recommededFees = await retryWithDelay(fn)
|
this.payment.recommededFees = await retryWithDelay(fn)
|
||||||
|
@ -1148,9 +1159,7 @@ new Vue({
|
||||||
getAddressTxsUtxoDelayed: async function (address) {
|
getAddressTxsUtxoDelayed: async function (address) {
|
||||||
const {
|
const {
|
||||||
bitcoin: {addresses: addressesAPI}
|
bitcoin: {addresses: addressesAPI}
|
||||||
} = mempoolJS({
|
} = mempoolJS()
|
||||||
hostname: new URL(this.config.data.mempool_endpoint).hostname
|
|
||||||
})
|
|
||||||
|
|
||||||
const fn = async () =>
|
const fn = async () =>
|
||||||
addressesAPI.getAddressTxsUtxo({
|
addressesAPI.getAddressTxsUtxo({
|
||||||
|
@ -1161,9 +1170,7 @@ new Vue({
|
||||||
fetchTxHex: async function (txId) {
|
fetchTxHex: async function (txId) {
|
||||||
const {
|
const {
|
||||||
bitcoin: {transactions: transactionsAPI}
|
bitcoin: {transactions: transactionsAPI}
|
||||||
} = mempoolJS({
|
} = mempoolJS()
|
||||||
hostname: new URL(this.config.data.mempool_endpoint).hostname
|
|
||||||
})
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await transactionsAPI.getTxHex({txid: txId})
|
const response = await transactionsAPI.getTxHex({txid: txId})
|
||||||
|
@ -1202,7 +1209,9 @@ new Vue({
|
||||||
? 0.0
|
? 0.0
|
||||||
: (val / 100000000).toFixed(8)
|
: (val / 100000000).toFixed(8)
|
||||||
if (!showUnit) return value
|
if (!showUnit) return value
|
||||||
return this.config.data.sats_denominated ? value + ' sat' : value + ' BTC'
|
return this.config.data.sats_denominated
|
||||||
|
? value + ' sat'
|
||||||
|
: value + ' BTC'
|
||||||
},
|
},
|
||||||
getAccountDescription: function (accountType) {
|
getAccountDescription: function (accountType) {
|
||||||
return getAccountDescription(accountType)
|
return getAccountDescription(accountType)
|
||||||
|
@ -1217,3 +1226,5 @@ new Vue({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
watchOnly()
|
||||||
|
|
|
@ -139,3 +139,23 @@ const readFromSerialPort = serial => {
|
||||||
}
|
}
|
||||||
return readStringUntil
|
return readStringUntil
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadTemplateAsync(path) {
|
||||||
|
const result = new Promise(resolve => {
|
||||||
|
const xhttp = new XMLHttpRequest()
|
||||||
|
console.log('### 300')
|
||||||
|
|
||||||
|
xhttp.onreadystatechange = function () {
|
||||||
|
if (this.readyState == 4) {
|
||||||
|
if (this.status == 200) resolve(this.responseText)
|
||||||
|
|
||||||
|
if (this.status == 404) resolve('Page not found.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
xhttp.open('GET', path, true)
|
||||||
|
xhttp.send()
|
||||||
|
})
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
|
@ -31,7 +31,9 @@
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-auto q-pr-lg"></div>
|
<div class="col-auto q-pr-lg">
|
||||||
|
<my-checkbox></my-checkbox>
|
||||||
|
</div>
|
||||||
<div class="col-auto q-pl-lg">
|
<div class="col-auto q-pl-lg">
|
||||||
<q-input
|
<q-input
|
||||||
borderless
|
borderless
|
||||||
|
@ -1710,5 +1712,6 @@
|
||||||
<script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
|
<script src="{{ url_for('watchonly_static', path='js/tables.js') }}"></script>
|
||||||
<script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
|
<script src="{{ url_for('watchonly_static', path='js/map.js') }}"></script>
|
||||||
<script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
|
<script src="{{ url_for('watchonly_static', path='js/utils.js') }}"></script>
|
||||||
|
<script src="{{ url_for('watchonly_static', path='js/components/my-checkbox/my-checkbox.js') }}"></script>
|
||||||
<script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
|
<script src="{{ url_for('watchonly_static', path='js/index.js') }}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user