swarmlab-hybrid/src/components/manageservices/hybridlab.vue

<template>
  <card class="card-header" title="Hybrid API Request" style="max-height:100%">
    <b-row>
      <b-col cols="12" > 


 <table class="table table-bordered">
  <tbody>
    <tr>
      <th scope="row"
            class="text-center" 
      >
             Project
      </th>
      <td>
         <div class="input-group input-group-sm sm-3">
            <input type="text" 
              class="form-control" 
              aria-label="Small" aria-describedby="inputGroup-sizing-sm"
              placeholder="Project Name (Alphanumeric characters, dashes and underscores, NOT spaces)"
              v-model="swarmlabhybridapi.project"
              >
              <div class="input-group-append">
                <button
                  class="ti-info  btn btn-outline-primary"
                  round
                  type="button"
                  @click="showinfo('Project')">
                  </button>
              </div>
          </div>

      </td>
    </tr>
    <tr>
      <th scope="row"
            class="text-center" 
>
            Category
      </th>
      <td>
            <input type="text" 
              class="form-control" 
              aria-label="Small" aria-describedby="inputGroup-sizing-sm"
              placeholder="Project Category"
              v-model="swarmlabhybridapi.faculty"
              >
      </td>
    </tr>
    <tr>
      <th scope="row"
            class="text-center" 
>
            Description
      </th>
      <td>
            <input type="text" 
              class="form-control" 
              aria-label="Small" aria-describedby="inputGroup-sizing-sm"
              placeholder="What is the purpose of the project?"
              v-model="swarmlabhybridapi.desc"
              >
      </td>
    </tr>
  </tbody>
</table>

      </b-col> 
    </b-row>
    <b-row>
      <b-col cols="12" > 
        <div class="input-group-append">
          <button 
            class="btn btn-outline-success" 
            round
            type="button"
            @click="getApi"
          > Request hybrid API 
          </button>
        </div>

      </b-col> 
    </b-row>
					
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {ApiConfig} from "@/config/index";
export default {
  components: {
	},
  props: {
  },
  data() {
   return{
			swarmlabhybridapi:{
        labservices:'services'
      }
		}
  },
	mounted() {
	},
    beforeDestroy () {
 },

  computed: {

	},

  methods: {
  showinfo(value) {
      if(value == 'Project'){
        //var info='The ProjectName can only contain alphanumeric characters, dashes or underscores <br> We use that "Name" to retrieve the corresponding key values <br> Name assigned here will need it to connect you to Swarmlab Server.'
        var info='We use that "Name" to retrieve the corresponding key values <br> The name assigned here will be needed to connect you to Swarmlab Server. <br> The ProjectName can only contain alphanumeric characters, dashes or underscores.'
        this.$swal({
          type: 'info',
          html: info,
          showCloseButton: false,
          showLoaderOnConfirm: false,
          allowOutsideClick: false,
          // cancelButtonText: 'No, cancel!',
          showCancelButton: false,
          showLoaderOnConfirm: false,
          reverseButtons: true,
          focusCancel: false,
          confirmButtonText: 'Ok!'
          })
      }
  },
  async getApi() {
      console.log('getApi')

					var bootstrap = await store.dispatch("pipelineLLO/swarmlabhybridapi",{
            lab: this.swarmlabhybridapi
					})
        console.log(JSON.stringify(bootstrap))
          if(bootstrap.data.action == 'ok'){
            var info='<h5>OK</h5>'
            this.$swal({
              type: 'info',
              html: info,
              showCloseButton: true,
              showLoaderOnConfirm: false,
              allowOutsideClick: false,
              showLoaderOnConfirm: false,
              focusCancel: true
            })
          }else{
            var info='<h5>Error</h5>'
            this.$swal({
              type: 'error',
              html: info,
              showCloseButton: true,
              showLoaderOnConfirm: false,
              allowOutsideClick: false,
              showLoaderOnConfirm: false,
              focusCancel: true
            })
          }


    }

  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
 background-color: #eff0f1;
 border: 1px solid blue;
 //white-space: pre-line;
 text-align: left;
			}
.codeblock {
 text-align: left;
}

</style>