highperfocused/lnbits
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits.git synced 2025-03-26 17:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
ben 2023-01-10 14:29:05 +00:00
parent c2bfc199e1
commit 1d980afb62
1 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
lnbits/extensions/example/templates/example/index.html
View File

@ -52,7 +52,14 @@
<q-card-section>
<div class="text-h5 q-mb-md">
Extension Development Guide
<small>(also check the <a class="text-primary" href="http://docs.lnbits.org/devs/development.html">docs</a>)</small>
<small
>(also check the
<a
class="text-primary"
href="http://docs.lnbits.org/devs/development.html"
>docs</a
>)</small
>
</div>
<q-card unelevated flat>
@ -188,7 +195,8 @@
<p>
LNbits uses
<a href="https://vuejs.org/" class="text-primary">Vue</a>
for best-in-class, responsive and high-performance components.
for best-in-class, responsive and high-performance
components.
</p>
<p>Typical example of Vue components in a frontend script:</p>
@ -198,8 +206,7 @@
/><br /><br />
<p>
Content can be
conditionally rendered using Vue's
Content can be conditionally rendered using Vue's
<code class="bg-grey-3 text-black">v-if</code>:
</p>
<img
@ -258,42 +265,82 @@
</q-tab-panel>
<q-tab-panel name="qrcodes" class="text-body1">
<div class="text-h5 q-mb-md">QR Codes</div>
<p>For most purposes use Quasar's inbuilt VueQrcode library:</p>
<p>
For most purposes use Quasar's inbuilt VueQrcode library:
</p>
<img src="./static/qrcode-example1.png" />
<p>
LNbits does also include a handy
<a
href="../docs#/default/img_api_v1_qrcode__data__get"
class="text-primary"
> QR code enpoint</a
>
QR code enpoint</a
>
</p>
{% raw
%} You can use via <a href="/api/v1/qrcode/some-data-you-want-in-a-qrcode" class="text-primary">{{protocol + location}}{% endraw %}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a><br />
<br />
<img src="./static/qrcode-example.png" />
<br/>
<img class="bg-white" width="300px" src="/api/v1/qrcode/some-data-you-want-in-a-qrcode" />
{% raw %} You can use via
<a
href="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
class="text-primary"
>{{protocol + location}}{% endraw
%}/api/v1/qrcode/some-data-you-want-in-a-qrcode:</a
><br />
<br />
<img src="./static/qrcode-example.png" />
<br />
<img
class="bg-white"
width="300px"
src="/api/v1/qrcode/some-data-you-want-in-a-qrcode"
/>
<br />
</q-tab-panel>
<q-tab-panel name="websockets" class="text-body1">
<div class="text-h5 q-mb-md">Websockets</div>
<p>Fastapi includes a great <a class="text-primary" href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client">websocket tool</a></p>
{% raw
%}
<p>
A few LNbits extensions also make use of a weird and useful websocket/GET tool built into LNbits, such as extensions Copilot and LNURLDevices<br/>
You can subscribe to websocket with <code class="bg-grey-3 text-black">wss:{{location}}/api/v1/ws/{SOME-ID}</code><br/>
You can post to any clients subscribed to the endpoint with <code class="bg-grey-3 text-black">{{protocol + location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code><br/>
<br/>
<strong></div><div id="text-to-change">DEMO: Hit <a target="_blank" href="/api/v1/ws/32872r23g29/blah%20blah%20blah" class="text-primary">{{protocol + location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a> in a different browser window to change this text to `blah blah blah`.</div></strong>
<br/>
Function used in this demo:<br/>
<img src="./static/websocket-example.png" />
</q-tab-panel>
Fastapi includes a great
<a
class="text-primary"
href="https://fastapi.tiangolo.com/advanced/websockets/#websockets-client"
>websocket tool</a
>
</p>
{% raw %}
<p>
A few LNbits extensions also make use of a weird and useful
websocket/GET tool built into LNbits, such as extensions
Copilot and LNURLDevices<br />
You can subscribe to websocket with
<code class="bg-grey-3 text-black"
>wss:{{location}}/api/v1/ws/{SOME-ID}</code
><br />
You can post to any clients subscribed to the endpoint with
<code class="bg-grey-3 text-black"
>{{protocol +
location}}/api/v1/ws/{SOME-ID}/{THE-DATA-YOU-WANT-TO-POST}</code
><br />
<br />
<strong
><div id="text-to-change">
DEMO: Hit
<a
target="_blank"
href="/api/v1/ws/32872r23g29/blah%20blah%20blah"
class="text-primary"
>{{protocol +
location}}/api/v1/ws/32872r23g29/blah%20blah%20blah</a
>
in a different browser window to change this text to
`blah blah blah`.
</div></strong
>
<br />
Function used in this demo:<br />
<img src="./static/websocket-example.png" /></p
></q-tab-panel>
{% endraw %}
</q-tab-panels>
</template>
@ -337,7 +384,7 @@
return {
///// Declare models/variables /////
protocol: window.location.protocol,
location: "//" + window.location.hostname,
location: '//' + window.location.hostname,
thingDialog: {
show: false,
data: {}
@ -352,7 +399,7 @@
},
///// Where functions live /////
methods: {
exampleFunction: function(data) {
exampleFunction: function (data) {
var theData = data
LNbits.api
.request(
@ -369,26 +416,26 @@
},
initWs: async function () {
if (location.protocol !== 'http:') {
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/32872r23g29'
localUrl =
'wss://' +
document.domain +
':' +
location.port +
'/api/v1/ws/32872r23g29'
} else {
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/32872r23g29'
}
this.ws = new WebSocket(localUrl)
this.ws.addEventListener('message', async ({data}) => {
const res = data.toString()
document.getElementById("text-to-change").innerHTML = res
})
},
localUrl =
'ws://' +
document.domain +
':' +
location.port +
'/api/v1/ws/32872r23g29'
}
this.ws = new WebSocket(localUrl)
this.ws.addEventListener('message', async ({data}) => {
const res = data.toString()
document.getElementById('text-to-change').innerHTML = res
})
},
sendThingDialog() {
console.log(this.thingDialog)
}