iot-swarm-example/src/browser-client/src/App.vue

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