zeus
4 years ago
9 changed files with 454 additions and 17 deletions
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.cfbfbafa.css" rel="preload" as="style"><link href="/css/chunk-vendors.8f6b4875.css" rel="preload" as="style"><link href="/js/app.eeab6a61.js" rel="preload" as="script"><link href="/js/chunk-vendors.07104166.js" rel="preload" as="script"><link href="/css/chunk-vendors.8f6b4875.css" rel="stylesheet"><link href="/css/app.cfbfbafa.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.07104166.js"></script><script src="/js/app.eeab6a61.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.6543e159.css" rel="preload" as="style"><link href="/css/chunk-vendors.8f6b4875.css" rel="preload" as="style"><link href="/js/app.d3524308.js" rel="preload" as="script"><link href="/js/chunk-vendors.07104166.js" rel="preload" as="script"><link href="/css/chunk-vendors.8f6b4875.css" rel="stylesheet"><link href="/css/app.6543e159.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.07104166.js"></script><script src="/js/app.d3524308.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
@ -0,0 +1,348 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
<div class="author"> |
|||
<img class="avatar border-white" src="@/assets/img/code-128.png" alt="..."> |
|||
</div> |
|||
<b-container fluid class="bv-example-row"> |
|||
<div class=" col text-center"> |
|||
<v-wait for="myRunInstance1"> |
|||
<template slot="waiting"> |
|||
<div> |
|||
<img src="@/assets/loading.gif" width="50" height="50" /> |
|||
Lab_Instance... |
|||
</div> |
|||
</template> |
|||
</v-wait> |
|||
<button type="button" |
|||
round |
|||
class="btn btn-outline-danger btn-sm" |
|||
v-if="extenderror" |
|||
@click="runextenderror()"> |
|||
Error: max depth exceeded</button> |
|||
<button type="button" |
|||
round |
|||
class="btn btn-outline-warning btn-sm" |
|||
v-if="tryConsole" |
|||
@click="clear()"> |
|||
Clear</button> |
|||
<button type="button" |
|||
round |
|||
class="btn btn-outline-info btn-sm" |
|||
disabled |
|||
> |
|||
Console</button> |
|||
<button type="button" |
|||
round |
|||
class="btn btn-outline-info btn-sm" |
|||
v-if="cmOptions.keyMap == 'sublime'" |
|||
@click="infoFilter"> |
|||
i</button> |
|||
|
|||
</div> |
|||
<div class="codemirror" > |
|||
<codemirror |
|||
ref="myCm" |
|||
:value="code" |
|||
:options="cmOptions" |
|||
@cursorActivity="onCmCursorActivity" |
|||
@ready="onCmReady" |
|||
@focus="onCmFocus" |
|||
@input="onCmCodeChange" |
|||
></codemirror> |
|||
</div> |
|||
</b-col> |
|||
</b-row> |
|||
</b-container> |
|||
|
|||
|
|||
</card> |
|||
</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/mdn-like.css' |
|||
import card from '@/components/Card.vue' |
|||
import 'codemirror/theme/idea.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: { |
|||
card, |
|||
codemirror |
|||
}, |
|||
data () { |
|||
return { |
|||
socketonline:false, |
|||
extenderror: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: false, |
|||
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: 'idea', |
|||
//theme: 'mdn-like', |
|||
refresh:true, |
|||
readOnly: true, |
|||
autofocus: false, |
|||
extraKeys: { "Ctrl": "autocomplete" } |
|||
}, |
|||
ADOC_html:[] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
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 |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
codemirror() { |
|||
return this.$refs.myCm.codemirror |
|||
} |
|||
|
|||
}, |
|||
mounted() { |
|||
// from runLLO |
|||
this.$root.$on('hybrid_server_log_status', (v) => { |
|||
this.$nextTick(function () { |
|||
if(v == 'off'){ |
|||
this.socketonline = false |
|||
}else if(v == 'on'){ |
|||
this.socketonline = true |
|||
} |
|||
}) |
|||
}) |
|||
// from runLLO |
|||
this.$root.$on('hybrid_server_log_in', (log) => { |
|||
console.log('logsemiton '+JSON.stringify(log)) |
|||
this.code += log |
|||
this.code += "\n" |
|||
this.tryConsole=true |
|||
}) |
|||
|
|||
}, |
|||
beforeDestroy () { |
|||
this.$root.$off('hybrid_server_log_status') |
|||
this.$root.$off('hybrid_server_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: 350px; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue