Browse Source

swarm example

master
zeus 4 years ago
parent
commit
1e61b29dcb
  1. 38
      .gitignore
  2. 1282
      docs/README.adoc
  3. BIN
      docs/Swarming2.png
  4. BIN
      docs/bidirectional-communication.png
  5. BIN
      docs/flow.png
  6. 1106
      docs/install-backup.adoc
  7. BIN
      docs/intro.png
  8. BIN
      docs/swarmlabn-1.png
  9. BIN
      docs/vuex.png
  10. 3
      src/IoT/README.md
  11. 48
      src/IoT/llo/bclient.js
  12. 32
      src/IoT/llo/client.js
  13. 178
      src/IoT/llo/iotclient.js
  14. 130
      src/IoT/llo/iotserver.js
  15. 1148
      src/IoT/package-lock.json
  16. 25
      src/IoT/package.json
  17. 21
      src/browser-client/README.md
  18. 5
      src/browser-client/babel.config.js
  19. 14643
      src/browser-client/package-lock.json
  20. 62
      src/browser-client/package.json
  21. 273
      src/browser-client/public/docs/README.adoc
  22. BIN
      src/browser-client/public/favicon.ico
  23. 17
      src/browser-client/public/index.html
  24. 187
      src/browser-client/src/App.vue
  25. 1093
      src/browser-client/src/assets/css/themify-icons.css
  26. BIN
      src/browser-client/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
  27. BIN
      src/browser-client/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
  28. BIN
      src/browser-client/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
  29. BIN
      src/browser-client/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
  30. BIN
      src/browser-client/src/assets/fonts/themify.eot
  31. 362
      src/browser-client/src/assets/fonts/themify.svg
  32. BIN
      src/browser-client/src/assets/fonts/themify.ttf
  33. BIN
      src/browser-client/src/assets/fonts/themify.woff
  34. BIN
      src/browser-client/src/assets/logo.png
  35. 162
      src/browser-client/src/components/DocLive.vue
  36. 386
      src/browser-client/src/components/doclive/AdhocView.vue
  37. 341
      src/browser-client/src/components/doclive/runLlo.vue
  38. 32
      src/browser-client/src/main.js
  39. 40
      src/browser-client/src/store/index.js
  40. 72
      src/browser-client/src/store/modules/create_pipelineLLO.js
  41. 13
      src/browser-client/swarmlabdoc.asciidoc_config
  42. 90
      src/browser-client/swarmlabdoc.js
  43. 149
      src/browser-client/vimsession/iot

38
.gitignore

@ -1,25 +1,21 @@
# ---> Backup .DS_Store
*.bak
*.gho
*.ori
*.orig
*.tmp
# ---> GitBook
# Node rules:
## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
## Dependency directory
## Commenting this out is preferred by some people, see
## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git
node_modules node_modules
/dist
# Book build output # local env files
_book .env.local
.env.*.local
# eBook build output # Log files
*.epub npm-debug.log*
*.mobi yarn-debug.log*
*.pdf yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

1282
docs/README.adoc

File diff suppressed because it is too large

BIN
docs/Swarming2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
docs/bidirectional-communication.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
docs/flow.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

1106
docs/install-backup.adoc

File diff suppressed because it is too large

BIN
docs/intro.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/swarmlabn-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/vuex.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

3
src/IoT/README.md

@ -0,0 +1,3 @@
npm install
npm audit fix

48
src/IoT/llo/bclient.js

@ -0,0 +1,48 @@
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
const socketAuth = require('socketio-auth');
socketoptions = {
secure:true,
reconnect: true,
rejectUnauthorized : false
};
// Client
var io2 = require('socket.io-client');
var socket = io2.connect('http://localhost:8084', socketoptions);
socket.on('connection', s => {
console.error('socket2 connection');
var id = s.id
var roomiot = 'iot'
socket.emit('iot', roomiot);
socket.emit('subscribe', roomiot);
socket.emit('pingServerEmit', roomiot);
s.on('message', function (data) {
console.log('from room1 '+data);
});
s.on('iot', function (data) {
console.log('from room1 '+data);
});
});
var roomiot = 'iot'
socket.emit('iot', roomiot);
socket.on('message', function (data) {
console.log('from room '+data);
});

32
src/IoT/llo/client.js

@ -0,0 +1,32 @@
options = {
secure:true,
reconnect: true,
rejectUnauthorized : false
};
// Client
var io2 = require('socket.io-client');
var socket = io2.connect('http://localhost:8084', options);
//var socket = io2.connect('https://service.swarmlab.io:55583');
var msg2 = "hello";
socket.emit('pingServer', msg2);
//var socket = require('socket.io-client')('httpis://localhost:8099');
socket.on('connect', function(){
console.error('connect ...');
//socket.emit("adhoc", 'Hallo World!')
});
socket.on('customEmit', function(data){
console.error('customEmit '+data);
//socket.emit("adhoc", 'Hallo World!')
});
socket.on('disconnect', function(){
console.error('disconnect');
});
//socket.emit("adhoc", 'Hallo World!')

178
src/IoT/llo/iotclient.js

@ -0,0 +1,178 @@
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
const socketAuth = require('socketio-auth');
const axios = require('axios');
axios.defaults.timeout = 30000
const helmet = require('helmet');
const cors = require('cors')
const whitelist = [
'http://localhost:3080',
'http://localhost:3081',
'http://localhost:3082'
]
const corsOptions = {
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
allowedHeaders: [
'Content-Type',
'Authorization',
'X-Requested-With',
'device-remember-token',
'Access-Control-Allow-Origin',
'Access-Control-Allow-Headers',
'Origin',
'Accept'
],
origin: function(origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(null, true)
//callback(new Error('Not allowed by CORS'))
}
}
}
app.use(helmet());
app.get('/run', [
//check('access_token').isLength({ min: 40 }),
//check('llo').isBase64()
],
cors(corsOptions), (req, res, next) => {
var RES = new Object();
RES.tmp_token = req.query["access_token"]
RES.datafile = req.query["datafile"]
RES.service = req.query["service"]
RES.action = req.query["action"]
RES.error = false
RES.error_msg = "ok"
res.json(RES)
});
app.post('/run', [
//check('access_token').isLength({ min: 40 }),
//check('llo').isBase64()
],
cors(corsOptions), (req, res, next) => {
console.error('socket post');
io.emit("customEmit", 'data')
var RES = new Object();
RES.error = false
RES.error_msg = "ok"
res.json(RES)
});
socketoptions = {
secure:true,
reconnect: true,
rejectUnauthorized : false
};
// Client
var io2 = require('socket.io-client');
var socket = io2.connect('http://localhost:8084', socketoptions);
//var socket = io2.connect('https://service.swarmlab.io:55583');
var global = {}
socket.on('connection', s => {
console.log(s)
console.error('socket2 connection');
global.id = s.id
s.emit('log', 'client');
/*
var roomiot = 'iot'
s.emit('subscribe', roomiot);
s.on('customEmit', obj => {
console.error('socket2fromServer');
var data = obj+' test2 customeEdit '+id
console.error('from server2client ' + data);
});
s.on('message', function (data) {
console.log('from room '+data);
//io.emit("customEmit", data)
});
//s.to(room).emit('message', 'hi from server');
s.on('iot', function (data) {
console.log('from room '+data);
//io.emit("customEmit", data)
});
socket.on('iot', function (data) {
console.log('from room '+data);
//io.emit("customEmit", data)
});
socket.on('message', function (data) {
console.log('from room '+data);
//io.emit("customEmit", data)
});
*/
});
var roomiot = 'iot'
socket.emit('subscribe', roomiot);
socket.emit('log', 'client1');
socket.on('message', function (data) {
//console.log('from room ' + data);
console.log("from room iot "+JSON.stringify(data))
//io.emit("customEmit", data)
});
io.on('connection', s => {
console.error('socket connection');
var roomiot = 'iot'
var id = s.id
s.on('pingServer', obj => {
console.error('socket.io pingServer');
//console.error(s);
console.error('fromclient '+obj);
var data = obj+' testfromclient '+id
socket.emit("pingServerEmit", data)
socket.emit('send', { room: roomiot, message: 'message iot' });
});
s.on('customEmit', obj => {
var data = obj+' test customeEdit '+id
//console.error('from server ' + data);
//s.emit("pingServerEmit", data)
socket.emit("customEmit", data)
});
//s.emit('message', 'message from server');
//s.emit("customEmit", 'data')
});
http.listen(3081, () => console.error('listening on http://localhost:3081/'));
console.error('socket.io example');

130
src/IoT/llo/iotserver.js

