-<template>\r
- <div class="modal inmodal fade" id="myModal">\r
- <div class="modal-dialog modal-lg">\r
- <div class="modal-content animated">\r
- <div class="modal-header">\r
- <button type="button" class="close" data-dismiss="modal">\r
- <span aria-hidden="true">×</span><span class="sr-only">Close</span>\r
- </button>\r
- <h3 class="modal-title">{{type.service}}</h3>\r
- </div>\r
- <div class="modal-body">\r
- <div class="row">\r
- <form method="get" class="form-horizontal">\r
- <div id="service-address">\r
- <button class="btn btn-default">Basic</button>\r
- <div class="form-group">\r
- <label class="col-sm-3 control-label">name</label>\r
- <div class="col-sm-7">\r
- <input type="text" class="form-control service-title" v-model="type.service" placeholder="please input service name.">\r
- </div>\r
- </div>\r
- <div class="form-group">\r
- <label class="col-sm-3 control-label">ip</label>\r
- <div class="col-sm-7"><input type="text" class="form-control" v-model="ip"></div>\r
- </div>\r
- <div class="form-group">\r
- <label class="col-sm-3 control-label">port</label>\r
- <div class="col-sm-7"><input type="text" class="form-control" v-model="port"></div>\r
- </div>\r
- </div>\r
- <div class="hr-line-dashed"></div>\r
- <div id="service-apis">\r
- <div id="apis-nav">\r
- <button class="btn btn-default">Apis</button>\r
- </div>\r
- <br />\r
- <div id="api-panels" class="api col-sm-offset-1 col-sm-10">\r
- <div class="panel-group" id="accordion">\r
- <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
- </div>\r
- <button type="button" class="btn btn-primary pull-right" v-on:click="addNewApi()">New</button>\r
- </div>\r
- </div>\r
- </form>\r
- </div>\r
- </div>\r
- <div class="modal-footer">\r
- <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>\r
- <button type="button" class="btn btn-primary" v-on:click="save()">Save changes</button>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
-</template>\r
-<script>\r
-import service_api from "./service_api.vue";\r
-import showMessage from '../message/showMessage.js'\r
-export default {\r
- props: ['type'],\r
- data: function() {\r
- return {\r
- typeTag: this.type.tag,\r
- ip: "",\r
- port: "",\r
- apis: []\r
- }\r
- },\r
- created: function() {\r
- },\r
- watch: {\r
- type: {\r
- handler: function(newVal, oldVal) {\r
- console.log("###########type is changed!");\r
- if(newVal.content) {\r
- var content = newVal.content;\r
- this.ip = content.ip;\r
- this.port = content.port;\r
- this.apis = content.apis;\r
- console.log(this.apis);\r
- } else {\r
- this.resetModalData();\r
- }\r
- console.log("end!");\r
- },\r
- deep: true\r
- }\r
- },\r
- methods: {\r
- addNewApi: function() {\r
- var newApi = {'name': 'new', 'method': 'GET', 'baseuri': '', 'params': [], 'template': {"uri": "((baseuri))"}};\r
- this.apis.push(newApi);\r
- },\r
- removeApi: function(name) {\r
- for(var i = 0; i < this.apis.length; i++) {\r
- if(name == this.apis[i]['name']) {\r
- this.apis.splice(i, 1);\r
- }\r
- }\r
- },\r
- save: function() {\r
- if(this.ip == "") {\r
- showMessage("warning", "SERVICE", "ip is not filled!");\r
- return;\r
- } else if (this.port == "") {\r
- showMessage("warning", "SERVICE", "port is not filled!");\r
- return;\r
- } else if (this.type.service == "") {\r
- showMessage("warning", "SERVICE", "service name is not filled!");\r
- return;\r
- }\r
- if(this.type.edit == true) {\r
- this.saveEdition();\r
- } else {\r
- this.saveCreation();\r
- }\r
- this.resetModalData();\r
- $("#myModal").modal("hide");\r
- },\r
- saveEdition: function() {\r
- var self = this;\r
- var msgTitle = "SAVE -- SERVICE";\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/editService",\r
- method: "post",\r
- data: {\r
- "oldName": self.type.originName,\r
- "newName": self.type.service,\r
- "ip": self.ip,\r
- "port": self.port,\r
- "apis": JSON.stringify(self.apis),\r
- },\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- showMessage("success", msgTitle, "Save service <strong>" + self.type.service + "</strong> successfully!");\r
- } else {\r
- showMessage(data['code'], msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", data['error']);\r
- }\r
- },\r
- error: function() {\r
- showMessage("error", msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", msg);\r
- }\r
- });\r
- var edition = {\r
- 'oldName': this.type.originName,\r
- 'newName': this.type.service\r
- };\r
- this.$emit("service-edition", edition);\r
- },\r
- saveCreation: function() {\r
- console.log("save creation!!!");\r
- var self = this;\r
- var msgTitle = "CREATE -- SERVICE";\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/createService",\r
- method: "post",\r
- data: {\r
- "name": self.type.service,\r
- "ip": self.ip,\r
- "port": self.port,\r
- "apis": JSON.stringify(self.apis)\r
- },\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- showMessage("success", msgTitle, "Create <strong>"+ self.type.service + "</strong> successfully!");\r
- } else {\r
- showMessage(data['code'], msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", data['error']);\r
- self.$emit("creation-fail", self.type.service);\r
- }\r
- },\r
- error: function() {\r
- showMessage("error", msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", msg);\r
- self.$emit("creation-fail", self.type.service);\r
- }\r
- });\r
- this.$emit("service-creation", this.type.service);\r
- },\r
- resetModalData: function() {\r
- this.ip = "";\r
- this.port = "";\r
- this.apis = [];\r
- },\r
- getData: function() {\r
- console.log("apis:");\r
- for(i in this.apis) {\r
- console.log(this.apis[i]);\r
- }\r
- }\r
- },\r
- components: {\r
- 'service-api': service_api\r
- }\r
-}\r
-</script>
\ No newline at end of file
+<template>
+ <div class="modal inmodal fade" id="myModal">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content animated">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">
+ <span aria-hidden="true">×</span><span class="sr-only">Close</span>
+ </button>
+ <h3 class="modal-title">{{type.service}}</h3>
+ </div>
+ <div class="modal-body">
+ <div class="row">
+ <form method="get" class="form-horizontal">
+ <div id="service-address">
+ <button class="btn btn-default">Basic</button>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">name</label>
+ <div class="col-sm-7">
+ <input type="text" class="form-control service-title" v-model="type.service" placeholder="please input service name.">
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">ip</label>
+ <div class="col-sm-7"><input type="text" class="form-control" v-model="ip"></div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-3 control-label">port</label>
+ <div class="col-sm-7"><input type="text" class="form-control" v-model="port"></div>
+ </div>
+ </div>
+ <div class="hr-line-dashed"></div>
+ <div id="service-apis">
+ <div id="apis-nav">
+ <button class="btn btn-default">Apis</button>
+ </div>
+ <br />
+ <div id="api-panels" class="api col-sm-offset-1 col-sm-10">
+ <div class="panel-group" id="accordion">
+ <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>
+ </div>
+ <button type="button" class="btn btn-primary pull-right" v-on:click="addNewApi()">New</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary" v-on:click="save()">Save changes</button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script>
+import service_api from "./service_api.vue";
+import showMessage from '../message/showMessage.js'
+export default {
+ props: ['type'],
+ data: function() {
+ return {
+ typeTag: this.type.tag,
+ ip: "",
+ port: "",
+ apis: []
+ }
+ },
+ created: function() {
+ },
+ watch: {
+ type: {
+ handler: function(newVal, oldVal) {
+ console.log("###########type is changed!");
+ if(newVal.content) {
+ var content = newVal.content;
+ this.ip = content.ip;
+ this.port = content.port;
+ this.apis = content.apis;
+ console.log(this.apis);
+ } else {
+ this.resetModalData();
+ }
+ console.log("end!");
+ },
+ deep: true
+ }
+ },
+ methods: {
+ addNewApi: function() {
+ var newApi = {'name': 'new', 'method': 'GET', 'baseuri': '', 'params': [], 'template': {"uri": "((baseuri))"}};
+ this.apis.push(newApi);
+ },
+ removeApi: function(name) {
+ for(var i = 0; i < this.apis.length; i++) {
+ if(name == this.apis[i]['name']) {
+ this.apis.splice(i, 1);
+ }
+ }
+ },
+ save: function() {
+ if(this.ip == "") {
+ showMessage("warning", "SERVICE", "ip is not filled!");
+ return;
+ } else if (this.port == "") {
+ showMessage("warning", "SERVICE", "port is not filled!");
+ return;
+ } else if (this.type.service == "") {
+ showMessage("warning", "SERVICE", "service name is not filled!");
+ return;
+ }
+ if(this.type.edit == true) {
+ this.saveEdition();
+ } else {
+ this.saveCreation();
+ }
+ this.resetModalData();
+ $("#myModal").modal("hide");
+ },
+ saveEdition: function() {
+ var self = this;
+ var msgTitle = "SAVE -- SERVICE";
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/editService",
+ method: "post",
+ data: {
+ "oldName": self.type.originName,
+ "newName": self.type.service,
+ "ip": self.ip,
+ "port": self.port,
+ "apis": JSON.stringify(self.apis),
+ },
+ success: function(data) {
+ if(data['code'] == 200) {
+ showMessage("success", msgTitle, "Save service <strong>" + self.type.service + "</strong> successfully!");
+ } else {
+ showMessage(data['code'], msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", data['error']);
+ }
+ },
+ error: function() {
+ showMessage("error", msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", msg);
+ }
+ });
+ var edition = {
+ 'oldName': this.type.originName,
+ 'newName': this.type.service
+ };
+ this.$emit("service-edition", edition);
+ },
+ saveCreation: function() {
+ console.log("save creation!!!");
+ var self = this;
+ var msgTitle = "CREATE -- SERVICE";
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/createService",
+ method: "post",
+ data: {
+ "name": self.type.service,
+ "ip": self.ip,
+ "port": self.port,
+ "apis": JSON.stringify(self.apis)
+ },
+ success: function(data) {
+ if(data['code'] == 200) {
+ showMessage("success", msgTitle, "Create <strong>"+ self.type.service + "</strong> successfully!");
+ } else {
+ showMessage(data['code'], msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", data['error']);
+ self.$emit("creation-fail", self.type.service);
+ }
+ },
+ error: function() {
+ showMessage("error", msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", msg);
+ self.$emit("creation-fail", self.type.service);
+ }
+ });
+ this.$emit("service-creation", this.type.service);
+ },
+ resetModalData: function() {
+ this.ip = "";
+ this.port = "";
+ this.apis = [];
+ },
+ getData: function() {
+ console.log("apis:");
+ for(i in this.apis) {
+ console.log(this.apis[i]);
+ }
+ }
+ },
+ components: {
+ 'service-api': service_api
+ }
+}
+</script>
Code Review / bottlenecks.git / blobdiff