Front working upload/pay scenario
parent
89fc1b2894
commit
93a0260ecc
@ -1,24 +1,92 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<upload></upload>
|
<upload></upload>
|
||||||
<pay></pay>
|
<pay :uploadId="uploadId" :status="status" :invoice="invoice"></pay>
|
||||||
|
<p v-if="uploadId">upload id: <span class="last-upload">{{ uploadId }}</span></p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script charset="utf-8">
|
<script charset="utf-8">
|
||||||
import Upload from './upload.vue';
|
import Upload from './Upload.vue';
|
||||||
import Pay from './pay.vue';
|
import Pay from './Pay.vue';
|
||||||
|
import GetWorker from './workerInterface.js';
|
||||||
|
import { lastSession } from './api.js';
|
||||||
|
|
||||||
|
const Worker = GetWorker('main');
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
msg: 'Hello World'
|
uploadId: 0,
|
||||||
|
invoice: {},
|
||||||
|
status: {},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted (){
|
||||||
|
let self = this;
|
||||||
|
this.worker = Worker;
|
||||||
|
|
||||||
|
// listen to worker events
|
||||||
|
this.worker.listenTo('upload-invoice', (e) => {
|
||||||
|
console.log("received invoice ", e.data)
|
||||||
|
self.invoice = e.data.invoice;
|
||||||
|
self.uploadId = e.data.upload_id;
|
||||||
|
self.status = e.data.status;
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
this.worker.listenTo('payment-received', (e)=>{
|
||||||
|
console.log('pay received', e.data)
|
||||||
|
this.invoice = e.data.invoice;
|
||||||
|
this.uploadId = e.data.upload_id;
|
||||||
|
this.status = e.data.status;
|
||||||
|
})
|
||||||
|
|
||||||
|
// Get last session uploadId if it exists
|
||||||
|
lastSession()
|
||||||
|
.then((data) => {
|
||||||
|
// If upload id is unpaid
|
||||||
|
if (data.uploadId !== 0){
|
||||||
|
this.invoice = data.invoice;
|
||||||
|
this.uploadId = data.uploadId;
|
||||||
|
this.status = data.status;
|
||||||
|
|
||||||
|
if (this.invoice.status === 'unpaid') {
|
||||||
|
console.log("last session unpaid")
|
||||||
|
|
||||||
|
// start waiting for the payment status
|
||||||
|
this.worker.post({
|
||||||
|
msg: 'watch-payment',
|
||||||
|
uploadId: this.uploadId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
Upload,
|
Upload,
|
||||||
Pay,
|
Pay,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.unpaid {
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expired {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paid {
|
||||||
|
background-color: lightgreen;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last-upload {
|
||||||
|
background: cyan;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -1,73 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
<div id="payment">
|
|
||||||
<img v-bind:src="payreqURI" />
|
|
||||||
<canvas id="canvas" hidden>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script charset="utf-8">
|
|
||||||
import QRCode from 'qrcode';
|
|
||||||
|
|
||||||
import GetWorker from './workerInterface.js';
|
|
||||||
const Worker = GetWorker('main');
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
uploadId: 0,
|
|
||||||
invoice: {},
|
|
||||||
payreqURI: "",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
let self = this
|
|
||||||
this.worker = Worker;
|
|
||||||
|
|
||||||
|
|
||||||
this.worker.listenTo('upload-invoice', (e) => {
|
|
||||||
console.log("received invoice ", e.data)
|
|
||||||
self.invoice = e.data.invoice
|
|
||||||
self.uploadId = e.data.id
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
makeLnQR(payreq) {
|
|
||||||
let canvas = this.$el.querySelector('#canvas')
|
|
||||||
|
|
||||||
QRCode.toDataURL(canvas, payreq.toUpperCase(), {
|
|
||||||
margin: 4,
|
|
||||||
width: 340,
|
|
||||||
errorCorrectionLevel: 'H',
|
|
||||||
type: 'png',
|
|
||||||
renderOpts:{
|
|
||||||
quality: 1,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.then(url => {
|
|
||||||
this.payreqURI = url;
|
|
||||||
})
|
|
||||||
.catch(err =>{
|
|
||||||
console.error(err);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
invoice: function(val) {
|
|
||||||
this.makeLnQR(val.payreq)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
img{
|
|
||||||
width: 340px;
|
|
||||||
height: 340px;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,60 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="upload">
|
|
||||||
<input v-on:change="fileChange($event)" type="file" multiple />
|
|
||||||
<p>selected {{fileCount}} files</p>
|
|
||||||
<ul>
|
|
||||||
<li v-bind:files="files" v-for="file in files">
|
|
||||||
{{ file.name }}
|
|
||||||
<ul>
|
|
||||||
<li>size: {{ file.size / 1000 }} kB </li>
|
|
||||||
<li>type: {{ file.type }} </li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script charset="utf-8">
|
|
||||||
import GetWorker from './workerInterface.js';
|
|
||||||
const w = GetWorker('main');
|
|
||||||
|
|
||||||
//w.listenTo('upload-id', (e) => {
|
|
||||||
// console.log('vue received upload id ', e.data.id)
|
|
||||||
// console.log('vue received upload id ', e.data.invoice)
|
|
||||||
//})
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
fileCount: 0,
|
|
||||||
files: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
fileChange(event) {
|
|
||||||
// reset
|
|
||||||
this.files = []
|
|
||||||
|
|
||||||
|
|
||||||
this.fileCount = event.target.files.length
|
|
||||||
this.files = event.target.files
|
|
||||||
|
|
||||||
w.post({
|
|
||||||
msg: 'new-upload',
|
|
||||||
payload: [...this.files],
|
|
||||||
})
|
|
||||||
|
|
||||||
// Get sha256 of files
|
|
||||||
// for (let file of this.files) {
|
|
||||||
// w.post({
|
|
||||||
// msg: 'file-sha256',
|
|
||||||
// payload: file
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue