UIとロジック追加実装

public/js/chat-ui.js

@@ -915,6 +915,112 @@ $('#chatButton').on('click', function(event){
     CHAT_UI.refreshRoomList(chatRoomType.DM);
 });
 
+CHAT_UI.refreshGroupSearch = function(isInvite) {
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo(groupId);
+    }
+    $('#rootGroupBtn').off();
+    $('#parentGroupBtn').off();
+
+    var result = CHAT_DB.getGroupInfo(groupId);
+
+    $('#childGroupList').html('');
+    $('#userInGroupList').html('');
+    $('#groupPathArea').html('');
+
+    if (typeof result.parentGroupId !== 'undefined') {
+        console.log(result.parentGroupId);
+        $('#parentGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        console.log(result.rootGroupId);
+        $('#rootGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
+        });
+    }
+
+
+    const groupNaviTemplate = $('#group-navigater-template').html();
+    var groupCount = 0;
+    result.groupPathList.forEach(function(groupPath) {
+        if (groupCount != 0) {
+            $('#groupPathArea').append("<label class='group-navigater'> > </label>");
+        }
+        let html = Mustache.render(groupNaviTemplate, {
+            name: groupPath.groupName,
+            id: groupPath.groupId
+        });
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
+            CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
+        });
+        groupCount++;
+        $('#groupPathArea').append(obj);
+    })
+
+    const groupTemplate = $('#group-template').html();
+    result.childGroupList.forEach(function(childGroup) {
+            let html = Mustache.render(groupTemplate, {
+                name: childGroup.groupName,
+                id: childGroup.groupId
+            });
+
+            let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
+            });
+            $('#childGroupList').append(obj);
+        })
+
+    const userTemplate = $('#user-template').html();
+    result.groupUserList.forEach(function(groupUser) {
+        groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
+        let html = Mustache.render(userTemplate, {
+            id: groupUser.shopMemberId,
+            profileImage: groupUser.profileImagePath,
+            name: groupUser.shopMemberName
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
+            //TODO need onClick Action
+            if (IS_ONLINE == 'true') {
+                if ($(this).find('.userCheckBox.active').length > 0) {
+                    // remove
+                    CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
+                        return user.loginId != element.loginId;
+                    });
+                } else {
+                    // add
+                    CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
+                }
+                $(this).find('.userCheckBox').toggleClass('active');
+
+                if (CHAT.globalSelectedUserList.length > 0) {
+                    $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
+                } else {
+                    $('#userSelectionLength').text('');
+                }
+            }
+
+        });
+
+        let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
+            return selectedUser.loginId == user.loginId;
+        })
+
+        if (findObj) {
+            $(obj).find('.userCheckBox').toggleClass('active');
+        }
+
+        $('#user_list').append(obj);
+        $('.userCheckBox').show();
+        $('#userInGroupList').append(obj);
+    })
+
+    $('#myGroupArea').hide();
+    $('#allGroupArea').show();
+}
+
 CHAT_UI.refreshContactScreen = function() {
     //loadingIndicatorを表示
     $('#my_info').html('');
@@ -1323,7 +1429,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
 
             $('#userInGroupList').append(obj);
         })
-
+    $('.userCheckBox').hide();
     $('#myGroupArea').hide();
     $('#allGroupArea').show();
 }

public/js/chat-websocket.js