@ -0,0 +1,130 @@
var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
const socketAuth = require('socketio-auth');
const cors = require('cors')
const whitelist = [
'http://localhost:3080',
'http://localhost:3081',
'http://localhost:3082'
]
const corsOptions = {
credentials: true,
methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
allowedHeaders: [
'Content-Type',
'Authorization',
'X-Requested-With',
'device-remember-token',
'Access-Control-Allow-Origin',
'Access-Control-Allow-Headers',
'Origin',
'Accept'
],
origin: function(origin, callback) {
if (whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(null, true)
//callback(new Error('Not allowed by CORS'))
}
}
}
app.get('/run', [
//check('access_token').isLength({ min: 40 }),
//check('llo').isBase64()
],
cors(corsOptions), (req, res, next) => {
var RES = new Object();
RES.code = req.query["code"]
console.error('socket get from client' + RES.code);
RES.error = false
RES.error_msg = "ok"
io.emit("iotdata", RES)
io.in('iot').emit('message', RES);
res.json(RES)
});
app.post('/run', [
//check('access_token').isLength({ min: 40 }),
//check('llo').isBase64()
],
cors(corsOptions), (req, res, next) => {
console.error('socket post from client');
io.emit("customEmit", 'data')
var RES = new Object();
RES.error = false
RES.error_msg = "ok"
res.json(RES)
});
/*
io.on('connection', s => {
s.on("iot", function (room) {
s.join(room);
console.error('hi');
s.to(room).emit('message', 'hi from server');
io.emit('iotdata', 'hi from server');
});
});
*/
io.on('connection', s => {
console.error('socket connection');
var id = s.id
s.on('pingServerEmit', obj => {
console.error('socket.io pingServer');
var data = obj+' testserver'
io.emit("customEmit", data)
//io.broadcast.to('roomiot').emit('message', data)
io.in('iot').emit('message', data);
console.error('from client '+ s.id + ' obj ' + obj);
});
s.on('subscribe', function(room) {
console.log('joining room', room);
s.join(room);
})
io.on('unsubscribe', function(room) {
console.log('leaving room', room);
io.leave(room);
})
// when the client emits 'new message', this listens and executes
s.on('log', (data, room) => {
//console.log(util.inspect(data, false, null, true /* enable colors */))
//s.broadcast.to(room).emit('message', data)
s.to('iot').emit('message', data);
console.log('broadcast', data);
});
//s.emit('message', 'message from server');
//s.emit("customEmit", 'data')
});
http.listen(8084, () => console.error('listening on http://localhost:8084/'));
console.error('socket.io example');

1148
src/IoT/package-lock.json

File diff suppressed because it is too large

25
src/IoT/package.json

@ -0,0 +1,25 @@
{
"name": "swarmlab-iot",
"version": "1.0.0",
"description": "swarmlab iot on node",
"main": "iotserver.js",
"scripts": {
"start": "node ./llo/iotserver.js"
},
"dependencies": {
"async": "^3.2.0",
"axios": "^0.20.0",
"bestikk-log": "^1.0.0-alpha.2",
"chai": "^4.2.0",
"cors": "^2.8.5",
"dirty-chai": "^2.0.1",
"express": "^4.17.1",
"express-validator": "^6.6.1",
"helmet": "^4.1.1",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.1",
"socketio-auth": "^0.1.1",
"url-exist-sync": "^1.0.2"
},
"devDependencies": {}
}

21
src/browser-client/README.md

