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.
470 lines
16 KiB
470 lines
16 KiB
<template>
|
|
<div>
|
|
|
|
<b-row no-gutters w-100 h-100
|
|
v-if="showlloedit"
|
|
>
|
|
<b-col cols="12" sm="12" md="12" >
|
|
|
|
<b-row >
|
|
<b-col cols="4">
|
|
<div class="input-group input-group-sm sm-3">
|
|
<!--
|
|
<select
|
|
class="custom-select custom-select-sm "
|
|
@change="setKeymap"
|
|
v-model="selected">
|
|
<option
|
|
v-for="option in options"
|
|
v-bind:value="option.value">
|
|
{{ option.text }}
|
|
</option>
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-info btn-sm"
|
|
v-if="cmOptions.keyMap == 'sublime'"
|
|
@click="infoFilter">
|
|
i</button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</b-col>
|
|
|
|
<b-col cols="3">
|
|
<div class="input-group input-group-sm sm-3">
|
|
<button type="button"
|
|
round
|
|
disable
|
|
class="btn btn-outline-info btn-sm"
|
|
v-if="socketonline"
|
|
@click="socketconnect"
|
|
>
|
|
online </button>
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-info btn-sm"
|
|
v-else
|
|
@click="socketconnect"
|
|
>
|
|
socket disconnected</button>
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-info btn-sm"
|
|
v-if="socketonline"
|
|
@click="hotreload()">
|
|
Hot_Reload</button>
|
|
</div>
|
|
</b-col>
|
|
|
|
<b-col cols="5" >
|
|
<div class="input-group input-group-sm d-flex justify-content-end">
|
|
</div>
|
|
<div class="input-group input-group-sm d-flex justify-content-end">
|
|
<div class="input-group-append">
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-warning btn-sm"
|
|
v-if="socketonline"
|
|
@click="infoHotreload()">
|
|
Hot_Reload_HowTo</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-warning btn-sm"
|
|
v-if="tryConsole"
|
|
@click="clear()">
|
|
Clear</button>
|
|
</div>
|
|
<div class="input-group-append">
|
|
<button type="button"
|
|
round
|
|
class="btn btn-outline-info btn-sm"
|
|
v-if="cmOptions.keyMap == 'sublime'"
|
|
@click="infoFilter">
|
|
i</button>
|
|
</div>
|
|
<!--
|
|
<div class="input-group-append">
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline-dark btn-sm"
|
|
v-if="tryLLO[active]"
|
|
@click="addlloasciisource"
|
|
>Create task!</button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
<div class="codemirror" >
|
|
<codemirror
|
|
ref="myCm"
|
|
:value="code"
|
|
:options="cmOptions"
|
|
@cursorActivity="onCmCursorActivity"
|
|
@ready="onCmReady"
|
|
@focus="onCmFocus"
|
|
@input="onCmCodeChange"
|
|
></codemirror>
|
|
</div>
|
|
</b-col>
|
|
</b-row>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
|
|
import Vue from 'vue'
|
|
import store from '@/store/index'
|
|
|
|
|
|
import { codemirror } from 'vue-codemirror'
|
|
import JSZip from 'jszip';
|
|
import FileSaver from 'file-saver';
|
|
import 'codemirror/lib/codemirror.css'
|
|
import 'codemirror/theme/neat.css'
|
|
import 'codemirror/theme/paraiso-light.css'
|
|
import'codemirror/addon/selection/active-line.js'
|
|
|
|
import'codemirror/addon/hint/show-hint.js'
|
|
import'codemirror/addon/hint/show-hint.css'
|
|
import'codemirror/addon/hint/javascript-hint.js'
|
|
import'codemirror/addon/selection/active-line.js'
|
|
import'codemirror/addon/scroll/annotatescrollbar.js'
|
|
import'codemirror/addon/search/matchesonscrollbar.js'
|
|
import'codemirror/addon/search/searchcursor.js'
|
|
import'codemirror/addon/search/match-highlighter.js'
|
|
|
|
import'codemirror/mode/shell/shell.js'
|
|
import'codemirror/addon/edit/matchbrackets.js'
|
|
import'codemirror/addon/comment/comment.js'
|
|
import'codemirror/addon/dialog/dialog.js'
|
|
import'codemirror/addon/dialog/dialog.css'
|
|
import'codemirror/addon/search/searchcursor.js'
|
|
import'codemirror/addon/search/search.js'
|
|
import'codemirror/keymap/sublime.js'
|
|
import'codemirror/keymap/vim.js'
|
|
|
|
import'codemirror/addon/fold/foldgutter.css'
|
|
import'codemirror/addon/fold/brace-fold.js'
|
|
import'codemirror/addon/fold/comment-fold.js'
|
|
import'codemirror/addon/fold/foldcode.js'
|
|
import'codemirror/addon/fold/foldgutter.js'
|
|
import'codemirror/addon/fold/indent-fold.js'
|
|
import'codemirror/addon/fold/markdown-fold.js'
|
|
import'codemirror/addon/fold/xml-fold.js'
|
|
import 'codemirror/lib/codemirror';
|
|
import 'codemirror/addon/display/placeholder';
|
|
|
|
export default {
|
|
components: {
|
|
codemirror
|
|
},
|
|
data () {
|
|
return {
|
|
socketonline:false,
|
|
tryConsole:false,
|
|
ssl:{},
|
|
getinfo:'',
|
|
token:'',
|
|
swarmlabname:'',
|
|
|
|
code: '',
|
|
editchoice: '',
|
|
optionsedit: [
|
|
{ text: 'code', value: 'code' },
|
|
{ text: 'text', value: 'text' }
|
|
],
|
|
llodesc:[{
|
|
llo_url : '',
|
|
llo_name : '',
|
|
llo_author : '',
|
|
llo_intro : ''
|
|
}],
|
|
llo:[{
|
|
id : 0,
|
|
rm : false,
|
|
data_info : 'Asciidoc \n',
|
|
data_code : '#Your source code',
|
|
data_service : '',
|
|
code_datafile : 'url',
|
|
code_name : '',
|
|
code_exec : '',
|
|
code_options : '',
|
|
code_mime : '',
|
|
code_info : '',
|
|
code_code : '',
|
|
code_codeout : '',
|
|
code_codeoutput : 'console',
|
|
points : '',
|
|
challenge_question : '',
|
|
code_challenge_question : '',
|
|
challenge_answer : '',
|
|
challenge_answer_hint : '',
|
|
code_challenge_answer_hint : '',
|
|
challenge_answer_source : '',
|
|
challenge_answer_code_out : '',
|
|
challenge_answer_code : '',
|
|
code_challenge_answer_code : ''
|
|
}],
|
|
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:'',
|
|
showllo:true,
|
|
showlloedit:true,
|
|
selected: 'sublime',
|
|
options: [
|
|
{ text: 'vim', value: 'vim' },
|
|
{ text: 'sublime', value: 'sublime' }
|
|
],
|
|
optionsmime: [
|
|
{ text: 'sh', value: 'bash' },
|
|
{ text: 'javascript', value: 'javascript' },
|
|
{ text: 'python', value: 'python' },
|
|
{ text: 'php', value: 'php' },
|
|
{ text: 'sql', value: 'sq;' },
|
|
{ text: 'xml', value: 'xml' },
|
|
{ text: 'c', value: 'c' }
|
|
],
|
|
pValidate: false,
|
|
cmOptions: {
|
|
tabSize: 2,
|
|
styleActiveLine: true,
|
|
lineNumbers: true,
|
|
lineSeparator:'\n',
|
|
line: true,
|
|
foldGutter: true,
|
|
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
|
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
|
|
styleSelectedText: true,
|
|
mode: 'shell',
|
|
hintOptions:{
|
|
completeSingle: false
|
|
},
|
|
keyMap: "sublime",
|
|
//keyMap: "vim",
|
|
matchBrackets: true,
|
|
showCursorWhenSelecting: true,
|
|
indentUnit:this.ADOC_html_code,
|
|
lineWrapping: true,
|
|
//theme: 'neat',
|
|
theme: 'paraiso-light',
|
|
refresh:true,
|
|
readOnly: true,
|
|
autofocus: false,
|
|
extraKeys: { "Ctrl": "autocomplete" }
|
|
},
|
|
ADOC_html:[]
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
socketconnect () {
|
|
// send to runLLO
|
|
this.$root.$emit('SERVER_socket_connect')
|
|
},
|
|
clear () {
|
|
this.tryConsole = false
|
|
this.code = ''
|
|
},
|
|
async getdata () {
|
|
|
|
var field = this.getinfo
|
|
var log = await store.dispatch("pipelineLLO/get_data",{
|
|
code:field
|
|
})
|
|
|
|
},
|
|
|
|
async showactive(index) {
|
|
this.topwindow(index)
|
|
},
|
|
onCmReady(cm) {
|
|
cm.on('change', (cm, chg) => {
|
|
}),
|
|
cm.on('keypress', () => {
|
|
cm.showHint({completeSingle:false})
|
|
})
|
|
},
|
|
onCmCursorActivity(a, b, c) {
|
|
},
|
|
onCmFocus(cm) {
|
|
},
|
|
onCmCodeChange(newCode) {
|
|
this.code = newCode
|
|
//this.$root.$emit('socket_add',this.code)
|
|
},
|
|
handleChange() {
|
|
},
|
|
setKeymap () {
|
|
this.cmOptions.keyMap = this.selected
|
|
},
|
|
infoFilter() {
|
|
var title1='<h3>Playbook Images</h3>'
|
|
var winfop='<table class="table table-striped table-sm ">'+
|
|
'<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>'+
|
|
'<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-Down</td> <td class="text-left">scrollLineDown</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-L</td> <td class="text-left">selectLine</td></tr>'+
|
|
'<tr><td class="text-left">Esc</td> <td class="text-left">singleSelectionTop</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-Enter</td> <td class="text-left">insertLineAfter</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-D</td> <td class="text-left">selectNextOccurrence</td></tr>'+
|
|
'<tr><td class="text-left">Shift-Ctrl-Space</td> <td class="text-left">selectScope</td></tr>'+
|
|
'<tr><td class="text-left">Shift-Ctrl-M</td> <td class="text-left">selectBetweenBrackets</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-M</td> <td class="text-left">goToBracket</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-Y</td> <td class="text-left">sublimeYank</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-C</td> <td class="text-left">showInCenter</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-G</td> <td class="text-left">clearBookmarks</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-Backspace</td> <td class="text-left">delLineLeft</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-0</td> <td class="text-left">unfoldAll</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-K Ctrl-J</td> <td class="text-left">unfoldAll</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-Alt-Up</td> <td class="text-left">addCursorToPrevLine</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-Alt-Down</td> <td class="text-left">addCursorToNextLine</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-F3</td> <td class="text-left">findUnder</td></tr>'+
|
|
'<tr><td class="text-left">Shift-Ctrl-F3</td> <td class="text-left">findUnderPrevious</td></tr>'+
|
|
'<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>'+
|
|
'<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>'+
|
|
'<tr><td class="text-left">Ctrl-F</td> <td class="text-left">find</td></tr>'+
|
|
'</table>'
|
|
|
|
var title1=''
|
|
var winfo=''
|
|
this.$swal({
|
|
title: '<strong>Key bindings</strong>',
|
|
type: 'info',
|
|
html: winfop+title1+winfo,
|
|
showCloseButton: true,
|
|
showLoaderOnConfirm: false,
|
|
allowOutsideClick: false
|
|
})
|
|
},
|
|
async hotreload() {
|
|
var field = this.getinfo
|
|
var log = await store.dispatch("pipelineLLO/hotreload",{
|
|
token:this.token,
|
|
swarmlabname:this.swarmlabname
|
|
})
|
|
},
|
|
infoHotreload() {
|
|
var html1 = ` <div style="overflow-x: auto;"> <table class="table table-striped table-sm ">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-left" >Download</td>
|
|
<td class="text-left">https://git.swarmlab.io:3000/labs/swarmlab-playground-client/raw/branch/master/hot_reload.sh</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center" colspan="2"><b>and add the proper values</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">token</td>
|
|
<td class="text-left">${this.token}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">swarmlabname</td>
|
|
<td class="text-left">${this.swarmlabname}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center" colspan="2"><b>OR set the variables before exec</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left" colspan="2">export SWARMLAB_token=${this.token}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left" colspan="2">export SWARMLAB_name=${this.swarmlabname}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center" colspan="2"><b>Ready!</b<</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left" colspan="2"><i>Execute script every time you run git push</i></td>
|
|
</tr>
|
|
</tbody>
|
|
</table></div>`
|
|
|
|
|
|
|
|
this.$swal({
|
|
title: '<strong>HowTo</strong>',
|
|
type: 'info',
|
|
html: html1,
|
|
showCloseButton: true,
|
|
showLoaderOnConfirm: false,
|
|
allowOutsideClick: false
|
|
})
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
codemirror() {
|
|
return this.$refs.myCm.codemirror
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
// from runLLO
|
|
this.$root.$on('SERVER_socket_status', (v) => {
|
|
this.$nextTick(function () {
|
|
if(v == 'off'){
|
|
this.socketonline = false
|
|
}else if(v == 'on'){
|
|
this.socketonline = true
|
|
}
|
|
})
|
|
})
|
|
// from runLLO
|
|
this.$root.$on('hybrid_log_in', (log) => {
|
|
this.code += log
|
|
this.code += "\n"
|
|
this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0);
|
|
this.tryConsole=true
|
|
})
|
|
|
|
},
|
|
beforeDestroy () {
|
|
this.$root.$off('SERVER_socket_status')
|
|
this.$root.$off('hybrid_log_in')
|
|
},
|
|
|
|
created () {
|
|
this.token = new URL(location.href).searchParams.get('token');
|
|
this.swarmlabname = new URL(location.href).searchParams.get('pipelinename');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.CodeMirror {
|
|
|
|
|
|
font-family: monospace;
|
|
height: 550px;
|
|
}
|
|
|
|
</style>
|
|
|