Front working upload/pay scenario
Chakib Benziane
5 years ago
parent
89fc1b2894
commit
93a0260ecc
@ -1,24 +1,92 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script charset="utf-8">
|
||||
import Upload from './upload.vue';
|
||||
import Pay from './pay.vue';
|
||||
import Upload from './Upload.vue';
|
||||
import Pay from './Pay.vue';
|
||||
import GetWorker from './workerInterface.js';
|
||||
import { lastSession } from './api.js';
|
||||
|
||||
const Worker = GetWorker('main');
|
||||
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
data() {
|
||||
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: {
|
||||
Upload,
|
||||
Pay,
|
||||
}
|
||||
}
|
||||
</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