@ -0,0 +1,21 @@
# 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
```

5
src/browser-client/babel.config.js

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}

14643
src/browser-client/package-lock.json

File diff suppressed because it is too large

62
src/browser-client/package.json

@ -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"
]
}

273
src/browser-client/public/docs/README.adoc

@ -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) {
====

BIN
src/browser-client/public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

17
src/browser-client/public/index.html

@ -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>

187
src/browser-client/src/App.vue

@ -0,0 +1,187 @@
<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 IoT
</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 > &nbsp; &nbsp; &nbsp; </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')
},
/**
*
* == 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.
*
*/
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}
]
}
}
this.$root.$emit('iot_add', this.SwarmabAsciiLabTemplate)
}
}
}
}
</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>

1093
src/browser-client/src/assets/css/themify-icons.css

File diff suppressed because it is too large

BIN
src/browser-client/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2

Binary file not shown.

BIN
src/browser-client/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf

Binary file not shown.

BIN
src/browser-client/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot

Binary file not shown.

BIN
src/browser-client/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff

Binary file not shown.

BIN
src/browser-client/src/assets/fonts/themify.eot

Binary file not shown.

362
src/browser-client/src/assets/fonts/themify.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 229 KiB

BIN
src/browser-client/src/assets/fonts/themify.ttf

Binary file not shown.

BIN
src/browser-client/src/assets/fonts/themify.woff

Binary file not shown.

BIN
src/browser-client/src/assets/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

162
src/browser-client/src/components/DocLive.vue

@ -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">
<run-llo
style="background-color: #f8f9fa"
>
</run-llo>
</div>
<div :class="columncode">
<ad-hoc
style="background-color: #f8f9fa"
>
</ad-hoc>
</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>

386
src/browser-client/src/components/doclive/AdhocView.vue

@ -0,0 +1,386 @@
<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="tryLLO[active]"
@click="closelog(key)">
Close</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>
<b-row no-gutters w-100 h-100
v-if="showlloedit"
>
<b-col cols="5" sm="5" md="5" >
<div class="input-group-append">
<button
type="button"
class="btn btn-outline-dark btn-sm"
@click="getdata"
>Get iot Data</button>
</div>
</b-col>
<b-col cols="7" sm="7" md="7" >
<input type="text"
class="form-control"
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
v-model="getinfo"
>
</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/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 {
swarmlabllo: 'https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/llo-index.yml',
ssl:{},
getinfo:'',
code: '# Try!',
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',
refresh:true,
autofocus: false,
extraKeys: { "Ctrl": "autocomplete" }
},
ADOC_html:[]
}
},
methods: {
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">Shift-Ctrl-K</td> <td class="text-left">deleteLine</td></tr>'+
'<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>'+
'<tr><td class="text-left">Ctrl-T</td> <td class="text-left">transposeChars</td></tr>'+
'<tr><td class="text-left">Alt-Left</td> <td class="text-left">goSubwordLeft</td></tr>'+
'<tr><td class="text-left">Alt-Right</td> <td class="text-left">goSubwordRight</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">Shift-Ctrl-L</td> <td class="text-left">splitSelectionByLine</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">Shift-Ctrl-Enter</td> <td class="text-left">insertLineBefore</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">Shift-Ctrl-Up</td> <td class="text-left">swapLineUp</td></tr>'+
'<tr><td class="text-left">Shift-Ctrl-Down</td> <td class="text-left">swapLineDown</td></tr>'+
'<tr><td class="text-left">Ctrl-/</td> <td class="text-left">toggleCommentIndented</td></tr>'+
'<tr><td class="text-left">Ctrl-J</td> <td class="text-left">joinLines</td></tr>'+
'<tr><td class="text-left">Shift-Ctrl-D</td> <td class="text-left">duplicateLine</td></tr>'+
'<tr><td class="text-left">F9</td> <td class="text-left">sortLines</td></tr>'+
'<tr><td class="text-left">Ctrl-F9</td> <td class="text-left">sortLinesInsensitive</td></tr>'+
'<tr><td class="text-left">F2</td> <td class="text-left">nextBookmark</td></tr>'+
'<tr><td class="text-left">Shift-F2</td> <td class="text-left">prevBookmark</td></tr>'+
'<tr><td class="text-left">Ctrl-F2</td> <td class="text-left">toggleBookmark</td></tr>'+
'<tr><td class="text-left">Shift-Ctrl-F2</td> <td class="text-left">clearBookmarks</td></tr>'+
'<tr><td class="text-left">Alt-F2</td> <td class="text-left">selectBookmarks</td></tr>'+
'<tr><td class="text-left">Backspace</td> <td class="text-left">smartBackspace</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-K</td> <td class="text-left">delLineRight</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-U</td> <td class="text-left">upcaseAtCursor</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-L</td> <td class="text-left">downcaseAtCursor</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-Space</td> <td class="text-left">setSublimeMark</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-A</td> <td class="text-left">selectToSublimeMark</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-W</td> <td class="text-left">deleteToSublimeMark</td></tr>'+
'<tr><td class="text-left">Ctrl-K Ctrl-X</td> <td class="text-left">swapWithSublimeMark</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-H</td> <td class="text-left">replace</td></tr>'+
'</table>'
var title1=''
var winfo=''
this.$swal({
title: '<strong>Sublime Text 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
})
})
},
beforeDestroy () {
this.$root.$off('PipelineRunSwarmserviceLLOAdhoc')
},
created () {
}
};
</script>
<style>
.CodeMirror {
font-family: monospace;
height: 250px;
}
</style>

341
src/browser-client/src/components/doclive/runLlo.vue

@ -0,0 +1,341 @@
<template>
<div>
<b-row no-gutters w-100 h-100
v-if="showlloedit"
>
<b-col cols="12" sm="12" md="12" >
<div v-for="(service, key) in iotdata" :key="key">
<div v-for="item in service" :key="item.id">
id: {{ item.id }}<br>
name: {{ item.name }}
</div>
</div>
</b-col>
</b-row>
</div>
</template>
<script>
import Vue from 'vue'
import JSZip from 'jszip';
import FileSaver from 'file-saver';
export default {
components: {
},
data () {
return {
showlloedit:true,
issocket:'close',
socketdata:'',
code:[],
iotdata: [
{
"iot1": {
"id": 1,
"name": "auto1",
"img": "rinse.png",
"Servicios": [
{"model":"Sentra", "doors":4},
{"model":"Maxima", "doors":4},
{"model":"Skyline", "doors":2}
]
},
},{
"iot2": {
"id": 2,
"name": "auto2",
"img": "shirt-2.png",
"Servicios": [
{"model":"Sentra", "doors":4},
{"model":"Maxima", "doors":4},
{"model":"Skyline", "doors":2}
]
},
},{
"iot3": {
"id": 3,
"name": "auto3",
"img": "iron.png",
"Servicios": [
{"model":"Sentra", "doors":4},
{"model":"Maxima", "doors":4},
{"model":"Skyline", "doors":2}
]
},
},{
"iot4": {
"id": 4,
"name": "auto4",
"img": "wring.png",
"Servicios": [
{"model":"Sentra", "doors":4},
{"model":"Maxima", "doors":4},
{"model":"Skyline", "doors":2}
]
}
}
]
}
},
methods: {
async addiot() {
console.log(JSON.stringify(this.iotdata))
},
async socketopen () {
this.$socket.client.open();
},
/**
*
* == socketclose()
*
* [source,javascript]
* ----
* this.$socket.client.close();
* ----
*
*/
async socketclose () {
this.$socket.client.close();
}
},
computed: {
},
/**
*
* == 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.
*
*/
mounted() {
this.$root.$on('iot_add', (v) => {
this.iotdata.push(v);
//this.iotdata = v
this.addiot()
this.$socket.client.emit('subscribe', 'iot');
//this.$socket.$subscribe('iot', payload => {
// console.log(payload)
//});
})
this.$root.$on('socket_add', (v) => {
this.socketdata = v;
console.log('socket_add ' + JSON.stringify(v))
this.$socket.client.emit('log', this.socketdata);
})
},
/**
*
* == 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.
*
*/
beforeDestroy () {
this.$root.$off('iot_add')
this.$root.$off('socket_add')
},
/**
*
* == 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 iotdata(val) {
console.log(" socket from iotdata "+JSON.stringify(val))
},
async message(val) {
console.log(" socket message "+JSON.stringify(val))
}
}
};
</script>
<style>
.CodeMirror {
font-family: monospace;
height: 750px;
}
</style>

32
src/browser-client/src/main.js

@ -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('http://localhost:8084', {
autoConnect: false
});
Vue.use(VueSocketIOExt, socket);
Vue.use(BootstrapVue);
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
render: h => h(App)
})

40
src/browser-client/src/store/index.js

@ -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: {
}
})

72
src/browser-client/src/store/modules/create_pipelineLLO.js

@ -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("http://localhost:8084/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)
}
}
}

13
src/browser-client/swarmlabdoc.asciidoc_config

@ -0,0 +1,13 @@
:description: IoT Example
:keywords: iot, swarmlab
:data-uri:
:toc: right
:toc-title: Table of contents
:toclevels: 4
:source-highlighter: highlight
:icons: font
:sectnums:
{empty} +

90
src/browser-client/swarmlabdoc.js

@ -0,0 +1,90 @@
'use strict';
// set expandtab ts=4 sw=4 ai
var fs = require('fs');
var path = require('path');
const { resolve } = require('path');
const { readdir } = require('fs').promises;
/*
* Read directory recursiv
*/
async function* getFiles(dir) {
const dirents = await readdir(dir, { withFileTypes: true });
for (const dirent of dirents) {
const res = resolve(dir, dirent.name);
if (dirent.isDirectory()) {
yield* getFiles(res);
} else {
yield res;
}
}
}
/*
* multilang-extract-comments options
*/
var options = {
pattern: {
//name: 'Swarmlab',
//nameMatchers: ['*.vue'],
//singleLineComment: [{ start: '//' }],
multiLineComment: [{ start: '/**', middle: '*', end: '*/'}]
}
}
/*
* Asciidoc config
*/
var asciidoc_config_file = 'swarmlabdoc.asciidoc_config';
var asciidoc_config = fs.readFileSync(asciidoc_config_file, 'utf-8');
// VARIABLES
var filePathWrite = path.join(__dirname, 'public/docs/README.adoc');
var STRING = {};
STRING.path = 'src'; // search recursiv for comments
STRING.adoc = ''; // convert adoc
STRING.adoc += asciidoc_config;
(async () => {
for await (const file of getFiles(STRING.path)) {
fs.readFile(file, {encoding: 'utf-8'}, function(err,data){
if (!err) {
var comments = require('multilang-extract-comments')(data,options);
Object.entries(comments).forEach(([key, val]) => {
console.log(key + JSON.stringify(val));
STRING.adoc += val.content
STRING.adoc += '\n'
STRING.adoc += '\n'
STRING.adoc += '[TIP]'
STRING.adoc += '\n'
STRING.adoc += '===='
STRING.adoc += '\n'
STRING.adoc += '- *File:* ' + file
STRING.adoc += '\n'
STRING.adoc += '- *Line:* ' + val.codeStart
STRING.adoc += '\n'
STRING.adoc += '- *Code:* ' + val.code
STRING.adoc += '\n'
STRING.adoc += '===='
STRING.adoc += '\n'
STRING.adoc += '\n'
});
fs.writeFileSync(filePathWrite, STRING.adoc, 'utf-8', function (err) {
if (!err) {
console.log('ok');
} else {
console.log('Error Write ' + err);
}
});
} else {
console.log('Error Read ' + err);
}
});
}
})()

149
src/browser-client/vimsession/iot

@ -0,0 +1,149 @@
let SessionLoad = 1
if &cp | set nocp | endif
let s:so_save = &so | let s:siso_save = &siso | set so=0 siso=0
let v:this_session=expand("<sfile>:p")
silent only
cd /data/appl/ok/swarmlab-iot-example/browser-client/src
if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
let s:wipebuf = bufnr('%')
endif
set shortmess=aoO
badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue
badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/AdhocView.vue
badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/store/modules/create_pipelineLLO.js
badd +0 /data/appl/ok/swarmlab-iot-example/browser-client/src/main.js
argglobal
silent! argdel *
$argadd App.vue
set stal=2
edit /data/appl/ok/swarmlab-iot-example/browser-client/src/App.vue
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winminheight=1 winheight=1 winminwidth=1 winwidth=1
argglobal
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
setlocal fdi=#
setlocal fdl=0
setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 22) / 45)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
normal! 0
tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/AdhocView.vue
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winminheight=1 winheight=1 winminwidth=1 winwidth=1
argglobal
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
setlocal fdi=#
setlocal fdl=0
setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 22) / 45)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
normal! 0
lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/components/doclive/runLlo.vue
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winminheight=1 winheight=1 winminwidth=1 winwidth=1
argglobal
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
setlocal fdi=#
setlocal fdl=0
setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 22) / 45)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
normal! 0
lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/store/modules/create_pipelineLLO.js
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winminheight=1 winheight=1 winminwidth=1 winwidth=1
argglobal
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
setlocal fdi=#
setlocal fdl=0
setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 22) / 45)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
normal! 0
lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
tabedit /data/appl/ok/swarmlab-iot-example/browser-client/src/main.js
set splitbelow splitright
set nosplitbelow
set nosplitright
wincmd t
set winminheight=1 winheight=1 winminwidth=1 winwidth=1
argglobal
setlocal fdm=manual
setlocal fde=0
setlocal fmr={{{,}}}
setlocal fdi=#
setlocal fdl=0
setlocal fml=1
setlocal fdn=20
setlocal fen
silent! normal! zE
let s:l = 1 - ((0 * winheight(0) + 22) / 45)
if s:l < 1 | let s:l = 1 | endif
exe s:l
normal! zt
1
normal! 0
lcd /data/appl/ok/swarmlab-iot-example/browser-client/src
tabnext 1
set stal=1
if exists('s:wipebuf')
silent exe 'bwipe ' . s:wipebuf
endif
unlet! s:wipebuf
set winheight=1 winwidth=20 shortmess=filnxtToOA
set winminheight=1 winminwidth=1
let s:sx = expand("<sfile>:p:r")."x.vim"
if file_readable(s:sx)
exe "source " . fnameescape(s:sx)
endif
let &so = s:so_save | let &siso = s:siso_save
doautoall SessionLoadPost
unlet SessionLoad
" vim: set ft=vim :
Loading…
Cancel
Save