529 lines
16 KiB
HTML
529 lines
16 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-8 col-lg-7 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-btn unelevated color="primary" @click="formDialog.show = true"
|
|
>New Temp</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">Temp</h5>
|
|
</div>
|
|
<div class="col-auto">
|
|
<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"
|
|
>
|
|
<temp v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
${ col.label }
|
|
</q-th>
|
|
<q-th auto-width>LNURL-pay</q-th>
|
|
<q-th auto-width>LNURL-withdraw</q-th>
|
|
</q-tr>
|
|
</temp>
|
|
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props">
|
|
<q-td
|
|
v-for="col in props.cols"
|
|
:key="col.name"
|
|
:props="props"
|
|
>
|
|
${ col.value }
|
|
<q-btn
|
|
unelevated
|
|
dense
|
|
size="sm"
|
|
v-if="col.name == 'lnurlpayamount'"
|
|
icon="qr_code"
|
|
:color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
|
|
class="q-mr-sm"
|
|
@click="openUrlDialog(props.row.id)"
|
|
></q-btn>
|
|
<q-btn
|
|
unelevated
|
|
dense
|
|
size="sm"
|
|
v-if="col.name == 'lnurlwithdrawamount'"
|
|
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-tr>
|
|
</template>
|
|
|
|
</q-table>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
|
|
<q-card>
|
|
<q-card-section>
|
|
<h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} Temp 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>
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-none">
|
|
<q-separator></q-separator>
|
|
<q-list>
|
|
{% include "temp/_api_docs.html" %}
|
|
<q-separator></q-separator>
|
|
{% include "temp/_temp.html" %}
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
|
|
<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="sendTPosData" 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>
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
v-if="formDialog.data.id"
|
|
unelevated
|
|
color="primary"
|
|
type="submit"
|
|
>Update Temp</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 Temp</q-btn
|
|
>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
|
>Cancel</q-btn
|
|
>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<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="urlDialog.data.shareUrl"></lnbits-qrcode>
|
|
</q-responsive>
|
|
<div class="text-center q-mb-xl">
|
|
<p style="word-break: break-all">
|
|
<strong>${ urlDialog.data.name }</strong><br />${
|
|
urlDialog.data.shareUrl }
|
|
</p>
|
|
</div>
|
|
<div class="row q-mt-lg">
|
|
<q-btn
|
|
outline
|
|
color="grey"
|
|
@click="copyText(urlDialog.data.shareUrl, 'Temp URL copied to clipboard!')"
|
|
>Copy URL</q-btn
|
|
>
|
|
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
{% endblock %} {% block scripts %} {{ window_vars(user) }}
|
|
<script>
|
|
// The object returned here will be merged with the data object of the Vue instance
|
|
const mapTemp = obj => {
|
|
obj.date = Quasar.utils.date.formatDate(
|
|
new Date(obj.time * 1000),
|
|
'YYYY-MM-DD HH:mm'
|
|
)
|
|
obj.temp = ['/temp/', obj.id].join('')
|
|
return obj
|
|
}
|
|
|
|
new Vue({
|
|
el: '#vue',
|
|
mixins: [windowMixin],
|
|
delimiters: ['${', '}'],
|
|
data: function () {
|
|
return {
|
|
temps: [],
|
|
tempsTable: {
|
|
columns: [
|
|
{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: 'lnurlwithdrawamount',
|
|
align: 'left',
|
|
label: 'LNURL Withdraw amount',
|
|
field: 'lnurlwithdrawamount'
|
|
},
|
|
{
|
|
name: 'lnurlpayamount',
|
|
align: 'left',
|
|
label: 'LNURL Pay amount',
|
|
field: 'lnurlpayamount'
|
|
}
|
|
],
|
|
pagination: {
|
|
rowsPerPage: 10
|
|
}
|
|
},
|
|
formDialog: {
|
|
show: false,
|
|
data: {
|
|
withdrawpin: 878787,
|
|
tip_options: [],
|
|
withdrawbtwn: 10
|
|
},
|
|
advanced: {
|
|
tips: false,
|
|
otc: false
|
|
}
|
|
},
|
|
urlDialog: {
|
|
show: false,
|
|
data: {}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
closeFormDialog() {
|
|
this.formDialog.show = false
|
|
this.formDialog.data = {
|
|
withdrawpin: 878787,
|
|
tip_options: [],
|
|
withdrawbtwn: 10
|
|
}
|
|
},
|
|
getTemps: function () {
|
|
var self = this
|
|
|
|
LNbits.api
|
|
.request(
|
|
'GET',
|
|
'/temp/api/v1/temps?all_wallets=true',
|
|
this.g.user.wallets[0].inkey
|
|
)
|
|
.then(function (response) {
|
|
self.temps = response.data.map(function (obj) {
|
|
return mapTemp(obj)
|
|
})
|
|
})
|
|
},
|
|
sendTPosData() {
|
|
const data = {
|
|
name: this.formDialog.data.name,
|
|
lnurlwithdrawamount: this.formDialog.data.lnurlwithdrawamount,
|
|
lnurlpayamount: this.formDialog.data.lnurlpayamount
|
|
}
|
|
const wallet = _.findWhere(this.g.user.wallets, {
|
|
id: this.formDialog.data.wallet
|
|
})
|
|
console.log(data)
|
|
console.log(wallet)
|
|
if (data.id) {
|
|
this.updateTPos(wallet, data)
|
|
} else {
|
|
this.createTemp(wallet, data)
|
|
}
|
|
},
|
|
updateTPosForm(tempId) {
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
this.formDialog.data = {
|
|
...temp,
|
|
tip_options: JSON.parse(temp.tip_options)
|
|
}
|
|
if (this.formDialog.data.tip_wallet != '') {
|
|
this.formDialog.advanced.tips = true
|
|
}
|
|
if (this.formDialog.data.withdrawlimit >= 1) {
|
|
this.formDialog.advanced.otc = true
|
|
}
|
|
this.formDialog.show = true
|
|
},
|
|
createTemp(wallet, data) {
|
|
LNbits.api
|
|
.request('POST', '/temp/api/v1/temps', wallet.inkey, data)
|
|
.then(response => {
|
|
this.temps.push(mapTemp(response.data))
|
|
this.closeFormDialog()
|
|
})
|
|
.catch(error => {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
updateTPos(wallet, data) {
|
|
LNbits.api
|
|
.request(
|
|
'PUT',
|
|
`/temp/api/v1/temps/${data.id}`,
|
|
wallet.adminkey,
|
|
data
|
|
)
|
|
.then(response => {
|
|
this.temps = _.reject(this.temps, obj => {
|
|
return obj.id == data.id
|
|
})
|
|
this.temps.push(mapTemp(response.data))
|
|
this.closeFormDialog()
|
|
})
|
|
.catch(error => {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
deleteTemp: function (tempId) {
|
|
var self = this
|
|
var temp = _.findWhere(this.temps, {id: tempId})
|
|
|
|
LNbits.utils
|
|
.confirmDialog('Are you sure you want to delete this Temp?')
|
|
.onOk(function () {
|
|
LNbits.api
|
|
.request(
|
|
'DELETE',
|
|
'/temp/api/v1/temps/' + tempId,
|
|
_.findWhere(self.g.user.wallets, {id: temp.wallet}).adminkey
|
|
)
|
|
.then(function (response) {
|
|
self.temps = _.reject(self.temps, function (obj) {
|
|
return obj.id == tempId
|
|
})
|
|
})
|
|
.catch(function (error) {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
})
|
|
},
|
|
exportCSV: function () {
|
|
LNbits.utils.exportCSV(this.tempsTable.columns, this.temps)
|
|
},
|
|
itemsArray(tempId) {
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
return [...temp.itemsMap.values()]
|
|
},
|
|
itemFormatPrice(price, id) {
|
|
const temp = id.split(':')[0]
|
|
const currency = _.findWhere(this.temps, {id: temp}).currency
|
|
return LNbits.utils.formatCurrency(Number(price).toFixed(2), currency)
|
|
},
|
|
openformDialog(id) {
|
|
const [tempId, itemId] = id.split(':')
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
if (itemId) {
|
|
const item = temp.itemsMap.get(id)
|
|
this.formDialog.data = {
|
|
...item,
|
|
temp: tempId
|
|
}
|
|
} else {
|
|
this.formDialog.data.temp = tempId
|
|
}
|
|
this.formDialog.data.currency = temp.currency
|
|
this.formDialog.show = true
|
|
},
|
|
closeformDialog() {
|
|
this.formDialog.show = false
|
|
this.formDialog.data = {
|
|
title: '',
|
|
image: '',
|
|
price: '',
|
|
disabled: false
|
|
}
|
|
},
|
|
deleteItem(id) {
|
|
const [tempId, itemId] = id.split(':')
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
const wallet = _.findWhere(this.g.user.wallets, {
|
|
id: temp.wallet
|
|
})
|
|
LNbits.utils
|
|
.confirmDialog('Are you sure you want to delete this item?')
|
|
.onOk(() => {
|
|
temp.itemsMap.delete(id)
|
|
const data = {
|
|
items: [...temp.itemsMap.values()]
|
|
}
|
|
this.updateTempItems(temp.id, wallet, data)
|
|
})
|
|
},
|
|
addItems() {
|
|
const temp = _.findWhere(this.temps, {id: this.formDialog.data.temp})
|
|
const wallet = _.findWhere(this.g.user.wallets, {
|
|
id: temp.wallet
|
|
})
|
|
if (this.formDialog.data.id) {
|
|
temp.itemsMap.set(this.formDialog.data.id, this.formDialog.data)
|
|
}
|
|
const data = {
|
|
items: this.formDialog.data.id
|
|
? [...temp.itemsMap.values()]
|
|
: [...temp.items, this.formDialog.data]
|
|
}
|
|
this.updateTempItems(temp.id, wallet, data)
|
|
},
|
|
deleteAllItems(tempId) {
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
const wallet = _.findWhere(this.g.user.wallets, {
|
|
id: temp.wallet
|
|
})
|
|
LNbits.utils
|
|
.confirmDialog('Are you sure you want to delete ALL items?')
|
|
.onOk(() => {
|
|
temp.itemsMap.clear()
|
|
const data = {
|
|
items: []
|
|
}
|
|
this.updateTempItems(temp.id, wallet, data)
|
|
})
|
|
},
|
|
updateTempItems(tempId, wallet, data) {
|
|
LNbits.api
|
|
.request(
|
|
'PUT',
|
|
`/temp/api/v1/temps/${tempId}/items`,
|
|
wallet.adminkey,
|
|
data
|
|
)
|
|
.then(response => {
|
|
this.temps = _.reject(this.temps, obj => {
|
|
return obj.id == tempId
|
|
})
|
|
this.temps.push(mapTemp(response.data))
|
|
this.closeformDialog()
|
|
})
|
|
.catch(error => {
|
|
LNbits.utils.notifyApiError(error)
|
|
})
|
|
},
|
|
exportJSON(tempId) {
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
const data = [...temp.items]
|
|
const filename = `items_${temp.id}.json`
|
|
const json = JSON.stringify(data, null, 2)
|
|
let status = Quasar.utils.exportFile(filename, json)
|
|
if (status !== true) {
|
|
this.$q.notify({
|
|
message: 'Browser denied file download...',
|
|
color: 'negative'
|
|
})
|
|
}
|
|
},
|
|
importJSON(tempId) {
|
|
try {
|
|
let input = document.getElementById('import')
|
|
input.click()
|
|
input.onchange = e => {
|
|
let file = e.target.files[0]
|
|
let reader = new FileReader()
|
|
reader.readAsText(file, 'UTF-8')
|
|
reader.onload = async readerEvent => {
|
|
try {
|
|
let content = readerEvent.target.result
|
|
let data = JSON.parse(content).filter(
|
|
obj => obj.title && obj.price
|
|
)
|
|
if (!data.length) {
|
|
throw new Error('Invalid JSON or missing data.')
|
|
}
|
|
this.openFileDataDialog(tempId, data)
|
|
} catch (error) {
|
|
this.$q.notify({
|
|
message: `Error importing file. ${error.message}`,
|
|
color: 'negative'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
this.$q.notify({
|
|
message: 'Error importing file',
|
|
color: 'negative'
|
|
})
|
|
}
|
|
},
|
|
openFileDataDialog(tempId, data) {
|
|
const temp = _.findWhere(this.temps, {id: tempId})
|
|
const wallet = _.findWhere(this.g.user.wallets, {
|
|
id: temp.wallet
|
|
})
|
|
data.forEach(item => {
|
|
item.formattedPrice = LNbits.utils.formatCurrency(
|
|
Number(item.price).toFixed(2),
|
|
temp.currency
|
|
)
|
|
})
|
|
this.fileDataDialog.data = data
|
|
this.fileDataDialog.count = data.length
|
|
this.fileDataDialog.show = true
|
|
this.fileDataDialog.import = () => {
|
|
let updatedData = {
|
|
items: [...temp.items, ...data]
|
|
}
|
|
this.updateTempItems(temp.id, wallet, updatedData)
|
|
this.fileDataDialog.data = {}
|
|
this.fileDataDialog.show = false
|
|
}
|
|
},
|
|
openUrlDialog(id) {
|
|
this.urlDialog.data = _.findWhere(this.temps, {id})
|
|
this.urlDialog.show = true
|
|
}
|
|
},
|
|
created: function () {
|
|
if (this.g.user.wallets.length) {
|
|
this.getTemps()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
{% endblock %}
|