-<template>\r
-<div class="wrapper wrapper-content">\r
- <div class="row">\r
- <div class="col-lg-offset-2 col-lg-8">\r
- <div class="ibox">\r
- <div class="ibox-content">\r
- <h1>CONTEXT <i class="fa fa-question-circle"></i></h1>\r
- <div class="row">\r
- <div class="col-md-offset-1 col-md-10">\r
- <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
- </textarea>\r
- <button type="button" class="btn btn-primary pull-right" v-on:click="saveContext()">Save</button>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- <div class="row">\r
- <div class="col-lg-offset-2 col-lg-8">\r
- <div class="ibox">\r
- <div class="ibox-content">\r
- <h1>Service</h1>\r
- <div class="service-table">\r
- <table id="serviceList" class="table table-bordered table-hover text-center">\r
- <thead>\r
- <tr>\r
- <th class="text-center">No</th>\r
- <th class="text-center">Service</th>\r
- <th class="text-center">Time</th>\r
- <th class="text-center">Operation</th>\r
- </tr>\r
- </thead>\r
- <tbody>\r
- <tr v-for="service in serviceList" v-on:click="editService(service.name)" style="cursor: pointer;">\r
- <td style="vertical-align: middle;">{{ service.id }}</td>\r
- <td style="vertical-align: middle;">{{ service.name }}</td>\r
- <td style="vertical-align: middle;">{{ service.time }}</td>\r
- <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
- </td>\r
- </tr>\r
- </tbody>\r
- </table>\r
- <div>\r
- <button class="btn btn-lg btn-success" style="float:right;" v-on:click="addNewService()"> Add </button>\r
- </div>\r
- </div>\r
- <!-- modal of one service -->\r
- <div class="row">\r
- <service-modal v-bind:type="type" v-on:service-creation="plusAService" v-on:service-edition="editAServiceName" v-on:creation-fail="creationFailHandler"></service-modal>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
- </div>\r
-</div>\r
-</template>\r
-<script>\r
-import Vue from 'vue'\r
-import service_modal from "./env_component/service_modal.vue"\r
-import showMessage from './message/showMessage.js'\r
-export default {\r
- name: 'environment',\r
- data: function() {\r
- return {\r
- serviceList: [],\r
- type: {\r
- edit: true,\r
- service: "ansible",\r
- tag: "default"\r
- },\r
- context: ''\r
- }\r
- },\r
- components: {\r
- 'service-modal': service_modal\r
- },\r
- created: function() {\r
- var self = this;\r
- var msgTitle = "GET -- SERVICE LIST";\r
- var errorInfo = 'Unable to get the service list';\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/getAllServices",\r
- method: "GET",\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- self.serviceList = data['result'];\r
- } else {\r
- showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
- }\r
- },\r
- error: function(obj, status, msg) {\r
- showMessage("error", msgTitle, errorInfo, msg);\r
- }\r
- });\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/getContext",\r
- method: "GET",\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- self.context = data['result']['context'];\r
- } else {\r
- showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
- }\r
- },\r
- error: function(obj, status, msg) {\r
- showMessage("error", msgTitle, errorInfo, msg);\r
- }\r
- });\r
- },\r
- methods: {\r
- addNewService: function(){\r
- this.type.edit = false;\r
- this.type.tag = "abc";\r
- this.type.service = null;\r
- this.type.originName = null;\r
- if(this.type.content){\r
- this.type.content = null;\r
- }\r
- $("#myModal").modal("show");\r
- },\r
- plusAService: function(serviceName){\r
- var item = {'id': '', 'name': '', 'time': ''};\r
- item['id'] = this.serviceList[this.serviceList.length - 1]['id'] + 1;\r
- item['name'] = serviceName;\r
- item['time'] = this.getFormatDate(new Date());\r
- this.serviceList.push(item);\r
- },\r
- editAServiceName: function(edition) {\r
- for(var i = 0;i < this.serviceList.length; i++) {\r
- if(edition['oldName'] == this.serviceList[i]['name']) {\r
- this.serviceList[i]['name'] = edition['newName'];\r
- }\r
- }\r
- },\r
- editService: function(serviceName){\r
- this.type.edit = true;\r
- this.type.tag = "abc";\r
- this.type.service = serviceName;\r
- this.type.originName = serviceName;\r
- if(this.type.content){\r
- this.type.content = null;\r
- }\r
- console.log(this.type);\r
- var self = this;\r
- var msgTitle = "GET -- SERVICE";\r
- var errorInfo = "Unable to get the service: <strong>" + self.type.service + "</strong>";\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/getService",\r
- method: "GET",\r
- data: {\r
- "serviceName": serviceName\r
- },\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- self.type.tag = "hhh";\r
- self.type.content = data['result'];\r
- self.type.originName = self.type.service;\r
- } else {\r
- showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
- }\r
- },\r
- error: function(obj, status, msg) {\r
- showMessage("error", msgTitle, errorInfo, msg);\r
- }\r
- });\r
- $("#myModal").modal("show");\r
- },\r
- deleteService: function(serviceName){\r
- var msgTitle = "DELETE -- SERVICE";\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/deleteService",\r
- method: "POST",\r
- data: {\r
- "serviceName": serviceName\r
- },\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- showMessage(data['code'], msgTitle, "Delete <strong>" + serviceName + "</strong> successfully.");\r
- } else {\r
- showMessage(data['code'], msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", data['error']);\r
- }\r
- },\r
- error: function(obj, status, msg) {\r
- showMessage("error", msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", msg);\r
- }\r
- });\r
- for(var i = 0;i < this.serviceList.length; i++) {\r
- if(serviceName == this.serviceList[i]['name']) {\r
- this.serviceList.splice(i, 1);\r
- }\r
- }\r
- },\r
- creationFailHandler: function(serviceName) {\r
- for(var i = 0; i < this.serviceList.length; i++) {\r
- if(serviceName == this.serviceList[i].name) {\r
- this.serviceList.splice(i, 1);\r
- }\r
- }\r
- },\r
- getFormatDate: function(date) {\r
- var year = date.getFullYear();\r
- var month = date.getMonth() + 1;\r
- var strDate = date.getDate();\r
- var seperator = "-";\r
- if(month >= 1 && month <= 9) {\r
- month = "0" + month;\r
- }\r
- if(strDate >= 1 && strDate <= 9) {\r
- strDate = "0" + strDate;\r
- }\r
- var formatDate = year + seperator + month + seperator + strDate;\r
- return formatDate;\r
- },\r
- saveContext: function() {\r
- var self = this;\r
- var msgTitle = "SAVE -- CONTEXT";\r
- var errorInfo = "Failed to save context!";\r
- $.ajax({\r
- url: this.global.SERVER_ADDR + "env/editContext",\r
- method: "POST",\r
- data: {\r
- context: self.context\r
- },\r
- success: function(data) {\r
- if(data['code'] == 200) {\r
- showMessage(data['code'], msgTitle, "Save context successfully!");\r
- } else {\r
- showMessage(data['code'], msgTitle, errorInfo, data['error']);\r
- }\r
- },\r
- error: function(obj, status, msg) {\r
- showMessage("error", msgTitle, errorInfo, msg);\r
- }\r
- });\r
- }\r
- }\r
-}\r
-</script>
\ No newline at end of file
+<template>
+<div class="wrapper wrapper-content">
+ <div class="row">
+ <div class="col-lg-offset-2 col-lg-8">
+ <div class="ibox">
+ <div class="ibox-content">
+ <h1>CONTEXT <i class="fa fa-question-circle"></i></h1>
+ <div class="row">
+ <div class="col-md-offset-1 col-md-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;">
+ </textarea>
+ <button type="button" class="btn btn-primary pull-right" v-on:click="saveContext()">Save</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-offset-2 col-lg-8">
+ <div class="ibox">
+ <div class="ibox-content">
+ <h1>Service</h1>
+ <div class="service-table">
+ <table id="serviceList" class="table table-bordered table-hover text-center">
+ <thead>
+ <tr>
+ <th class="text-center">No</th>
+ <th class="text-center">Service</th>
+ <th class="text-center">Time</th>
+ <th class="text-center">Operation</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="service in serviceList" v-on:click="editService(service.name)" style="cursor: pointer;">
+ <td style="vertical-align: middle;">{{ service.id }}</td>
+ <td style="vertical-align: middle;">{{ service.name }}</td>
+ <td style="vertical-align: middle;">{{ service.time }}</td>
+ <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>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div>
+ <button class="btn btn-lg btn-success" style="float:right;" v-on:click="addNewService()"> Add </button>
+ </div>
+ </div>
+ <!-- modal of one service -->
+ <div class="row">
+ <service-modal v-bind:type="type" v-on:service-creation="plusAService" v-on:service-edition="editAServiceName" v-on:creation-fail="creationFailHandler"></service-modal>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</template>
+<script>
+import Vue from 'vue'
+import service_modal from "./env_component/service_modal.vue"
+import showMessage from './message/showMessage.js'
+export default {
+ name: 'environment',
+ data: function() {
+ return {
+ serviceList: [],
+ type: {
+ edit: true,
+ service: "ansible",
+ tag: "default"
+ },
+ context: ''
+ }
+ },
+ components: {
+ 'service-modal': service_modal
+ },
+ created: function() {
+ var self = this;
+ var msgTitle = "GET -- SERVICE LIST";
+ var errorInfo = 'Unable to get the service list';
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/getAllServices",
+ method: "GET",
+ success: function(data) {
+ if(data['code'] == 200) {
+ self.serviceList = data['result'];
+ } else {
+ showMessage(data['code'], msgTitle, errorInfo, data['error']);
+ }
+ },
+ error: function(obj, status, msg) {
+ showMessage("error", msgTitle, errorInfo, msg);
+ }
+ });
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/getContext",
+ method: "GET",
+ success: function(data) {
+ if(data['code'] == 200) {
+ self.context = data['result']['context'];
+ } else {
+ showMessage(data['code'], msgTitle, errorInfo, data['error']);
+ }
+ },
+ error: function(obj, status, msg) {
+ showMessage("error", msgTitle, errorInfo, msg);
+ }
+ });
+ },
+ methods: {
+ addNewService: function(){
+ this.type.edit = false;
+ this.type.tag = "abc";
+ this.type.service = null;
+ this.type.originName = null;
+ if(this.type.content){
+ this.type.content = null;
+ }
+ $("#myModal").modal("show");
+ },
+ plusAService: function(serviceName){
+ var item = {'id': '', 'name': '', 'time': ''};
+ item['id'] = this.serviceList[this.serviceList.length - 1]['id'] + 1;
+ item['name'] = serviceName;
+ item['time'] = this.getFormatDate(new Date());
+ this.serviceList.push(item);
+ },
+ editAServiceName: function(edition) {
+ for(var i = 0;i < this.serviceList.length; i++) {
+ if(edition['oldName'] == this.serviceList[i]['name']) {
+ this.serviceList[i]['name'] = edition['newName'];
+ }
+ }
+ },
+ editService: function(serviceName){
+ this.type.edit = true;
+ this.type.tag = "abc";
+ this.type.service = serviceName;
+ this.type.originName = serviceName;
+ if(this.type.content){
+ this.type.content = null;
+ }
+ console.log(this.type);
+ var self = this;
+ var msgTitle = "GET -- SERVICE";
+ var errorInfo = "Unable to get the service: <strong>" + self.type.service + "</strong>";
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/getService",
+ method: "GET",
+ data: {
+ "serviceName": serviceName
+ },
+ success: function(data) {
+ if(data['code'] == 200) {
+ self.type.tag = "hhh";
+ self.type.content = data['result'];
+ self.type.originName = self.type.service;
+ } else {
+ showMessage(data['code'], msgTitle, errorInfo, data['error']);
+ }
+ },
+ error: function(obj, status, msg) {
+ showMessage("error", msgTitle, errorInfo, msg);
+ }
+ });
+ $("#myModal").modal("show");
+ },
+ deleteService: function(serviceName){
+ var msgTitle = "DELETE -- SERVICE";
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/deleteService",
+ method: "POST",
+ data: {
+ "serviceName": serviceName
+ },
+ success: function(data) {
+ if(data['code'] == 200) {
+ showMessage(data['code'], msgTitle, "Delete <strong>" + serviceName + "</strong> successfully.");
+ } else {
+ showMessage(data['code'], msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", data['error']);
+ }
+ },
+ error: function(obj, status, msg) {
+ showMessage("error", msgTitle, "Failed to delete <strong>" + serviceName + "</strong>", msg);
+ }
+ });
+ for(var i = 0;i < this.serviceList.length; i++) {
+ if(serviceName == this.serviceList[i]['name']) {
+ this.serviceList.splice(i, 1);
+ }
+ }
+ },
+ creationFailHandler: function(serviceName) {
+ for(var i = 0; i < this.serviceList.length; i++) {
+ if(serviceName == this.serviceList[i].name) {
+ this.serviceList.splice(i, 1);
+ }
+ }
+ },
+ getFormatDate: function(date) {
+ var year = date.getFullYear();
+ var month = date.getMonth() + 1;
+ var strDate = date.getDate();
+ var seperator = "-";
+ if(month >= 1 && month <= 9) {
+ month = "0" + month;
+ }
+ if(strDate >= 1 && strDate <= 9) {
+ strDate = "0" + strDate;
+ }
+ var formatDate = year + seperator + month + seperator + strDate;
+ return formatDate;
+ },
+ saveContext: function() {
+ var self = this;
+ var msgTitle = "SAVE -- CONTEXT";
+ var errorInfo = "Failed to save context!";
+ $.ajax({
+ url: this.global.SERVER_ADDR + "env/editContext",
+ method: "POST",
+ data: {
+ context: self.context
+ },
+ success: function(data) {
+ if(data['code'] == 200) {
+ showMessage(data['code'], msgTitle, "Save context successfully!");
+ } else {
+ showMessage(data['code'], msgTitle, errorInfo, data['error']);
+ }
+ },
+ error: function(obj, status, msg) {
+ showMessage("error", msgTitle, errorInfo, msg);
+ }
+ });
+ }
+ }
+}
+</script>
Code Review / bottlenecks.git / blobdiff