zeus
4 years ago
19 changed files with 898 additions and 601 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.e5c9f9a1.css" rel="preload" as="style"><link href="/css/chunk-vendors.f194a2fd.css" rel="preload" as="style"><link href="/js/app.f56fe913.js" rel="preload" as="script"><link href="/js/chunk-vendors.8243ef5d.js" rel="preload" as="script"><link href="/css/chunk-vendors.f194a2fd.css" rel="stylesheet"><link href="/css/app.e5c9f9a1.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.8243ef5d.js"></script><script src="/js/app.f56fe913.js"></script></body></html> |
|||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.f156ca1a.css" rel="preload" as="style"><link href="/css/chunk-vendors.7ca8a1ff.css" rel="preload" as="style"><link href="/js/app.e7f4c8fe.js" rel="preload" as="script"><link href="/js/chunk-vendors.fca5894b.js" rel="preload" as="script"><link href="/css/chunk-vendors.7ca8a1ff.css" rel="stylesheet"><link href="/css/app.f156ca1a.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.fca5894b.js"></script><script src="/js/app.e7f4c8fe.js"></script></body></html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
@ -0,0 +1,470 @@ |
|||
<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> |
|||
Loading…
Reference in new issue