feat: basic use of custom components

This commit is contained in:
Vlad Stan 2022-07-22 16:27:35 +03:00
parent f102928812
commit b96bdf25f6
5 changed files with 1231 additions and 1174 deletions

View File

@ -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>

View File

@ -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)
}
}
});
}

View File

@ -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()

View File

@ -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
}

View File

@ -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 %}