535 lines
15 KiB
HTML
535 lines
15 KiB
HTML
{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
|
|
%} {% block page %}
|
|
<div class="row q-col-gutter-md">
|
|
<div class="col-12 col-md-7 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
{% raw %}
|
|
<q-btn
|
|
unelevated
|
|
color="primary"
|
|
@click="formDialoglnurldevice.show = true"
|
|
>New LNURLDevice instance
|
|
</q-btn>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="row items-center no-wrap q-mb-md">
|
|
<div class="col">
|
|
<h5 class="text-subtitle1 q-my-none">lNURLdevice</h5>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<q-input
|
|
borderless
|
|
dense
|
|
debounce="300"
|
|
v-model="filter"
|
|
placeholder="Search"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="search"></q-icon>
|
|
</template>
|
|
</q-input>
|
|
<q-btn flat color="grey" @click="exportlnurldeviceCSV"
|
|
>Export to CSV</q-btn
|
|
>
|
|
</div>
|
|
</div>
|
|
<q-table
|
|
flat
|
|
dense
|
|
:data="lnurldeviceLinks"
|
|
row-key="id"
|
|
:columns="lnurldevicesTable.columns"
|
|
:pagination.sync="lnurldevicesTable.pagination"
|
|
:filter="filter"
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th style="width: 5%"></q-th>
|
|
<q-th style="width: 5%"></q-th>
|
|
|
|
<q-th
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
auto-width
|
|
>
|
|
<div v-if="col.name == 'id'"></div>
|
|
<div v-else>{{ col.label }}</div>
|
|
</q-th>
|
|
<!-- <q-th auto-width></q-th> -->
|
|
</q-tr>
|
|
</template>
|
|
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props">
|
|
<q-td>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
size="xs"
|
|
@click="deletelnurldeviceLink(props.row.id)"
|
|
icon="cancel"
|
|
color="pink"
|
|
>
|
|
<q-tooltip> Delete LNURLDevice </q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
size="xs"
|
|
@click="openlnurldeviceSettings(props.row.id)"
|
|
icon="perm_data_setting"
|
|
color="primary"
|
|
>
|
|
<q-tooltip> LNURLDevice Settings </q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
<q-td
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
auto-width
|
|
>
|
|
<div v-if="col.name == 'id'"></div>
|
|
<div v-else>{{ col.value }}</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
{% endraw %}
|
|
</q-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-5 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
<h6 class="text-subtitle1 q-my-none">
|
|
{{SITE_TITLE}} LNURLDevice Extension
|
|
</h6>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
<q-list> {% include "lnurldevice/_api_docs.html" %} </q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<q-dialog
|
|
v-model="settingsDialog.show"
|
|
deviceition="top"
|
|
@hide="closeFormDialog"
|
|
>
|
|
<q-card
|
|
style="width: 700px; max-width: 80vw"
|
|
class="q-pa-lg q-pt-xl lnbits__dialog-card"
|
|
>
|
|
<div class="text-h6">LNURLDevice device string</div>
|
|
<q-btn
|
|
dense
|
|
outline
|
|
unelevated
|
|
color="primary"
|
|
size="md"
|
|
@click="copyText(location + '/lnurldevice/api/v1/lnurl/' + settingsDialog.data.id + ',' +
|
|
settingsDialog.data.key + ',' + settingsDialog.data.currency, 'Link copied to clipboard!')"
|
|
>{% raw
|
|
%}{{location}}/lnurldevice/api/v1/lnurl/{{settingsDialog.data.id}},
|
|
{{settingsDialog.data.key}}, {{settingsDialog.data.currency}}{% endraw
|
|
%}<q-tooltip> Click to copy URL </q-tooltip>
|
|
</q-btn>
|
|
|
|
<div class="text-subtitle2">
|
|
<small> </small>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog
|
|
v-model="formDialoglnurldevice.show"
|
|
deviceition="top"
|
|
@hide="closeFormDialog"
|
|
>
|
|
<q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
|
<q-form @submit="sendFormDatalnurldevice" class="q-gutter-md">
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="formDialoglnurldevice.data.title"
|
|
type="text"
|
|
label="Title"
|
|
></q-input>
|
|
|
|
<q-select
|
|
filled
|
|
dense
|
|
emit-value
|
|
v-model="formDialoglnurldevice.data.wallet"
|
|
:options="g.user.walletOptions"
|
|
label="Wallet *"
|
|
></q-select>
|
|
|
|
<q-select
|
|
filled
|
|
dense
|
|
v-model.trim="formDialoglnurldevice.data.currency"
|
|
type="text"
|
|
label="Fiat currency for device"
|
|
:options="currency"
|
|
></q-select>
|
|
<q-option-group
|
|
v-model.trim="formDialoglnurldevice.data.device"
|
|
:options="devices"
|
|
color="primary"
|
|
label="Type of device"
|
|
></q-option-group>
|
|
<q-input
|
|
filled
|
|
dense
|
|
v-model.trim="formDialoglnurldevice.data.profit"
|
|
type="number"
|
|
max="90"
|
|
label="Profit margin (% added to invoices/deducted from faucets)"
|
|
></q-input>
|
|
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
v-if="formDialoglnurldevice.data.id"
|
|
unelevated
|
|
color="primary"
|
|
:disable="
|
|
formDialoglnurldevice.data.title == ''"
|
|
type="submit"
|
|
>Update lnurldevice</q-btn
|
|
>
|
|
<q-btn
|
|
v-else
|
|
unelevated
|
|
color="primary"
|
|
:disable="
|
|
formDialoglnurldevice.data.title == ''"
|
|
type="submit"
|
|
>Create lnurldevice</q-btn
|
|
>
|
|
<q-btn @click="cancellnurldevice" flat color="grey" class="q-ml-auto"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
{% endblock %} {% block scripts %} {{ window_vars(user) }}
|
|
|
|
<script>
|
|
Vue.component(VueQrcode.name, VueQrcode)
|
|
|
|
var maplnurldevice = obj => {
|
|
obj._data = _.clone(obj)
|
|
obj.theTime = obj.time * 60 - (Date.now() / 1000 - obj.timestamp)
|
|
obj.time = obj.time + 'mins'
|
|
|
|
if (obj.time_elapsed) {
|
|
obj.date = 'Time elapsed'
|
|
} else {
|
|
obj.date = Quasar.utils.date.formatDate(
|
|
new Date((obj.theTime - 3600) * 1000),
|
|
'HH:mm:ss'
|
|
)
|
|
}
|
|
return obj
|
|
}
|
|
|
|
new Vue({
|
|
el: '#vue',
|
|
mixins: [windowMixin],
|
|
data: function () {
|
|
return {
|
|
location: window.location.hostname,
|
|
filter: '',
|
|
currency: 'USD',
|
|
lnurldeviceLinks: [],
|
|
lnurldeviceLinksObj: [],
|
|
devices: [
|
|
{
|
|
label: 'PoS',
|
|
value: 'pos'
|
|
},
|
|
{
|
|
label: 'ATM',
|
|
value: 'atm'
|
|
}
|
|
],
|
|
lnurldevicesTable: {
|
|
columns: [
|
|
{
|
|
name: 'title',
|
|
align: 'left',
|
|
label: 'title',
|
|
field: 'title'
|
|
},
|
|
{
|
|
name: 'theId',
|
|
align: 'left',
|
|
label: 'id',
|
|
field: 'id'
|
|
},
|
|
{
|
|
name: 'key',
|
|
align: 'left',
|
|
label: 'key',
|
|
field: 'key'
|
|
},
|
|
{
|
|
name: 'wallet',
|
|
align: 'left',
|
|
label: 'wallet',
|
|
field: 'wallet'
|
|
},
|
|
{
|
|
name: 'device',
|
|
align: 'left',
|
|
label: 'device',
|
|
field: 'device'
|
|
},
|
|
{
|
|
name: 'profit',
|
|
align: 'left',
|
|
label: 'profit',
|
|
field: 'profit'
|
|
},
|
|
{
|
|
name: 'currency',
|
|
align: 'left',
|
|
label: 'currency',
|
|
field: 'currency'
|
|
}
|
|
],
|
|
pagination: {
|
|
rowsPerPage: 10
|
|
}
|
|
},
|
|
passedlnurldevice: {},
|
|
settingsDialog: {
|
|
show: false,
|
|
data: {}
|
|
},
|
|
formDialog: {
|
|
show: false,
|
|
data: {}
|
|
},
|
|
formDialoglnurldevice: {
|
|
show: false,
|
|
data: {
|
|
lnurl_toggle: false,
|
|
show_message: false,
|
|
show_ack: false,
|
|
show_price: 'None',
|
|
device: 'pos',
|
|
profit: 2,
|
|
title: ''
|
|
}
|
|
},
|
|
qrCodeDialog: {
|
|
show: false,
|
|
data: null
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
cancellnurldevice: function (data) {
|
|
var self = this
|
|
self.formDialoglnurldevice.show = false
|
|
self.clearFormDialoglnurldevice()
|
|
},
|
|
closeFormDialog: function () {
|
|
this.clearFormDialoglnurldevice()
|
|
this.formDialog.data = {
|
|
is_unique: false
|
|
}
|
|
},
|
|
sendFormDatalnurldevice: function () {
|
|
var self = this
|
|
if (self.formDialoglnurldevice.data.id) {
|
|
this.updatelnurldevice(
|
|
self.g.user.wallets[0].adminkey,
|
|
self.formDialoglnurldevice.data
|
|
)
|
|
} else {
|
|
this.createlnurldevice(
|
|
self.g.user.wallets[0].adminkey,
|
|
self.formDialoglnurldevice.data
|
|
)
|
|
}
|
|
},
|
|
|
|
createlnurldevice: function (wallet, data) {
|
|
var self = this
|
|
var updatedData = {}
|
|
for (const property in data) {
|
|
if (data[property]) {
|
|
updatedData[property] = data[property]
|
|
}
|
|
}
|
|
LNbits.api
|
|
.request('POST', '/lnurldevice/api/v1/lnurlpos', wallet, updatedData)
|
|
.then(function (response) {
|
|
self.lnurldeviceLinks.push(maplnurldevice(response.data))
|
|
self.formDialoglnurldevice.show = false
|
|
self.clearFormDialoglnurldevice()
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
getlnurldevices: function () {
|
|
var self = this
|
|
LNbits.api
|
|
.request(
|
|
'GET',
|
|
'/lnurldevice/api/v1/lnurlpos',
|
|
self.g.user.wallets[0].adminkey
|
|
)
|
|
.then(function (response) {
|
|
if (response.data) {
|
|
self.lnurldeviceLinks = response.data.map(maplnurldevice)
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
getlnurldevice: function (lnurldevice_id) {
|
|
var self = this
|
|
LNbits.api
|
|
.request(
|
|
'GET',
|
|
'/lnurldevice/api/v1/lnurlpos/' + lnurldevice_id,
|
|
self.g.user.wallets[0].adminkey
|
|
)
|
|
.then(function (response) {
|
|
localStorage.setItem('lnurldevice', JSON.stringify(response.data))
|
|
localStorage.setItem('inkey', self.g.user.wallets[0].inkey)
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
deletelnurldeviceLink: function (lnurldeviceId) {
|
|
var self = this
|
|
var link = _.findWhere(this.lnurldeviceLinks, {id: lnurldeviceId})
|
|
LNbits.utils
|
|
.confirmDialog('Are you sure you want to delete this pay link?')
|
|
.onOk(function () {
|
|
LNbits.api
|
|
.request(
|
|
'DELETE',
|
|
'/lnurldevice/api/v1/lnurlpos/' + lnurldeviceId,
|
|
self.g.user.wallets[0].adminkey
|
|
)
|
|
.then(function (response) {
|
|
self.lnurldeviceLinks = _.reject(
|
|
self.lnurldeviceLinks,
|
|
function (obj) {
|
|
return obj.id === lnurldeviceId
|
|
}
|
|
)
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
})
|
|
},
|
|
openUpdatelnurldeviceLink: function (lnurldeviceId) {
|
|
var self = this
|
|
var lnurldevice = _.findWhere(this.lnurldeviceLinks, {
|
|
id: lnurldeviceId
|
|
})
|
|
self.formDialoglnurldevice.data = _.clone(lnurldevice._data)
|
|
self.formDialoglnurldevice.show = true
|
|
},
|
|
openlnurldeviceSettings: function (lnurldeviceId) {
|
|
var self = this
|
|
var lnurldevice = _.findWhere(this.lnurldeviceLinks, {
|
|
id: lnurldeviceId
|
|
})
|
|
self.settingsDialog.data = _.clone(lnurldevice._data)
|
|
self.settingsDialog.show = true
|
|
},
|
|
updatelnurldevice: function (wallet, data) {
|
|
var self = this
|
|
var updatedData = {}
|
|
for (const property in data) {
|
|
if (data[property]) {
|
|
updatedData[property] = data[property]
|
|
}
|
|
}
|
|
|
|
LNbits.api
|
|
.request(
|
|
'PUT',
|
|
'/lnurldevice/api/v1/lnurlpos/' + updatedData.id,
|
|
wallet,
|
|
updatedData
|
|
)
|
|
.then(function (response) {
|
|
self.lnurldeviceLinks = _.reject(
|
|
self.lnurldeviceLinks,
|
|
function (obj) {
|
|
return obj.id === updatedData.id
|
|
}
|
|
)
|
|
self.lnurldeviceLinks.push(maplnurldevice(response.data))
|
|
self.formDialoglnurldevice.show = false
|
|
self.clearFormDialoglnurldevice()
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
clearFormDialoglnurldevice() {
|
|
this.formDialoglnurldevice.data = {
|
|
lnurl_toggle: false,
|
|
show_message: false,
|
|
show_ack: false,
|
|
show_price: 'None',
|
|
title: ''
|
|
}
|
|
},
|
|
exportlnurldeviceCSV: function () {
|
|
var self = this
|
|
LNbits.utils.exportCSV(
|
|
self.lnurldevicesTable.columns,
|
|
this.lnurldeviceLinks
|
|
)
|
|
}
|
|
},
|
|
created: function () {
|
|
var self = this
|
|
var getlnurldevices = this.getlnurldevices
|
|
getlnurldevices()
|
|
self.location = [
|
|
window.location.protocol,
|
|
'//',
|
|
window.location.host
|
|
].join('')
|
|
LNbits.api
|
|
.request('GET', '/api/v1/currencies')
|
|
.then(response => {
|
|
this.currency = ['USD', ...response.data]
|
|
})
|
|
.catch(err => {
|
|
LNbits.utils.notifyApiError(err)
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
{% endblock %}
|