iot-swarm-example/src/browser-client/src/components/doclive/runLlo.vue

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