pulled out js
This commit is contained in:
Arc
parent
451e89682e
commit
a8e05612da
2 changed files with 48 additions and 332 deletions
|
|
@ -2,19 +2,18 @@
|
||||||
//////////an object we can update with data////////
|
//////////an object we can update with data////////
|
||||||
///////////////////////////////////////////////////
|
///////////////////////////////////////////////////
|
||||||
const mapMyExtension = obj => {
|
const mapMyExtension = obj => {
|
||||||
obj.date = Quasar.date.formatDate(
|
obj.date = Quasar.utils.date.formatDate(
|
||||||
new Date(obj.created_at),
|
new Date(obj.time * 1000),
|
||||||
'YYYY-MM-DD HH:mm'
|
'YYYY-MM-DD HH:mm'
|
||||||
)
|
)
|
||||||
obj.myextension = ['/myextension/', obj.id].join('')
|
obj.myextension = ['/myextension/', obj.id].join('')
|
||||||
return obj
|
return obj
|
||||||
}
|
}
|
||||||
|
|
||||||
window.app = Vue.createApp({
|
window.app = Vue.createApp({
|
||||||
el: '#vue',
|
el: '#vue',
|
||||||
mixins: [windowMixin],
|
mixins: [windowMixin],
|
||||||
delimiters: ['${', '}'],
|
delimiters: ['${', '}'],
|
||||||
data() {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
invoiceAmount: 10,
|
invoiceAmount: 10,
|
||||||
qrValue: 'lnurlpay',
|
qrValue: 'lnurlpay',
|
||||||
|
|
@ -61,15 +60,17 @@ window.app = Vue.createApp({
|
||||||
this.formDialog.show = false
|
this.formDialog.show = false
|
||||||
this.formDialog.data = {}
|
this.formDialog.data = {}
|
||||||
},
|
},
|
||||||
getMyExtensions() {
|
getMyExtensions: function () {
|
||||||
|
var self = this
|
||||||
|
|
||||||
LNbits.api
|
LNbits.api
|
||||||
.request(
|
.request(
|
||||||
'GET',
|
'GET',
|
||||||
'/myextension/api/v1/myex?all_wallets=true',
|
'/myextension/api/v1/myex?all_wallets=true',
|
||||||
this.g.user.wallets[0].inkey
|
this.g.user.wallets[0].inkey
|
||||||
)
|
)
|
||||||
.then(response => {
|
.then(function (response) {
|
||||||
this.myex = response.data.map(obj => {
|
self.myex = response.data.map(function (obj) {
|
||||||
return mapMyExtension(obj)
|
return mapMyExtension(obj)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -135,28 +136,31 @@ window.app = Vue.createApp({
|
||||||
LNbits.utils.notifyApiError(error)
|
LNbits.utils.notifyApiError(error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
deleteMyExtension(tempId) {
|
deleteMyExtension: function (tempId) {
|
||||||
const myextension = _.findWhere(this.myex, {id: tempId})
|
var self = this
|
||||||
|
var myextension = _.findWhere(this.myex, {id: tempId})
|
||||||
|
|
||||||
LNbits.utils
|
LNbits.utils
|
||||||
.confirmDialog('Are you sure you want to delete this MyExtension?')
|
.confirmDialog('Are you sure you want to delete this MyExtension?')
|
||||||
.onOk(() => {
|
.onOk(function () {
|
||||||
LNbits.api
|
LNbits.api
|
||||||
.request(
|
.request(
|
||||||
'DELETE',
|
'DELETE',
|
||||||
'/myextension/api/v1/myex/' + tempId,
|
'/myextension/api/v1/myex/' + tempId,
|
||||||
_.findWhere(this.g.user.wallets, {id: myextension.wallet})
|
_.findWhere(self.g.user.wallets, {id: myextension.wallet})
|
||||||
.adminkey
|
.adminkey
|
||||||
)
|
)
|
||||||
.then(response => {
|
.then(function (response) {
|
||||||
this.myex = _.reject(this.myex, obj => {
|
self.myex = _.reject(self.myex, function (obj) {
|
||||||
return obj.id == tempId
|
return obj.id == tempId
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.catch(LNbits.utils.notifyApiError)
|
.catch(function (error) {
|
||||||
|
LNbits.utils.notifyApiError(error)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
exportCSV() {
|
exportCSV: function () {
|
||||||
LNbits.utils.exportCSV(this.myexTable.columns, this.myex)
|
LNbits.utils.exportCSV(this.myexTable.columns, this.myex)
|
||||||
},
|
},
|
||||||
itemsArray(tempId) {
|
itemsArray(tempId) {
|
||||||
|
|
@ -217,34 +221,38 @@ window.app = Vue.createApp({
|
||||||
},
|
},
|
||||||
makeItRain() {
|
makeItRain() {
|
||||||
document.getElementById('vue').disabled = true
|
document.getElementById('vue').disabled = true
|
||||||
const end = Date.now() + 2 * 1000
|
var end = Date.now() + 2 * 1000
|
||||||
const colors = ['#FFD700', '#ffffff']
|
var colors = ['#FFD700', '#ffffff']
|
||||||
confetti({
|
function frame() {
|
||||||
particleCount: 2,
|
confetti({
|
||||||
angle: 60,
|
particleCount: 2,
|
||||||
spread: 55,
|
angle: 60,
|
||||||
origin: {x: 0},
|
spread: 55,
|
||||||
colors: colors,
|
origin: {x: 0},
|
||||||
zIndex: 999999
|
colors: colors,
|
||||||
})
|
zIndex: 999999
|
||||||
confetti({
|
})
|
||||||
particleCount: 2,
|
confetti({
|
||||||
angle: 120,
|
particleCount: 2,
|
||||||
spread: 55,
|
angle: 120,
|
||||||
origin: {x: 1},
|
spread: 55,
|
||||||
colors: colors,
|
origin: {x: 1},
|
||||||
zIndex: 999999
|
colors: colors,
|
||||||
})
|
zIndex: 999999
|
||||||
if (Date.now() < end) {
|
})
|
||||||
requestAnimationFrame(frame)
|
if (Date.now() < end) {
|
||||||
} else {
|
requestAnimationFrame(frame)
|
||||||
document.getElementById('vue').disabled = false
|
} else {
|
||||||
|
document.getElementById('vue').disabled = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
frame()
|
||||||
},
|
},
|
||||||
connectWebocket(wallet_id) {
|
connectWebocket(wallet_id) {
|
||||||
//////////////////////////////////////////////////
|
//////////////////////////////////////////////////
|
||||||
///wait for pay action to happen and do a thing////
|
///wait for pay action to happen and do a thing////
|
||||||
///////////////////////////////////////////////////
|
///////////////////////////////////////////////////
|
||||||
|
self = this
|
||||||
if (location.protocol !== 'http:') {
|
if (location.protocol !== 'http:') {
|
||||||
localUrl =
|
localUrl =
|
||||||
'wss://' +
|
'wss://' +
|
||||||
|
|
@ -263,8 +271,8 @@ window.app = Vue.createApp({
|
||||||
wallet_id
|
wallet_id
|
||||||
}
|
}
|
||||||
this.connection = new WebSocket(localUrl)
|
this.connection = new WebSocket(localUrl)
|
||||||
this.connection.onmessage = e => {
|
this.connection.onmessage = function (e) {
|
||||||
this.makeItRain()
|
self.makeItRain()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -272,7 +280,7 @@ window.app = Vue.createApp({
|
||||||
///////////////////////////////////////////////////
|
///////////////////////////////////////////////////
|
||||||
//////LIFECYCLE FUNCTIONS RUNNING ON PAGE LOAD/////
|
//////LIFECYCLE FUNCTIONS RUNNING ON PAGE LOAD/////
|
||||||
///////////////////////////////////////////////////
|
///////////////////////////////////////////////////
|
||||||
created() {
|
created: function () {
|
||||||
if (this.g.user.wallets.length) {
|
if (this.g.user.wallets.length) {
|
||||||
this.getMyExtensions()
|
this.getMyExtensions()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -238,296 +238,4 @@
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %} {% block scripts %} {{ window_vars(user) }}
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
|
|
||||||
<script>
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
//////////an object we can update with data////////
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
const mapMyExtension = obj => {
|
|
||||||
obj.date = Quasar.utils.date.formatDate(
|
|
||||||
new Date(obj.time * 1000),
|
|
||||||
'YYYY-MM-DD HH:mm'
|
|
||||||
)
|
|
||||||
obj.myextension = ['/myextension/', obj.id].join('')
|
|
||||||
return obj
|
|
||||||
}
|
|
||||||
window.app = Vue.createApp({
|
|
||||||
el: '#vue',
|
|
||||||
mixins: [windowMixin],
|
|
||||||
delimiters: ['${', '}'],
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
invoiceAmount: 10,
|
|
||||||
qrValue: 'lnurlpay',
|
|
||||||
myex: [],
|
|
||||||
myexTable: {
|
|
||||||
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: 'total',
|
|
||||||
align: 'left',
|
|
||||||
label: 'Total sent/received',
|
|
||||||
field: 'total'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
pagination: {
|
|
||||||
rowsPerPage: 10
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formDialog: {
|
|
||||||
show: false,
|
|
||||||
data: {},
|
|
||||||
advanced: {}
|
|
||||||
},
|
|
||||||
urlDialog: {
|
|
||||||
show: false,
|
|
||||||
data: {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
////////////////METHODS FUNCTIONS//////////////////
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
closeFormDialog() {
|
|
||||||
this.formDialog.show = false
|
|
||||||
this.formDialog.data = {}
|
|
||||||
},
|
|
||||||
getMyExtensions: function () {
|
|
||||||
var self = this
|
|
||||||
|
|
||||||
LNbits.api
|
|
||||||
.request(
|
|
||||||
'GET',
|
|
||||||
'/myextension/api/v1/myex?all_wallets=true',
|
|
||||||
this.g.user.wallets[0].inkey
|
|
||||||
)
|
|
||||||
.then(function (response) {
|
|
||||||
self.myex = response.data.map(function (obj) {
|
|
||||||
return mapMyExtension(obj)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
sendMyExtensionData() {
|
|
||||||
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
|
|
||||||
})
|
|
||||||
if (this.formDialog.data.id) {
|
|
||||||
data.id = this.formDialog.data.id
|
|
||||||
data.wallet = wallet.id
|
|
||||||
data.total = this.formDialog.data.total
|
|
||||||
this.updateMyExtension(wallet, data)
|
|
||||||
} else {
|
|
||||||
this.createMyExtension(wallet, data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updateMyExtensionForm(tempId) {
|
|
||||||
const myextension = _.findWhere(this.myex, {id: tempId})
|
|
||||||
this.formDialog.data = {
|
|
||||||
...myextension
|
|
||||||
}
|
|
||||||
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
|
|
||||||
},
|
|
||||||
createMyExtension(wallet, data) {
|
|
||||||
LNbits.api
|
|
||||||
.request('POST', '/myextension/api/v1/myex', wallet.adminkey, data)
|
|
||||||
.then(response => {
|
|
||||||
this.myex.push(mapMyExtension(response.data))
|
|
||||||
this.closeFormDialog()
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
LNbits.utils.notifyApiError(error)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
updateMyExtension(wallet, data) {
|
|
||||||
LNbits.api
|
|
||||||
.request(
|
|
||||||
'PUT',
|
|
||||||
`/myextension/api/v1/myex/${data.id}`,
|
|
||||||
wallet.adminkey,
|
|
||||||
data
|
|
||||||
)
|
|
||||||
.then(response => {
|
|
||||||
this.myex = _.reject(this.myex, obj => {
|
|
||||||
return obj.id == data.id
|
|
||||||
})
|
|
||||||
this.myex.push(mapMyExtension(response.data))
|
|
||||||
this.closeFormDialog()
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
LNbits.utils.notifyApiError(error)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
deleteMyExtension: function (tempId) {
|
|
||||||
var self = this
|
|
||||||
var myextension = _.findWhere(this.myex, {id: tempId})
|
|
||||||
|
|
||||||
LNbits.utils
|
|
||||||
.confirmDialog('Are you sure you want to delete this MyExtension?')
|
|
||||||
.onOk(function () {
|
|
||||||
LNbits.api
|
|
||||||
.request(
|
|
||||||
'DELETE',
|
|
||||||
'/myextension/api/v1/myex/' + tempId,
|
|
||||||
_.findWhere(self.g.user.wallets, {id: myextension.wallet})
|
|
||||||
.adminkey
|
|
||||||
)
|
|
||||||
.then(function (response) {
|
|
||||||
self.myex = _.reject(self.myex, function (obj) {
|
|
||||||
return obj.id == tempId
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
LNbits.utils.notifyApiError(error)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
exportCSV: function () {
|
|
||||||
LNbits.utils.exportCSV(this.myexTable.columns, this.myex)
|
|
||||||
},
|
|
||||||
itemsArray(tempId) {
|
|
||||||
const myextension = _.findWhere(this.myex, {id: tempId})
|
|
||||||
return [...myextension.itemsMap.values()]
|
|
||||||
},
|
|
||||||
openformDialog(id) {
|
|
||||||
const [tempId, itemId] = id.split(':')
|
|
||||||
const myextension = _.findWhere(this.myex, {id: tempId})
|
|
||||||
if (itemId) {
|
|
||||||
const item = myextension.itemsMap.get(id)
|
|
||||||
this.formDialog.data = {
|
|
||||||
...item,
|
|
||||||
myextension: tempId
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.formDialog.data.myextension = tempId
|
|
||||||
}
|
|
||||||
this.formDialog.data.currency = myextension.currency
|
|
||||||
this.formDialog.show = true
|
|
||||||
},
|
|
||||||
closeformDialog() {
|
|
||||||
this.formDialog.show = false
|
|
||||||
this.formDialog.data = {}
|
|
||||||
},
|
|
||||||
openUrlDialog(id) {
|
|
||||||
this.urlDialog.data = _.findWhere(this.myex, {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/////
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
console.log(walletId)
|
|
||||||
const wallet = _.findWhere(this.g.user.wallets, {
|
|
||||||
id: walletId
|
|
||||||
})
|
|
||||||
const dataToSend = {
|
|
||||||
out: false,
|
|
||||||
amount: this.invoiceAmount,
|
|
||||||
memo: 'Invoice created by MyExtension',
|
|
||||||
extra: {
|
|
||||||
tag: 'MyExtension',
|
|
||||||
myextensionId: myextensionId
|
|
||||||
}
|
|
||||||
}
|
|
||||||
LNbits.api
|
|
||||||
.request('POST', `/api/v1/payments`, wallet.inkey, dataToSend)
|
|
||||||
.then(response => {
|
|
||||||
this.qrValue = response.data.payment_request
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
LNbits.utils.notifyApiError(error)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
makeItRain() {
|
|
||||||
document.getElementById('vue').disabled = true
|
|
||||||
var end = Date.now() + 2 * 1000
|
|
||||||
var colors = ['#FFD700', '#ffffff']
|
|
||||||
function frame() {
|
|
||||||
confetti({
|
|
||||||
particleCount: 2,
|
|
||||||
angle: 60,
|
|
||||||
spread: 55,
|
|
||||||
origin: {x: 0},
|
|
||||||
colors: colors,
|
|
||||||
zIndex: 999999
|
|
||||||
})
|
|
||||||
confetti({
|
|
||||||
particleCount: 2,
|
|
||||||
angle: 120,
|
|
||||||
spread: 55,
|
|
||||||
origin: {x: 1},
|
|
||||||
colors: colors,
|
|
||||||
zIndex: 999999
|
|
||||||
})
|
|
||||||
if (Date.now() < end) {
|
|
||||||
requestAnimationFrame(frame)
|
|
||||||
} else {
|
|
||||||
document.getElementById('vue').disabled = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
frame()
|
|
||||||
},
|
|
||||||
connectWebocket(wallet_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/' +
|
|
||||||
wallet_id
|
|
||||||
} else {
|
|
||||||
localUrl =
|
|
||||||
'ws://' +
|
|
||||||
document.domain +
|
|
||||||
':' +
|
|
||||||
location.port +
|
|
||||||
'/api/v1/ws/' +
|
|
||||||
wallet_id
|
|
||||||
}
|
|
||||||
this.connection = new WebSocket(localUrl)
|
|
||||||
this.connection.onmessage = function (e) {
|
|
||||||
self.makeItRain()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
//////LIFECYCLE FUNCTIONS RUNNING ON PAGE LOAD/////
|
|
||||||
///////////////////////////////////////////////////
|
|
||||||
created: function () {
|
|
||||||
if (this.g.user.wallets.length) {
|
|
||||||
this.getMyExtensions()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue