testing-scheduler/ui/src/components/env_component/service_modal.vue

   1 <template>\r
   2     <div class="modal inmodal fade" id="myModal">\r
   3         <div class="modal-dialog modal-lg">\r
   4             <div class="modal-content animated">\r
   5                 <div class="modal-header">\r
   6                     <button type="button" class="close" data-dismiss="modal">\r
   7                         <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>\r
   8                     </button>\r
   9                     <h3 class="modal-title">{{type.service}}</h3>\r
  10                 </div>\r
  11                 <div class="modal-body">\r
  12                     <div class="row">\r
  13                         <form method="get" class="form-horizontal">\r
  14                             <div id="service-address">\r
  15                                 <button class="btn btn-default">Basic</button>\r
  16                                 <div class="form-group">\r
  17                                     <label class="col-sm-3 control-label">name</label>\r
  18                                     <div class="col-sm-7">\r
  19                                         <input  type="text" class="form-control service-title" v-model="type.service" placeholder="please input service name.">\r
  20                                     </div>\r
  21                                 </div>\r
  22                                 <div class="form-group">\r
  23                                     <label class="col-sm-3 control-label">ip</label>\r
  24                                     <div class="col-sm-7"><input type="text" class="form-control" v-model="ip"></div>\r
  25                                 </div>\r
  26                                 <div class="form-group">\r
  27                                     <label class="col-sm-3 control-label">port</label>\r
  28                                     <div class="col-sm-7"><input type="text" class="form-control" v-model="port"></div>\r
  29                                 </div>\r
  30                             </div>\r
  31                             <div class="hr-line-dashed"></div>\r
  32                             <div id="service-apis">\r
  33                                 <div id="apis-nav">\r
  34                                     <button class="btn btn-default">Apis</button>\r
  35                                 </div>\r
  36                                 <br />\r
  37                                 <div id="api-panels" class="api col-sm-offset-1 col-sm-10">\r
  38                                     <div class="panel-group" id="accordion">\r
  39                                         <service-api v-for="api in apis" panel-parent="#accordion" v-bind="api" v-on:name="api.name = $event" v-on:method="api.method = $event" v-on:baseuri="api.baseuri = $event" v-on:params="api.params = $event" v-on:template="api.template = $event" v-on:delete="removeApi"></service-api>\r
  40                                     </div>\r
  41                                     <button type="button" class="btn btn-primary pull-right" v-on:click="addNewApi()">New</button>\r
  42                                 </div>\r
  43                             </div>\r
  44                         </form>\r
  45                     </div>\r
  46                 </div>\r
  47                 <div class="modal-footer">\r
  48                     <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>\r
  49                     <button type="button" class="btn btn-primary" v-on:click="save()">Save changes</button>\r
  50                 </div>\r
  51             </div>\r
  52         </div>\r
  53     </div>\r
  54 </template>\r
  55 <script>\r
  56 import service_api from "./service_api.vue";\r
  57 import showMessage from '../message/showMessage.js'\r
  58 export default {\r
  59     props: ['type'],\r
  60     data: function() {\r
  61         return {\r
  62             typeTag: this.type.tag,\r
  63             ip: "",\r
  64             port: "",\r
  65             apis: []\r
  66         }\r
  67     },\r
  68     created: function() {\r
  69     },\r
  70     watch: {\r
  71         type: {\r
  72             handler: function(newVal, oldVal) {\r
  73                 console.log("###########type is changed!");\r
  74                 if(newVal.content) {\r
  75                    var content = newVal.content;\r
  76                    this.ip =  content.ip;\r
  77                    this.port = content.port;\r
  78                    this.apis = content.apis;\r
  79                    console.log(this.apis);\r
  80                 } else {\r
  81                     this.resetModalData();\r
  82                 }\r
  83                 console.log("end!");\r
  84             },\r
  85             deep: true\r
  86         }\r
  87     },\r
  88     methods: {\r
  89         addNewApi: function() {\r
  90             var newApi = {'name': 'new', 'method': 'GET', 'baseuri': '', 'params': [], 'template': {"uri": "((baseuri))"}};\r
  91             this.apis.push(newApi);\r
  92         },\r
  93         removeApi: function(name) {\r
  94             for(var i = 0; i < this.apis.length; i++) {\r
  95                 if(name == this.apis[i]['name']) {\r
  96                     this.apis.splice(i, 1);\r
  97                 }\r
  98             }\r
  99         },\r
 100         save: function() {\r
 101             if(this.ip == "") {\r
 102                 showMessage("warning", "SERVICE", "ip is not filled!");\r
 103                 return;\r
 104             } else if (this.port == "") {\r
 105                 showMessage("warning", "SERVICE", "port is not filled!");\r
 106                 return;\r
 107             } else if (this.type.service == "") {\r
 108                 showMessage("warning", "SERVICE", "service name is not filled!");\r
 109                 return;\r
 110             }\r
 111             if(this.type.edit == true) {\r
 112                 this.saveEdition();\r
 113             } else {\r
 114                 this.saveCreation();\r
 115             }\r
 116             this.resetModalData();\r
 117             $("#myModal").modal("hide");\r
 118         },\r
 119         saveEdition: function() {\r
 120             var self = this;\r
 121             var msgTitle = "SAVE -- SERVICE";\r
 122             $.ajax({\r
 123                 url: this.global.SERVER_ADDR + "env/editService",\r
 124                 method: "post",\r
 125                 data: {\r
 126                     "oldName":     self.type.originName,\r
 127                     "newName":     self.type.service,\r
 128                     "ip":         self.ip,\r
 129                     "port":     self.port,\r
 130                     "apis":     JSON.stringify(self.apis),\r
 131                 },\r
 132                 success: function(data) {\r
 133                     if(data['code'] == 200) {\r
 134                         showMessage("success", msgTitle, "Save service <strong>" + self.type.service + "</strong> successfully!");\r
 135                     } else {\r
 136                         showMessage(data['code'], msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", data['error']);\r
 137                     }\r
 138                 },\r
 139                 error: function() {\r
 140                     showMessage("error", msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", msg);\r
 141                 }\r
 142             });\r
 143             var edition = {\r
 144                 'oldName': this.type.originName,\r
 145                 'newName': this.type.service\r
 146             };\r
 147             this.$emit("service-edition", edition);\r
 148         },\r
 149         saveCreation: function() {\r
 150             console.log("save creation!!!");\r
 151             var self = this;\r
 152             var msgTitle = "CREATE -- SERVICE";\r
 153             $.ajax({\r
 154                 url: this.global.SERVER_ADDR + "env/createService",\r
 155                 method: "post",\r
 156                 data: {\r
 157                     "name": self.type.service,\r
 158                     "ip":     self.ip,\r
 159                     "port": self.port,\r
 160                     "apis": JSON.stringify(self.apis)\r
 161                 },\r
 162                 success: function(data) {\r
 163                     if(data['code'] == 200) {\r
 164                         showMessage("success", msgTitle, "Create <strong>"+ self.type.service + "</strong> successfully!");\r
 165                     } else {\r
 166                         showMessage(data['code'], msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", data['error']);\r
 167                         self.$emit("creation-fail", self.type.service);\r
 168                     }\r
 169                 },\r
 170                 error: function() {\r
 171                     showMessage("error", msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", msg);\r
 172                     self.$emit("creation-fail", self.type.service);\r
 173                 }\r
 174             });\r
 175             this.$emit("service-creation", this.type.service);\r
 176         },\r
 177         resetModalData: function() {\r
 178             this.ip = "";\r
 179             this.port = "";\r
 180             this.apis = [];\r
 181         },\r
 182         getData: function() {\r
 183             console.log("apis:");\r
 184             for(i in this.apis) {\r
 185                 console.log(this.apis[i]);\r
 186             }\r
 187         }\r
 188     },\r
 189     components: {\r
 190         'service-api': service_api\r
 191     }\r
 192 }\r
 193 </script>