bit4sat/web/src/App.vue

<template>
    <div id="app">
        <upload></upload>
        <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 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.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>