@@ -333,61 +333,174 @@ function setSocketAction () {
 
     // Update Group List(Invite)
     socket.on('refreshGroupList', function(groups, isInvite){
-        $('#group_list').html('');
-        const template = $('#group-template').html();
-        if (groups.length === 0) {
-            $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
-        }
-        // グループ名と人数を表記する。
-        groups.forEach(function(group) {
-            let html = Mustache.render(template, {
-                name: group.groupName,
-                info: group.memberCnt + getLocalizedString("people")
-            });
-            // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
-            let obj = $(jQuery.parseHTML(html)).on('click', function() {
-                // loadingIndicatorを表示
-                CHAT_UI.showLoadingIndicator();
-                socket.emit('getUserListInGroup', group.groupId, isInvite);
-                $('#groupName').text(group.groupName);
-            });
-            $('#group_list').append(obj);
-        });
-
-        // Rotate
-        if (CHAT_UI.isLandscapeMode()) {
-            $(".group_list").addClass("col-6").removeClass("col-12");
-        }
-
-        // Set Title
-        let memberSelectTitle = getLocalizedString("groupSearch")
-
-        $('#pills-group-tab').tab('show');
-
-        $('#backButton').show();
-
+//        $('#group_list').html('');
+//        const template = $('#group-template').html();
+//        if (groups.length === 0) {
+//            $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
+//        }
+//        // グループ名と人数を表記する。
+//        groups.forEach(function(group) {
+//            let html = Mustache.render(template, {
+//                name: group.groupName,
+//                info: group.memberCnt + getLocalizedString("people")
+//            });
+//            // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
+//            let obj = $(jQuery.parseHTML(html)).on('click', function() {
+//                // loadingIndicatorを表示
+//                CHAT_UI.showLoadingIndicator();
+//                socket.emit('getUserListInGroup', group.groupId, isInvite);
+//                $('#groupName').text(group.groupName);
+//            });
+//            $('#group_list').append(obj);
+//        });
+//
+//        // Rotate
+//        if (CHAT_UI.isLandscapeMode()) {
+//            $(".group_list").addClass("col-6").removeClass("col-12");
+//        }
+//
+//        // Set Title
+//        let memberSelectTitle = getLocalizedString("groupSearch")
+//
+//        $('#pills-group-tab').tab('show');
+//
+//        $('#backButton').show();
+//
         if (isInvite) {
-            $('.titleRoomName').text(memberSelectTitle);
             $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
             $('#userSelectionConfirmBtn').show();
             $("#userSelectionConfirmBtn").off().on('click', function(){
                 CHAT_UI.setConfirmButtonEvent(isInvite);
             });
         } else {
-            $('.titleRoomName').text(memberSelectTitle);
             $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
             $('#userSelectionConfirmBtn').show();
             $("#userSelectionConfirmBtn").off().on('click', function(){
                 CHAT_UI.setConfirmButtonEvent(isInvite);
             });
         }
+//
+//        if (CHAT.globalSelectedUserList.length > 0) {
+//            $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
+//        } else {
+//            $('#userSelectionLength').text('');
+//        }
+//
+//        $('#backButton').off().on('click', function() {
+//            // loadingIndicatorを表示
+//            CHAT_UI.showLoadingIndicator();
+//            if (isInvite) {
+//                $('#pills-chat-tab').tab('show');
+//            } else {
+//                if (IS_ONLINE == 'true') {
+//                    android.updateRoomList();
+//                    CHAT_UI.refreshRoomList(chatRoomType.DM);
+//                    CHAT_UI.dismissLoadingIndicator();
+//                }
+//            }
+//        });
+        $('#rootGroupBtn').off();
+        $('#parentGroupBtn').off();
 
-        if (CHAT.globalSelectedUserList.length > 0) {
-            $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
-        } else {
-            $('#userSelectionLength').text('');
+        var result = CHAT_DB.getGroupInfo(groupId);
+
+        $('#childGroupList').html('');
+        $('#userInGroupList').html('');
+        $('#groupPathArea').html('');
+
+        if (typeof result.parentGroupId !== 'undefined') {
+            console.log(result.parentGroupId);
+            $('#parentGroupBtn').on('click', function() {
+                CHAT_UI.refreshGroupList(isInvite, result.parentGroupId);
+            });
+        }
+        if (typeof result.rootGroupId !== 'undefined') {
+            console.log(result.rootGroupId);
+            $('#rootGroupBtn').on('click', function() {
+                CHAT_UI.refreshGroupList(isInvite, result.rootGroupId);
+            });
         }
 
+
+        const groupNaviTemplate = $('#group-navigater-template').html();
+        var groupCount = 0;
+        result.groupPathList.forEach(function(groupPath) {
+            if (groupCount != 0) {
+                $('#groupPathArea').append("<label class='group-navigater'> > </label>");
+            }
+            let html = Mustache.render(groupNaviTemplate, {
+                name: groupPath.groupName,
+                id: groupPath.groupId
+            });
+            let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                CHAT_UI.refreshGroupList(isInvite, groupPath.groupId);
+            });
+            groupCount++;
+            $('#groupPathArea').append(obj);
+            if (IS_ONLINE == 'true') {
+                android.updateGroupInfo(groupPath.groupId);
+                android.updateMyInfo();
+            }
+        })
+
+        const groupTemplate = $('#group-template').html();
+        result.childGroupList.forEach(function(childGroup) {
+                let html = Mustache.render(groupTemplate, {
+                    name: childGroup.groupName,
+                    id: childGroup.groupId
+                });
+
+                let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                    CHAT_UI.refreshGroupList(isInvite, childGroup.groupId);
+                });
+                $('#childGroupList').append(obj);
+            })
+
+        const userTemplate = $('#user-template').html();
+        result.groupUserList.forEach(function(groupUser) {
+            groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
+            let html = Mustache.render(userTemplate, {
+                id: groupUser.shopMemberId,
+                profileImage: groupUser.profileImagePath,
+                name: groupUser.shopMemberName
+            });
+
+            let obj = $(jQuery.parseHTML(html)).on('click', function(){
+                //TODO need onClick Action
+                if (IS_ONLINE == 'true') {
+                    if ($(this).find('.userCheckBox.active').length > 0) {
+                        // remove
+                        CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
+                            return user.loginId != element.loginId;
+                        });
+                    } else {
+                        // add
+                        CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
+                    }
+                    $(this).find('.userCheckBox').toggleClass('active');
+
+                    if (CHAT.globalSelectedUserList.length > 0) {
+                        $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
+                    } else {
+                        $('#userSelectionLength').text('');
+                    }
+                }
+
+            });
+
+            let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
+                return selectedUser.loginId == user.loginId;
+            })
+
+            if (findObj) {
+                $(obj).find('.userCheckBox').toggleClass('active');
+            }
+
+            $('#user_list').append(obj);
+            $('.userCheckBox').show();
+            $('#userInGroupList').append(obj);
+        })
+
         $('#backButton').off().on('click', function() {
             // loadingIndicatorを表示
             CHAT_UI.showLoadingIndicator();
@@ -401,6 +514,9 @@ function setSocketAction () {
                 }
             }
         });
+
+        $('#myGroupArea').hide();
+        $('#allGroupArea').show();
     });
 
     // Update User List(Invite)