--- /dev/null
+<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
Code Review / bottlenecks.git / blobdiff