You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<template>
|
|
<div id="home">
|
|
<upload></upload>
|
|
<!--<pay :uploadId="uploadId" :status="status" :invoice="invoice"></pay>-->
|
|
<!--<download-link v-if="uploadId && paid" :id="uploadId"></download-link>-->
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script charset="utf-8">
|
|
import Upload from './Upload.vue';
|
|
import Pay from './Pay.vue';
|
|
import DownloadLink from './DownloadLink.vue';
|
|
|
|
import GetWorker from './workerInterface.js';
|
|
import { lastSession } from './api.js';
|
|
|
|
const Worker = GetWorker('main');
|
|
|
|
|
|
export default {
|
|
name: 'app',
|
|
data() {
|
|
return {
|
|
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.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
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
},
|
|
computed: {
|
|
paid() {
|
|
return this.invoice.status == 'paid';
|
|
},
|
|
},
|
|
components: {
|
|
Upload,
|
|
Pay,
|
|
DownloadLink,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.unpaid {
|
|
background-color: pink;
|
|
}
|
|
|
|
.expired {
|
|
background-color: yellow;
|
|
}
|
|
|
|
.paid {
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
.last-upload {
|
|
background: cyan;
|
|
}
|
|
|
|
.dl-link{
|
|
color: #d33b00
|
|
}
|
|
</style>
|