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.
338 lines
9.4 KiB
338 lines
9.4 KiB
<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">
|
|
<b>Copy & Paste</b>
|
|
<br>
|
|
Any time you see a command you'd like to try in your own terminal just pause the player <br> and copy-paste the content you want.
|
|
</div>
|
|
<div class="col-12">
|
|
<iframe
|
|
id="llo"
|
|
title="title"
|
|
width="600"
|
|
height="700"
|
|
:src="asciinemasource"
|
|
allowfullscreen
|
|
frameborder="0"
|
|
>
|
|
</iframe>
|
|
<!--
|
|
<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">
|
|
<iframe
|
|
id="lloasciiview1"
|
|
title="title"
|
|
width="100%"
|
|
height="700"
|
|
:src="asciidocurl"
|
|
frameborder="0"
|
|
>
|
|
</iframe>
|
|
</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>
|
|
<hr>
|
|
<b-container fluid class="bv-example-row"
|
|
v-if="hybridshow!='penguin'"
|
|
>
|
|
<div class="row text-center"
|
|
<div class="col-12">
|
|
<div class="input-group input-group-sm sm-3">
|
|
<select
|
|
v-on:change="oncompletiontracking()"
|
|
class="custom-select custom-select-sm" v-model="completiontracking">
|
|
<option value="0" selected>Completion tracking</option>
|
|
<option value="1">Completed</option>
|
|
<option value="2">Almost</option>
|
|
</select>
|
|
<select
|
|
v-on:change="oncompletiontracking()"
|
|
class="custom-select custom-select-sm" v-model="courseread">
|
|
<option value="0" selected>Did you find this helpful?</option>
|
|
<option value="1">No</option>
|
|
<option value="2">Not really/A bit</option>
|
|
<option value="3">Yes</option>
|
|
</select>
|
|
</div>
|
|
</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
|
|
completiontracking:0,
|
|
courseread:0,
|
|
hybridshow:'penguin',
|
|
llo:'',
|
|
llocourse:'',
|
|
llochapter:'',
|
|
asciidocurl:'',
|
|
asciidoccode:'',
|
|
course:'',
|
|
asciinemasource:'',
|
|
coursevimeo:'',
|
|
hybridcourse:'',
|
|
token: '',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$root.$on('hybrid_llo_viecourse', (v) => {
|
|
this.completiontracking = 0
|
|
this.courseread = 0
|
|
this.llocourse = v.llo
|
|
this.llochapter = v.course
|
|
if(v.type == 'asciinema'){
|
|
this.hybridshow = v.type
|
|
this.llo = v.llo
|
|
this.course = v.course
|
|
this.asciinemasource = `http://localhost:3080/player/aplayer.html?llo=${this.llo}&item=${this.course}`
|
|
this.getcompletion()
|
|
}else if(v.type == 'asciidoc'){
|
|
this.asciidoccode = v.code
|
|
this.vtype = v.type // save for later use after addlloascii finish
|
|
this.addlloascii()
|
|
this.getcompletion()
|
|
}else if(v.type == 'video'){
|
|
this.$wait.start('myRunInstancetutor');
|
|
this.hybridshow = v.type
|
|
this.sourcevimeo=`https://player.vimeo.com/video/${v.course}`
|
|
this.getcompletion()
|
|
}
|
|
})
|
|
},
|
|
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: {
|
|
async getcompletion() {
|
|
var value = {}
|
|
value.token = this.token
|
|
value.course = this.llocourse
|
|
value.chapter = this.llochapter
|
|
var res1 = await store.dispatch('pipelineLLO/getcompletion', value)
|
|
console.log('params '+JSON.stringify(res1))
|
|
if(res1.data.action == 'ok'){
|
|
if (res1.data.data){
|
|
this.completiontracking = res1.data.data.track
|
|
this.courseread = res1.data.data.evaluation
|
|
}
|
|
}
|
|
|
|
},
|
|
async oncompletiontracking() {
|
|
var value = {}
|
|
value.token = this.token
|
|
value.action = 'track'
|
|
value.track = this.completiontracking
|
|
value.evaluation = this.courseread
|
|
value.course = this.llocourse
|
|
value.chapter = this.llochapter
|
|
var res1 = await store.dispatch('pipelineLLO/oncompletiontracking', value)
|
|
this.$root.$emit('hybrid_progress_refresh')
|
|
},
|
|
dofin() {
|
|
//console.log(" dofin ")
|
|
this.$wait.end('myRunInstancetutor');
|
|
},
|
|
async addlloascii() {
|
|
var value = this.asciidoccode
|
|
//console.log(" ascii code 2 "+JSON.stringify(value))
|
|
|
|
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>
|
|
|