swarmlab-hybrid/src/App.vue

<template>
  <div id="app" class="container-fluid">

<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start">
        <b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
          Swarmlab.io
        </b-navbar-brand>
    <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
        <ul class="navbar-nav mx-auto text-md-center text-left">
            <li class="nav-item">
                <a class="nav-link" href="#"
                  @click="hybrid('services')"
                >
                Manage_Your_Local_LabInstances</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
            |
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"
                  @click="hybrid('bootstrap')"
                >Containers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
            -
                </a>
            </li>
            <li class="nav-item my-auto">
                <a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
            -
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"
                  @click="hybrid('connect-server')"
                >Config_hybrid_server</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
            |
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"
                  @click="hybrid('manage_service')"
                >
                Manage_Your_hybrid_LabInstances</a> 
            </li>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
              <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/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item>
              <b-nav-item >  </b-nav-item>
        </ul>
    </div>
</nav>


      <!-- ***************** container items ****************** -->
        <b-row 
                  v-show="hybridmenou == 'bootstrap'"
        >
          <b-col cols="12" >

             <network-table
                style="background-color: #f8f9fa"
              >
              </network-table>

          </b-col>
        </b-row>

        <b-row
                  v-show="hybridmenou == 'services'"
        >
          <b-col cols="12">
             <services-table
                style="background-color: #f8f9fa"
              >
             </services-table>

          </b-col>
        </b-row>

        <b-row
                  v-show="hybridmenou == 'connect-server'"
        >
          <b-col cols="12">
             <connect-server
                style="background-color: #f8f9fa"
              >
             </connect-server>

          </b-col>
        </b-row>

        <b-row
                  v-show="hybridmenou == 'manage_service'"
        >
          <b-col cols="12">
             <manage-services
                style="background-color: #f8f9fa"
              >
             </manage-services>

          </b-col>
        </b-row>


  </div>
</template>

<script>
import "@/assets/css/themify-icons.css";

import ConnectServer from "./components/myconnect-server.vue";
import NetworkTable from "./components/mynetwork.vue";
import ServicesTable from "./components/myservices.vue";
import ManageServices from "./components/manageservices.vue";

export default {
  name: 'app',
  components: {
    NetworkTable,
    ServicesTable,
    ConnectServer,
    ManageServices
  },
  data() {
    return {
      hybridmenou:'bootstrap',
      show: true,
      token: '',
      SwarmabAsciiLabTemplate:''
    }
  },
	mounted() {
  },
	created() {
  },
  methods: {
   hybrid(action) {
        this.hybridmenou = action
          console.log(action)
          if(action == 'bootstrap'){
		        this.$root.$emit('hybrid_refresh_dockerservices')
          }else if(action == 'connect-server'){
		        this.$root.$emit('hybrid_connect_server')
          }else if(action == 'services'){
		        this.$root.$emit('hybrid_refresh_availableservices')
          }else if(action == 'manage_service'){
		        //this.$root.$emit('hybrid_manage_service')
          }
    }

  }
}
</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;
  }

.mycontainer {
            padding-right: 20px !important;
            padding-left: 5px !important;
            margin-right:auto;
            margin-left:auto
}

</style>