testing-scheduler/ui/src/components/environment.vue

   1 <template>\r
   2 <div class="wrapper wrapper-content">\r
   3     <div class="row">\r
   4         <div class="col-lg-offset-2 col-lg-8">\r
   5             <div class="ibox">\r
   6                 <div class="ibox-content">\r
   7                     <h1>CONTEXT <i class="fa fa-question-circle"></i></h1>\r
   8                     <div class="row">\r
   9                         <div class="col-md-offset-1 col-md-10">\r
  10                             <textarea v-model="context" id="context-content" style="white-space:nowrap; overflow:scroll; font-size: 16px; padding: 4px; width: 100%; min-height: 300px; max-height: 300px;">\r
  11                             </textarea>\r
  12                             <button type="button" class="btn btn-primary pull-right" v-on:click="saveContext()">Save</button>\r
  13                         </div>\r
  14                     </div>\r
  15                 </div>\r
  16             </div>\r
  17         </div>\r
  18     </div>\r
  19     <div class="row">\r
  20         <div class="col-lg-offset-2 col-lg-8">\r
  21             <div class="ibox">\r
  22                 <div class="ibox-content">\r
  23                     <h1>Service</h1>\r
  24                     <div class="service-table">\r
  25                         <table id="serviceList" class="table table-bordered table-hover text-center">\r
  26                             <thead>\r
  27                                 <tr>\r
  28                                     <th class="text-center">No</th>\r
  29                                     <th class="text-center">Service</th>\r
  30                                     <th class="text-center">Time</th>\r
  31                                     <th class="text-center">Operation</th>\r
  32                                 </tr>\r
  33                             </thead>\r
  34                             <tbody>\r
  35                                 <tr v-for="service in serviceList" v-on:click="editService(service.name)" style="cursor: pointer;">\r
  36                                     <td style="vertical-align: middle;">{{ service.id }}</td>\r
  37                                     <td style="vertical-align: middle;">{{ service.name }}</td>\r
  38                                     <td style="vertical-align: middle;">{{ service.time }}</td>\r
  39                                     <td style="vertical-align: middle;"><button type="button" class="btn btn-white" v-on:click.stop="deleteService(service.name)"><i class="fa fa-trash"></i></button>\r
  40                                     </td>\r
  41                                 </tr>\r
  42                             </tbody>\r
  43                         </table>\r
  44                         <div>\r
  45                             <button class="btn btn-lg btn-success" style="float:right;" v-on:click="addNewService()">  Add  </button>\r
  46                         </div>\r
  47                     </div>\r
  48                     <!-- modal of one service -->\r
  49                     <div class="row">\r
  50                         <service-modal v-bind:type="type" v-on:service-creation="plusAService" v-on:service-edition="editAServiceName" v-on:creation-fail="creationFailHandler"></service-modal>\r
  51                     </div>\r
  52                 </div>\r
  53             </div>\r
  54         </div>\r
  55     </div>\r
  56 </div>\r
  57 </template>\r
  58 <script>\r
  59 import Vue from 'vue'\r
  60 import service_modal from "./env_component/service_modal.vue"\r
  61 import showMessage from './message/showMessage.js'\r
  62 export default {\r
  63     name: 'environment',\r
  64     data: function() {\r
  65         return {\r
  66             serviceList: [],\r
  67             type: {\r
  68                 edit: true,\r
  69                 service: "ansible",\r
  70                 tag: "default"\r
  71             },\r
  72             context: ''\r
  73         }\r
  74     },\r
  75     components: {\r
  76         'service-modal': service_modal\r
  77     },\r
  78     created: function() {\r
  79         var self = this;\r
  80         var msgTitle = "GET -- SERVICE LIST";\r
  81         var errorInfo = 'Unable to get the service list';\r
  82         $.ajax({\r
  83             url: this.global.SERVER_ADDR + "env/getAllServices",\r
  84             method: "GET",\r
  85             success: function(data) {\r
  86                 if(data['code'] == 200) {\r
  87                     self.serviceList = data['result'];\r
  88                 } else {\r
  89                     showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
  90                 }\r
  91             },\r
  92             error: function(obj, status, msg) {\r
  93                 showMessage("error", msgTitle, errorInfo, msg);\r
  94             }\r
  95         });\r
  96         $.ajax({\r
  97             url: this.global.SERVER_ADDR + "env/getContext",\r
  98             method: "GET",\r
  99             success: function(data) {\r
 100                 if(data['code'] == 200) {\r
 101                     self.context = data['result']['context'];\r
 102                 } else {\r
 103                     showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
 104                 }\r
 105             },\r
 106             error: function(obj, status, msg) {\r
 107                 showMessage("error", msgTitle, errorInfo, msg);\r
 108             }\r
 109         });\r
 110     },\r
 111     methods: {\r
 112         addNewService: function(){\r
 113             this.type.edit = false;\r
 114             this.type.tag = "abc";\r
 115             this.type.service = null;\r
 116             this.type.originName = null;\r
 117             if(this.type.content){\r
 118                 this.type.content = null;\r
 119             }\r
 120             $("#myModal").modal("show");\r
 121         },\r
 122         plusAService: function(serviceName){\r
 123             var item = {'id': '', 'name': '', 'time': ''};\r
 124             item['id'] = this.serviceList[this.serviceList.length - 1]['id'] + 1;\r
 125             item['name'] = serviceName;\r
 126             item['time'] = this.getFormatDate(new Date());\r
 127             this.serviceList.push(item);\r
 128         },\r
 129         editAServiceName: function(edition) {\r
 130             for(var i = 0;i < this.serviceList.length; i++) {\r
 131                 if(edition['oldName'] == this.serviceList[i]['name']) {\r
 132                     this.serviceList[i]['name'] = edition['newName'];\r
 133                 }\r
 134             }\r
 135         },\r
 136         editService: function(serviceName){\r
 137             this.type.edit = true;\r
 138             this.type.tag = "abc";\r
 139             this.type.service = serviceName;\r
 140             this.type.originName = serviceName;\r
 141             if(this.type.content){\r
 142                 this.type.content = null;\r
 143             }\r
 144             console.log(this.type);\r
 145             var self = this;\r
 146             var msgTitle = "GET -- SERVICE";\r
 147             var errorInfo = "Unable to get the service: <strong>" + self.type.service + "</strong>";\r
 148             $.ajax({\r
 149                 url: this.global.SERVER_ADDR + "env/getService",\r
 150                 method: "GET",\r
 151                 data: {\r
 152                     "serviceName": serviceName\r
 153                 },\r
 154                 success: function(data) {\r
 155                     if(data['code'] == 200) {\r
 156                         self.type.tag = "hhh";\r
 157                         self.type.content = data['result'];\r
 158                         self.type.originName = self.type.service;\r
 159                     } else {\r
 160                         showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
 161                     }\r
 162                 },\r
 163                 error: function(obj, status, msg) {\r
 164                     showMessage("error", msgTitle, errorInfo, msg);\r
 165                 }\r
 166             });\r
 167             $("#myModal").modal("show");\r
 168         },\r
 169         deleteService: function(serviceName){\r
 170             var msgTitle = "DELETE -- SERVICE";\r
 171             $.ajax({\r
 172                 url: this.global.SERVER_ADDR + "env/deleteService",\r
 173                 method: "POST",\r
 174                 data: {\r
 175                     "serviceName": serviceName\r
 176                 },\r
 177                 success: function(data) {\r
 178                     if(data['code'] == 200) {\r
 179                         showMessage(data['code'], msgTitle, "Delete <strong>" + serviceName + "</strong> successfully.");\r
 180                     } else {\r
 181                         showMessage(data['code'], msgTitle,  "Failed to delete <strong>" + serviceName + "</strong>", data['error']);\r
 182                     }\r
 183                 },\r
 184                 error: function(obj, status, msg) {\r
 185                     showMessage("error", msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", msg);\r
 186                 }\r
 187             });\r
 188             for(var i = 0;i < this.serviceList.length; i++) {\r
 189                 if(serviceName == this.serviceList[i]['name']) {\r
 190                     this.serviceList.splice(i, 1);\r
 191                 }\r
 192             }\r
 193         },\r
 194         creationFailHandler: function(serviceName) {\r
 195             for(var i = 0; i < this.serviceList.length; i++) {\r
 196                 if(serviceName == this.serviceList[i].name) {\r
 197                     this.serviceList.splice(i, 1);\r
 198                 }\r
 199             }\r
 200         },\r
 201         getFormatDate: function(date) {\r
 202             var year = date.getFullYear();\r
 203             var month = date.getMonth() + 1;\r
 204             var strDate = date.getDate();\r
 205             var seperator = "-";\r
 206             if(month >= 1 && month <= 9) {\r
 207                 month = "0" + month;\r
 208             }\r
 209             if(strDate >= 1 && strDate <= 9) {\r
 210                 strDate = "0" + strDate;\r
 211             }\r
 212             var formatDate = year + seperator + month + seperator + strDate;\r
 213             return formatDate;\r
 214         },\r
 215         saveContext: function() {\r
 216             var self = this;\r
 217             var msgTitle = "SAVE -- CONTEXT";\r
 218             var errorInfo = "Failed to save context!";\r
 219             $.ajax({\r
 220                 url: this.global.SERVER_ADDR + "env/editContext",\r
 221                 method: "POST",\r
 222                 data: {\r
 223                     context: self.context\r
 224                 },\r
 225                 success: function(data) {\r
 226                     if(data['code'] == 200) {\r
 227                         showMessage(data['code'], msgTitle, "Save context successfully!");\r
 228                     } else {\r
 229                         showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
 230                     }\r
 231                 },\r
 232                 error: function(obj, status, msg) {\r
 233                     showMessage("error", msgTitle, errorInfo, msg);\r
 234                 }\r
 235             });\r
 236         }\r
 237     }\r
 238 }\r
 239 </script>