lnbits-exts/satmachineclient
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

format

Browse source
This commit is contained in:
benarc 2024-02-01 17:18:55 +00:00
parent 66d44f95fb
commit 2cac36be17
12 changed files with 272 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

9
templates/myextension/_api_docs.html
View file

@ -1,8 +1,3 @@
<q-expansion-item
group="extras"
icon="swap_vertical_circle"
label="API info"
:content-inset-level="0.5"
>
<q-expansion-item group="extras" icon="swap_vertical_circle" label="API info" :content-inset-level="0.5">
<q-btn flat label="Swagger API" type="a" href="../docs#/MyExtension"></q-btn>
</q-expansion-item>
</q-expansion-item>

24
templates/myextension/_myextension.html
View file

@ -4,24 +4,10 @@
<p>
Some more info about my excellent extension.
</p>
<small
>Created by
<a
class="text-secondary"
href="https://github.com/benarc"
target="_blank"
>Ben Arc</a
>.</small
>
<small
>Repo
<a
class="text-secondary"
href="https://github.com/lnbits/myextension"
target="_blank"
>MyExtension</a
>.</small
>
<small>Created by
<a class="text-secondary" href="https://github.com/benarc" target="_blank">Ben Arc</a>.</small>
<small>Repo
<a class="text-secondary" href="https://github.com/lnbits/myextension" target="_blank">MyExtension</a>.</small>
</q-card-section>
</q-card>
</q-expansion-item>
</q-expansion-item>

255
templates/myextension/index.html
View file

@ -4,10 +4,8 @@
<div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
<q-card>
<q-card-section>
<q-btn unelevated color="primary" @click="formDialog.show = true"
>New MyExtension</q-btn
>
</q-card-section>
<q-btn unelevated color="primary" @click="formDialog.show = true">New MyExtension</q-btn>
</q-card-section>
</q-card>
<q-card>
@ -20,14 +18,8 @@
<q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
</div>
</div>
<q-table
dense
flat
:data="temps"
row-key="id"
:columns="tempsTable.columns"
:pagination.sync="tempsTable.pagination"
>
<q-table dense flat :data="temps" row-key="id" :columns="tempsTable.columns"
:pagination.sync="tempsTable.pagination">
<myextension v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -38,63 +30,30 @@
<template v-slot:body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.field == 'total'">${ col.value / 1000} sats</div>
<div v-else>${ col.value }</div>
</q-td>
<q-td auto-width>
<q-btn
unelevated
dense
size="sm"
icon="qr_code"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
class="q-mr-sm"
@click="openUrlDialog(props.row.id)"
></q-btn></q-td>
<q-td auto-width>
<q-btn
unelevated
dense
size="sm"
icon="launch"
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a"
:href="props.row.myextension"
target="_blank"
><q-tooltip>Open public page</q-tooltip></q-btn
></q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.field == 'total'">${ col.value / 1000} sats</div>
<div v-else>${ col.value }</div>
</q-td>
<q-td auto-width>
<q-btn unelevated dense size="sm" icon="qr_code" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
class="q-mr-sm" @click="openUrlDialog(props.row.id)"></q-btn></q-td>
<q-td auto-width>
<q-btn unelevated dense size="sm" icon="launch" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
type="a" :href="props.row.myextension" target="_blank"><q-tooltip>Open public
page</q-tooltip></q-btn></q-td>
<q-td>
<q-btn
flat
dense
size="xs"
@click="updateMyExtensionForm(props.row.id)"
icon="edit"
color="light-blue"
>
<q-tooltip> Edit copilot </q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn flat dense size="xs" @click="updateMyExtensionForm(props.row.id)" icon="edit" color="light-blue">
<q-tooltip> Edit copilot </q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn flat dense size="xs" @click="deleteMyExtension(props.row.id)" icon="cancel" color="pink">
<q-tooltip> Delete copilot </q-tooltip>
</q-btn>
</q-td>
<q-td>
<q-btn
flat
dense
size="xs"
@click="deleteMyExtension(props.row.id)"
icon="cancel"
color="pink"
>
<q-tooltip> Delete copilot </q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
@ -107,7 +66,8 @@
<q-card>
<q-card-section>
<h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} MyExtension extension</h6>
<p>Simple extension you can use as a base for your own extension. <br/> Includes very simple LNURL-pay and LNURL-withdraw example.</p>
<p>Simple extension you can use as a base for your own extension. <br /> Includes very simple LNURL-pay and
LNURL-withdraw example.</p>
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator></q-separator>
@ -123,54 +83,20 @@
<q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px">
<q-form @submit="sendMyExtensionData" class="q-gutter-md">
<q-input
filled
dense
v-model.trim="formDialog.data.name"
label="Name"
placeholder="Name for your record"
></q-input>
<q-select
filled
dense
emit-value
v-model="formDialog.data.wallet"
:options="g.user.walletOptions"
label="Wallet *"
></q-select>
<q-input
filled
dense
type="number"
v-model.trim="formDialog.data.lnurlwithdrawamount"
label="LNURL-withdraw amount"
></q-input>
<q-input
filled
dense
type="number"
v-model.trim="formDialog.data.lnurlpayamount"
label="LNURL-pay amount"
></q-input>
<q-input filled dense v-model.trim="formDialog.data.name" label="Name"
placeholder="Name for your record"></q-input>
<q-select filled dense emit-value v-model="formDialog.data.wallet" :options="g.user.walletOptions"
label="Wallet *"></q-select>
<q-input filled dense type="number" v-model.trim="formDialog.data.lnurlwithdrawamount"
label="LNURL-withdraw amount"></q-input>
<q-input filled dense type="number" v-model.trim="formDialog.data.lnurlpayamount"
label="LNURL-pay amount"></q-input>
<div class="row q-mt-lg">
<q-btn
v-if="formDialog.data.id"
unelevated
color="primary"
type="submit"
>Update MyExtension</q-btn
>
<q-btn
v-else
unelevated
color="primary"
<q-btn v-if="formDialog.data.id" unelevated color="primary" type="submit">Update MyExtension</q-btn>
<q-btn v-else unelevated color="primary"
:disable="formDialog.data.name == null || formDialog.data.wallet == null || formDialog.data.lnurlwithdrawamount == null || formDialog.data.lnurlpayamount == null"
type="submit"
>Create MyExtension</q-btn
>
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
type="submit">Create MyExtension</q-btn>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div>
</q-form>
</q-card>
@ -178,31 +104,30 @@
<q-dialog v-model="urlDialog.show" position="top">
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
<q-responsive :ratio="1" class="q-mx-xl q-mb-md">
<lnbits-qrcode
:value="qrValue"
></lnbits-qrcode>
</q-responsive>
<center><q-btn label="copy" @click="copyText(qrValue)"></q-btn>
</center>
<lnbits-qrcode :value="qrValue"></lnbits-qrcode>
</q-responsive>
<center><q-btn label="copy" @click="copyText(qrValue)"></q-btn>
</center>
<q-separator></q-separator>
<q-separator></q-separator>
<div class="row justify-start q-mt-lg">
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = urlDialog.data.lnurlpay">lnurlpay</q-btn>
</div>
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = urlDialog.data.lnurlwithdraw">lnurlwithdraw</q-btn>
</div>
<div class="col q-pl-md">
<q-input filled bottom-slots dense v-model="invoiceAmount">
<template v-slot:append>
<q-btn round @click="createInvoice(urlDialog.data.wallet, urlDialog.data.id)" color="primary" flat icon="add_circle" />
<q-btn round @click="createInvoice(urlDialog.data.wallet, urlDialog.data.id)" color="primary" flat
icon="add_circle" />
</template>
<template v-slot:hint>
Create an invoice
@ -213,7 +138,7 @@
<div class="row q-mt-lg">
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
</div>
</q-card>
@ -242,15 +167,15 @@
temps: [],
tempsTable: {
columns: [
{name: 'id', align: 'left', label: 'ID', field: 'id'},
{name: 'name', align: 'left', label: 'Name', field: 'name'},
{ name: 'id', align: 'left', label: 'ID', field: 'id' },
{ name: 'name', align: 'left', label: 'Name', field: 'name' },
{
name: 'wallet',
align: 'left',
label: 'Wallet',
field: 'wallet'
},
{name: 'total', align: 'left', label: 'Total sent/received', field: 'total'},
{ name: 'total', align: 'left', label: 'Total sent/received', field: 'total' },
],
pagination: {
rowsPerPage: 10
@ -317,7 +242,7 @@
}
},
updateMyExtensionForm(tempId) {
const myextension = _.findWhere(this.temps, {id: tempId})
const myextension = _.findWhere(this.temps, { id: tempId })
this.formDialog.data = {
...myextension
}
@ -361,7 +286,7 @@
},
deleteMyExtension: function (tempId) {
var self = this
var myextension = _.findWhere(this.temps, {id: tempId})
var myextension = _.findWhere(this.temps, { id: tempId })
LNbits.utils
.confirmDialog('Are you sure you want to delete this MyExtension?')
@ -370,7 +295,7 @@
.request(
'DELETE',
'/myextension/api/v1/temps/' + tempId,
_.findWhere(self.g.user.wallets, {id: myextension.wallet}).adminkey
_.findWhere(self.g.user.wallets, { id: myextension.wallet }).adminkey
)
.then(function (response) {
self.temps = _.reject(self.temps, function (obj) {
@ -386,17 +311,17 @@
LNbits.utils.exportCSV(this.tempsTable.columns, this.temps)
},
itemsArray(tempId) {
const myextension = _.findWhere(this.temps, {id: tempId})
const myextension = _.findWhere(this.temps, { id: tempId })
return [...myextension.itemsMap.values()]
},
itemFormatPrice(price, id) {
const myextension = id.split(':')[0]
const currency = _.findWhere(this.temps, {id: myextension}).currency
const currency = _.findWhere(this.temps, { id: myextension }).currency
return LNbits.utils.formatCurrency(Number(price).toFixed(2), currency)
},
openformDialog(id) {
const [tempId, itemId] = id.split(':')
const myextension = _.findWhere(this.temps, {id: tempId})
const myextension = _.findWhere(this.temps, { id: tempId })
if (itemId) {
const item = myextension.itemsMap.get(id)
this.formDialog.data = {
@ -419,16 +344,16 @@
}
},
openUrlDialog(id) {
this.urlDialog.data = _.findWhere(this.temps, {id})
this.urlDialog.data = _.findWhere(this.temps, { id })
this.qrValue = this.urlDialog.data.lnurlpay
console.log(this.urlDialog.data.id)
this.connectWebocket(this.urlDialog.data.id)
this.urlDialog.show = true
},
createInvoice(walletId, myextensionId) {
///////////////////////////////////////////////////
///Simple call to the api to create an invoice/////
///////////////////////////////////////////////////
///////////////////////////////////////////////////
///Simple call to the api to create an invoice/////
///////////////////////////////////////////////////
console.log(walletId)
const wallet = _.findWhere(this.g.user.wallets, {
id: walletId
@ -486,32 +411,32 @@
}
frame()
},
connectWebocket(id){
//////////////////////////////////////////////////
///wait for pay action to happen and do a thing////
///////////////////////////////////////////////////
self = this
connectWebocket(id) {
//////////////////////////////////////////////////
///wait for pay action to happen and do a thing////
///////////////////////////////////////////////////
self = this
if (location.protocol !== 'http:') {
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
} else {
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
}
this.connection = new WebSocket(localUrl)
this.connection.onmessage = function (e) {
self.makeItRain()
}
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
} else {
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
}
this.connection = new WebSocket(localUrl)
this.connection.onmessage = function (e) {
self.makeItRain()
}
}
},
created: function () {
@ -521,4 +446,4 @@
}
})
</script>
{% endblock %}
{% endblock %}

72
templates/myextension/myextension.html
View file

@ -6,29 +6,23 @@
<div class="text-center">
<a class="text-secondary" href="lightning:{{ lnurl }}">
<q-responsive :ratio="1" class="q-mx-md">
<qrcode
:value="qrValue"
:options="{width: 800}"
class="rounded-borders"
></qrcode>
<qrcode :value="qrValue" :options="{width: 800}" class="rounded-borders"></qrcode>
</q-responsive>
</a>
</div>
<div class="row q-mt-lg q-gutter-sm">
<q-btn outline color="grey" @click="copyText(qrValue)"
>Copy LNURL </q-btn
>
<q-btn outline color="grey" @click="copyText(qrValue)">Copy LNURL </q-btn>
</div>
</q-card-section>
<div class="row justify-start q-mt-lg">
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = '{{ lnurlpay }}'">lnurlpay</q-btn>
</div>
<div class="col col-md-auto">
<q-btn outline style="color: primmary;" @click="qrValue = '{{ lnurlwithdraw }}'">lnurlwithdraw</q-btn>
</div>
</div>
@ -40,15 +34,15 @@
<h6 class="text-subtitle1 q-mb-sm q-mt-none">Public page</h6>
<p class="q-my-none">
Moat extensions have a public page that can be shared
(this page will still be accessible even if you have restricted
(this page will still be accessible even if you have restricted
access to your LNbits install).
<br/>
<br />
In this example when a user pays the LNURLpay it triggers an event via a websocket waiting for the payment.
</p>.</p>
</q-card-section>
<q-card-section class="q-pa-none">
<q-separator></q-separator>
<q-list> </q-list>
<q-list> </q-list>
</q-card-section>
</q-card>
</div>
@ -102,34 +96,34 @@
}
frame()
},
connectWebocket(id){
//////////////////////////////////////////////////
///wait for pay action to happen and do a thing////
///////////////////////////////////////////////////
self = this
connectWebocket(id) {
//////////////////////////////////////////////////
///wait for pay action to happen and do a thing////
///////////////////////////////////////////////////
self = this
if (location.protocol !== 'http:') {
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
} else {
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
}
this.connection = new WebSocket(localUrl)
this.connection.onmessage = function (e) {
self.makeItRain()
}
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
} else {
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/' +
id
}
this.connection = new WebSocket(localUrl)
this.connection.onmessage = function (e) {
self.makeItRain()
}
}
},
})
</script>
{% endblock %}
{% endblock %}