routes + Base style scaffolding
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 './styles/index.css';
|
||||||
|
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
import Home from './Home.vue';
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import GetWorker from './workerInterface.js';
|
import GetWorker from './workerInterface.js';
|
||||||
|
import Router from 'vue-router';
|
||||||
|
|
||||||
|
|
||||||
window.app = new Vue({
|
Vue.use(Router)
|
||||||
el: '#app',
|
|
||||||
|
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/>',
|
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';
|
@import './variables.css';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: var(--test);
|
font-family:
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/*font-size: var(--test);*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue