zeus
4 years ago
25 changed files with 17675 additions and 1 deletions
@ -0,0 +1,27 @@ |
|||||
|
.DS_Store |
||||
|
node_modules |
||||
|
vimsession |
||||
|
/dist |
||||
|
|
||||
|
swarmlabdoc.js |
||||
|
swarmlabdoc.asciidoc_config |
||||
|
|
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
@ -1,2 +1,21 @@ |
|||||
# swarmlab-playground-client |
# bootstrap-vue-example |
||||
|
|
||||
|
## Project setup |
||||
|
``` |
||||
|
npm install |
||||
|
``` |
||||
|
|
||||
|
### Compiles and hot-reloads for development |
||||
|
``` |
||||
|
npm run serve |
||||
|
``` |
||||
|
|
||||
|
### Compiles and minifies for production |
||||
|
``` |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
### Lints and fixes files |
||||
|
``` |
||||
|
npm run lint |
||||
|
``` |
||||
|
|||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/app' |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,62 @@ |
|||||
|
{ |
||||
|
"name": "bootstrap-vue-example", |
||||
|
"version": "0.1.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"docs:build": "documentation build src/** -f html -o public/docs", |
||||
|
"docs:serve": "documentation build src/** -c jsdoc.conf.json -f html -o public/docs", |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"build": "vue-cli-service build", |
||||
|
"lint": "vue-cli-service lint" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.32", |
||||
|
"@fortawesome/free-brands-svg-icons": "^5.15.1", |
||||
|
"@fortawesome/free-solid-svg-icons": "^5.15.1", |
||||
|
"@fortawesome/vue-fontawesome": "^2.0.0", |
||||
|
"@vue/compiler-sfc": "^3.0.1", |
||||
|
"asciidoctor": "^2.2.0", |
||||
|
"axios": "^0.20.0", |
||||
|
"bootstrap-vue": "^2.17.3", |
||||
|
"file-saver": "^2.0.2", |
||||
|
"jszip": "^3.5.0", |
||||
|
"mkdirp": "^1.0.4", |
||||
|
"multilang-extract-comments": "^0.3.3", |
||||
|
"socket.io-client": "^2.3.1", |
||||
|
"vue": "^2.6.12", |
||||
|
"vue-codemirror": "^4.0.6", |
||||
|
"vue-socket.io-extended": "^4.0.5", |
||||
|
"vue-sweetalert2": "^3.0.8", |
||||
|
"vuex": "^3.5.1" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "^4.5.7", |
||||
|
"@vue/cli-plugin-eslint": "^3.0.0", |
||||
|
"@vue/cli-service": "^4.5.7", |
||||
|
"vue-template-compiler": "^2.6.12" |
||||
|
}, |
||||
|
"eslintConfig": { |
||||
|
"root": true, |
||||
|
"env": { |
||||
|
"node": true |
||||
|
}, |
||||
|
"extends": [ |
||||
|
"plugin:vue/essential", |
||||
|
"eslint:recommended" |
||||
|
], |
||||
|
"rules": {}, |
||||
|
"parserOptions": { |
||||
|
"parser": "babel-eslint" |
||||
|
} |
||||
|
}, |
||||
|
"postcss": { |
||||
|
"plugins": { |
||||
|
"autoprefixer": {} |
||||
|
} |
||||
|
}, |
||||
|
"browserslist": [ |
||||
|
"> 1%", |
||||
|
"last 2 versions", |
||||
|
"not ie <= 8" |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,273 @@ |
|||||
|
:description: IoT Example |
||||
|
:keywords: iot, swarmlab |
||||
|
:data-uri: |
||||
|
:toc: right |
||||
|
:toc-title: Table of contents |
||||
|
:toclevels: 4 |
||||
|
:source-highlighter: highlight |
||||
|
:icons: font |
||||
|
:sectnums: |
||||
|
|
||||
|
{empty} + |
||||
|
|
||||
|
|
||||
|
== Connect to socket Server |
||||
|
|
||||
|
Does something asynchronously and executes the EventBus on completion. |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.SwarmabAsciiLabTemplate = { |
||||
|
"iot5": { |
||||
|
"id": 5, |
||||
|
"name": "auto5", |
||||
|
"img": "rinse.png", |
||||
|
"Servicios": [ |
||||
|
{ |
||||
|
"model":"Sentra", |
||||
|
"doors":4 |
||||
|
}, |
||||
|
{ |
||||
|
"model":"Maxima", |
||||
|
"doors":4 |
||||
|
}, |
||||
|
{ |
||||
|
"model":"Skyline", |
||||
|
"doors":2 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.$root.$emit('iot_add', this.SwarmabAsciiLabTemplate) // <1> |
||||
|
---- |
||||
|
<1> EventBus is used for parent/child component communication. |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue |
||||
|
- *Line:* 131 |
||||
|
- *Code:* async connect_to_iot(iot) { |
||||
|
==== |
||||
|
|
||||
|
== socketclose() |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.$socket.client.close(); |
||||
|
---- |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 101 |
||||
|
- *Code:* async socketclose () { |
||||
|
==== |
||||
|
|
||||
|
== Socket subscribe |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.$root.$on('iot_add', (v) => { // <1> |
||||
|
... |
||||
|
}) |
||||
|
sdfsf |
||||
|
den to perni sdfsf |
||||
|
---- |
||||
|
<1> EventBus is used for parent/child component communication. |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 123 |
||||
|
- *Code:* mounted() { |
||||
|
==== |
||||
|
|
||||
|
== Destroy EventBus |
||||
|
|
||||
|
See |
||||
|
https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^]. |
||||
|
|
||||
|
*beforeDestroy* |
||||
|
|
||||
|
- beforeDestroy is fired right before teardown. Your component will still be fully present and functional. |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.$root.$off('iot_add') // <1> |
||||
|
---- |
||||
|
<1> EventBus is used for parent/child component communication. |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 157 |
||||
|
- *Code:* beforeDestroy () { |
||||
|
==== |
||||
|
|
||||
|
== Open a socket |
||||
|
|
||||
|
See |
||||
|
https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[ Vue.js Lifecycle Hooks^] |
||||
|
|
||||
|
*Created* |
||||
|
|
||||
|
- You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered: |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.socketopen() |
||||
|
---- |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 179 |
||||
|
- *Code:* created () { |
||||
|
==== |
||||
|
|
||||
|
== Socket events |
||||
|
|
||||
|
[source,javascript] |
||||
|
---- |
||||
|
this.$socket.client.emit('authenticate', 'logintoken'); |
||||
|
---- |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 192 |
||||
|
- *Code:* sockets: { |
||||
|
==== |
||||
|
|
||||
|
=== onError |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 205 |
||||
|
- *Code:* error(error) { |
||||
|
==== |
||||
|
|
||||
|
=== connect_error |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 214 |
||||
|
- *Code:* connect_error(error) { |
||||
|
==== |
||||
|
|
||||
|
=== connect_error |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 223 |
||||
|
- *Code:* disconnect(reason) { |
||||
|
==== |
||||
|
|
||||
|
=== Socket connect_timeout |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 232 |
||||
|
- *Code:* connect_timeout(reason) { |
||||
|
==== |
||||
|
|
||||
|
=== Socket reconnect |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 241 |
||||
|
- *Code:* reconnect(attemptNumber) { |
||||
|
==== |
||||
|
|
||||
|
=== connect_attempt |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 249 |
||||
|
- *Code:* reconnect_attempt(attemptNumber) { |
||||
|
==== |
||||
|
|
||||
|
=== Socket reconnecting |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 257 |
||||
|
- *Code:* reconnecting(attemptNumber) { |
||||
|
==== |
||||
|
|
||||
|
=== reconnect_error |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 265 |
||||
|
- *Code:* reconnect_error(error) { |
||||
|
==== |
||||
|
|
||||
|
=== unauthorized |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 274 |
||||
|
- *Code:* unauthorized(val) { |
||||
|
==== |
||||
|
|
||||
|
=== connected |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 283 |
||||
|
- *Code:* socket_id_emit(val) { |
||||
|
==== |
||||
|
|
||||
|
=== Socket onMessage |
||||
|
|
||||
|
|
||||
|
|
||||
|
[TIP] |
||||
|
==== |
||||
|
- *File:* /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue |
||||
|
- *Line:* 293 |
||||
|
- *Code:* async adhocEmit(val) { |
||||
|
==== |
||||
|
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title>bootstrap-vue-example</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but bootstrap-vue-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,153 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
|
||||
|
<!-- ***************** nav items ****************** --> |
||||
|
<b-navbar toggleable="md" class="navbar-secondary" > |
||||
|
<b-navbar-toggle target="nav_collapse"> </b-navbar-toggle> |
||||
|
<b-navbar-brand class="logo simple-text ti-swarmlab text-secondary"> |
||||
|
Swarmlab.io Playground |
||||
|
</b-navbar-brand> |
||||
|
<b-collapse is-nav id="nav_collapse"> |
||||
|
<b-navbar-nav> |
||||
|
|
||||
|
|
||||
|
</b-navbar-nav> |
||||
|
|
||||
|
<!-- Right aligned nav items --> |
||||
|
<b-navbar-nav class="ml-auto"> |
||||
|
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item> |
||||
|
<b-nav-item > | </b-nav-item> |
||||
|
<b-nav-item href="https://api-client.swarmlab.io:8088/#/signin?redirect=%2Fdashboard" target="_swarmlab"> Lab_onDemand </b-nav-item> |
||||
|
<b-nav-item > | </b-nav-item> |
||||
|
<!-- |
||||
|
<b-nav-form> |
||||
|
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/> |
||||
|
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button> |
||||
|
</b-nav-form> |
||||
|
--> |
||||
|
<b-nav-item-dropdown right> |
||||
|
|
||||
|
<!-- Using template slot --> |
||||
|
<template slot="button-content"> |
||||
|
<em>Template</em> |
||||
|
</template> |
||||
|
|
||||
|
<b-dropdown-item > |
||||
|
<button type="button" |
||||
|
round |
||||
|
class="btn btn-outline-info btn-sm" |
||||
|
@click="connect_to_iot('mesh')"> |
||||
|
add</button> |
||||
|
</b-dropdown-item> |
||||
|
|
||||
|
</b-nav-item-dropdown> |
||||
|
|
||||
|
<b-nav-item > </b-nav-item> |
||||
|
|
||||
|
<button type="button" |
||||
|
round |
||||
|
class="btn btn-outline-info btn-sm" |
||||
|
@click="saveDocLive"> |
||||
|
Save As Zip</button> |
||||
|
|
||||
|
</b-navbar-nav> |
||||
|
|
||||
|
</b-collapse> |
||||
|
</b-navbar> |
||||
|
|
||||
|
<!-- ***************** container items ****************** --> |
||||
|
<b-row> |
||||
|
<b-col cols="12"> |
||||
|
|
||||
|
<doc-live |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</doc-live> |
||||
|
|
||||
|
</b-col> |
||||
|
</b-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import DocLive from './components/DocLive.vue' |
||||
|
import "@/assets/css/themify-icons.css"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'app', |
||||
|
components: { |
||||
|
DocLive |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
show: true, |
||||
|
SwarmabAsciiLabTemplate:'' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
saveDocLive() { |
||||
|
this.$root.$emit('asciilive_save','save') |
||||
|
}, |
||||
|
async connect_to_iot(iot) { |
||||
|
|
||||
|
if( iot == 'mesh' ){ |
||||
|
|
||||
|
this.SwarmabAsciiLabTemplate = { |
||||
|
"iot5": { |
||||
|
"id": 5, |
||||
|
"name": "auto5", |
||||
|
"img": "rinse.png", |
||||
|
"Servicios": [ |
||||
|
{"model":"Sentra", "doors":4}, |
||||
|
{"model":"Maxima", "doors":4}, |
||||
|
{"model":"Skyline", "doors":2} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); |
||||
|
|
||||
|
body { |
||||
|
background: #EEF1F4 !important; |
||||
|
} |
||||
|
|
||||
|
.nav-background { |
||||
|
background: #353535; |
||||
|
} |
||||
|
|
||||
|
.ti-swarmlab:before { |
||||
|
position: relative; |
||||
|
top:-5px; |
||||
|
right:-8px; |
||||
|
font-size: 1.5em; |
||||
|
font-weight: 300; |
||||
|
content: "\e606"; |
||||
|
color: #222; |
||||
|
color: #74B3C8; |
||||
|
border-color: #c60000; |
||||
|
} |
||||
|
|
||||
|
.ti-themify-logo:before { |
||||
|
content: "\e6d1"; |
||||
|
} |
||||
|
|
||||
|
.menoutext { |
||||
|
font-family: 'Lato', sans-serif !important; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
File diff suppressed because it is too large
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,162 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<!-- menou --> |
||||
|
<div class="row" |
||||
|
v-show="showmenou == 1" |
||||
|
> |
||||
|
|
||||
|
<div class="col-3"> |
||||
|
<div class="input-group-append"> |
||||
|
<button type="button" |
||||
|
round |
||||
|
v-if="columnviewdefault == '0'" |
||||
|
class="ti-layout-sidebar-none btn btn-outline-info btn-sm" |
||||
|
@click="fullscreen('max')"> |
||||
|
Max-Notebook View </button> |
||||
|
|
||||
|
<button type="button" |
||||
|
round |
||||
|
v-if="columnviewdefault == '1'" |
||||
|
class="ti-layout-sidebar-right btn btn-outline-info btn-sm" |
||||
|
@click="fullscreen('min')"> |
||||
|
Min-Notebook View</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-6"> |
||||
|
<span></span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="col-3"> |
||||
|
<div class="input-group-prepend"> |
||||
|
<button type="button" |
||||
|
round |
||||
|
v-if="columncodedefault == '0'" |
||||
|
class="ti-layout-sidebar-none btn btn-outline-info btn-sm" |
||||
|
style="float: right;" |
||||
|
@click="fullscreen('codemax')"> |
||||
|
Max-Code View </button> |
||||
|
|
||||
|
<button type="button" |
||||
|
round |
||||
|
v-if="columncodedefault == '1'" |
||||
|
style="float: right;" |
||||
|
class="ti-layout-sidebar-left btn btn-outline-info btn-sm" |
||||
|
@click="fullscreen('codemin')"> |
||||
|
Min-Code View</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- menou --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="row" > |
||||
|
|
||||
|
<div :class="columnview"> |
||||
|
<ad-hoc |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</ad-hoc> |
||||
|
</div> |
||||
|
|
||||
|
<div :class="columncode"> |
||||
|
<run-llo |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</run-llo> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import RunLlo from "./doclive/runLlo.vue"; |
||||
|
import AdHoc from "./doclive/AdhocView.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'DocLive', |
||||
|
props: { |
||||
|
}, |
||||
|
components: { |
||||
|
RunLlo, |
||||
|
AdHoc |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
loading: false, |
||||
|
showhistory : 0, |
||||
|
productIndex: 1, |
||||
|
showmenou: 1, |
||||
|
columnviewdefault : 0, |
||||
|
columncodedefault : 0, |
||||
|
columnview : 'col-7 order-first', |
||||
|
columncode : 'col-5 order-last', |
||||
|
tutorMenou: 'student' |
||||
|
} |
||||
|
}, |
||||
|
created: function () { |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$root.$on('LLOshowmenounotebooks', () => { |
||||
|
this.showmenou = 1 |
||||
|
}), |
||||
|
this.$root.$on('lloshowchallengehistory', (llo,active) => { |
||||
|
this.showhistory = 1 |
||||
|
}) |
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
this.$root.$off('LLOshowmenounotebooks'), |
||||
|
this.$root.$off('lloshowchallengehistory') // working |
||||
|
}, |
||||
|
methods: { |
||||
|
fullscreen(action){ |
||||
|
if(action == 'max'){ |
||||
|
this.columnview = 'col-11 order-first' |
||||
|
this.columncode = 'col-1 order-last' |
||||
|
this.columnviewdefault = 1 |
||||
|
this.columncodedefault = 0 |
||||
|
//set height iframe |
||||
|
this.$root.$emit('LLOresizemenounotebooks','max') |
||||
|
console.log(this.columnview) |
||||
|
} |
||||
|
else if(action == 'min'){ |
||||
|
this.columnview = 'col-7 order-first' |
||||
|
this.columncode = 'col-5 order-last' |
||||
|
this.columnviewdefault = 0 |
||||
|
this.columncodedefault = 1 |
||||
|
//set height iframe |
||||
|
this.$root.$emit('LLOresizemenounotebooks','min') |
||||
|
console.log(this.columnview) |
||||
|
} |
||||
|
else if(action == 'codemax'){ |
||||
|
this.columnview = 'col-1 order-first' |
||||
|
this.columncode = 'col-11 order-last' |
||||
|
this.columnviewdefault = 0 |
||||
|
this.columncodedefault = 1 |
||||
|
console.log(this.columnview) |
||||
|
} |
||||
|
else if(action == 'codemin'){ |
||||
|
this.columnview = 'col-7 order-first' |
||||
|
this.columncode = 'col-5 order-last' |
||||
|
this.columnviewdefault = 1 |
||||
|
this.columncodedefault = 0 |
||||
|
this.$root.$emit('LLOresizemenounotebooks','min') |
||||
|
console.log(this.columnview) |
||||
|
} |
||||
|
}, |
||||
|
async onAction (action) { |
||||
|
this.tutorMenou='tutor' |
||||
|
//this.tutorMenou='student' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,361 @@ |
|||||
|
<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="5"> |
||||
|
<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="7" > |
||||
|
<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="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 { |
||||
|
tryConsole:false, |
||||
|
ssl:{}, |
||||
|
getinfo:'', |
||||
|
|
||||
|
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: { |
||||
|
|
||||
|
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() { |
||||
|
// this.$root.$on('asciilive_template_add', (v) => { |
||||
|
// this.$nextTick(function () { |
||||
|
// this.code = v |
||||
|
// }) |
||||
|
// }) |
||||
|
this.$root.$on('playground_log_in', (v) => { |
||||
|
this.$nextTick(function () { |
||||
|
this.code += v |
||||
|
this.code += "\n" |
||||
|
this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0); |
||||
|
this.tryConsole=true |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
beforeDestroy () { |
||||
|
this.$root.$off('playground_log_in') |
||||
|
}, |
||||
|
|
||||
|
created () { |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.CodeMirror { |
||||
|
|
||||
|
|
||||
|
font-family: monospace; |
||||
|
height: 550px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,353 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="row"> |
||||
|
<div class="col-12 d-flex justify-content-center text-center"> |
||||
|
<h4 class="text-info"> Search </h4> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col-6"> |
||||
|
|
||||
|
<div class="input-group input-group-sm sm-6"> |
||||
|
<input type="text" |
||||
|
class="form-control" |
||||
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
||||
|
placeholder="Filter your LOG searches by tags" |
||||
|
v-model="search.tag" |
||||
|
@keyup.enter="setFilter" |
||||
|
> |
||||
|
</div> |
||||
|
|
||||
|
</div> <!-- col --> |
||||
|
<div class="col-6"> |
||||
|
|
||||
|
<div class="input-group input-group-sm sm-6"> |
||||
|
<input type="text" |
||||
|
class="form-control" |
||||
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
||||
|
placeholder="Filter your LOG searches by files" |
||||
|
v-model="search.file" |
||||
|
@keyup.enter="setFilter" |
||||
|
> |
||||
|
</div> |
||||
|
|
||||
|
</div> <!-- col --> |
||||
|
</div> <!-- row --> |
||||
|
|
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col-12"> |
||||
|
|
||||
|
<div class="input-group input-group-sm sm-6"> |
||||
|
<div class="input-group-prepend"> |
||||
|
<button |
||||
|
class="btn btn-outline-secondary" |
||||
|
round |
||||
|
type="button" |
||||
|
> |
||||
|
Search |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<input type="text" |
||||
|
class="form-control" |
||||
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
||||
|
placeholder="Search" |
||||
|
v-model="search.app" |
||||
|
@keyup.enter="setFilter" |
||||
|
> |
||||
|
|
||||
|
<div class="input-group-append"> |
||||
|
<button |
||||
|
class="btn btn-outline-primary" |
||||
|
round |
||||
|
type="button" |
||||
|
@click="setFilter"> |
||||
|
Go</button> |
||||
|
</div> |
||||
|
|
||||
|
<div class="input-group-append"> |
||||
|
<button class="btn btn-outline-secondary" |
||||
|
round |
||||
|
type="button" |
||||
|
@click="resetFilter"> |
||||
|
Reset</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> <!-- col --> |
||||
|
</div> <!-- row --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Vue from 'vue' |
||||
|
import JSZip from 'jszip'; |
||||
|
import FileSaver from 'file-saver'; |
||||
|
export default { |
||||
|
components: { |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
search: { |
||||
|
tag: "", |
||||
|
file: "", |
||||
|
app: "" |
||||
|
}, |
||||
|
showlloedit:true, |
||||
|
issocket:'close', |
||||
|
socketdata:'', |
||||
|
code:[], |
||||
|
logdata: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async setFilter() { |
||||
|
console.log(JSON.stringify(this.logdata)) |
||||
|
}, |
||||
|
async resetFilter() { |
||||
|
console.log(JSON.stringify(this.logdata)) |
||||
|
}, |
||||
|
async socketopen () { |
||||
|
this.$socket.client.open(); |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* == socketclose() |
||||
|
* |
||||
|
* [source,javascript] |
||||
|
* ---- |
||||
|
* this.$socket.client.close(); |
||||
|
* ---- |
||||
|
* |
||||
|
*/ |
||||
|
async socketclose () { |
||||
|
this.$socket.client.close(); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* == Socket subscribe |
||||
|
* |
||||
|
* [source,javascript] |
||||
|
* ---- |
||||
|
* ... |
||||
|
* }) |
||||
|
* sdfsf |
||||
|
den to perni sdfsf |
||||
|
* ---- |
||||
|
* <1> EventBus is used for parent/child component communication. |
||||
|
* |
||||
|
*/ |
||||
|
mounted() { |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* == Destroy EventBus |
||||
|
* |
||||
|
* See |
||||
|
* https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[Vue.js Lifecycle Hooks^]. |
||||
|
* |
||||
|
* *beforeDestroy* |
||||
|
* |
||||
|
* - beforeDestroy is fired right before teardown. Your component will still be fully present and functional. |
||||
|
* |
||||
|
* [source,javascript] |
||||
|
* ---- |
||||
|
* ---- |
||||
|
* <1> EventBus is used for parent/child component communication. |
||||
|
* |
||||
|
*/ |
||||
|
beforeDestroy () { |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* == Open a socket |
||||
|
* |
||||
|
* See |
||||
|
* https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle[ Vue.js Lifecycle Hooks^] |
||||
|
* |
||||
|
* *Created* |
||||
|
* |
||||
|
* - You are able to access reactive data and events that are active with the created hook. Templates and Virtual DOM have not yet been mounted or rendered: |
||||
|
* |
||||
|
* [source,javascript] |
||||
|
* ---- |
||||
|
* this.socketopen() |
||||
|
* ---- |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
created () { |
||||
|
this.socketopen() |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* == Socket events |
||||
|
* |
||||
|
* [source,javascript] |
||||
|
* ---- |
||||
|
* this.$socket.client.emit('authenticate', 'logintoken'); |
||||
|
* ---- |
||||
|
* |
||||
|
*/ |
||||
|
sockets: { |
||||
|
connect() { |
||||
|
this.$socket.client.emit('authenticate', 'logintoken'); |
||||
|
|
||||
|
this.$socket.client.emit('socket_id_get', 'socketdatasend'); |
||||
|
console.log('socket connected '+ 'socketdatasend' ) |
||||
|
this.issocket = 'open' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === onError |
||||
|
* |
||||
|
*/ |
||||
|
error(error) { |
||||
|
console.log("socket error "+JSON.stringify(error)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === connect_error |
||||
|
* |
||||
|
*/ |
||||
|
connect_error(error) { |
||||
|
console.log("socket connect_error "+JSON.stringify(error)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === connect_error |
||||
|
* |
||||
|
*/ |
||||
|
disconnect(reason) { |
||||
|
console.log("socket disconnect "+JSON.stringify(reason)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === Socket connect_timeout |
||||
|
* |
||||
|
*/ |
||||
|
connect_timeout(reason) { |
||||
|
console.log("socket timeout "+JSON.stringify(reason)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === Socket reconnect |
||||
|
* |
||||
|
*/ |
||||
|
reconnect(attemptNumber) { |
||||
|
console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber)) |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === connect_attempt |
||||
|
* |
||||
|
*/ |
||||
|
reconnect_attempt(attemptNumber) { |
||||
|
console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber)) |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === Socket reconnecting |
||||
|
* |
||||
|
*/ |
||||
|
reconnecting(attemptNumber) { |
||||
|
console.log("socket reconnecting "+JSON.stringify(attemptNumber)) |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === reconnect_error |
||||
|
* |
||||
|
*/ |
||||
|
reconnect_error(error) { |
||||
|
console.log("socket reconnect_error "+JSON.stringify(error)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === unauthorized |
||||
|
* |
||||
|
*/ |
||||
|
unauthorized(val) { |
||||
|
console.log("socket unauthorized "+JSON.stringify(val)) |
||||
|
this.issocket = 'close' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === connected |
||||
|
* |
||||
|
*/ |
||||
|
socket_id_emit(val) { |
||||
|
console.log("socket id from server "+JSON.stringify(val)) |
||||
|
console.log("socket id from serveri saved "+JSON.stringify(socketsave)) |
||||
|
this.issocket = 'open' |
||||
|
}, |
||||
|
/** |
||||
|
* |
||||
|
* === Socket onMessage |
||||
|
* |
||||
|
*/ |
||||
|
async adhocEmit(val) { |
||||
|
console.log("socket from server "+JSON.stringify(val)) |
||||
|
this.issocket = 'open' |
||||
|
this.$wait.start('myRunInstance1'); |
||||
|
// render begin |
||||
|
this.tryLLO = 'on' |
||||
|
if(this.firstbootstrap === 0 ){ |
||||
|
await this.bootsrapllo(); |
||||
|
this.firstbootstrap = 1 |
||||
|
} |
||||
|
var output = log.data.out |
||||
|
var mydinfunction = ` |
||||
|
<div class="row"> |
||||
|
<b-col class="" cols="12" sm="12" md="12" > |
||||
|
${output} |
||||
|
</b-col> |
||||
|
</div>` |
||||
|
|
||||
|
try { |
||||
|
let divascii = document.createElement('div'); |
||||
|
divascii.setAttribute("class", "container-fluid w-100 p-3 llotry") |
||||
|
divascii.innerHTML = mydinfunction |
||||
|
this.addtask(divascii); |
||||
|
}catch (ex) { |
||||
|
console.log(" logi error1 "+JSON.stringify(ex)) |
||||
|
return |
||||
|
} |
||||
|
this.$wait.end('myRunInstance1'); |
||||
|
}, |
||||
|
async logdata(val) { |
||||
|
console.log(" socket from logdata "+JSON.stringify(val)) |
||||
|
if(val.key == 'message'){ |
||||
|
this.$root.$emit('playground_log_in',val.value) |
||||
|
} |
||||
|
}, |
||||
|
async message(val) { |
||||
|
console.log(" socket message "+JSON.stringify(val)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.CodeMirror { |
||||
|
|
||||
|
|
||||
|
font-family: monospace; |
||||
|
height: 750px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,32 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import store from '@/store/index' |
||||
|
import BootstrapVue from 'bootstrap-vue' |
||||
|
import 'bootstrap/dist/css/bootstrap.css' |
||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css' |
||||
|
import VueSweetalert2 from 'vue-sweetalert2'; |
||||
|
Vue.use(VueSweetalert2); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
import VueSocketIOExt from 'vue-socket.io-extended'; |
||||
|
import io from 'socket.io-client'; |
||||
|
|
||||
|
const socket = io('https://factory.swarmlab.io:55527', { |
||||
|
autoConnect: false |
||||
|
}); |
||||
|
|
||||
|
Vue.use(VueSocketIOExt, socket); |
||||
|
|
||||
|
|
||||
|
|
||||
|
Vue.use(BootstrapVue); |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
new Vue({ |
||||
|
el: '#app', |
||||
|
store, |
||||
|
render: h => h(App) |
||||
|
}) |
||||
|
|
||||
@ -0,0 +1,40 @@ |
|||||
|
import Vuex from 'vuex' |
||||
|
import Vue from 'vue' |
||||
|
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' |
||||
|
// -------------- Playbook----------------
|
||||
|
import pipelineLLO from './modules/create_pipelineLLO' |
||||
|
import { library, dom } from '@fortawesome/fontawesome-svg-core' |
||||
|
|
||||
|
import {faIcons, faSort, faChevronUp, faChevronDown, faBars, fas } from '@fortawesome/free-solid-svg-icons' |
||||
|
import { faJs, faVuejs, fab, faFontAwesome} from '@fortawesome/free-brands-svg-icons' |
||||
|
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
Vue.use(Vuex) |
||||
|
Vue.use(BootstrapVue); |
||||
|
|
||||
|
|
||||
|
|
||||
|
Vue.component('font-awesome-icon', FontAwesomeIcon) |
||||
|
library.add(faIcons, faSort, faChevronUp, faChevronDown, faBars, faJs, faVuejs, fab, fas, faFontAwesome) |
||||
|
dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver
|
||||
|
|
||||
|
|
||||
|
import 'bootstrap/dist/css/bootstrap.css' |
||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css' |
||||
|
|
||||
|
|
||||
|
export default new Vuex.Store({ |
||||
|
modules: { |
||||
|
pipelineLLO |
||||
|
}, |
||||
|
state: { // = data
|
||||
|
}, |
||||
|
getters: { // = computed properties
|
||||
|
}, |
||||
|
mutations: { |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,72 @@ |
|||||
|
import { mapState, mapActions, commit } from 'vuex' |
||||
|
import store from '@/store/index' |
||||
|
import axios from 'axios' |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state: { |
||||
|
llo: {}, |
||||
|
socketid:'' |
||||
|
}, |
||||
|
getters: { |
||||
|
getllosrc (state, container) { |
||||
|
//console.log("js1 get "+JSON.stringify(state.llo))
|
||||
|
return state.llo |
||||
|
}, |
||||
|
getsocketid (state, container) { |
||||
|
//console.log("js1 get "+JSON.stringify(state.llo))
|
||||
|
return state.socketid |
||||
|
} |
||||
|
}, |
||||
|
mutations: { |
||||
|
setllo (state, data) { |
||||
|
//console.log("js1 set "+JSON.stringify(data))
|
||||
|
state.llo=data; |
||||
|
}, |
||||
|
setsocketid (state, data) { |
||||
|
//console.log("js1 set "+JSON.stringify(data))
|
||||
|
state.socketid = data; |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
async get_data({commit,rootGetters}, value) { |
||||
|
try { |
||||
|
|
||||
|
let p = await axios.get("https://factory.swarmlab.io:55527/run", { |
||||
|
timeout: 45000, |
||||
|
params: { |
||||
|
code: value.code |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
//var p = value.code
|
||||
|
console.log("paramp "+JSON.stringify(p)) |
||||
|
store.dispatch('pipelineLLO/setScriptllo', p) |
||||
|
return p; |
||||
|
|
||||
|
} catch (e) { |
||||
|
if(e.error == "invalid_token"){ |
||||
|
window.location.href = 'https://api-login.swarmlab.io:8089'; |
||||
|
}else{ |
||||
|
var R = { |
||||
|
ERROR_str: e, |
||||
|
ERROR: 'yes' |
||||
|
} |
||||
|
return R; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
setScriptllo({commit}, value) { |
||||
|
//console.log("container "+value)
|
||||
|
commit('setllo', value) |
||||
|
}, |
||||
|
setsocketllo({commit}, value) { |
||||
|
//console.log("container "+value)
|
||||
|
commit('setsocketid', value) |
||||
|
}, |
||||
|
setScriptCodlogAction({commit}, value) { |
||||
|
//console.log("container "+value)
|
||||
|
commit('setScriptCodelog', value) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue