From ee2ec8ff90e15dfb777eb7c99195fb03a36e8bd2 Mon Sep 17 00:00:00 2001 From: denz Date: Thu, 13 Aug 2015 18:15:29 +0900 Subject: [PATCH] Add alarm configuration UI --- .../common/services/alarm-ajax.service.js | 148 ++++++ .../alarm/alarm-group-member.controller.js | 305 +++++++++++++ .../alarm/alarm-pinpoint-user.controller.js | 427 ++++++++++++++++++ .../alarm/alarm-rule.controller.js | 417 +++++++++++++++++ .../alarm/alarm-user-group.controller.js | 388 ++++++++++++++++ .../configuration/configuration.controller.js | 57 +++ .../general/general.controller.js | 30 ++ .../features/navbar/navbar.directive.js | 5 +- .../main/webapp/features/navbar/navbar.html | 13 +- web/src/main/webapp/index.html | 299 ++++++++++-- web/src/main/webapp/styles/configuration.css | 368 +++++++++++++++ web/src/main/webapp/styles/timer.css | 90 ++++ 12 files changed, 2512 insertions(+), 35 deletions(-) create mode 100644 web/src/main/webapp/common/services/alarm-ajax.service.js create mode 100644 web/src/main/webapp/features/configuration/alarm/alarm-group-member.controller.js create mode 100644 web/src/main/webapp/features/configuration/alarm/alarm-pinpoint-user.controller.js create mode 100644 web/src/main/webapp/features/configuration/alarm/alarm-rule.controller.js create mode 100644 web/src/main/webapp/features/configuration/alarm/alarm-user-group.controller.js create mode 100644 web/src/main/webapp/features/configuration/configuration.controller.js create mode 100644 web/src/main/webapp/features/configuration/general/general.controller.js create mode 100644 web/src/main/webapp/styles/configuration.css create mode 100644 web/src/main/webapp/styles/timer.css diff --git a/web/src/main/webapp/common/services/alarm-ajax.service.js b/web/src/main/webapp/common/services/alarm-ajax.service.js new file mode 100644 index 000000000..1ab72a8f0 --- /dev/null +++ b/web/src/main/webapp/common/services/alarm-ajax.service.js @@ -0,0 +1,148 @@ +(function($) { + 'use strict'; + + /** + * (en) Alarm 설정의 모든 Ajax 요청을 대리함. + * @ko Alarm 설정의 모든 Ajax 요청을 대리함. + * @group Service + * @name AlarmAjaxService + * @class + */ + pinpointApp.constant('AlarmAjaxServiceConfig', { + group: "/userGroup.pinpoint", //POST, GET, PUT, DELETE + groupMember: "/userGroup/member.pinpoint", + pinpointUser: "/user.pinpoint", + alramRule: "/alarmRule.pinpoint", + ruleList: "" + }); + + pinpointApp.service('AlarmAjaxService', [ 'AlarmAjaxServiceConfig', function ($config) { + this.getUserGroupList = function(callback) { + $.ajax($config.group, { + type: "GET" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.createUserGroup = function(data, callback ) { + $.ajax($config.group, { + type: "POST", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.updateUserGroup = function(data, callback ) { + $.ajax($config.group, { + type: "PUT", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.removeUserGroup = function(data, callback ) { + $.ajax($config.group, { + type: "DELETE", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.addMemberInGroup = function(data, callback ) { + console.log( "addMember :", data ); + $.ajax($config.groupMember, { + type: "POST", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.getGroupMemberListInGroup = function(data, callback) { + $.ajax($config.groupMember, { + type: "GET", + data: data + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.removeMemberInGroup = function(data, callback) { + $.ajax($config.groupMember, { + type: "DELETE", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.getPinpointUserList = function(callback) { + $.ajax($config.pinpointUser, { + type: "GET" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.createPinpointUser = function(data, callback ) { + $.ajax($config.pinpointUser, { + type: "POST", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.updatePinpointUser = function(data, callback ) { + $.ajax($config.pinpointUser, { + type: "PUT", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.removePinpointUser = function(data, callback ) { + $.ajax($config.pinpointUser, { + type: "DELETE", + data: JSON.stringify(data), + contentType: "application/json" + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + this.getRuleList = function(data, callback) { + $.ajax($config.alramRule, { + type: "GET", + data: data + }).done(function(result) { + callback(result); + }).fail(function(error) { + callback(error); + }); + }; + }]); +})(jQuery); \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/alarm/alarm-group-member.controller.js b/web/src/main/webapp/features/configuration/alarm/alarm-group-member.controller.js new file mode 100644 index 000000000..5654e35ad --- /dev/null +++ b/web/src/main/webapp/features/configuration/alarm/alarm-group-member.controller.js @@ -0,0 +1,305 @@ +(function($) { + 'use strict'; + /** + * (en)AlarmGroupMemberCtrl + * @ko AlarmGroupMemberCtrl + * @group Controller + * @name AlarmGroupMemberCtrl + * @class + */ + pinpointApp.constant('AlarmGroupMemberConfig', { + }); + + pinpointApp.controller('AlarmGroupMemberCtrl', [ '$scope','$element', 'AlarmGroupMemberConfig', 'AlarmAjaxService', + function ($scope, $element, $constant, $ajaxService) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init AlarmGroupMemberCtrl", $element ); + + var $elWrapper = $element.find(".wrapper"); + var $elTotal = $element.find(".total"); + var $elLoading = $element.find(".some-loading"); + var $elAlert = $element.find(".some-alert"); + var $elGuideMessage = $element.find(".guide-message"); + var $elFilterInput = $element.find("div.filter-input input"); + var $elFilterEmpty = $element.find("div.filter-input button.trash"); + var $removeTemplate = $([ + '', + '', + '', + '' + ].join("")); + + var currentUserGroupID = ""; + var isLoadedGroupMemberList = false; + var isRemoving = false; + var groupMemberList = $scope.groupMemberList = []; + + var $elUL = $element.find(".some-list-content ul"); + $elUL.on("click", "span.remove", function($event) { + isRemoving = true; + $($event.toElement).parent().addClass("remove").find("span.remove").hide().end().append($removeTemplate); + }).on("click", "button.confirm-cancel", function($event) { + $($event.toElement).parents("li.remove") + .find("span.right").remove().end() + .find("span.remove").show().end() + .removeClass("remove"); + isRemoving = false; + }).on("click", "button.confirm-remove", function($event) { + showLoading( false ); + var $el = $($event.toElement).parents("li.remove"); + removeMember( $el.prop("id").split("_")[1] ); + }); + + var enterLeaveData = [ + { selector: "span.remove", name: "remove" }, + { selector: "button.confirm-cancel", name: "removeCancel" }, + { selector: "button.confirm-remove", name: "removeConfirm" } + ]; + for( var i = 0 ; i < enterLeaveData.length ; i++ ) { + (function( selector, messageName ) { + $elUL.on("mouseenter", selector, function() { + $scope.onEnter(messageName); + }).on("mouseleave", selector, function() { + $scope.onLeave(messageName); + }) + })(enterLeaveData[i].selector, enterLeaveData[i].name) + } + + function show( $el ) { + $el.removeClass("hide-me"); + } + function hide() { + for( var i = 0 ; i < arguments.length ; i++ ) { + arguments[i].addClass("hide-me"); + } + } + function showLoading( isEdit ) { + $elLoading[ isEdit ? "removeClass" : "addClass" ]("has-not-edit"); + $elLoading.removeClass("hide-me"); + } + function showAlert( message, bIsSend ) { + $elAlert.find(".message").html( message ).end().removeClass("hide-me").animate({ + height: 300 + }, 500, function() { + if ( bIsSend ) { + callbackAddUser(); + } + }); + } + function callbackAddUser( bIsSuccess ) { + $scope.$parent.$broadcast( "alarmPinpointUser.configuration.addUserCallback", bIsSuccess ); + } + function removeFromList( memberID ) { + if ( $scope.groupMemberList != groupMemberList ) { + for( var i = 0 ; i < groupMemberList.length ; i++ ) { + if ( groupMemberList[i].memberId == memberID ) { + groupMemberList.splice(i, 1); + break; + } + } + } + for( var i = 0 ; i < $scope.groupMemberList.length ; i++ ) { + if ( $scope.groupMemberList[i].memberId == memberID ) { + $scope.groupMemberList.splice(i, 1); + break; + } + } + } + + function addMember( memberId ) { + $ajaxService.addMemberInGroup({ "userGroupId": currentUserGroupID, "memberId": memberId }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage, true ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + groupMemberList.push({ + "userGroupId": currentUserGroupID, + "memberId": memberId + }); + setTotal(groupMemberList.length); + hide( $elLoading ); + }); + callbackAddUser( true ); + } + }); + } + function removeMember( memberID ) { + $ajaxService.removeMemberInGroup({ "userGroupId": currentUserGroupID, "memberId": memberID }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage, false ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + removeFromList( memberID ); + setTotal(groupMemberList.length); + hide( $elLoading ); + isRemoving = false; + }); + } + }); + } + function loadList() { + $ajaxService.getGroupMemberListInGroup({ "userGroupId": currentUserGroupID }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resultData.errormessage, false ); + // @TODO + // 에러 처리 + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + isLoadedGroupMemberList = true; + $scope.$apply(function() { + groupMemberList = $scope.groupMemberList = resultData; + }); + setTotal(groupMemberList.length); + hide( $elLoading ); + $scope.onLeave(); + } + }); + }; + function setTotal(n) { + $elTotal.html( "(" + n + ")"); + }; + function setFilterBackground() { + $elWrapper.css("background-color", "#FFFFF1"); + }; + function unsetFilterBackground() { + $elWrapper.css("background-color", "#FFF"); + }; + function hasUser( userID ) { + return $( "#" + $scope.prefix + userID ).length > 0; + } + + $scope.prefix = "alarmGroupMember_"; + $scope.onRefresh = function() { + if ( isRemoving == true ) return; + + $elFilterInput.val(""); + showLoading( false ); + loadList(); + }; + $scope.onInputFilter = function($event) { + if ( isRemoving == true ) return; + + if ( $event.keyCode == 13 ) { // Enter + $scope.onFilterGroup(); + return; + } + if ($.trim( $elFilterInput.val() ).length >= 3 ) { + $elFilterEmpty.removeClass("disabled"); + } else { + $elFilterEmpty.addClass("disabled"); + } + }; + $scope.onFilterGroup = function() { + if ( isRemoving == true ) return; + var query = $.trim( $elFilterInput.val() ); + if ( query.length != 0 && query.length < 3 ) { + $scope.onEnter("greater2"); + return; + } + if ( query == "" ) { + if ( $scope.groupMemberList.length != groupMemberList.length ) { + $scope.groupMemberList = groupMemberList; + unsetFilterBackground(); + } + $elFilterEmpty.addClass("disabled"); + } else { + var newFilterGroupMember = []; + var length = groupMemberList.length; + for( var i = 0 ; i < groupMemberList.length ; i++ ) { + if ( groupMemberList[i].memberId.indexOf( query ) != -1 ) { + newFilterGroupMember.push( groupMemberList[i] ); + } + } + $scope.groupMemberList = newFilterGroupMember; + setFilterBackground(); + } + }; + $scope.onFilterEmpty = function() { + if ( isRemoving == true ) return; + if ( $.trim( $elFilterInput.val() ) == "" ) return; + $elFilterInput.val(""); + $scope.onFilterGroup(); + }; + $scope.onCloseAlert = function() { + $elAlert.animate({ + height: 50, + }, 100, function() { + hide( $elAlert, $elLoading ); + }); + }; + // onEnter, onLeave + $scope.onEnter = function( type ) { + var message; + switch( type ) { + case "title": + message = "'" + groupMemberList.length + "'은 그룹에 등록된 사용자 수입니다."; + break; + case "refresh": + message = "멤버 목록을 갱신합니다."; + break; + case "filterInput": + message = "찾으려는 멤버를 입력하세요."; + break; + case "filterSearch": + message = "원하는 멤버를 검색하세요."; + break; + case "filterEmpty": + message = "검색어를 삭제하고 모든 멤버를 표시합니다."; + break; + case "remove": + message = "멤버를 삭제합니다."; + break; + case "removeCancel": + message = "삭제를 취소합니다."; + break; + case "removeConfirm": + message = "멤버를 삭제합니다."; + break; + case "notEmpty": + message = "공백은 입력 할 수 없습니다."; + break; + case "greater2": + message = "3글자 이상 입력하세요."; + break; + } + $elGuideMessage.html(message); + }; + $scope.onLeave = function( type ) { + $elGuideMessage.html(currentUserGroupID + "에 등록된 멤버입니다."); + } + $scope.$on("alarmGroupMember.configuration.load", function( event, userGroupID ) { + currentUserGroupID = userGroupID; +// if ( isLoadedGroupMemberList === false ) { + loadList(); +// } + }); + $scope.$on("alarmGroupMember.configuration.addUser", function( event, userID ) { + showLoading( false ); + if ( hasUser( userID ) == false ) { + addMember( userID ); + } else { + showAlert( "이미 등록된 사용자입니다.", true ); + } + }); + $scope.$on("alarmGroupMember.configuration.updateUser", function( event, oUser ) { + // 사용자 정보 갱신됨( 부서, 이름 ) + if ( hasUser( oUser.userId ) ) { + //updateFromList( oUser ); + } + }); + $scope.$on("alarmGroupMember.configuration.removeUser", function( event, userID ) { + if ( hasUser( userID ) ) { + removeFromList( userID ); + } + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/alarm/alarm-pinpoint-user.controller.js b/web/src/main/webapp/features/configuration/alarm/alarm-pinpoint-user.controller.js new file mode 100644 index 000000000..500abf30f --- /dev/null +++ b/web/src/main/webapp/features/configuration/alarm/alarm-pinpoint-user.controller.js @@ -0,0 +1,427 @@ +(function($) { + 'use strict'; + /** + * (en)AlarmPinpointUserCtrl + * @ko AlarmPinpointUserCtrl + * @group Controller + * @name AlarmPinpointUserCtrl + * @class + */ + pinpointApp.constant('AlarmPinpointUserConfig', { + }); + + pinpointApp.controller('AlarmPinpointUserCtrl', [ '$scope','$element', 'AlarmPinpointUserConfig', 'AlarmAjaxService', + function ($scope, $element, $constant, $ajaxService) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init AlarmPinpointUserCtrl", $element ); + + var $elWrapper = $element.find(".wrapper"); + var $elTotal = $element.find(".total"); + var $elLoading = $element.find(".some-loading"); + var $elAlert = $element.find(".some-alert"); + var $elGuideMessage = $element.find(".guide-message"); + var $elFilterInput = $element.find("div.filter-input input"); + var $elFilterEmpty = $element.find("div.filter-input button.trash"); + var $elEdit = $element.find(".some-edit-content"); + var $elEditInputUserID = $elEdit.find("input[name=userID]"); + var $elEditInputName = $elEdit.find("input[name=name]"); + var $elEditInputDepartment = $elEdit.find("input[name=department]"); + var $elEditInputPhone = $elEdit.find("input[name=phone]"); + var $elEditInputEmail = $elEdit.find("input[name=email]"); + var $elEditGuide = $elEdit.find(".title-message"); + var $removeTemplate = $([ + '', + '', + '', + '' + ].join("")); + + var isLoadedPinpointUserList = false; + var isCreate = true; // update + var isRemoving = false; + var pinpointUserList = $scope.pinpointUserList = []; + + var $elUL = $element.find(".some-list-content ul"); + $elUL.on("dblclick", "li", function($event) { + $scope.onUpdate( $event ); + }).on("dblclick", "span.contents", function($event) { + $scope.onUpdate( $event ); + }).on("click", "button.move", function($event) { + showLoading( false ); + addUserToGroup( $($event.toElement).parents("li").prop("id").split("_")[1] ); + }).on("click", "span.remove", function($event) { + isRemoving = true; + $($event.toElement).parent().addClass("remove").find("span.remove").hide().end().find("button.move").addClass("disabled").end().append($removeTemplate); + }).on("click", "button.confirm-cancel", function($event) { + $($event.toElement).parents("li.remove") + .find("span.right").remove().end() + .find("span.remove").show().end() + .find("button.move").removeClass("disabled").end() + .removeClass("remove"); + isRemoving = false; + }).on("click", "button.confirm-remove", function($event) { + showLoading( false ); + removeUser( $($event.toElement).parents("li.remove").prop("id").split("_")[1] ); + }); + + var enterLeaveData = [ + { selector: "li", name: "contents" }, + { selector: "span.contents", name: "contents" }, + { selector: "span.remove", name: "remove" }, + { selector: "button.confirm-cancel", name: "removeCancel" }, + { selector: "button.confirm-remove", name: "removeConfirm" } + ]; + for( var i = 0 ; i < enterLeaveData.length ; i++ ) { + (function( selector, messageName ) { + $elUL.on("mouseenter", selector, function() { + $scope.onEnter(messageName); + }).on("mouseleave", selector, function() { + $scope.onLeave(messageName); + }) + })(enterLeaveData[i].selector, enterLeaveData[i].name) + } + + function show( $el ) { + $el.removeClass("hide-me"); + } + function hide() { + for( var i = 0 ; i < arguments.length ; i++ ) { + arguments[i].addClass("hide-me"); + } + } + function showLoading( isEdit ) { + $elLoading[ isEdit ? "removeClass" : "addClass" ]("has-not-edit"); + $elLoading.removeClass("hide-me"); + } + function showAlert( message ) { + $elAlert.find(".message").html( message ).end().removeClass("hide-me").animate({ + height: 300 + }, 500, function() {}); + } + function searchUser( userID ) { + var oUser; + var len = pinpointUserList.length; + for( var i = 0 ; i < len ; i++ ) { + if ( pinpointUserList[i].userId == userID ) { + oUser = pinpointUserList[i]; + break; + } + } + return oUser; + } + function addUserToGroup( userID ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.addUser", searchUser( userID ).userId ); + } + function updatedUser( oUser ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.updateUser", oUser ); + } + function removedUser( userID ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.removeUser", userID ); + } + function createUser( userID, userName, userDepartment, userPhone, userEmail ) { + var oNewUser = { + "userId": userID, + "name": userName, + "department": userDepartment, + "phoneNumber": userPhone, + "email": userEmail + }; + $ajaxService.createPinpointUser(oNewUser, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + pinpointUserList.push(oNewUser); + setTotal(pinpointUserList.length); + }); + hide( $elLoading, $elEdit ); + } + + }); + } + function updateUser( userID, userName, userDepartment, userPhone, userEmail ) { + var oUpdateUser = { + "userId": userID, + "name": userName, + "department": userDepartment, + "phoneNumber": userPhone, + "email": userEmail + }; + $ajaxService.updatePinpointUser(oUpdateUser, function( resultData ) { + if ( resultData.errorcode || resultData.exception ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < pinpointUserList.length ; i++ ) { + if ( pinpointUserList[i].userId == userID ) { + pinpointUserList[i].name = userName; + pinpointUserList[i].department = userDepartment; + pinpointUserList[i].phoneNumber = userPhone; + pinpointUserList[i].email = userEmail; + } + } + }); + hide( $elLoading, $elEdit ); + updatedUser( oUpdateUser ); + } + }); + } + function removeUser( userID ) { + $ajaxService.removePinpointUser( { "userId": userID }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < pinpointUserList.length ; i++ ) { + if ( pinpointUserList[i].userId == userID ) { + pinpointUserList.splice(i, 1); + break; + } + } + setTotal(pinpointUserList.length); + hide( $elLoading ); + isRemoving = false; + removedUser( userID ); + }); + } + }); + } + function loadList( isFirst ) { + $ajaxService.getPinpointUserList( function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resultData.errormessage ); + // @TODO + // 에러 처리 + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + isLoadedPinpointUserList = true; + $scope.$apply(function() { + pinpointUserList = $scope.pinpointUserList = resultData; + }); + setTotal(pinpointUserList.length); + hide( $elLoading ); + $scope.onLeave(); + } + }); + }; + function setTotal(n) { + $elTotal.html( "(" + n + ")"); + }; + function setFilterBackground() { + $elWrapper.css("background-color", "#FFFFF1"); + }; + function unsetFilterBackground() { + $elWrapper.css("background-color", "#FFF"); + }; + function hasDuplicateID( userID ) { + var len = pinpointUserList.length; + var has = false; + for( var i = 0 ; i < pinpointUserList.length ; i++ ) { + if ( pinpointUserList[i].userId == userID ) { + has = true; + break; + } + } + return has; + } + function loadGroupMember( userGroupID ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.load", userGroupID ); + } + + $scope.onRefresh = function() { + if ( isRemoving == true ) return; + + $elFilterInput.val(""); + showLoading( false ); + loadList( false ); + }; + $scope.onCreate = function() { + if ( isRemoving == true ) return; + + isCreate = true; + $elEditGuide.html( "Create new pinpoint user" ); + $elEditInputUserID.removeProp("disabled"); + $elEditInputUserID.val(""); + $elEditInputName.val(""); + $elEditInputDepartment.val(""); + $elEditInputPhone.val(""); + $elEditInputEmail.val(""); + show( $elEdit ); + $elEditInputUserID.focus(); + }; + $scope.onUpdate = function($event) { + if ( isRemoving == true ) return; + + var tagName = $event.toElement.tagName.toLowerCase(); + var $el = $( $event.toElement ); + if ( tagName != "li" && tagName != "span") return; + if ( tagName == "span" && $el.hasClass("remove") ) return; + + isCreate = false; + $el = ( tagName == "span" ) ? $el.parent() : $el; + var oUser = searchUser( $el.prop("id").split("_")[1] ); + + $elEditGuide.html( "아래 항목을 수정할 수 있습니다." ); + $elEditInputUserID.prop("disabled", "disabled"); + $elEditInputUserID.val( oUser.userId ); + $elEditInputName.val( oUser.name ); + $elEditInputDepartment.val( oUser.department ); + $elEditInputPhone.val( oUser.phoneNumber ); + $elEditInputEmail.val( oUser.email ); + show( $elEdit ); + $elEditInputName.focus().select(); + }; + $scope.onInputFilter = function($event) { + if ( isRemoving == true ) return; + + if ( $event.keyCode == 13 ) { // Enter + $scope.onFilterGroup(); + return; + } + if ($.trim( $elFilterInput.val() ).length >= 3 ) { + $elFilterEmpty.removeClass("disabled"); + } else { + $elFilterEmpty.addClass("disabled"); + } + }; + $scope.onFilterGroup = function() { + if ( isRemoving == true ) return; + var query = $.trim( $elFilterInput.val() ); + if ( query.length != 0 && query.length < 3 ) { + $scope.onEnter("greater2"); + return; + } + if ( query == "" ) { + if ( $scope.pinpointUserList.length != pinpointUserList.length ) { + $scope.pinpointUserList = pinpointUserList; + unsetFilterBackground(); + } + $elFilterEmpty.addClass("disabled"); + } else { + var newFilterUserGroup = []; + var length = pinpointUserList.length; + for( var i = 0 ; i < pinpointUserList.length ; i++ ) { + if ( pinpointUserList[i].name.indexOf( query ) != -1 || pinpointUserList[i].department.indexOf( query ) != -1 ) { + newFilterUserGroup.push( pinpointUserList[i] ); + } + } + $scope.pinpointUserList = newFilterUserGroup; + setFilterBackground(); + } + }; + $scope.onFilterEmpty = function() { + if ( isRemoving == true ) return; + if ( $.trim( $elFilterInput.val() ) == "" ) return; + $elFilterInput.val(""); + $scope.onFilterGroup(); + }; + $scope.onInputEdit = function($event) { + if ( $event.keyCode == 13 ) { // Enter + $scope.onApplyEdit(); + } else if ( $event.keyCode == 27 ) { // ESC + $scope.onCancelEdit(); + $event.stopPropagation(); + } + }; + $scope.onCancelEdit = function() { + hide( $elEdit ); + }; + $scope.onApplyEdit = function() { + var userID = $.trim( $elEditInputUserID.val() ); + var userName = $.trim( $elEditInputName.val() ); + var userDepartment = $.trim( $elEditInputDepartment.val() ); + var userPhone = $.trim( $elEditInputPhone.val() ); + var userEmail = $.trim( $elEditInputEmail.val() ); + + if ( userID == "" || userName == "" ) { + $scope.onEnter("notEmpty"); + return; + } + // TODO phone - 체크 + // TODO email 포맷 체크 + + showLoading( true ); + if ( hasDuplicateID( userID ) && isCreate == true) { + showAlert( "동일한 userID를 가진 사용자가 이미 있습니다." ); + return; + } + if ( isCreate ) { + createUser( userID, userName, userDepartment, userPhone, userEmail ); + } else { + updateUser( userID, userName, userDepartment, userPhone, userEmail ); + } + }; + $scope.onCloseAlert = function() { + $elAlert.animate({ + height: 50, + }, 100, function() { + hide( $elAlert, $elLoading ); + }); + }; + // onEnter, onLeave + $scope.onEnter = function( type ) { + var message; + switch( type ) { + case "title": + message = "'" + pinpointUserList.length + "'은 Pinpoint에 등록된 사용자의 수입니다."; + break; + case "refresh": + message = "사용자 목록을 갱신합니다."; + break; + case "create": + message = "새로운 사용자를 생성합니다."; + break; + case "filterInput": + message = "찾으려는 사용자를 입력하세요."; + break; + case "filterSearch": + message = "원하는 사용자를 검색하세요."; + break; + case "filterEmpty": + message = "검색어를 삭제하고 모든 사용자를 표시합니다."; + break; + case "contents": + message = "더블 클릭하면 수정할 수 있습니다."; + break; + case "remove": + message = "사용자를 삭제합니다."; + break; + case "removeCancel": + message = "삭제를 취소합니다."; + break; + case "removeConfirm": + message = "사용자를 삭제합니다."; + break; + case "notEmpty": + message = "공백은 입력 할 수 없습니다."; + break; + case "greater2": + message = "3글자 이상 입력하세요."; + break; + } + $elGuideMessage.html(message); + }; + $scope.onLeave = function( type ) { + $elGuideMessage.html("Pinpoint 사용자 목록입니다."); + } + $scope.$on("alarmPinpointUser.configuration.load", function() { + if ( isLoadedPinpointUserList === false ) { + loadList( true ); + } + }); + $scope.$on("alarmPinpointUser.configuration.addUserCallback", function( event ) { + hide($elLoading); + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/alarm/alarm-rule.controller.js b/web/src/main/webapp/features/configuration/alarm/alarm-rule.controller.js new file mode 100644 index 000000000..01fc28105 --- /dev/null +++ b/web/src/main/webapp/features/configuration/alarm/alarm-rule.controller.js @@ -0,0 +1,417 @@ +(function($) { + 'use strict'; + /** + * (en)AlarmRuleCtrl + * @ko AlarmRuleCtrl + * @group Controller + * @name AlarmRuleCtrl + * @class + */ + pinpointApp.constant('AlarmRuleConfig', { + }); + + pinpointApp.controller('AlarmRuleCtrl', [ '$scope','$element', 'AlarmRuleConfig', 'AlarmAjaxService', + function ($scope, $element, $constant, $ajaxService) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init AlarmRuleCtrl", $element ); + + var $elWrapper = $element.find(".wrapper"); + var $elTotal = $element.find(".total"); + var $elLoading = $element.find(".some-loading"); + var $elAlert = $element.find(".some-alert"); + var $elGuideMessage = $element.find(".guide-message"); + var $elFilterInput = $element.find("div.filter-input input"); + var $elFilterEmpty = $element.find("div.filter-input button.trash"); + var $elEdit = $element.find(".some-edit-content"); + var $elEditInputUserID = $elEdit.find("input[name=userID]"); + var $elEditInputName = $elEdit.find("input[name=name]"); + var $elEditInputDepartment = $elEdit.find("input[name=department]"); + var $elEditInputPhone = $elEdit.find("input[name=phone]"); + var $elEditInputEmail = $elEdit.find("input[name=email]"); + var $elEditGuide = $elEdit.find(".title-message"); + var $removeTemplate = $([ + '', + '', + '', + '' + ].join("")); + + var currentUserGroupID = ""; + var isLoadedRuleList = false; + var isCreate = true; // update + var isRemoving = false; + var ruleList = $scope.ruleList = []; + + var $elUL = $element.find(".some-list-content ul"); + $elUL.on("dblclick", "li", function($event) { + $scope.onUpdate( $event ); + }).on("dblclick", "span.contents", function($event) { + $scope.onUpdate( $event ); + }).on("click", "button.move", function($event) { + }).on("click", "span.remove", function($event) { + isRemoving = true; + $($event.toElement).parent().addClass("remove").find("span.remove").hide().end().find("button.move").addClass("disabled").end().append($removeTemplate); + }).on("click", "button.confirm-cancel", function($event) { + $($event.toElement).parents("li.remove") + .find("span.right").remove().end() + .find("span.remove").show().end() + .find("button.move").removeClass("disabled").end() + .removeClass("remove"); + isRemoving = false; + }).on("click", "button.confirm-remove", function($event) { + showLoading( false ); + removeUser( $($event.toElement).parents("li.remove").prop("id").split("_")[1] ); + }); + + var enterLeaveData = [ + { selector: "li", name: "contents" }, + { selector: "span.contents", name: "contents" }, + { selector: "span.remove", name: "remove" }, + { selector: "button.confirm-cancel", name: "removeCancel" }, + { selector: "button.confirm-remove", name: "removeConfirm" } + ]; + for( var i = 0 ; i < enterLeaveData.length ; i++ ) { + (function( selector, messageName ) { + $elUL.on("mouseenter", selector, function() { + $scope.onEnter(messageName); + }).on("mouseleave", selector, function() { + $scope.onLeave(messageName); + }) + })(enterLeaveData[i].selector, enterLeaveData[i].name) + } + + function show( $el ) { + $el.removeClass("hide-me"); + } + function hide() { + for( var i = 0 ; i < arguments.length ; i++ ) { + arguments[i].addClass("hide-me"); + } + } + function showLoading( isEdit ) { + $elLoading[ isEdit ? "removeClass" : "addClass" ]("has-not-edit"); + $elLoading.removeClass("hide-me"); + } + function showAlert( message ) { + $elAlert.find(".message").html( message ).end().removeClass("hide-me").animate({ + height: 300 + }, 500, function() {}); + } + function searchUser( userID ) { + var oUser; + var len = ruleList.length; + for( var i = 0 ; i < len ; i++ ) { + if ( ruleList[i].userId == userID ) { + oUser = ruleList[i]; + break; + } + } + return oUser; + } + function createUser( userID, userName, userDepartment, userPhone, userEmail ) { + var oNewUser = { + "userId": userID, + "name": userName, + "department": userDepartment, + "phoneNumber": userPhone, + "email": userEmail + }; + $ajaxService.createPinpointUser(oNewUser, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + ruleList.push(oNewUser); + setTotal(ruleList.length); + }); + hide( $elLoading, $elEdit ); + } + + }); + } + function updateUser( userID, userName, userDepartment, userPhone, userEmail ) { + var oUpdateUser = { + "userId": userID, + "name": userName, + "department": userDepartment, + "phoneNumber": userPhone, + "email": userEmail + }; + $ajaxService.updatePinpointUser(oUpdateUser, function( resultData ) { + if ( resultData.errorcode || resultData.exception ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < ruleList.length ; i++ ) { + if ( ruleList[i].userId == userID ) { + ruleList[i].name = userName; + ruleList[i].department = userDepartment; + ruleList[i].phoneNumber = userPhone; + ruleList[i].email = userEmail; + } + } + }); + hide( $elLoading, $elEdit ); + updatedUser( oUpdateUser ); + } + }); + } + function removeUser( userID ) { + $ajaxService.removePinpointUser( { "userId": userID }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < ruleList.length ; i++ ) { + if ( ruleList[i].userId == userID ) { + ruleList.splice(i, 1); + break; + } + } + setTotal(ruleList.length); + hide( $elLoading ); + isRemoving = false; + removedUser( userID ); + }); + } + }); + } + function loadList( isFirst ) { + $ajaxService.getRuleList( { "userGroupId": currentUserGroupID }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resultData.errormessage ); + // @TODO + // 에러 처리 + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + isLoadedRuleList = true; + $scope.$apply(function() { + ruleList = $scope.ruleList = resultData; + }); + setTotal(ruleList.length); + $('[data-toggle="alarm-popover"]').popover(); + hide( $elLoading ); + $scope.onLeave(); + + } + }); + }; + function setTotal(n) { + $elTotal.html( "(" + n + ")"); + }; + function setFilterBackground() { + $elWrapper.css("background-color", "#FFFFF1"); + }; + function unsetFilterBackground() { + $elWrapper.css("background-color", "#FFF"); + }; + function hasDuplicateID( userID ) { + var len = ruleList.length; + var has = false; + for( var i = 0 ; i < ruleList.length ; i++ ) { + if ( ruleList[i].userId == userID ) { + has = true; + break; + } + } + return has; + } + function loadGroupMember( userGroupID ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.load", userGroupID ); + } + + $scope.onRefresh = function() { + if ( isRemoving == true ) return; + + $elFilterInput.val(""); + showLoading( false ); + loadList( false ); + }; + $scope.onCreate = function() { + if ( isRemoving == true ) return; + + isCreate = true; + $elEditGuide.html( "Create new pinpoint user" ); + $elEditInputUserID.removeProp("disabled"); + $elEditInputUserID.val(""); + $elEditInputName.val(""); + $elEditInputDepartment.val(""); + $elEditInputPhone.val(""); + $elEditInputEmail.val(""); + show( $elEdit ); + $elEditInputUserID.focus(); + }; + $scope.onUpdate = function($event) { + if ( isRemoving == true ) return; + + var tagName = $event.toElement.tagName.toLowerCase(); + var $el = $( $event.toElement ); + if ( tagName != "li" && tagName != "span") return; + if ( tagName == "span" && $el.hasClass("remove") ) return; + + isCreate = false; + $el = ( tagName == "span" ) ? $el.parent() : $el; + var oUser = searchUser( $el.prop("id").split("_")[1] ); + + $elEditGuide.html( "아래 항목을 수정할 수 있습니다." ); + $elEditInputUserID.prop("disabled", "disabled"); + $elEditInputUserID.val( oUser.userId ); + $elEditInputName.val( oUser.name ); + $elEditInputDepartment.val( oUser.department ); + $elEditInputPhone.val( oUser.phoneNumber ); + $elEditInputEmail.val( oUser.email ); + show( $elEdit ); + $elEditInputName.focus().select(); + }; + $scope.onInputFilter = function($event) { + if ( isRemoving == true ) return; + + if ( $event.keyCode == 13 ) { // Enter + $scope.onFilterGroup(); + return; + } + if ($.trim( $elFilterInput.val() ).length >= 3 ) { + $elFilterEmpty.removeClass("disabled"); + } else { + $elFilterEmpty.addClass("disabled"); + } + }; + $scope.onFilterGroup = function() { + if ( isRemoving == true ) return; + var query = $.trim( $elFilterInput.val() ); + if ( query.length != 0 && query.length < 3 ) { + $scope.onEnter("greater2"); + return; + } + if ( query == "" ) { + if ( $scope.ruleList.length != ruleList.length ) { + $scope.ruleList = ruleList; + unsetFilterBackground(); + } + $elFilterEmpty.addClass("disabled"); + } else { + var newFilterUserGroup = []; + var length = ruleList.length; + for( var i = 0 ; i < ruleList.length ; i++ ) { + if ( ruleList[i].name.indexOf( query ) != -1 || ruleList[i].department.indexOf( query ) != -1 ) { + newFilterUserGroup.push( ruleList[i] ); + } + } + $scope.ruleList = newFilterUserGroup; + setFilterBackground(); + } + }; + $scope.onFilterEmpty = function() { + if ( isRemoving == true ) return; + if ( $.trim( $elFilterInput.val() ) == "" ) return; + $elFilterInput.val(""); + $scope.onFilterGroup(); + }; + $scope.onInputEdit = function($event) { + if ( $event.keyCode == 13 ) { // Enter + $scope.onApplyEdit(); + } else if ( $event.keyCode == 27 ) { // ESC + $scope.onCancelEdit(); + $event.stopPropagation(); + } + }; + $scope.onCancelEdit = function() { + hide( $elEdit ); + }; + $scope.onApplyEdit = function() { + var userID = $.trim( $elEditInputUserID.val() ); + var userName = $.trim( $elEditInputName.val() ); + var userDepartment = $.trim( $elEditInputDepartment.val() ); + var userPhone = $.trim( $elEditInputPhone.val() ); + var userEmail = $.trim( $elEditInputEmail.val() ); + + if ( userID == "" || userName == "" ) { + $scope.onEnter("notEmpty"); + return; + } + // TODO phone - 체크 + // TODO email 포맷 체크 + + showLoading( true ); + if ( hasDuplicateID( userID ) && isCreate == true) { + showAlert( "동일한 userID를 가진 사용자가 이미 있습니다." ); + return; + } + if ( isCreate ) { + createUser( userID, userName, userDepartment, userPhone, userEmail ); + } else { + updateUser( userID, userName, userDepartment, userPhone, userEmail ); + } + }; + $scope.onCloseAlert = function() { + $elAlert.animate({ + height: 50, + }, 100, function() { + hide( $elAlert, $elLoading ); + }); + }; + // onEnter, onLeave + $scope.onEnter = function( type ) { + var message; + switch( type ) { + case "title": + message = "'" + ruleList.length + "'은 Pinpoint에 등록된 사용자의 수입니다."; + break; + case "refresh": + message = "사용자 목록을 갱신합니다."; + break; + case "create": + message = "새로운 사용자를 생성합니다."; + break; + case "filterInput": + message = "찾으려는 사용자를 입력하세요."; + break; + case "filterSearch": + message = "원하는 사용자를 검색하세요."; + break; + case "filterEmpty": + message = "검색어를 삭제하고 모든 사용자를 표시합니다."; + break; + case "contents": + message = "더블 클릭하면 수정할 수 있습니다."; + break; + case "remove": + message = "사용자를 삭제합니다."; + break; + case "removeCancel": + message = "삭제를 취소합니다."; + break; + case "removeConfirm": + message = "사용자를 삭제합니다."; + break; + case "notEmpty": + message = "공백은 입력 할 수 없습니다."; + break; + case "greater2": + message = "3글자 이상 입력하세요."; + break; + } + $elGuideMessage.html(message); + }; + $scope.onLeave = function( type ) { + $elGuideMessage.html("Pinpoint 사용자 목록입니다."); + } + $scope.$on("alarmPinpointUser.configuration.load", function( event, userGroupID ) { + currentUserGroupID = userGroupID; +// if ( isLoadedRuleList === false ) { + loadList( true ); +// } + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/alarm/alarm-user-group.controller.js b/web/src/main/webapp/features/configuration/alarm/alarm-user-group.controller.js new file mode 100644 index 000000000..b163b8414 --- /dev/null +++ b/web/src/main/webapp/features/configuration/alarm/alarm-user-group.controller.js @@ -0,0 +1,388 @@ +(function($) { + 'use strict'; + /** + * (en)AlarmUserGroupCtrl + * @ko AlarmUserGroupCtrl + * @group Controller + * @name AlarmUserGroupCtrl + * @class + */ + pinpointApp.constant('AlarmUserGroupConfig', { + }); + + pinpointApp.controller('AlarmUserGroupCtrl', [ '$scope','$element', 'AlarmUserGroupConfig', 'AlarmAjaxService', + function ($scope, $element, $constant, $ajaxService) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init AlarmCtrl", $element ); + + var $elWrapper = $element.find(".wrapper"); + var $elTotal = $element.find(".total"); + var $elLoading = $element.find(".some-loading"); + var $elAlert = $element.find(".some-alert"); + var $elGuideMessage = $element.find(".guide-message"); + var $elFilterInput = $element.find("div.filter-input input"); + var $elFilterEmpty = $element.find("div.filter-input button.trash"); + var $elEdit = $element.find(".some-edit-content"); + var $elEditInput = $elEdit.find("input"); + var $elEditGuide = $elEdit.find(".title-message"); + var $removeTemplate = $([ + '', + '', + '', + '' + ].join("")); + + var selectedGroupNumber = ""; + var isLoadedUserGroupList = false; + var isCreate = true; // update + var isRemoving = false; + var userGroupList = $scope.userGroupList = []; + + var $elUL = $element.find(".some-list-content ul"); + $elUL.on("dblclick", "li", function($event) { + $scope.onUpdate( $event ); + }).on("dblclick", "span.contents", function($event) { + $scope.onUpdate( $event ); + }).on("click", "li", function($event) { + if ( isRemoving == true ) return; + selectGroup( $($event.toElement).prop("id").split("_")[1] ); + loadGroupMember( $($event.toElement).find("span.contents").html() ); + }).on("click", "span.contents", function($event) { + if ( isRemoving == true ) return; + selectGroup( $($event.toElement).parents("li").prop("id").split("_")[1] ); + loadGroupMember( $($event.toElement).html() ); + }).on("click", "span.remove", function($event) { + isRemoving = true; + $($event.toElement).parent().addClass("remove").find("span.remove").hide().end().append($removeTemplate); + }).on("click", "button.confirm-cancel", function($event) { + $($event.toElement).parents("li.remove") + .find("span.right").remove().end() + .find("span.remove").show().end() + .removeClass("remove"); + isRemoving = false; + }).on("click", "button.confirm-remove", function($event) { + showLoading( false ); + var $el = $($event.toElement).parents("li.remove"); + removeGroup( $el.prop("id").split("_")[1], $el.find("span.contents").html() ); + }); + + var enterLeaveData = [ + { selector: "li", name: "contents" }, + { selector: "span.contents", name: "contents" }, + { selector: "span.remove", name: "remove" }, + { selector: "button.confirm-cancel", name: "removeCancel" }, + { selector: "button.confirm-remove", name: "removeConfirm" } + ]; + for( var i = 0 ; i < enterLeaveData.length ; i++ ) { + (function( selector, messageName ) { + $elUL.on("mouseenter", selector, function() { + $scope.onEnter(messageName); + }).on("mouseleave", selector, function() { + $scope.onLeave(messageName); + }) + })(enterLeaveData[i].selector, enterLeaveData[i].name) + } + + function selectGroup( newSelectedGroupNumber ) { + if ( selectedGroupNumber != "" ) { + $( "#" + $scope.prefix + selectedGroupNumber ).removeClass("selected"); + } + console.log( $( "#" + $scope.prefix + newSelectedGroupNumber ) ); + $( "#" + $scope.prefix + newSelectedGroupNumber ).addClass("selected"); + selectedGroupNumber = newSelectedGroupNumber; + } + function show( $el ) { + $el.removeClass("hide-me"); + } + function hide() { + for( var i = 0 ; i < arguments.length ; i++ ) { + arguments[i].addClass("hide-me"); + } + } + function showLoading( isEdit ) { + $elLoading[ isEdit ? "removeClass" : "addClass" ]("has-not-edit"); + $elLoading.removeClass("hide-me"); + } + function showAlert( message ) { + $elAlert.find(".message").html( message ).end().removeClass("hide-me").animate({ + height: 300 + }, 500, function() {}); + } + function createGroup( name ) { + $ajaxService.createUserGroup( { "id": name }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + userGroupList.push({ + number: resultData.number, + id: name + }); + setTotal(userGroupList.length); + }); + hide( $elLoading, $elEdit ); + } + + }); + } + function updateGroup( number, name ) { + $ajaxService.updateUserGroup( { "number": number, "id": name }, function( resultData ) { + if ( resultData.errorcode || resultData.exception ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < userGroupList.length ; i++ ) { + if ( userGroupList[i].number == number ) { + userGroupList[i].id = name; + } + } + }); + hide( $elLoading, $elEdit ); + } + }); + } + function removeGroup( number, name ) { + $ajaxService.removeUserGroup( { "id": name }, function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resutlData.errormessage ); + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + $scope.$apply(function() { + for( var i = 0 ; i < userGroupList.length ; i++ ) { + if ( userGroupList[i].number == number ) { + userGroupList.splice(i, 1); + break; + } + } + setTotal(userGroupList.length); + hide( $elLoading ); + isRemoving = false; + }); + } + }); + } + function loadGroupList( isFirst ) { + $ajaxService.getUserGroupList( function( resultData ) { + if ( resultData.errorcode ) { + showAlert( resultData.errormessage ); + // @TODO + // 에러 처리 + } else { + // @TODO + // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. + isLoadedUserGroupList = true; + $scope.$apply(function() { + userGroupList = $scope.userGroupList = resultData; + }); + setTotal(userGroupList.length); + hide( $elLoading ); + if ( isFirst ) { + selectGroup( userGroupList[0].number ); + loadGroupMember( userGroupList[0].id ); + } + $scope.onLeave(); + } + }); + }; + function setTotal(n) { + $elTotal.html( "(" + n + ")"); + }; + function setFilterBackground() { + $elWrapper.css("background-color", "#FFFFF1"); + }; + function unsetFilterBackground() { + $elWrapper.css("background-color", "#FFF"); + }; + function hasDuplicateName( groupName ) { + var len = userGroupList.length; + var has = false; + for( var i = 0 ; i < userGroupList.length ; i++ ) { + if ( userGroupList[i].id == groupName ) { + has = true; + break; + } + } + return has; + } + function loadGroupMember( userGroupID ) { + $scope.$parent.$broadcast( "alarmGroupMember.configuration.load", userGroupID ); + $scope.$parent.$broadcast( "alarmPinpointUser.configuration.load", userGroupID ); + } + + $scope.prefix = "alarmUserGroup_"; + $scope.onRefresh = function() { + if ( isRemoving == true ) return; + + $elFilterInput.val(""); + showLoading( false ); + loadGroupList( false ); + }; + $scope.onCreate = function() { + if ( isRemoving == true ) return; + + isCreate = true; + $elEditGuide.html( "Create new alarm group" ); + $elEditInput.val(""); + show( $elEdit ); + $elEditInput.focus(); + }; + $scope.onUpdate = function($event) { + if ( isRemoving == true ) return; + + var tagName = $event.toElement.tagName.toLowerCase(); + var $el = $( $event.toElement ); + if ( tagName != "li" && tagName != "span") return; + if ( tagName == "span" && $el.hasClass("remove") ) return; + + isCreate = false; + $el = ( tagName == "span" ) ? $el.parent() : $el; + var userGroupNumber = $el.prop("id").split("_")[1]; + var userGroupID = $el.find("span.contents").html(); + + $elEditGuide.html( "\"" + userGroupID + "\"의 새로운 이름을 입력하세요." ); + $elEditInput.val( userGroupID ).prop("id", "updateUserGroup_" + userGroupNumber); + show( $elEdit ); + $elEditInput.focus().select(); + }; + $scope.onInputFilter = function($event) { + if ( isRemoving == true ) return; + + if ( $event.keyCode == 13 ) { // Enter + $scope.onFilterGroup(); + return; + } + if ($.trim( $elFilterInput.val() ).length >= 3 ) { + $elFilterEmpty.removeClass("disabled"); + } else { + $elFilterEmpty.addClass("disabled"); + } + }; + $scope.onFilterGroup = function() { + if ( isRemoving == true ) return; + var query = $.trim( $elFilterInput.val() ); + if ( query.length != 0 && query.length < 3 ) { + $scope.onEnter("greater2"); + return; + } + if ( query == "" ) { + if ( $scope.userGroupList.length != userGroupList.length ) { + $scope.userGroupList = userGroupList; + unsetFilterBackground(); + } + $elFilterEmpty.addClass("disabled"); + } else { + var newFilterUserGroup = []; + var length = userGroupList.length; + for( var i = 0 ; i < userGroupList.length ; i++ ) { + if ( userGroupList[i].id.indexOf( query ) != -1 ) { + newFilterUserGroup.push( userGroupList[i] ); + } + } + $scope.userGroupList = newFilterUserGroup; + setFilterBackground(); + } + }; + $scope.onFilterEmpty = function() { + if ( isRemoving == true ) return; + if ( $.trim( $elFilterInput.val() ) == "" ) return; + $elFilterInput.val(""); + $scope.onFilterGroup(); + }; + $scope.onInputEdit = function($event) { + if ( $event.keyCode == 13 ) { // Enter + $scope.onApplyEdit(); + } else if ( $event.keyCode == 27 ) { // ESC + $scope.onCancelEdit(); + $event.stopPropagation(); + } + }; + $scope.onCancelEdit = function() { + hide( $elEdit ); + }; + $scope.onApplyEdit = function() { + var groupName = $.trim( $elEditInput.val() ); + if ( groupName == "" ) { + $scope.onEnter("notEmpty"); + return; + } + + showLoading( true ); + if ( hasDuplicateName( groupName ) && isCreate == true ) { + showAlert( "동일한 이름을 가진 그룹이 이미 있습니다." ); + return; + } + if ( isCreate ) { + createGroup( groupName ); + } else { + updateGroup( $elEditInput.prop("id").split("_")[1], groupName ); + } + }; + $scope.onCloseAlert = function() { + $elAlert.animate({ + height: 50, + }, 100, function() { + hide( $elAlert, $elLoading ); + }); + }; + // onEnter, onLeave + $scope.onEnter = function( type ) { + var message; + switch( type ) { + case "title": + message = "'" + userGroupList.length + "'은 생성된 사용자 그룹의 수입니다."; + break; + case "refresh": + message = "사용자 그룹 목록을 갱신합니다."; + break; + case "create": + message = "새로운 사용자 그룹을 생성합니다."; + break; + case "filterInput": + message = "찾으려는 사용자 그룹을 입력하세요."; + break; + case "filterSearch": + message = "원하는 사용자 그룹을 검색하세요."; + break; + case "filterEmpty": + message = "검색어를 삭제하고 모든 사용자 그룹을 표시합니다."; + break; + case "contents": + message = "더블 클릭하면 수정할 수 있습니다."; + break; + case "remove": + message = "사용자 그룹을 삭제합니다."; + break; + case "removeCancel": + message = "삭제를 취소합니다."; + break; + case "removeConfirm": + message = "사용자 그룹을 삭제합니다."; + break; + case "notEmpty": + message = "공백은 입력 할 수 없습니다."; + break; + case "greater2": + message = "3글자 이상 입력하세요."; + break; + } + $elGuideMessage.html(message); + }; + $scope.onLeave = function( type ) { + $elGuideMessage.html("사용자 그룹 목록입니다."); + } + $scope.$on("alarmUserGroup.configuration.show", function() { + if ( isLoadedUserGroupList === false ) { + loadGroupList( true ); + } + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/configuration.controller.js b/web/src/main/webapp/features/configuration/configuration.controller.js new file mode 100644 index 000000000..132e33a16 --- /dev/null +++ b/web/src/main/webapp/features/configuration/configuration.controller.js @@ -0,0 +1,57 @@ +(function($) { + 'use strict'; + /** + * (en)ConfigurationCtrl + * @ko ConfigurationCtrl + * @group Controller + * @name ConfigurationCtrl + * @class + */ + pinpointApp.constant('ConfigurationConfig', { + menu: { + GENERAL: "general", + ALARM: "alarm" + } + }); + + pinpointApp.controller('ConfigurationCtrl', [ '$scope','$element', 'ConfigurationConfig', + function ($scope, $element, $constant) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init ConfigurationCtrl", $element ); + + $scope.descriptionOfCurrentTab = "Set your option"; + $scope.currentTab = $constant.menu.GENERAL; + + // define isGeneral(), isAlram()... func. + for( var menu in $constant.menu ) { + (function( currentMenu ) { + var funcName = "is" + currentMenu.substring(0, 1).toUpperCase() + currentMenu.substring(1).toLowerCase(); + $scope[funcName] = function() { + return $scope.currentTab == $constant.menu[currentMenu]; + }; + })(menu); + } + + $scope.setCurrentTab = function( tab ) { + if ( $scope.currentTab == tab ) return; + $scope.currentTab = tab; + switch( tab ) { + case $constant.menu.GENERAL: + $scope.descriptionOfCurrentTab = "Set your option"; + $scope.$broadcast( "general.configuration.show"); + break; + case $constant.menu.ALARM: + $scope.descriptionOfCurrentTab = "Set your alarm rules"; + $scope.$broadcast( "alarmUserGroup.configuration.show"); + break; + } + } + $scope.$on("configuration.show", function() { + $element.modal('show'); + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/configuration/general/general.controller.js b/web/src/main/webapp/features/configuration/general/general.controller.js new file mode 100644 index 000000000..b88ad8914 --- /dev/null +++ b/web/src/main/webapp/features/configuration/general/general.controller.js @@ -0,0 +1,30 @@ +(function($) { + 'use strict'; + /** + * (en)GeneralCtrl + * @ko GeneralCtrl + * @group Controller + * @name GeneralCtrl + * @class + */ + pinpointApp.constant('GeneralConfig', { + menu: { + GENERAL: "general", + ALRAM: "alram" + } + }); + + pinpointApp.controller('GeneralCtrl', [ '$scope','$element', 'GeneralConfig', + function ($scope, $element, $constant) { + //@TODO + //통계 추가할 것. + //$at($at.FILTEREDMAP_PAGE); + console.log( "init GeneralConfig", $element ); + + $scope.$on("general.configuration.show", function() { + console.log( "general show"); + }); + } + ]); +})(jQuery); + \ No newline at end of file diff --git a/web/src/main/webapp/features/navbar/navbar.directive.js b/web/src/main/webapp/features/navbar/navbar.directive.js index ca841eb15..1c47a2529 100644 --- a/web/src/main/webapp/features/navbar/navbar.directive.js +++ b/web/src/main/webapp/features/navbar/navbar.directive.js @@ -394,7 +394,6 @@ // ref1 : http://jimhoskins.com/2012/12/17/angularjs-and-apply.html // ref2 : http://jsfiddle.net/CDvGy/2/ }); - console.log( $application.select2 ); }; getMilliSecondByReadablePeriod = function( period ) { var time = parseInt( period ); @@ -553,6 +552,10 @@ scope.periodType = type; scope.autoUpdate = false; }; + + scope.showConfig = function() { + $rootScope.$broadcast("configuration.show"); + }; /** * watch auto update diff --git a/web/src/main/webapp/features/navbar/navbar.html b/web/src/main/webapp/features/navbar/navbar.html index 71374ef75..1bd38a7e1 100644 --- a/web/src/main/webapp/features/navbar/navbar.html +++ b/web/src/main/webapp/features/navbar/navbar.html @@ -81,14 +81,17 @@ -
- +
+ + + +
- diff --git a/web/src/main/webapp/index.html b/web/src/main/webapp/index.html index 92be0b6a9..4e36c3372 100644 --- a/web/src/main/webapp/index.html +++ b/web/src/main/webapp/index.html @@ -56,6 +56,8 @@ + + @@ -66,7 +68,6 @@ - @@ -96,6 +97,9 @@ + + + @@ -321,12 +325,261 @@
+ - - + + + + + + + + + + + + + + + + + + + + + + + + @@ -335,44 +588,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/web/src/main/webapp/styles/configuration.css b/web/src/main/webapp/styles/configuration.css new file mode 100644 index 000000000..ddc03e426 --- /dev/null +++ b/web/src/main/webapp/styles/configuration.css @@ -0,0 +1,368 @@ +.tabs-left > .nav-tabs { + border-bottom: 0; +} + +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} + +.tab-content > .active, +.pill-content > .active { + display: block; +} + +.tabs-left > .nav-tabs > li { + float: none; +} + +.tabs-left > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +.tabs-left > .nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} + +.tabs-left > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.tabs-left > .nav-tabs > li > a:hover, +.tabs-left > .nav-tabs > li > a:focus { + border-color: #eeeeee #dddddd #eeeeee #eeeeee; +} + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover, +.tabs-left > .nav-tabs .active > a:focus { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; +} + +#pinpoint-configuration .modal-header .modal-title { + font-weight: bold; + font-size: 22px; +} +#pinpoint-configuration .modal-header ul { + list-style-type: none; + padding: 0px; + +} +#pinpoint-configuration .modal-header li { + float: left; + padding: 2px 10px 2px 10px; + cursor: pointer; +} +#pinpoint-configuration .modal-header li.description { + color: #46D030; + font-size: 12px; +} +#pinpoint-configuration .modal-header li.active { + background-color:gray; + color: white; +} +#pinpoint-configuration .modal-body { + background-color: #e9eaed; +} +#pinpoint-configuration .modal-body > div { + height: 500px; +} + + +#pinpoint-configuration .header-blue { + background-color: #D0E9FF; +} +#pinpoint-configuration .header-sky { + background-color: #DAF7FF; +} +#pinpoint-configuration .hide-me { + display:none; +} + +#pinpoint-configuration .header-orange{ + background-color: #FDE8CB; +} +#pinpoint-configuration .some-list { + float: left; + left: 0px; + width: 240px; + height: 500px; + background-color: #FFF; + border: 1px solid #FFF; + border-color: #e5e6e9 #dfe0e4 #d0d1d5; + border-radius: 3px; +} +#pinpoint-configuration .some-list .btn{ + border-radius: 0px; + font-size: 16px; + padding-top: 3px; + padding-bottom: 3px; +} + +#pinpoint-configuration .some-list-header { + text-align: center; + vertical-align: middle; + font-size: 16px; + height: 30px; +} + +#pinpoint-configuration .some-list-header button.btn { + padding-top: 4px; + padding-bottom: 4px; + border:none; +} +#pinpoint-configuration .some-list-header .title { + line-height: 30px; +} +#pinpoint-configuration .left { + float: left; +} +#pinpoint-configuration .right { + float: right; +} +#pinpoint-configuration .some-list-content { + width: 100%; + height: 470px; +} +#pinpoint-configuration .some-list-content .wrapper { + positoin: absolute; + width: 100%; + height: 410px; + overflow-y: auto; +} +#pinpoint-configuration .some-list-content ul { + list-style-type: none; + padding:4px 8px 4px 0px; +} +#pinpoint-configuration .some-list-content li { + cursor: pointer; + padding: 8px 0px 0px 4px; + border-bottom: 1px solid #F8F8F8; +} +#pinpoint-configuration .some-list-content li.remove { + background-color: #EFABAB; +} +#pinpoint-configuration .some-list-content li.remove span.contents { + text-decoration: line-through; +} +#pinpoint-configuration .some-list-content li.remove button { + margin-top: -7px; + padding: 1px 8px 1px 8px; +} +#pinpoint-configuration .some-list-content li button.move { + margin-top: -7px; + padding: 1px 3px 1px 0px; +} +#pinpoint-configuration .some-list-content li.selected { + background-color: #000; + color: #FFF; +} +#pinpoint-configuration .some-list-content li.selected span.remove { + color: #FFF; +} +#pinpoint-configuration .some-list-content li:hover { + background-color: #928484; + color: #FFF; +} +#pinpoint-configuration .some-list-content li.remove:hover { + background-color: #EFABAB; + color: #000; +} + +#pinpoint-configuration .some-list-content.move-some-where li span { + margin-left: 4px; +} +#pinpoint-configuration .some-loading { + position:relative; + bottom: 1000px; + left: 0px; + width: 100%; + height: 100%; + text-align: center; + background: rgba(256, 256, 256, 0.8); +} +#pinpoint-configuration .some-alert { + position:absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 50px; + text-align: center; + background: #c9de96; + background: linear-gradient(to bottom, #c9de96 0%,#8ab66b 44%,#398235 100%); +} +#pinpoint-configuration .some-alert span.message { + position: absolute; + padding: 0px 6px 0px 6px; + color: #FF0000; + width: 100%; + left: 0px; + top:40px; +} +#pinpoint-configuration .some-alert span.close-alert { + color: #000; + float: right; + cursor: pointer; + font-size: 16px; + font-weight: bold; + padding-right: 4px; +} + +#pinpoint-configuration .some-loading.has-not-edit { + bottom: 500px; +} +#pinpoint-configuration .some-loading div { + margin-top: 90%; +} +#pinpoint-configuration .some-edit-content { + position:relative; + bottom: 500px; + left: 0px; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); +} +#pinpoint-configuration .some-edit-content > div { + padding-top: 70%; + text-align:center; +} +#pinpoint-configuration .some-edit-content .title-message { + color: #46D030;; + font-size: 12px; + padding-bottom: 4px; +} +#pinpoint-configuration .some-edit-content input[type=text] { + width: 90%; + height: 32px; + border: none; + font-size: 18px; + text-align: center; + margin-top: 1px; +} +#pinpoint-configuration .some-edit-content input[type=checkbox] { + font-size: 30px; +} +#pinpoint-configuration .some-edit-content label { + font-weight: normal; + padding-left: 4px; + color: #FFF; +} +/* +#pinpoint-configuration .some-list-content li:nth-child(even) { + background-color: #F8F8F8; +} +*/ +#pinpoint-configuration .some-list-content li .remove { + float: right; + color: #AAA; + cursor: pointer; + line-height: 12px; + padding-left: 4px; + padding-right: 4px; +} +#pinpoint-configuration .some-list-content li .remove:hover { + color: red; + font-weight: bold; +} +#pinpoint-configuration .some-list-content li span.right { + margin-top: -2px; +} +#pinpoint-configuration .some-list .guide-message { + color: #0BAB4E; + width: 100%; + bottom: -6px; + position: relative; + font-size: 11px; + text-align: center; + border-radius: 4px; + background-color: #EEE; +} +#pinpoint-configuration .some-list .filter-input { + position: relative; + bottom: -12px; + width: 100%; +} +#pinpoint-configuration .some-list .filter-input input { + width: 66%; + border: 0px solid black; + border-bottom: 1px solid black; +} +#pinpoint-configuration .some-list .filter-input button { + float: right; + padding : 0px 9px 0px 9px; +} +#pinpoint-configuration .pinpoint-user-list { + float: right; + width: 300px; +} + +/* 테이블 관련 */ +#pinpoint-configuration .tabbable { + float: left; +} +#pinpoint-configuration .some-table { + display: block; + width: 100%; +} +#pinpoint-configuration .some-table table { + display: block; + width: 100%; + table-layout: fixed; +} +#pinpoint-configuration .some-table .some-list-content thead tr { + height: 34px; + font-size: 14px; + color: #5bc0de; + padding-right: 10px; + line-height: 32px; +} +#pinpoint-configuration .some-table .some-list-content tbody tr { + height: 30px; + padding-right: 10px; + border-bottom: 1px solid #F8F8F8; + cursor: pointer; +} +#pinpoint-configuration .some-table .some-list-content tbody tr:hover { + background-color: #928484; + color: #FFF; +} +#pinpoint-configuration .some-table .some-list-content tbody tr td:first-child { + text-align:left; +} +#pinpoint-configuration .some-table .some-list-content tbody tr td:last-child { + padding-right: 10px; + padding-left: 5px; +} +#pinpoint-configuration .some-table .some-list-content td button { + border: none; +} +#pinpoint-configuration div.popover { + color: #000; +} +#pinpoint-configuration div.popover .popover-title{ + display: none; +} +#pinpoint-configuration .some-table .some-list-content th, td { + text-align: center; + vertical-align: bottom; + overflow: hidden; +} +#pinpoint-configuration .some-table .some-list-content .remove { + color: #AAA; + cursor: pointer; +} +#pinpoint-configuration .some-table .some-list-content .remove:hover { + color: red; + font-weight: bold; +} +#pinpoint-configuration .some-table .some-list-content input { + width: 100%; +} \ No newline at end of file diff --git a/web/src/main/webapp/styles/timer.css b/web/src/main/webapp/styles/timer.css new file mode 100644 index 000000000..f5b71debd --- /dev/null +++ b/web/src/main/webapp/styles/timer.css @@ -0,0 +1,90 @@ +@-moz-keyframes timer-loader { + 0% { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes timer-loader { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes timer-loader { + 0% { + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +/* :not(:required) hides this rule from IE9 and below */ +.timer-loader:not(:required) { + border: 6px solid #c8d; + -moz-border-radius: 24px; + -webkit-border-radius: 24px; + border-radius: 24px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + overflow: hidden; + position: relative; + text-indent: -9999px; + width: 48px; + height: 48px; +} +.timer-loader:not(:required)::before { + -moz-animation: timer-loader 1250ms infinite linear; + -webkit-animation: timer-loader 1250ms infinite linear; + animation: timer-loader 1250ms infinite linear; + -moz-transform-origin: 3px 3px; + -ms-transform-origin: 3px 3px; + -webkit-transform-origin: 3px 3px; + transform-origin: 3px 3px; + background: #c8d; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + content: ''; + display: block; + position: absolute; + width: 6px; + height: 19.2px; + left: 15px; + top: 15px; +} +.timer-loader:not(:required)::after { + -moz-animation: timer-loader 15000ms infinite linear; + -webkit-animation: timer-loader 15000ms infinite linear; + animation: timer-loader 15000ms infinite linear; + -moz-transform-origin: 3px 3px; + -ms-transform-origin: 3px 3px; + -webkit-transform-origin: 3px 3px; + transform-origin: 3px 3px; + background: #c8d; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + content: ''; + display: block; + position: absolute; + width: 6px; + height: 16px; + left: 15px; + top: 15px; +} \ No newline at end of file