IoT swarm implementation !

src/browser-client/src/
├── App.vue   (1)
├── assets
│   ├── css
│   │   └── themify-icons.css
│   ├── fonts
│   │   ├── glyphicons-halflings-regular.448c34a.woff2
│   │   ├── glyphicons-halflings-regular.e18bbf6.ttf
│   │   ├── glyphicons-halflings-regular.f4769f9.eot
│   │   ├── glyphicons-halflings-regular.fa27723.woff
│   │   ├── themify.eot
│   │   ├── themify.svg
│   │   ├── themify.ttf
│   │   └── themify.woff
│   └── logo.png
├── components     (4)
│   ├── doclive
│   │   ├── AdhocView.vue
│   │   └── runLlo.vue
│   └── DocLive.vue
├── main.js     (2)
└── store
    ├── index.js
    └── modules
        └── create_pipelineLLO.js (3)

src/IoT/llo/
├── bclient.js
├── client.js
├── iotclient.js (2)
└── iotserver.js (1)

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'; (1)
import io from 'socket.io-client';  (2)

const socket = io('http://localhost:8084', { (3)
  autoConnect: false
});

Vue.use(VueSocketIOExt, socket);



Vue.use(BootstrapVue);

Vue.config.productionTip = false
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

<template>
  <div id="app">
                          (1)
                          ...
  <div>
</template>
<script>
import DocLive from './components/DocLive.vue' (2)
import "@/assets/css/themify-icons.css";


export default {
  name: 'app',
  components: {
  },
  data() {
    return {
      show: true,
      SwarmabAsciiLabTemplate:''
    }
  },
	mounted() {
  },
  methods: {
    saveDocLive() {
      this.$root.$emit('asciilive_save','save') (3)
    },
  }
}
</script>
<style>
</style>

<template>
  <div id="app">
                          (1)
     ...
    <div class="row" >

                <div :class="columnview">           (5)
                  <run-llo
                    style="background-color: #f8f9fa"
                  >
                  </run-llo>
                </div>

                <div :class="columncode">   (5)
                  <ad-hoc
                    style="background-color: #f8f9fa"
                  >
                  </ad-hoc>
                </div>
    </div>
  <div>
</template>
<script>
import RunLlo from "./doclive/runLlo.vue"; (2)
import AdHoc from "./doclive/AdhocView.vue";

export default {
  name: 'DocLive',   (3)
  props: {
  },
  components: {
    RunLlo,       (4)
    AdHoc         (4)
  },
  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: {                    (6)
         fullscreen(action){   (7)
          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) { (8)
              this.tutorMenou='tutor'
              //this.tutorMenou='student'
          }
    }


}

</script>
<style>
</style>

<template>
<div>

    <!--  menou -->
    <div class="row"
      v-show="showmenou == 1"
    >

...
    </div>
    <!-- menou -->



    <div class="row" >

                <div :class="columnview">
                  <run-llo                              (1)
                    style="background-color: #f8f9fa"
                  >
                  </run-llo>
                </div>

                <div :class="columncode">
                  <ad-hoc                              (1)
                    style="background-color: #f8f9fa"
                  >
                  </ad-hoc>
                </div>
    </div>

 </div>
</template>

<script>
import RunLlo from "./doclive/runLlo.vue";       (2)
import AdHoc from "./doclive/AdhocView.vue";     (2)

export default {
  props: {
  },
  components: {
    RunLlo,   (2)
    AdHoc     (2)
  },
  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: {
 ...
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<template>
  <div>
  ...
  </div>
</template>
<script>
import Vue from 'vue'     (1)
import JSZip from 'jszip'; (2)
import FileSaver from 'file-saver'; (3)
export default {
   components: {
   },
   data () {
    return {
      showlloedit:true,
      issocket:'close',
      socketdata:'',
      code:[],
        iotdata: [  (4)
                    {
                        "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();     (5)
   },
/**
 *
 * == socketclose()
 *
 * [source,javascript]
 * ----
 *       this.$socket.client.close();
 * ----
 *
 */
   async socketclose () { (6)
        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.$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>

import { mapState, mapActions, commit } from 'vuex'  (1)
import store from '@/store/index'
import axios from 'axios' (2)

export default {
  namespaced: true,   (3)
  state: {            (4)
    llo: {},
    socketid:''
  },
  getters: {          (5)
		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: {      (6)
			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: {    (7)
		async get_data({commit,rootGetters}, value) {
			try {

        let p = await axios.get("http://localhost:8084/run", {   (8)
          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)
		}
  }
}