bootstrap

4 years ago · 4d633bca88
25 changed files with 17675 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/README.md
+++ b/README.md
@ -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
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
+  ]
+}
--- a/public/docs/README.adoc
+++ b/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) {
+====
+
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/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>
--- a/src/App.vue
+++ b/src/App.vue
@ -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 > &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')
+    },
+    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>
--- a/src/assets/css/themify-icons.css
+++ b/src/assets/css/themify-icons.css
--- a/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
+++ b/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2
--- a/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
+++ b/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf
--- a/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
+++ b/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot
--- a/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
+++ b/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff
--- a/src/assets/fonts/themify.eot
+++ b/src/assets/fonts/themify.eot
--- a/src/assets/fonts/themify.svg
+++ b/src/assets/fonts/themify.svg
--- a/src/assets/fonts/themify.ttf
+++ b/src/assets/fonts/themify.ttf
--- a/src/assets/fonts/themify.woff
+++ b/src/assets/fonts/themify.woff
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/DocLive.vue
+++ b/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">
+                  <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>
--- a/src/components/doclive/AdhocView.vue
+++ b/src/components/doclive/AdhocView.vue
@ -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>
--- a/src/components/doclive/runLlo.vue
+++ b/src/components/doclive/runLlo.vue
@ -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>
--- a/src/main.js
+++ b/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('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)
+})
+
--- a/src/store/index.js
+++ b/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: {
+  }
+})
--- a/src/store/modules/create_pipelineLLO.js
+++ b/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("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)
+		}
+  }
+}