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">×</span><span class="sr-only">Close</span>
9 <h3 class="modal-title">{{type.service}}</h3>
11 <div class="modal-body">
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.">
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>
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>
31 <div class="hr-line-dashed"></div>
32 <div id="service-apis">
34 <button class="btn btn-default">Apis</button>
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>
41 <button type="button" class="btn btn-primary pull-right" v-on:click="addNewApi()">New</button>
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>
56 import service_api from "./service_api.vue";
57 import showMessage from '../message/showMessage.js'
62 typeTag: this.type.tag,
72 handler: function(newVal, oldVal) {
73 console.log("###########type is changed!");
75 var content = newVal.content;
77 this.port = content.port;
78 this.apis = content.apis;
79 console.log(this.apis);
81 this.resetModalData();
89 addNewApi: function() {
90 var newApi = {'name': 'new', 'method': 'GET', 'baseuri': '', 'params': [], 'template': {"uri": "((baseuri))"}};
91 this.apis.push(newApi);
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);
102 showMessage("warning", "SERVICE", "ip is not filled!");
104 } else if (this.port == "") {
105 showMessage("warning", "SERVICE", "port is not filled!");
107 } else if (this.type.service == "") {
108 showMessage("warning", "SERVICE", "service name is not filled!");
111 if(this.type.edit == true) {
116 this.resetModalData();
117 $("#myModal").modal("hide");
119 saveEdition: function() {
121 var msgTitle = "SAVE -- SERVICE";
123 url: this.global.SERVER_ADDR + "env/editService",
126 "oldName": self.type.originName,
127 "newName": self.type.service,
130 "apis": JSON.stringify(self.apis),
132 success: function(data) {
133 if(data['code'] == 200) {
134 showMessage("success", msgTitle, "Save service <strong>" + self.type.service + "</strong> successfully!");
136 showMessage(data['code'], msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", data['error']);
140 showMessage("error", msgTitle, "Failed to save service <strong>" + self.type.service + "</strong>!", msg);
144 'oldName': this.type.originName,
145 'newName': this.type.service
147 this.$emit("service-edition", edition);
149 saveCreation: function() {
150 console.log("save creation!!!");
152 var msgTitle = "CREATE -- SERVICE";
154 url: this.global.SERVER_ADDR + "env/createService",
157 "name": self.type.service,
160 "apis": JSON.stringify(self.apis)
162 success: function(data) {
163 if(data['code'] == 200) {
164 showMessage("success", msgTitle, "Create <strong>"+ self.type.service + "</strong> successfully!");
166 showMessage(data['code'], msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", data['error']);
167 self.$emit("creation-fail", self.type.service);
171 showMessage("error", msgTitle, "Failed to create service <strong>" + self.type.service + "</strong>!", msg);
172 self.$emit("creation-fail", self.type.service);
175 this.$emit("service-creation", this.type.service);
177 resetModalData: function() {
182 getData: function() {
183 console.log("apis:");
184 for(i in this.apis) {
185 console.log(this.apis[i]);
190 'service-api': service_api