< 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 - c o l >
< / b - r o w >
< 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 - c o l >
< / b - r o w >
< / 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 100 px ;
}
. 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.3 s , opacity 0.4 s ;
}
. list - item {
display : inline - block ;
margin - right : 10 px ;
}
. list - enter - active {
transition : transform 0.2 s ease - in , opacity 0.4 s ease - in ;
}
. list - leave - active {
transition : transform 1 s ease - out , opacity 0.4 s 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 : 1 px solid blue ;
//white-space: pre-line;
text - align : left ;
}
. codeblock {
text - align : left ;
}
< / style >