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

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