From c47f9e339cb9ee51fd97aa4fa354cc4e4f1ca585 Mon Sep 17 00:00:00 2001 From: denz Date: Fri, 15 Apr 2016 18:35:01 +0900 Subject: [PATCH] update alarm user group UI --- .../services/alarm-broadcast.service.js | 16 +- .../alarm/alarm-user-group.directive.js | 455 +++++++++--------- .../configuration/alarm/alarmUserGroup.html | 57 ++- 3 files changed, 266 insertions(+), 262 deletions(-) diff --git a/web/src/main/webapp/common/services/alarm-broadcast.service.js b/web/src/main/webapp/common/services/alarm-broadcast.service.js index 2c4ff320c..d8625b0c5 100644 --- a/web/src/main/webapp/common/services/alarm-broadcast.service.js +++ b/web/src/main/webapp/common/services/alarm-broadcast.service.js @@ -9,14 +9,20 @@ * @class */ - pinpointApp.service('AlarmBroadcastService', [ '$rootScope', function ($rootScope) { + pinpointApp.service("AlarmBroadcastService", [ "$rootScope", "globalConfig", function ( $rootScope, globalConfig ) { var self = this; // from userGroup - this.sendInit = function( userGroupID, willBeAddedUser ) { - self.sendReloadWithUserGroupID( userGroupID, willBeAddedUser ); + this.sendInit = function( userGroupID ) { + self.sendReloadWithUserGroupID( userGroupID, globalConfig.userId ? { + userId: globalConfig.userId, + name: globalConfig.userName, + department: globalConfig.userDepartment + } : {} ); }; - this.sendLoadPinpointUser = function( userDepartment ) { - $rootScope.$broadcast( "alarmPinpointUser.configuration.load", userDepartment ); + this.sendLoadPinpointUser = function() { + if ( globalConfig.userId ) { + $rootScope.$broadcast("alarmPinpointUser.configuration.load", globalConfig.userDepartment ); + } }; // from userGroup this.sendReloadWithUserGroupID = function( userGroupID, willBeAddedUser ) { diff --git a/web/src/main/webapp/features/configuration/alarm/alarm-user-group.directive.js b/web/src/main/webapp/features/configuration/alarm/alarm-user-group.directive.js index 2cc19f830..1a7a9d098 100644 --- a/web/src/main/webapp/features/configuration/alarm/alarm-user-group.directive.js +++ b/web/src/main/webapp/features/configuration/alarm/alarm-user-group.directive.js @@ -8,8 +8,8 @@ * @class */ - pinpointApp.directive('alarmUserGroupDirective', [ '$rootScope', '$timeout', 'helpContentTemplate', 'helpContentService', 'AlarmUtilService', 'AlarmBroadcastService', 'AnalyticsService', 'globalConfig', - function ($rootScope, $timeout, helpContentTemplate, helpContentService, alarmUtilService, alarmBroadcastService, analyticsService, globalConfig) { + pinpointApp.directive("alarmUserGroupDirective", [ "$rootScope", "$timeout", "helpContentService", "AlarmUtilService", "AlarmBroadcastService", "AnalyticsService", + function ($rootScope, $timeout, helpContentService, alarmUtilService, alarmBroadcastService, analyticsService ) { return { restrict: 'EA', replace: true, @@ -17,256 +17,249 @@ scope: true, link: function (scope, element) { scope.prefix = "alarmUserGroup_"; - - var selectedGroupNumber = ""; - var isCreate = true; // update - var isRemoving = false; - var isLoadedUserGroupList = false; + var CONSTS = { + MIN_GROUPNAME_LENGTH : 4, + ENTER_AT_LEAST: "Enter at least 4 letters to search", + EXIST_A_SAME: "Exist a same group name" + }; + var selectedGroupNumber = ""; + var $workingNode = null; + var bIsCreating = false; + var bIsRemoving = false; + var bIsUpdating = false; + var bIsLoaded = false; var userGroupList = scope.userGroupList = []; - - function addSelectClass( newSelectedGroupNumber ) { - if ( selectedGroupNumber !== "" ) { - $( "#" + scope.prefix + selectedGroupNumber ).removeClass("selected"); - } - $( "#" + scope.prefix + newSelectedGroupNumber ).addClass("selected"); - selectedGroupNumber = newSelectedGroupNumber; - } - var $element = element; - var $elWrapper = $element.find(".wrapper"); + var $element = element; var $elTotal = $element.find(".total"); + var $elAlert = $element.find(".some-alert"); var $elLoading = $element.find(".some-loading"); - var $elAlert = $element.find(".some-alert"); - var $elSearchInput = $element.find("div.filter-input input"); - var $elSearchEmpty = $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 $elUL = $element.find(".some-list-content ul"); - $elUL.on("click", function($event) { + var $elNewGroup = $element.find(".new-group"); + var $elSearchInput = $element.find(".some-list-search input"); + + $element.find(".some-list-content ul").on("click", function($event) { var $target = $( $event.toElement || $event.target ); var tagName = $target.get(0).tagName.toLowerCase(); - var $li = $target.parents("li"); - - if ( tagName === "button" ) { - if ( $target.hasClass("edit") ) { - scope.onUpdate( $event ); - } else if ( $target.hasClass("confirm-remove") ) { - removeConfirm( $li ); - } else if ( $target.hasClass("confirm-cancel") ) { - revmoeCancel( $li ); - } - } else if ( tagName === "span" ) { - if ( $target.hasClass("remove") ) { - if ( isRemoving === true ) return; - isRemoving = true; - $li.addClass("remove").find("span.remove").hide().end().append($removeTemplate); - } else if ( $target.hasClass("contents") ) { - selectGroup( $li ); - } else if( $target.hasClass("glyphicon-edit") ) { - scope.onUpdate( $event ); - } else if ( $target.hasClass("glyphicon-remove") ) { - removeCancel( $li ); - } else if ( $target.hasClass("glyphicon-ok") ) { - removeConfirm( $li ); - } - } else if( tagName === "li" ) { - selectGroup( $target ); - } + + if ( tagName === "span" && $target.hasClass("contents") ) { + selectGroup( $target.parents("li") ); + } else if ( tagName === "li" ) { + selectGroup( $target ); + } }); - function reset() { - alarmUtilService.unsetFilterBackground( $elWrapper ); - $elSearchInput.val(""); - } - - function removeConfirm( $el ) { - alarmUtilService.showLoading( $elLoading, false ); - removeGroup( alarmUtilService.extractID( $el ), $el.find("span.contents").html() ); - } - function removeCancel( $el ) { - $el.find("span.right").remove().end().find("span.remove").show().end().removeClass("remove"); - isRemoving = false; - } + function loadData( sParam ) { + alarmUtilService.sendCRUD( "getUserGroupList", sParam, function( aServerData ) { + bIsLoaded = true; + userGroupList = scope.userGroupList = aServerData; + alarmUtilService.setTotal( $elTotal, userGroupList.length ); + alarmUtilService.hide( $elLoading ); + alarmBroadcastService.sendLoadPinpointUser(); + }, function( oServerError ) { + alarmUtilService.hide( $elLoading ); + $elAlert.find(".message").html( oServerError.errorMessage ); + alarmUtilService.show( $elAlert ); + }, $elAlert ); + + } function selectGroup( $el ) { - if ( isRemoving === true ) return; + cancelPreviousWork(); addSelectClass( alarmUtilService.extractID( $el ) ); - alarmBroadcastService.sendReloadWithUserGroupID( $el.find("span.contents").html() ); + alarmBroadcastService.sendReloadWithUserGroupID( $el.find(".contents").html() ); } - - function createGroup( name ) { - alarmUtilService.sendCRUD( "createUserGroup", { "id": name }, function( resultData ) { - // @TODO - // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. - userGroupList.push({ - number: resultData.number, - id: name - }); + function addSelectClass( newSelectedGroupNumber ) { + $( "#" + scope.prefix + selectedGroupNumber ).removeClass("selected"); + $( "#" + scope.prefix + newSelectedGroupNumber ).addClass("selected"); + selectedGroupNumber = newSelectedGroupNumber; + } - if ( globalConfig.userId ) { - alarmBroadcastService.sendInit( name, { - userId: globalConfig.userId, - name: globalConfig.userName, - department: globalConfig.userDepartment - }); - } else { - alarmBroadcastService.sendInit( name ); - } - - $timeout(function() { - addSelectClass( resultData.number ); - }); - alarmUtilService.setTotal( $elTotal, userGroupList.length ); - alarmUtilService.hide( $elLoading, $elEdit ); - }, function( errorData ) {}, $elAlert ); - } - function updateGroup( number, name ) { - alarmUtilService.sendCRUD( "updateUserGroup", { "number": number, "id": name }, function( resultData ) { - // @TODO - // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. - for( var i = 0 ; i < userGroupList.length ; i++ ) { - if ( userGroupList[i].number == number ) { - userGroupList[i].id = name; - } - } - alarmUtilService.hide( $elLoading, $elEdit ); - }, function( errorData ) {}, $elAlert ); - } - function removeGroup( number, name ) { - alarmUtilService.sendCRUD( "removeUserGroup", { "id": name }, function( resultData ) { - scope.$apply(function() { - for( var i = 0 ; i < userGroupList.length ; i++ ) { - if ( userGroupList[i].number == number ) { - userGroupList.splice(i, 1); - break; - } - } - if ( userGroupList.length > 0 ) { - $timeout(function() { - addSelectClass( userGroupList[0].number ); - }); - alarmBroadcastService.sendReloadWithUserGroupID( userGroupList[0].id ); - } else { - alarmBroadcastService.sendSelectionEmpty(); - } - }); - alarmUtilService.setTotal( $elTotal, userGroupList.length ); - alarmUtilService.hide( $elLoading ); - isRemoving = false; - }, function( errorData ) {}, $elAlert ); - } - function loadGroupList( isFirst, sParam ) { - alarmUtilService.sendCRUD( "getUserGroupList", - angular.isUndefined(sParam) || sParam === "" ? { "userId" : (globalConfig.userId || "") } : { "userGroupId" : sParam }, function( resultData ) { - // @TODO - // 많이 쓰는 놈 기준 3개를 뽑아 내야 함. - isLoadedUserGroupList = true; - userGroupList = scope.userGroupList = resultData; - alarmUtilService.setTotal( $elTotal, userGroupList.length ); - alarmUtilService.hide( $elLoading ); - if( userGroupList.length > 0 ) { - if ( isFirst ) { - alarmBroadcastService.sendInit( userGroupList[0].id ); - selectedGroupNumber = userGroupList[0].number; - } - $timeout(function() { - addSelectClass( selectedGroupNumber ); - }); - } - if ( globalConfig.userId ) { - alarmBroadcastService.sendLoadPinpointUser( globalConfig.userDepartment ); - } - }, function( errorData ) {}, $elAlert ); + function cancelPreviousWork() { + if ( bIsCreating === true ) { + cancelAddUserGroup(); + } else if ( bIsUpdating === true ) { + removeUserGroup( $workingNode ); + } else if ( bIsRemoving === true ) { + cancelRemoveUserGroup( $workingNode ); + } + } + scope.onAddUserGroup = function() { + if ( bIsCreating === true ) return; + cancelPreviousWork(); - } - scope.onRefresh = function() { - if ( isRemoving === true ) return; - analyticsService.send( analyticsService.CONST.MAIN, analyticsService.CONST.CLK_ALARM_REFRESH_USER_GROUP ); - reset(); - alarmUtilService.showLoading( $elLoading, false ); - loadGroupList( false, $.trim( $elSearchInput.val() ) ); - }; - scope.onCreate = function() { - if ( isRemoving === true ) return; - - isCreate = true; - $elEditGuide.html( "Create new alarm group" ); - $elEditInput.val(""); - alarmUtilService.show( $elEdit ); - $elEditInput.focus(); - }; - scope.onUpdate = function($event) { - if ( isRemoving === true ) return; - - isCreate = false; - var $el = $( $event.toElement || $event.target ).parents("li"); - var userGroupNumber = alarmUtilService.extractID( $el ); - var userGroupID = $el.find("span.contents").html(); - - $elEditGuide.html( "Input new name of \"" + userGroupID + "\"." ); - $elEditInput.val( userGroupID ).prop("id", "updateUserGroup_" + userGroupNumber); - alarmUtilService.show( $elEdit ); - $elEditInput.focus().select(); + bIsCreating = true; + alarmUtilService.show( $elNewGroup ); + $elNewGroup.find("input").val("").focus(); }; + scope.onCancelAddUserGroup = function() { + cancelAddUserGroup(); + }; + function cancelAddUserGroup() { + bIsCreating = false; + $workingNode = null; + alarmUtilService.hide( $elNewGroup ); + $elNewGroup.find( "input" ).attr( "placeholder", "New Group" ).val( "" ); + } + scope.onApplyAddUserGroup = function() { + alarmUtilService.show( $elLoading ); + var groupId = $elNewGroup.find("input").val(); + if ( groupId.length < CONSTS.MIN_GROUPNAME_LENGTH ) { + alarmUtilService.hide( $elLoading ); + $elNewGroup.find( "input" ).attr( "placeholder", CONSTS.ENTER_AT_LEAST ).val( "" ).focus(); + return; + } + alarmUtilService.sendCRUD( "createUserGroup", { "id": groupId }, function( oServerData ) { + userGroupList.push({ + id: oServerData.id, + number: oServerData.number + }); + + alarmBroadcastService.sendInit( name ); + alarmUtilService.setTotal( $elTotal, userGroupList.length ); + cancelAddUserGroup(); + alarmUtilService.hide( $elLoading ); + }, function( oServerError ) { + alarmUtilService.hide( $elLoading ); + $elAlert.find(".message").html( oServerError.errorMessage ); + alarmUtilService.show( $elAlert ); + }); + }; + scope.onAddUserGroupKeydown = function( $event ) { + if ( $event.keyCode == 13 ) { // Enter + scope.onApplyAddUserGroup(); + } else if ( $event.keyCode == 27 ) { // ESC + cancelAddUserGroup(); + $event.stopPropagation(); + } + }; + scope.onUpdateUserGroupKeydown = function( $event ) { + if ( $event.keyCode == 13 ) { // Enter + scope.onApplyUpdateUserGroup(); + } else if ( $event.keyCode == 27 ) { // ESC + removeUserGroup( $workingNode ); + $event.stopPropagation(); + } + }; scope.onSearch = function() { - if ( isRemoving === true ) return; - var query = $.trim( $elSearchInput.val() ); - if ( query.length !== 0 && query.length < 3 ) { - alarmUtilService.showLoading( $elLoading, false ); - alarmUtilService.showAlert( $elAlert, "You must enter at least three characters."); - return; + cancelPreviousWork(); + alarmUtilService.show( $elLoading ); + var query = $.trim( $elSearchInput.val() ); + if ( query.length < CONSTS.MIN_GROUPNAME_LENGTH ) { + $elSearchInput.val(""); + alarmUtilService.hide( $elLoading ); + return; } analyticsService.send( analyticsService.CONST.MAIN, analyticsService.CONST.CLK_ALARM_FILTER_USER_GROUP ); - alarmUtilService.showLoading( $elLoading, false ); - loadGroupList( false, query ); - }; - scope.onInputEdit = function($event) { - if ( $event.keyCode == 13 ) { // Enter - scope.onApplyEdit(); - } else if ( $event.keyCode == 27 ) { // ESC - scope.onCancelEdit(); - $event.stopPropagation(); - } - }; - scope.onCancelEdit = function() { - alarmUtilService.hide( $elEdit ); - }; - scope.onApplyEdit = function() { - var groupName = $.trim( $elEditInput.val() ); - if ( groupName === "" ) { - alarmUtilService.showLoading( $elLoading, true ); - alarmUtilService.showAlert( $elAlert, "Input group id."); - return; - } - - alarmUtilService.showLoading( $elLoading, true ); - if ( alarmUtilService.hasDuplicateItem( userGroupList, function( userGroup ) { - return userGroup.id == groupName; - }) && isCreate === true ) { - alarmUtilService.showAlert( $elAlert, "Exist a same group name in the lists." ); - return; - } - if ( isCreate ) { - analyticsService.send( analyticsService.CONST.MAIN, analyticsService.CONST.CLK_ALARM_CREATE_USER_GROUP ); - createGroup( groupName ); - } else { - updateGroup( alarmUtilService.extractID( $elEditInput ), groupName ); - } + loadData( query ); }; scope.onCloseAlert = function() { - alarmUtilService.closeAlert( $elAlert, $elLoading ); - }; + alarmUtilService.hide( $elAlert ); + }; + function removeUserGroup( $parent ) { + if ( bIsUpdating === true ) { + cancelUpdate( $parent ); + } else { + if (bIsRemoving === false) { + alarmUtilService.hide( $parent.find(".edit") ); + alarmUtilService.show( $parent.find(".remove-cancel") ); + $parent.find(".remove").addClass("remove-confirm"); + alarmUtilService.hide( $elLoading ); + bIsRemoving = true; + } else { + $elLoading.show(); + var groupNumber = alarmUtilService.extractID($parent); + alarmUtilService.sendCRUD("removeUserGroup", {"id": groupNumber}, function () { + scope.$apply(function () { + for (var i = 0; i < userGroupList.length; i++) { + if (userGroupList[i].number == groupNumber) { + userGroupList.splice(i, 1); + break; + } + } + alarmBroadcastService.sendSelectionEmpty(); + }); + bIsRemoving = false; + $workingNode = null; + alarmUtilService.setTotal($elTotal, userGroupList.length); + alarmUtilService.hide( $elLoading ); + }, function (oServerError) { + alarmUtilService.hide( $elLoading ); + $elAlert.find(".message").html( oServerError.errorMessage ); + alarmUtilService.show( $elAlert ); + }); + } + } + } + function cancelRemoveUserGroup( $parent ) { + bIsRemoving = false; + $workingNode = null; + alarmUtilService.hide( $parent.find(".remove-cancel") ); + alarmUtilService.show( $parent.find(".edit") ); + $parent.find("span.remove").removeClass("remove-confirm"); + } + scope.onRemoveUserGroup = function( $event ) { + cancelPreviousWork(); + $workingNode = getNode( $event );; + removeUserGroup( $workingNode ); + }; + scope.onCancelRemoveUserGroup = function() { + cancelRemoveUserGroup( $workingNode ); + }; + scope.onUpdateUserGroup = function( $event ) { + cancelPreviousWork(); + bIsUpdating = true; + $workingNode = getNode( $event ); + alarmUtilService.hide( $workingNode.find(".edit") ); + alarmUtilService.show( $workingNode.find(".edit-confirm") ); + alarmUtilService.hide( $workingNode.find(".contents") ); + $workingNode.find("input").val( $workingNode.find(".contents").html() ).show(); + $workingNode.find("input").focus(); + }; + scope.onApplyUpdateUserGroup = function() { + var groupNumber = alarmUtilService.extractID($workingNode); + var groupName = $workingNode.find("input").val(); + + if ( groupName === "" ) { + $workingNode.find("input").attr("placeholder", CONSTS.ENTER_AT_LEAST).val("").focus(); + return; + } + alarmUtilService.show( $elLoading ); + if ( alarmUtilService.hasDuplicateItem( userGroupList, function( userGroup ) { + return userGroup.id === groupName; + }) ) { + alarmUtilService.hide( $elLoading ); + $workingNode.find("input").attr("placeholder", CONSTS.EXIST_A_SAME).val("").focus(); + return; + } + analyticsService.send( analyticsService.CONST.MAIN, analyticsService.CONST.CLK_ALARM_CREATE_USER_GROUP ); + alarmUtilService.sendCRUD( "updateUserGroup", { "number": groupNumber, "id": groupName }, function() { + for( var i = 0 ; i < userGroupList.length ; i++ ) { + if ( userGroupList[i].number === groupNumber ) { + userGroupList[i].id = groupName; + } + } + cancelUpdate( $parent ); + alarmUtilService.hide( $elLoading ); + }, function( oServerError ) { + alarmUtilService.hide( $elLoading ); + $elAlert.find( ".message" ).html( oServerError.errorMessage ); + alarmUtilService.show( $elAlert ); + }); + }; scope.$on("alarmUserGroup.configuration.show", function() { - if ( isLoadedUserGroupList === false ) { - loadGroupList( true ); + if ( bIsLoaded === false ) { + loadData(); } }); + function cancelUpdate( $parent ) { + alarmUtilService.hide( $parent.find(".edit-confirm") ); + alarmUtilService.show( $parent.find(".edit") ); + $parent.find("input").hide(); + alarmUtilService.show( $parent.find(".contents") ); + bIsUpdating = false; + $workingNode = null; + } + function getNode( $event ) { + return $( $event.toElement || $event.target ).parents("li"); + } } }; } diff --git a/web/src/main/webapp/features/configuration/alarm/alarmUserGroup.html b/web/src/main/webapp/features/configuration/alarm/alarmUserGroup.html index 15a551c74..415008dd6 100644 --- a/web/src/main/webapp/features/configuration/alarm/alarmUserGroup.html +++ b/web/src/main/webapp/features/configuration/alarm/alarmUserGroup.html @@ -1,36 +1,41 @@ -
-
- - User Group - +
+
+ User Group + + Add +
+
+
+ + + + +
    +
  • + + + + +
  • - - {{userGroup.id}}x + {{userGroup.id}} + + + + +
-
- - -
-
-
-
Create new alarm group
- -
- - -
-
-
-
+
-
- - X -
+
+
+ + X
\ No newline at end of file