You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
229 lines
5.2 KiB
229 lines
5.2 KiB
4 years ago
|
<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>
|