test-scheduler/ui/src/components/editor/step.vue

   1 <template>
   2 <!-- step -->
   3 <div class="row">
   4     <div class="col-md-6 col-sm-12">
   5         <div class="ibox float-e-margins">
   6             <div class="ibox-title">
   7                 <h5 class="text-success">Step</h5>
   8                 <div class="ibox-tools" style="height: 25px;">
   9                     <button class="btn btn-success " type="button" id="new-step">&nbsp;&nbsp;<span class="bold">New Step</span></button>
  10                         <a class="collapse-link" >
  11                             <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
  12                         </a>
  13                 </div>
  14             </div>
  15             <div class="ibox-content" style="border: 1px solid #cec8c8">
  16                 <form class="form-horizontal">
  17                     <div class="row">
  18                         <div class="form-group">
  19                             <label class="col-md-2 control-label">Name:</label>
  20                             <div class="col-md-5"><input type="text" class="form-control" id="name"></div>
  21                         </div>
  22                         <div class="form-group">
  23                             <label class="col-md-2 control-label">Service:</label>
  24                             <div class="col-md-4">
  25                                 <select class="form-control" id="service">
  26                                     <option></option>
  27                                     <option v-for='service in dataService' v-bind:value='service'>{{service}}</option>
  28                                 </select>
  29                             </div>
  30                         </div>
  31                         <div class="form-group">
  32                             <label class="col-md-2 control-label">Action:</label>
  33                             <div class="col-md-4">
  34                                 <select class="form-control" id="action">
  35                                     <option></option>
  36                                     <option v-for='action in dataAction' v-bind:value='action.name'>{{action.name}}</option>
  37                                 </select>
  38                             </div>
  39                         </div>
  40                     </div>
  41                     <div class="row" id="parameter">
  42                         <div class="form-group" v-for='(param, index) in dataParam'>
  43                             <label class="col-md-2 control-label" v-bind:title="param.description">{{ param.name }}
  44                             </label>
  45                             <div class="col-md-5">
  46                                 <input type="text" class="form-control"  v-bind:placeholder="param.description" v-bind:id="'par'+index">
  47                             </div>
  48                         </div>
  49                     </div>
  50                 </form>
  51             </div>
  52         </div>
  53     </div>
  54     <div class="col-md-6 col-sm-12">
  55         <div class="ibox float-e-margins">
  56             <div class="ibox-title">
  57                 <h5 class="text-success">StepList</h5>
  58                 <div class="ibox-tools">
  59                         <a class="collapse-link">
  60                             <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
  61                         </a>
  62                 </div>
  63             </div>
  64             <div class="ibox-content" id="step-list" style="border: 1px solid #cec8c8">
  65                 <div v-for='(step, index) in stepList' class='ibox'>
  66                     <div class="ibox-title step">
  67                         <h5>Step{{index + 1}} &nbsp;&nbsp; {{step.name}} </h5>
  68                         <div class="ibox-tools">
  69                             <a class="collapse-link">
  70                                 <i class="fa fa-chevron-up" v-on:click.stop='collapseBox'></i>
  71                             </a>
  72                             <a class="close-link" v-on:click='removeStep(index)'>
  73                                 <i class="fa fa-times"></i>
  74                             </a>
  75                         </div>
  76                     </div>
  77                     <div class="ibox-content">
  78                         <div class="row">
  79                             <label class="control-label"><span style='padding-right: 20px;'>Service:</span> {{ step.service }}</label>
  80                         </div>
  81                         <div class="row">
  82                           <label class="control-label"><span style='padding-right: 20px;'>Action:</span> {{ step.action }}</label>
  83                         </div>
  84                            <div class="param row">
  85                           <label class="control-label">
  86                               <span style='padding-right: 20px;'>Parameter:</span>
  87                               <span v-for='param in step.params'>{{param.key}} = {{param.value}} ;&nbsp;&nbsp;&nbsp;</span>
  88                           </label>
  89                         </div>
  90                        </div>
  91                 </div>
  92             </div>
  93         </div>
  94     </div>
  95 </div>
  96 </template>
  97 <script>
  98 export default {
  99     name: 'step',
 100     props: ['stepList'],
 101     data: function() {
 102         return {
 103             dataService: [],
 104             dataAction: [],
 105             dataParam: []
 106         }
 107     },
 108     mounted: function() {
 109         this.getServiceList();
 110         var self = this;
 111         $("#service").change(function(){
 112             self.selectService();
 113         });
 114         $("#action").change(function(){
 115             self.selectAction();
 116         });
 117         $('#new-step').click(function(){
 118             self.newStep();
 119         });
 120     },
 121     methods: {
 122         getServiceList: function(){
 123             console.log("get serviceList!");
 124             var self = this;
 125             $.ajax({
 126                 url: this.global.SERVER_ADDR + "service/list",
 127                 method: "GET",
 128                 async:false,
 129                 success: function(data){
 130                     console.log("ajax success!");
 131                     if(data['code'] == 200){
 132                         self.dataService = [];
 133                         self.dataService = data['result'];
 134                     }
 135                 }
 136             });
 137         },
 138         getServiceContent: function(name){
 139             var self = this;
 140             $.ajax({
 141                 url: this.global.SERVER_ADDR + "service/content",
 142                 method: "GET",
 143                 async:false,
 144                 data: {
 145                     "serviceName": name
 146                 },
 147                 success: function(data){
 148                     if(data['code'] == 200){
 149                         self.dataAction = [];
 150                         self.dataAction = data['result']['actions'];
 151                     }
 152                 }
 153             });
 154         },
 155         getParams: function(name){
 156             for(var i in this.dataAction){
 157                 if(this.dataAction[i].name == name){
 158                     this.dataParam = [];
 159                     this.dataParam = this.dataAction[i].params;
 160                     break;
 161                 }
 162             }
 163         },
 164         selectService: function(event){
 165             var selectedName = $("#service").val();
 166             this.getServiceContent(selectedName);
 167         },
 168         selectAction: function(event){
 169             var selectedName = $("#action").val();
 170             if(selectedName=="") {
 171                 this.dataParam = [];
 172                 return;
 173             }
 174             this.getParams(selectedName);
 175             if(this.dataParam==undefined) this.dataParam = [];
 176         },
 177         newStep: function(){
 178             var ser = $("#service").val();
 179             var act = $("#action").val();
 180             var na = $("#name").val();
 181             if(ser==""||act==""||na==""){
 182                 alert('Not completed!');
 183                 return;
 184             }
 185             var parCount = this.dataParam.length;
 186             var par = [];
 187             for(var i=0; i<parCount; ++i){
 188                 var temp = $('#par'+i).val();
 189                 if(temp==""){
 190                     alert('Not completed!');
 191                     return;
 192                 }
 193                 var name = this.dataParam[i].name;
 194                 par.push({key: name, value: temp});
 195             }
 196             this.stepList.push({name: na, service: ser, action: act, params: par});
 197             $("#name").val("");
 198             $("#service").val("");
 199             this.dataAction = [];
 200             this.dataParam = [];
 201         },
 202         removeStep: function(index) {
 203             this.stepList.splice(index, 1);
 204         },
 205         collapseBox: function(event) {
 206             console.log("collapse");
 207             var ele = event.target;
 208             console.log(event);
 209             console.log(ele);
 210             var ibox = $(ele).closest('div.ibox');
 211             var content = ibox.children('.ibox-content');
 212             content.slideToggle(200);
 213             $(ele).toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
 214         }
 215     },
 216     watch: {
 217         stepList: function() {
 218             this.$emit('stepList', this.stepList);
 219         }
 220     }
 221 }
 222 </script>