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

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