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.
328 lines
12 KiB
328 lines
12 KiB
4 years ago
|
<template>
|
||
|
|
||
|
<b-row no-gutters w-100 h-100
|
||
|
v-if="showlloedit"
|
||
|
>
|
||
|
<b-col cols="12" sm="12" md="12" >
|
||
|
<iframe id="llocontainer"
|
||
|
:srcdoc="htmlasciitmp"
|
||
|
width="100%"
|
||
|
height="750"
|
||
|
frameBorder="0"
|
||
|
name="Forgot_Iframe">
|
||
|
</iframe>
|
||
|
|
||
|
</b-col>
|
||
|
</b-row>
|
||
|
|
||
|
|
||
|
|
||
|
</template>
|
||
|
<script>
|
||
|
import Vue from 'vue'
|
||
|
import Asciidoctor from 'asciidoctor'
|
||
|
import JSZip from 'jszip';
|
||
|
import FileSaver from 'file-saver';
|
||
|
export default {
|
||
|
components: {
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
swarmlabllo: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/llo-index.yml',
|
||
|
ssl:{},
|
||
|
url_asciijshighlight:[
|
||
|
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'
|
||
|
],
|
||
|
url_asciijs:[
|
||
|
//'https://code.jquery.com/jquery-3.5.1.slim.min.js',
|
||
|
//'https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js',
|
||
|
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'
|
||
|
],
|
||
|
url_asciicss:[
|
||
|
'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css',
|
||
|
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css',
|
||
|
'https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
||
|
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'
|
||
|
],
|
||
|
|
||
|
code: '',
|
||
|
editchoice: '',
|
||
|
optionsedit: [
|
||
|
{ text: 'code', value: 'code' },
|
||
|
{ text: 'text', value: 'text' }
|
||
|
],
|
||
|
llodesc:[{
|
||
|
llo_url : '',
|
||
|
llo_name : '',
|
||
|
llo_author : '',
|
||
|
llo_intro : ''
|
||
|
}],
|
||
|
searchLLO: [],
|
||
|
searchLLOactive : false,
|
||
|
ADOC_html_code:'',
|
||
|
challenge:[],
|
||
|
action:'',
|
||
|
tryLLO:[],
|
||
|
service:'os2',
|
||
|
active:0,
|
||
|
activecount:0,
|
||
|
remove:'',
|
||
|
activeField:'',
|
||
|
bootstrap:false,
|
||
|
firstbootstrap:0,
|
||
|
htmlasciitmp:'',
|
||
|
datafile: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data',
|
||
|
datadir: '0_netstat/data',
|
||
|
LearningObject:'',
|
||
|
asciidochtml:'',
|
||
|
showllo:true,
|
||
|
showlloedit:true,
|
||
|
selected: 'sublime',
|
||
|
options: [
|
||
|
{ text: 'vim', value: 'vim' },
|
||
|
{ text: 'sublime', value: 'sublime' }
|
||
|
],
|
||
|
pValidate: false,
|
||
|
ADOC_html:[]
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
async saveascii() {
|
||
|
var asciiname = 'myname'
|
||
|
var filesave = asciiname+"_DocLive.zip"
|
||
|
var zip = new JSZip();
|
||
|
|
||
|
var llofile = zip.folder(asciiname);
|
||
|
llofile.file("ascii.adoc.html", this.asciidochtml);
|
||
|
llofile.file("ascii.adoc", this.code);
|
||
|
|
||
|
zip.generateAsync({type:"blob"})
|
||
|
.then(function(content) {
|
||
|
FileSaver.saveAs(content, filesave);
|
||
|
});
|
||
|
|
||
|
},
|
||
|
async bootsrapllo() {
|
||
|
console.log('created');
|
||
|
var action=this.action
|
||
|
var value=this.code
|
||
|
var service=this.service
|
||
|
var asciiID = this.active
|
||
|
var asciiid = "llo_"+asciiID+"_ascii"
|
||
|
try {
|
||
|
|
||
|
// *************************************
|
||
|
// ***** ------- HTML ------- *****
|
||
|
// *************************************
|
||
|
try{
|
||
|
// -------------------------------------
|
||
|
// ------- create file
|
||
|
// -------------------------------------
|
||
|
var thishtml = `<!doctype html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="utf-8">
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
</head>
|
||
|
<body>
|
||
|
<div id="firstElement">
|
||
|
<span id="AsciiElement"></span>
|
||
|
</div>
|
||
|
<div id="lastElement">
|
||
|
<span id="jsElement"></span>
|
||
|
</div>
|
||
|
</body>
|
||
|
</html>`
|
||
|
|
||
|
var htmlAscii = new DOMParser().parseFromString(thishtml, "text/html");
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- insert script head
|
||
|
// -------------------------------------
|
||
|
var arrayLengthi1 = this.url_asciijshighlight.length
|
||
|
for (var i = 0; i < arrayLengthi1; i++) {
|
||
|
var asciiscript0 = document.createElement('script');
|
||
|
asciiscript0.type = 'text/javascript';
|
||
|
asciiscript0.src = this.url_asciijshighlight[i]
|
||
|
htmlAscii.head.appendChild(asciiscript0);
|
||
|
}
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- create css head
|
||
|
// -------------------------------------
|
||
|
var arrayLength = this.url_asciicss.length
|
||
|
for (var i = 0; i < arrayLength; i++) {
|
||
|
var asciilink = document.createElement('link');
|
||
|
asciilink.rel = 'stylesheet';
|
||
|
asciilink.href = this.url_asciicss[i]
|
||
|
htmlAscii.head.appendChild(asciilink);
|
||
|
//console.log(this.url_asciicss[i])
|
||
|
}
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- insert custom functions head
|
||
|
// -------------------------------------
|
||
|
var myfunction = `function llorm(msg) {
|
||
|
var origin = 'https://api-client.swarmlab.io:8088'
|
||
|
window.parent.postMessage({'event': 'warranty-transaction-rm', 'data': msg}, origin);
|
||
|
};
|
||
|
function topwindow(field) {
|
||
|
var asciiid = "llo_"+field+"_ascii"
|
||
|
var llotarget = document.getElementById(asciiid);
|
||
|
if(llotarget){
|
||
|
llotarget.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
|
||
|
}
|
||
|
};
|
||
|
function lloedit(msg,field) {
|
||
|
var origin = 'https://api-client.swarmlab.io:8088'
|
||
|
topwindow(msg);
|
||
|
window.parent.postMessage({'event': 'warranty-transaction-success', 'data': msg , 'field': field}, origin);
|
||
|
};`
|
||
|
var asciiscript2 = document.createElement('script');
|
||
|
asciiscript2.type = 'text/javascript';
|
||
|
asciiscript2.innerHTML = myfunction
|
||
|
htmlAscii.head.appendChild(asciiscript2);
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- insert script body
|
||
|
// -------------------------------------
|
||
|
var arrayLengthi = this.url_asciijs.length
|
||
|
//console.log(arrayLengthi)
|
||
|
for (var i = 0; i < arrayLengthi; i++) {
|
||
|
var asciiscript = document.createElement('script');
|
||
|
asciiscript.type = 'text/javascript';
|
||
|
asciiscript.src = this.url_asciijs[i]
|
||
|
let parentDiv = htmlAscii.getElementById("jsElement").parentNode
|
||
|
let lastel = document.getElementById("jsElement")
|
||
|
parentDiv.insertBefore(asciiscript, lastel)
|
||
|
//htmlAscii.body.appendChild(asciiscript);
|
||
|
}
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- run hlhs body
|
||
|
// -------------------------------------
|
||
|
var asciiscript1 = document.createElement('script');
|
||
|
asciiscript1.type = 'text/javascript';
|
||
|
asciiscript1.innerHTML = "hljs.initHighlighting()";
|
||
|
htmlAscii.body.appendChild(asciiscript1);
|
||
|
|
||
|
// -------------------------------------
|
||
|
// ------- html serialize
|
||
|
// -------------------------------------
|
||
|
var Myascii = new XMLSerializer();
|
||
|
this.htmlasciitmp = Myascii.serializeToString(htmlAscii)
|
||
|
|
||
|
// *************************************
|
||
|
// ***** ------- HTML ------- *****
|
||
|
// *************************************
|
||
|
|
||
|
//console.log(" asciii3 "+JSON.stringify(this.htmlasciitmp))
|
||
|
//console.log(asciidoctor1.getRuntime())
|
||
|
this.bootstrap = true
|
||
|
//console.log(" bootstrap "+JSON.stringify(this.htmlasciitmp))
|
||
|
|
||
|
|
||
|
}catch (ex) {
|
||
|
console.log(" asc error "+JSON.stringify(ex))
|
||
|
return
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
}catch (ex) {
|
||
|
console.log(" logi error "+JSON.stringify(ex))
|
||
|
return
|
||
|
}
|
||
|
},
|
||
|
async addlloascii() {
|
||
|
var value = this.code
|
||
|
console.log(" ascii code "+JSON.stringify(this.code))
|
||
|
|
||
|
// *************************************
|
||
|
// ***** ------- HTML ------- *****
|
||
|
// *************************************
|
||
|
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,
|
||
|
'toclevels':4,
|
||
|
'sectnums':true,
|
||
|
'icons': 'font',
|
||
|
'copycss':true,
|
||
|
'stylesheet': 'https://cdnjs.cloudflare.com/ajax/libs/asciidoctor.js/1.5.9/css/asciidoctor.min.css',
|
||
|
'iconfont-cdn': 'https://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)
|
||
|
|
||
|
|
||
|
var mydinfunction = ` <div>
|
||
|
${value_compiled}
|
||
|
</div>`
|
||
|
|
||
|
|
||
|
console.log(" ascii "+JSON.stringify(value_compiled))
|
||
|
var asciiidtext = 'firstElement'
|
||
|
this.asciidochtml = value_compiled
|
||
|
document.getElementById('llocontainer').contentWindow.document.getElementById(asciiidtext).innerHTML = this.asciidochtml
|
||
|
//this.addtask (asciiID, divascii);
|
||
|
|
||
|
|
||
|
}catch (ex) {
|
||
|
console.log(" ascerror "+JSON.stringify(ex))
|
||
|
return
|
||
|
}
|
||
|
|
||
|
|
||
|
},
|
||
|
handleChange() {
|
||
|
},
|
||
|
},
|
||
|
computed: {
|
||
|
|
||
|
},
|
||
|
mounted() {
|
||
|
this.$root.$on('asciilive_add', (v) => {
|
||
|
this.code = v
|
||
|
this.addlloascii()
|
||
|
})
|
||
|
this.$root.$on('asciilive_save', (v) => {
|
||
|
this.saveascii()
|
||
|
})
|
||
|
|
||
|
},
|
||
|
beforeDestroy () {
|
||
|
this.$root.$off('asciilive_add')
|
||
|
this.$root.$off('asciilive_save')
|
||
|
},
|
||
|
|
||
|
created () {
|
||
|
this.bootsrapllo()
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style>
|
||
|
.CodeMirror {
|
||
|
|
||
|
|
||
|
/* Set height, width, borders, and global font properties here */
|
||
|
font-family: monospace;
|
||
|
height: 750px;
|
||
|
}
|
||
|
|
||
|
</style>
|