You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 lines
6.5 KiB
253 lines
6.5 KiB
4 years ago
|
<template>
|
||
|
<card class="card-user" style="max-height:100%">
|
||
|
|
||
|
<div class="author">
|
||
|
<img class="avatar border-white" src="@/assets/img/book.png" alt="..."
|
||
|
v-if="hybridshow=='asciidoc'"
|
||
|
>
|
||
|
<img class="avatar border-white" src="@/assets/img/code-128.png" alt="..."
|
||
|
v-if="hybridshow=='asciinema'"
|
||
|
>
|
||
|
<img class="avatar border-white" src="@/assets/img/video1.png" alt="..."
|
||
|
v-if="hybridshow=='video'"
|
||
|
>
|
||
|
</div>
|
||
|
|
||
|
<v-wait for="myRunInstancetutor">
|
||
|
<template slot="waiting">
|
||
|
<div>
|
||
|
<img src="@/assets/loading.gif" />
|
||
|
Enter Lab_room...
|
||
|
</div>
|
||
|
</template>
|
||
|
</v-wait>
|
||
|
|
||
|
<b-container fluid>
|
||
|
<div class="row text-center"
|
||
|
v-if="hybridshow=='asciinema'"
|
||
|
>
|
||
|
<div class="col-12">
|
||
|
<aplayer
|
||
|
:llo="llo"
|
||
|
:course="course"
|
||
|
>
|
||
|
</aplayer>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="row text-center"
|
||
|
v-if="hybridshow=='video'"
|
||
|
>
|
||
|
<iframe
|
||
|
@load="dofin()"
|
||
|
id="llo"
|
||
|
width="740"
|
||
|
height="500"
|
||
|
:src="sourcevimeo"
|
||
|
allowfullscreen
|
||
|
frameborder="0"
|
||
|
>
|
||
|
</iframe>
|
||
|
</div>
|
||
|
|
||
|
<div class="row text-center"
|
||
|
v-if="hybridshow=='asciidoc'"
|
||
|
>
|
||
|
<div class="col-12">
|
||
|
<asciidoc
|
||
|
:asciidocurl="asciidocurl"
|
||
|
>
|
||
|
</asciidoc>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="row text-center"
|
||
|
v-if="hybridshow=='penguin'"
|
||
|
>
|
||
|
<div class="col-12">
|
||
|
<img src="@/assets/img/penguin21a.png" width="400" height="400">
|
||
|
</div>
|
||
|
</div>
|
||
|
</b-container>
|
||
|
|
||
|
</card>
|
||
|
</template>
|
||
|
<script>
|
||
|
import store from '@/store/index'
|
||
|
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
|
||
|
import Vue from 'vue'
|
||
|
import card from '@/components/Card.vue'
|
||
|
import aplayer from '@/components/asciiplayer.vue'
|
||
|
import asciidoc from '@/components/asciidoc.vue'
|
||
|
import Asciidoctor from 'asciidoctor'
|
||
|
import {ApiConfig} from "@/config/index";
|
||
|
export default {
|
||
|
components: {
|
||
|
asciidoc,
|
||
|
aplayer,
|
||
|
card
|
||
|
},
|
||
|
props: {},
|
||
|
data() {
|
||
|
return{
|
||
|
vtype:'', // tmp save for hybridshow
|
||
|
hybridshow:'penguin',
|
||
|
llo:'',
|
||
|
asciidocurl:'',
|
||
|
asciidoccode:'',
|
||
|
course:'',
|
||
|
coursevimeo:'',
|
||
|
hybridcourse:'',
|
||
|
token: '',
|
||
|
}
|
||
|
},
|
||
|
mounted() {
|
||
|
this.$root.$on('hybrid_llo_viecourse', (v) => {
|
||
|
console.log("v "+ JSON.stringify(v));
|
||
|
if(v.type == 'asciinema'){
|
||
|
this.hybridshow = v.type
|
||
|
this.llo = v.llo
|
||
|
this.course = v.course
|
||
|
}else if(v.type == 'asciidoc'){
|
||
|
this.asciidoccode = v.code
|
||
|
this.vtype = v.type // save for later use after addlloascii finish
|
||
|
this.addlloascii()
|
||
|
}else if(v.type == 'video'){
|
||
|
this.$wait.start('myRunInstancetutor');
|
||
|
this.hybridshow = v.type
|
||
|
this.sourcevimeo=`https://player.vimeo.com/video/${v.course}`
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
created() {
|
||
|
var url_string = window.location.href
|
||
|
var url = new URL(url_string);
|
||
|
this.token = url.searchParams.get("token");
|
||
|
console.log("token "+ this.token);
|
||
|
|
||
|
},
|
||
|
beforeDestroy () {
|
||
|
this.$root.$off('hybrid_llo_viecourse')
|
||
|
//this.$root.$off('hybrid_refresh_table')
|
||
|
},
|
||
|
computed: {
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
dofin() {
|
||
|
console.log(" dofin ")
|
||
|
this.$wait.end('myRunInstancetutor');
|
||
|
},
|
||
|
async addlloascii() {
|
||
|
var value = this.asciidoccode
|
||
|
console.log(" ascii code 2 "+JSON.stringify(this.code))
|
||
|
|
||
|
try{
|
||
|
var asciidoctor1 = Asciidoctor()
|
||
|
var value_compiled = asciidoctor1.convert(value,
|
||
|
{
|
||
|
standalone: true,
|
||
|
backend: 'html5',
|
||
|
header_footer: false,
|
||
|
doctype: 'article',
|
||
|
safe: 'safe',
|
||
|
attributes: {
|
||
|
'source-highlighter': 'highlightjs',
|
||
|
//'toc':'right',
|
||
|
//'sectnumlevels':4,
|
||
|
//'no-header-footer':true,
|
||
|
//'last-update-label':true,
|
||
|
'sectnums':true,
|
||
|
'icons': 'font',
|
||
|
'copycss':true,
|
||
|
'stylesheet': 'http://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
||
|
'iconfont-cdn': 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css',
|
||
|
'iconfont-name': 'fontawesome-5-14.0',
|
||
|
'iconfont-remote':true,
|
||
|
'linkcss': true
|
||
|
}
|
||
|
}) // (2)
|
||
|
|
||
|
console.log(" ascii "+JSON.stringify(value_compiled))
|
||
|
|
||
|
var llosave = await store.dispatch('pipelineLLO/save_llo_asciidoctmp', value_compiled)
|
||
|
|
||
|
console.log('no write permission 1 '+ JSON.stringify(llosave))
|
||
|
if(llosave.data == 'nofile'){
|
||
|
console.log('no write permission')
|
||
|
}else{
|
||
|
this.asciidocurl = `http://localhost:3080/asciidoc/${llosave.data.data}.html?token=${this.token}`
|
||
|
console.log('no write permission 2 '+ JSON.stringify(this.asciidocurl))
|
||
|
this.hybridshow = 'no'
|
||
|
this.hybridshow = this.vtype
|
||
|
}
|
||
|
|
||
|
|
||
|
}catch (ex) {
|
||
|
console.log(" ascerror "+JSON.stringify(ex))
|
||
|
return
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
},
|
||
|
|
||
|
|
||
|
actions: {
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
};
|
||
|
</script>
|
||
|
<style>
|
||
|
.flex-fixed-width-item {
|
||
|
flex: 0 0 100px;
|
||
|
}
|
||
|
.modalinfo {
|
||
|
z-index: 10000000 !important;
|
||
|
position:fixed;
|
||
|
}
|
||
|
/* a container with flex-direction column */
|
||
|
|
||
|
.vue-notifyjs.notifications{
|
||
|
.alert{
|
||
|
z-index: 100;
|
||
|
}
|
||
|
.list-move {
|
||
|
transition: transform 0.3s, opacity 0.4s;
|
||
|
}
|
||
|
.list-item {
|
||
|
display: inline-block;
|
||
|
margin-right: 10px;
|
||
|
|
||
|
}
|
||
|
.list-enter-active {
|
||
|
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
|
||
|
}
|
||
|
.list-leave-active {
|
||
|
transition: transform 1s ease-out, opacity 0.4s ease-out;
|
||
|
}
|
||
|
|
||
|
.list-enter {
|
||
|
opacity: 0;
|
||
|
transform: scale(1.1);
|
||
|
|
||
|
}
|
||
|
.list-leave-to {
|
||
|
opacity: 0;
|
||
|
transform: scale(1.2, 0.7);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
pre {
|
||
|
//background-color: rgb(255, 247, 229);
|
||
|
background-color: #eff0f1;
|
||
|
border: 1px solid blue;
|
||
|
//white-space: pre-line;
|
||
|
}
|
||
|
|
||
|
</style>
|