routes + Base style scaffolding
Chakib Benziane
5 years ago
parent
314e3b7624
commit
6b74f86164
@ -0,0 +1,104 @@
|
||||
<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>
|
||||
@ -1,16 +1,42 @@
|
||||
import 'tachyons';
|
||||
import './styles/index.css';
|
||||
|
||||
import Vue from 'vue';
|
||||
import Home from './Home.vue';
|
||||
import App from './App.vue';
|
||||
import GetWorker from './workerInterface.js';
|
||||
import Router from 'vue-router';
|
||||
|
||||
|
||||
window.app = new Vue({
|
||||
el: '#app',
|
||||
Vue.use(Router)
|
||||
|
||||
const router = new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path:'/u/:uploadId',
|
||||
name: 'upload',
|
||||
//component:
|
||||
}
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
//const router = new VueRouter({
|
||||
//routes
|
||||
//})
|
||||
|
||||
|
||||
const app = new Vue({
|
||||
template: '<App/>',
|
||||
components: { App }
|
||||
});
|
||||
components: { App },
|
||||
router: router
|
||||
}).$mount('#app');
|
||||
|
||||
window.worker = GetWorker('main');
|
||||
//window.worker = GetWorker('main');
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
@import './variables.css';
|
||||
|
||||
body {
|
||||
font-size: var(--test);
|
||||
font-family:
|
||||
}
|
||||
|
||||
body {
|
||||
/*font-size: var(--test);*/
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue