Merge branch 'origin/develop_apply_design_chat' into 'origin/develop_apply_design'

Origin/develop apply design chat

See merge request !13

public/css/chat.css

@@ -98,6 +98,7 @@ img {
   float: left;
   padding: 0 0 0 15px;
   width: 85%;
+  padding-top: 6px;
 }
 
 #room_list, #group_list, #user_list, #select_user_list {
@@ -506,7 +507,7 @@ a.article:hover {
   padding-left: 12%;
 }
 .userCheckBox{
-  margin-left: -12%;
+  margin-left: 80%;
 }
 
 .nav-item .dropdown-toggle::after{
@@ -710,7 +711,7 @@ a.article:hover {
 }
 
 .chat-list-type-btn {
-  width: 30%;
+  width: 40%;
 }
 #my_info > div > div {
   padding-left: 5%;
@@ -724,6 +725,10 @@ a.article:hover {
   padding-left: 5%;
 }
 
+#my_group_list > div > div {
+  padding-left: 5%;
+}
+
 .contact-seperator {
   width: 100%;
   background-color: #095395!important;
@@ -741,9 +746,6 @@ a.article:hover {
   min-height: 250px;
   top: 20%;
   background: #F7FFF4;
-}
-
-#namecard {
   z-index: 10051;
 }
 
@@ -760,6 +762,44 @@ a.article:hover {
   text-align: center;
 }
 
+<<<<<<< HEAD
+=======
+.border-bottom-gray {
+  border-bottom: 1px solid #c4c4c4;
+}
+
+#childGroupList  > div > div {
+  padding-left: 5%;
+}
+
+#userInGroupList  > div > div {
+  padding-left: 5%;
+}
+
+.group-navigater {
+  margin-right: 10px;
+}
+
+.namecard-action-area {
+  display: -webkit-box;
+}
+.namecard-action-btn {
+  text-align: center;
+}
+
+.name-chat {
+ background-color: yellow;
+}
+
+.name-voice {
+ background-color: green;
+}
+
+.name-favorite {
+ background-color: blue;
+}
+
+>>>>>>> origin/develop_createRoom_UI
 .inbox_archive {
   width: 100%;
 }
@@ -888,3 +928,7 @@ a.article:hover {
   text-align: center;
   overflow: hidden;
 }
+<<<<<<< HEAD
+=======
+>>>>>>> origin/develop_apply_design_chat
+>>>>>>> origin/develop_createRoom_UI

public/index.html

@@ -221,7 +221,7 @@
     </div>
 
     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <div class="inbox_people">
+      <div class="inbox_people" >
         <div class="heading_srch">
           <div class="srch_bar">
             <div class="stylish-input-group">
@@ -232,14 +232,48 @@
             </div>
           </div>
         </div>
-        <div id="my_info" class="inbox_user row">
+        <div id="groupButtonArea" class="text-center border-bottom-gray">
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
+          <button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
         </div>
-
-        <label class="contact-seperator" id="favorite-seperator">Favorite</label>
-        <div id="favorite_list" class="inbox_user row">
+        <div id="myGroupArea">
+          <div id="my_info" class="inbox_user row">
+          </div>
+          <label class="contact-seperator" id="favorite-seperator">Favorite</label>
+          <div id="favorite_list" class="inbox_user row">
+          </div>
+          <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
+          <div id="my_group_list" class="inbox_user row">
+          </div>
         </div>
-        <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
-        <div id="my_group_list" class="inbox_user row">
+
+        <div id="allGroupArea">
+          <label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
+          <div id="groupPathArea" style="float:left;">
+          </div>
+          <label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
+          <div id="groupBtnArea">
+            <div class="user_list col-12" id="rootGroupBtn">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO ROOT GROUP</h5>
+                </div>
+              </div>
+            </div>
+            <div class="user_list col-12" id="parentGroupBtn">
+              <div class="user_people">
+                <div class="user_ib">
+                  <h5>MOVE TO PARENTS GROUP</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+          <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
+          <div id="childGroupList" class="inbox_user row group-search-list">
+          </div>
+          <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
+          <div id="userInGroupList" class="inbox_user row group-search-list">
+          </div>
         </div>
 
 
@@ -384,8 +418,9 @@
   </ul>
 </div>
 
+<div class="popup" id="myNamecard"></div>
+<div class="popup" id="userNamecard"></div>
 
-<div class="popup" id="namecard"></div>
 <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
   <div class="col-4">
     <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
@@ -398,7 +433,7 @@
   </div>
 </nav>
 <script id="my-namecard-template" type="text/template">
-  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div>
   <div class="namecard_img">
     <img src="./images/user-profile.png" alt>
     <div class="namedard-img-upload" >Upload</div>
@@ -411,7 +446,7 @@
   </div>
 </script>
 <script id="namecard-template" type="text/template">
-  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div>
   <div class="namecard_img">
     <img src="./images/user-profile.png" alt>
     <div class="namecard-login-id">{{name}}</div>
@@ -421,11 +456,22 @@
     <li><b>{{.}}</b></li>
     {{/groupPathList}}
   </div>
+
+  <div class="text-center">
+    <button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button>
+    <button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button>
+    {{#isFavorite}}
+    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
+    {{/isFavorite}}
+    {{^isFavotire}}
+    <button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
+    {{/isFavorite}}
+  </div>
 </script>
 <script id="message-template" type="text/template">
   <div class="incoming_msg">
     <div class="incoming_msg_img">
-      <img src={{{profileImage}}} alt="">
+      <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
     </div>
     <div class="received_msg">
       <div class="received_withd_msg">
@@ -478,7 +524,7 @@
   </div>
 </script>
 <script id="group-template" type="text/template">
-  <div class="group_list col-12" data-name="{{name}}">
+  <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
     <div class="group_people">
       <div class="group_img">
         <img src="./images/group-image.png" alt="">
@@ -512,6 +558,9 @@
     </div>
   </div>
 </script>
+<script id="group-navigater-template" type="text/template">
+  <label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
+</script>
 <script id="favorite-user-template" type="text/template">
   <div class="user_list col-12" data-name="{{name}}">
     <div class="user_people">

public/js/chat-db.js

@@ -14,11 +14,13 @@ CHAT_DB.getRoomList = function(roomType) {
 
 //ロカールDBからログインしたユーザのデータを取得する。
 CHAT_DB.getMyInfo = function(input) {
+    var result = JSON.parse(android.getMyInfo());
+    CHAT.globalLoginParameter.shopMemberId =  result.shopMemberId;
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
     } else if (CHAT_UTIL.isAndroid()) {
         //String形式をJsonに変更してReturn
-    	return JSON.parse(android.getMyInfo());
+    	return result;
     }
 };
 
@@ -58,6 +60,26 @@ CHAT_DB.getMyGroupUsers = function() {
     }
 };
 
+<<<<<<< HEAD
+=======
+CHAT_DB.getGroupInfo = function(groupId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getGroupInfo(groupId));
+    }
+};
+
+CHAT_DB.getNameCardData = function(shopMemberId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getNameCardData(shopMemberId));
+    }
+};
+>>>>>>> origin/develop_createRoom_UI
 CHAT_DB.getArchiveList = function() {
 	if (CHAT_UTIL.isIOS()) {
 		// String形式をJsonに変更してReturn
@@ -123,4 +145,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) {
 		//TODO Android処理追加必要
 	}
 };
+<<<<<<< HEAD
 
+=======
+>>>>>>> origin/develop_createRoom_UI

public/js/chat-ui.js

@@ -55,11 +55,12 @@ $(window).on('resize', function() {
 // チャットルーム生成ボタン処理
 $('#createChatRoom').on('click', function() {
     //loadingIndicatorを表示
-    CHAT_UI.showLoadingIndicator();
+//    CHAT_UI.showLoadingIndicator();
 
     let isInvite = false;
     CHAT.globalIsInvite = isInvite;
-    socket.emit('getGroupList', isInvite);
+//    socket.emit('getGroupList', isInvite);
+    CHAT_UI.refreshGroupSearch('0', isInvite);
 });
 
 // Room Delete
@@ -475,10 +476,15 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
             break;
 
         case '#pills-contact':
-            $('#namecard').html('');
+            $('#myNamecard').html('');
             $('#homeButton').show();
             $("#backButton").hide();
             $('.titleRoomName').show();
+            $('#myGroupArea').show();
+            $('#newRoomName').val('');
+            $('#userSelectionLength').text('');
+            CHAT.globalSelectedUserList = [];
+            $('#allGroupArea').hide();
             $('#my_info').show();
             $('#bottomNav').show();
             break;
@@ -647,7 +653,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
         let html = Mustache.render(template, {
             id: user.shopMemberId,
             profileImage: user.profileImagePath,
-            name: user.loginId
+            name: user.shopMemberName
         });
         // TODO 次のコミットに参考事項
         // チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
@@ -671,7 +677,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
     $('#backButton').off().on('click', function() {
         //loadingIndicatorを表示
         CHAT_UI.showLoadingIndicator();
-        socket.emit('getGroupList', isInvite)
+        CHAT_UI.refreshGroupSearch("0", isInvite);
     });
 
     $("#userSelectionConfirmBtn").off().on('click', function(){
@@ -714,10 +720,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
                     // ルーム名のURIencodingを行う
                     //const encodedRoomName = encodeURIComponent(newRoomName);
 
-
-
                     //todo android create room api
-                    android.createChatRoom("1",userIdList.join(','),newRoomName);
+                    android.createChatRoom("1", userIdList.join(','), newRoomName);
 
 
                     /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
@@ -807,15 +811,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
 
                     // ルーム名のtrimmingした後、URIencodingを行う
                     const encodedRoomName = encodeURIComponent(trimmedRoomName);
-                    socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
-                        socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
-                            CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
-                            $('#messages').html('');
-                            $('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
-                            $("#userSelectionDeleteBtn").hide();
-                            $('#pills-chat-tab').tab('show');
-                        });
-                    });
+                    android.createChatRoom("1",userIdList.join(','),encodedRoomName);
+
                 }
             }
         }
@@ -879,6 +876,19 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
     $("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
     $("#groupBtn").text(getLocalizedString("groupChatRoom"))
 
+    $("#myGroupBtn").text(getLocalizedString("myGroup"))
+    $("#allGroupBtn").text(getLocalizedString("allGroup"))
+
+    $("#groupPathSeperator").text(getLocalizedString("groupPath"))
+    $("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
+    $("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
+    $("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
+    $("#childGroupSeperator").text(getLocalizedString("childGroup"))
+    $("#groupUserSeperator").text(getLocalizedString("groupUser"))
+
+
+
+
     $("#favorite-seperator").text(getLocalizedString("favorite"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
 }
@@ -906,28 +916,183 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
 }
 
 $('#contactButton').on('click', function(event){
-    CHAT_UI.refreshContactScreen();
+    let isCreate = false;
+    let isInvite = false;
+    CHAT_UI.refreshContactScreen(isCreate, isInvite);
 });
 
 $('#chatButton').on('click', function(event){
     CHAT_UI.refreshRoomList(chatRoomType.DM);
 });
 
+<<<<<<< HEAD
+=======
+<<<<<<< HEAD
+CHAT_UI.refreshGroupSearch = function(groupId, isInvite) {
+    CHAT_UI.showLoadingIndicator();
+    $('#pills-contact-tab').tab('show');
+
+    //画面タイトル設定
+    let memberSelectTitle = getLocalizedString("userSearch")
+    $('.titleRoomName').text(memberSelectTitle);
+
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo(groupId);
+    }
+    $('#rootGroupBtn').off();
+    $('#parentGroupBtn').off();
+
+    $('#backButton').show();
+    $('#homeButton').hide();
+
+    $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
+    $('#userSelectionConfirmBtn').show();
+    $("#userSelectionConfirmBtn").off().on('click', function(){
+        CHAT_UI.setConfirmButtonEvent(isInvite);
+    });
+
+    var result = CHAT_DB.getGroupInfo(groupId);
+
+    $('#childGroupList').html('');
+    $('#userInGroupList').html('');
+    $('#groupPathArea').html('');
+
+    if (typeof result.parentGroupId !== 'undefined') {
+        $('#parentGroupBtn').on('click', function() {
+            CHAT_UI.refreshGroupSearch(result.parentGroupId, isInvite);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        $('#rootGroupBtn').on('click', function() {
+            CHAT_UI.refreshGroupSearch(result.rootGroupId, isInvite);
+        });
+    }
+
+    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.refreshGroupSearch(groupPath.groupId, isInvite);
+        });
+        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.refreshGroupSearch(childGroup.groupId, isInvite);
+        });
+        $('#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 groupUser.shopMemberId != element.shopMemberId;
+                    });
+                } else {
+                    // add
+                    CHAT.globalSelectedUserList.push({shopMemberName:groupUser.shopMemberName, shopMemberId : groupUser.shopMemberId, profileImagePath: groupUser.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.shopMemberId == groupUser.shopMemberId;
+        })
+
+        if (findObj) {
+            $(obj).find('.userCheckBox').toggleClass('active');
+        }
+
+        $('#userInGroupList').append(obj);
+    })
+
+    $('#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();
+            }
+        }
+    });
+
+    $('#myGroupBtn').off().on('click', function() {
+        let isCreate = true;
+        CHAT_UI.refreshContactScreen(isCreate, isInvite);
+    });
+
+    CHAT_UI.dismissLoadingIndicator();
+    $('.userCheckBox').show();
+    $('#groupButtonArea').show();
+    $('#allGroupArea').show();
+    $('#myGroupArea').hide();
+}
+>>>>>>> origin/develop_createRoom_UI
 $('#archiveButton').on('click', function(event){
     CHAT_UI.refreshArchiveScreen();
 });
 
+<<<<<<< HEAD
 CHAT_UI.refreshContactScreen = function() {
+=======
+CHAT_UI.refreshContactScreen = function(isCreate, isInvite) {
+
+>>>>>>> origin/develop_createRoom_UI
     //loadingIndicatorを表示
     $('#my_info').html('');
     $('#favorite_list').html('');
     $('#my_group_list').html('');
     CHAT_UI.showLoadingIndicator();
-    $('#pills-contact-tab').tab('show');
+    if (isCreate != true) {
+        $('#pills-contact-tab').tab('show');
+        //画面タイトル設定
+        let contactListTitle = getLocalizedString("contactListTitle");
+        $('.titleRoomName').text(contactListTitle);
+        $('#backButton').hide();
+        $('#homeButton').show();
+        $('#userSelectionConfirmBtn').hide();
+    }
+    $('#myGroupArea').show();
+    $('#allGroupArea').hide();
 
-    //画面タイトル設定
-    let contactListTitle = getLocalizedString("contactListTitle");
-    $('.titleRoomName').text(contactListTitle);
 
     // グループの様式を読み込む
     const groupTemplate = $('#group-template').html();
@@ -935,41 +1100,43 @@ CHAT_UI.refreshContactScreen = function() {
     // ユーザの様式を読み込む
     const userTemplate = $('#user-template').html();
     const myNamecardTemplate = $('#my-namecard-template').html();
-
+    const userNamecardTemplate = $('#namecard-template').html();
     if (IS_ONLINE == 'true') {
-        android.updateGroupInfo();
+        android.updateGroupInfo('0');
         android.updateMyInfo();
         android.updateGroupUser();
     }
 
-    var myInfo = CHAT_DB.getMyInfo();
+    if (isCreate != true) {
+        var myInfo = CHAT_DB.getMyInfo();
 
-    myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
+        myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
 
 
 
-    let myNamecardHtml = Mustache.render(myNamecardTemplate, {
-        loginId: myInfo.shopMemberId,
-        profileImage: myInfo.profileImagePath,
-        name: myInfo.shopMemberName,
-        groupPathList: myInfo.groupPathList
-    });
-    let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
+        let myNamecardHtml = Mustache.render(myNamecardTemplate, {
+            loginId: myInfo.shopMemberId,
+            profileImage: myInfo.profileImagePath,
+            name: myInfo.shopMemberName,
+            groupPathList: myInfo.groupPathList
+        });
+        let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
 
-    });
-    $('#namecard').append(myNamecardObj);
+        });
+        $('#myNamecard').append(myNamecardObj);
 
-    let html = Mustache.render(userTemplate, {
-        id: myInfo.shopMemberId,
-        profileImage: myInfo.profileImagePath,
-        name: myInfo.shopMemberName
-    });
+        let html = Mustache.render(userTemplate, {
+            id: myInfo.shopMemberId,
+            profileImage: myInfo.profileImagePath,
+            name: myInfo.shopMemberName
+        });
 
-    let obj = $(jQuery.parseHTML(html)).on('click', function(){
-        CHAT_UI.showNamecard('namecard');
-    });
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
+            CHAT_UI.showNamecard('myNamecard');
+        });
 
-    $('#my_info').append(obj);
+        $('#my_info').append(obj);
+    }
 
     var groupUserList = CHAT_DB.getMyGroupUsers();
     groupUserList.forEach(function(groupUser) {
@@ -981,13 +1148,36 @@ CHAT_UI.refreshContactScreen = function() {
         });
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
-            //TODO need onClick Action
-            if (IS_ONLINE == 'true') {
-                android.updateUserInfo(groupUser.shopMemberId);
-            }
+            if (isCreate != true) {
+                CHAT_UI.makeNameCard(groupUser.shopMemberId);
+            } else {
+                if ($(this).find('.userCheckBox.active').length > 0) {
+                    // remove
+                    CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
+                        return groupUser.shopMemberId != element.shopMemberId;
+                    });
+                } else {
+                    // add
+                    CHAT.globalSelectedUserList.push({shopMemberName:groupUser.shopMemberName, shopMemberId : groupUser.shopMemberId, profileImagePath: groupUser.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.shopMemberId == groupUser.shopMemberId;
+        })
+
+        if (findObj) {
+            $(obj).find('.userCheckBox').toggleClass('active');
+        }
+
         $('#my_group_list').append(obj);
     })
     var favoriteCount = 0;
@@ -999,6 +1189,10 @@ CHAT_UI.refreshContactScreen = function() {
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
+            if (isCreate != true) {
+            } else {
+                CHAT_UI.refreshGroupSearch(favoriteGroup.groupId, isInvite);
+            }
         });
         favoriteCount++
         $('#favorite_list').append(obj);
@@ -1015,7 +1209,34 @@ CHAT_UI.refreshContactScreen = function() {
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
+            if (isCreate != true) {
+            } else {
+                if ($(this).find('.userCheckBox.active').length > 0) {
+                    // remove
+                    CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
+                        return favoriteUser.shopMemberId != element.shopMemberId;
+                    });
+                } else {
+                    // add
+                    CHAT.globalSelectedUserList.push({shopMemberName:favoriteUser.shopMemberName, shopMemberId : favoriteUser.shopMemberId, profileImagePath: favoriteUser.profileImagePath});
+                }
+                $(this).find('.userCheckBox').toggleClass('active');
+
+                if (CHAT.globalSelectedUserList.length > 0) {
+                    $('#userSelectionL ength').text(CHAT.globalSelectedUserList.length);
+                } else {
+                    $('#userSelectionLength').text('');
+                }
+            }
         });
+
+        let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
+            return selectedUser.shopMemberId == favoriteUser.shopMemberId;
+        })
+
+        if (findObj) {
+            $(obj).find('.userCheckBox').toggleClass('active');
+        }
         favoriteCount++
         $('#favorite_list').append(obj);
     })
@@ -1027,6 +1248,19 @@ CHAT_UI.refreshContactScreen = function() {
         $('#favorite_list').show();
         $('#favorite-seperator').show();
     }
+
+    if (isCreate == true) {
+        $('.userCheckBox').show();
+        $('#allGroupBtn').off().on('click', function() {
+            CHAT_UI.refreshGroupSearch("0", isInvite);
+        });
+    } else {
+        $('.userCheckBox').hide();
+        $('#allGroupBtn').off().on('click', function() {
+            CHAT_UI.refesshAllGroupSearch("0");
+        });
+    };
+
     CHAT_UI.dismissLoadingIndicator();
 }
 
@@ -1126,10 +1360,8 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
 };
 
 CHAT_UI.loadMessages = function(messages, roomId, roomName) {
-
     $('#messages').html('');
     $('.titleRoomName').text(roomName).data('roomName', roomName);
-    $('#pills-chat-tab').tab('show');
     $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
     let jQueryMessages = $('#messages');
         // スクロールの変化を防ぐため以前画面の高さを保存する
@@ -1157,6 +1389,7 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
              let html = Mustache.render(template, {
                  text: message.message,
                  from: message.loginId,
+                 shopMemberId: message.shopMemberId,
                  profileImage: message.profileImagePath,
                  createdAtDay: messageTime.createdAtDay,
                  createdAtTime: messageTime.createdAtTime
@@ -1199,31 +1432,267 @@ $('#groupBtn').on('click', function (e){
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
 
+
+
 CHAT_UI.showNamecard = function(id) {
-    $('#namecard').appendTo("body").modal({
+    $('#'+id).appendTo("body").modal({
         backdrop: 'static',
         keyboard: false
     })
 }
 
 CHAT_UI.hideNamecard = function(id) {
-    $('#namecard').modal('hide');
+    $('#'+id).modal('hide');
 }
 
-$(document).click(function (e) {
-  if($(e.target).hasClass('my-name-card-close')){
-    CHAT_UI.hideNamecard('namecard');
-  }
-});
-
 CHAT_UI.showUserNamecard = function(shopMemberId) {
 
-//    $('#namecard').appendTo("body").modal({
+//    $('#myNamecard').appendTo("body").modal({
 //        backdrop: 'static',
 //        keyboard: false
 //    })
 }
 
+<<<<<<< HEAD
+=======
+$('#allGroupBtn').on('click', function (e){
+    CHAT_UI.refesshAllGroupSearch('0')
+});
+
+CHAT_UI.refesshAllGroupSearch = function(groupId) {
+    const userNamecardTemplate = $('#namecard-template').html();
+    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') {
+        $('#parentGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        $('#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(){
+                CHAT_UI.makeNameCard(groupUser.shopMemberId);
+            });
+
+            $('#userInGroupList').append(obj);
+        })
+
+    $('#myGroupBtn').off().on('click', function (e){
+        $('#myGroupArea').show();
+        $('#allGroupArea').hide();
+    });
+
+    $('.userCheckBox').hide();
+    $('#myGroupArea').hide();
+    $('#allGroupArea').show();
+}
+
+CHAT_UI.startChat = function (userShopMemberId,userName) {
+    CHAT_UI.showLoadingIndicator();
+    var userIdList = [];
+    userIdList.push(userShopMemberId);
+
+    // 参加ユーザ名でルーム名を生成
+    let newRoomName = CHAT.globalLoginParameter.loginId + ',' +userName;
+    android.createChatRoom(chatRoomType.DM, userIdList.join(','),newRoomName);
+    CHAT_UI.hideNamecard(nameCardAreaId.USER);
+};
+
+CHAT_UI.startVoice = function () {
+    //add Android Chat click
+    console.log("VoiceClick");
+};
+
+CHAT_UI.changeFavorite = function () {
+    //add Android Chat click
+    console.log("FavoriteClick");
+};
+
+CHAT_UI.removeFavoriteUser = function (shopMemberId) {
+    //add Android Chat click
+    console.log("removeFU");
+};
+
+CHAT_UI.insertFavoriteUser = function (shopMemberId) {
+    //add Android Chat click
+    console.log("insertFU");
+};
+
+CHAT_UI.changeFavorite = function () {
+    //add Android Chat click
+    console.log("FavoriteClick");
+};
+
+CHAT_UI.makeNameCard = function (shopMemberId) {
+    var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
+    const userNamecardTemplate = $('#namecard-template').html();
+    let namecardHtml = Mustache.render(userNamecardTemplate, {
+        loginId: nameCardInfo.shopMemberId,
+        profileImage: nameCardInfo.profileImagePath,
+        name: nameCardInfo.shopMemberName,
+        groupPathList: nameCardInfo.groupPathList,
+        chat: getLocalizedString("chat"),
+        voice: getLocalizedString("voice"),
+        favorite: getLocalizedString("addFavorite")
+    });
+
+    let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
+    });
+
+    $('#userNamecard').html(namecardObj);
+    CHAT_UI.showNamecard('userNamecard');
+};
+
+CHAT_UI.makeNameCardInChatRoom = function (chatRoomId) {
+    var nameCardInfo = CHAT_DB.getNameCardData(chatRoomId);
+    const userNamecardTemplate = $('#namecard-template').html();
+    let namecardHtml = Mustache.render(userNamecardTemplate, {
+        loginId: nameCardInfo.shopMemberId,
+        profileImage: nameCardInfo.profileImagePath,
+        name: nameCardInfo.shopMemberName,
+        groupPathList: nameCardInfo.groupPathList,
+        chat: getLocalizedString("chat"),
+        voice: getLocalizedString("voice"),
+        favorite: getLocalizedString("addFavorite")
+    });
+
+    let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
+    });
+
+    $('#userNamecard').html(namecardObj);
+    CHAT_UI.showNamecard('userNamecard');
+};
+
+CHAT_UI.refesshAllGroupSearchFaborite = function(groupId) {
+    const userNamecardTemplate = $('#namecard-template').html();
+    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') {
+        $('#parentGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        $('#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(){
+                CHAT_UI.makeNameCard(groupUser.shopMemberId);
+            });
+
+            $('#userInGroupList').append(obj);
+        })
+
+    $('#myGroupArea').hide();
+    $('#allGroupArea').show();
+}
+>>>>>>> origin/develop_createRoom_UI
 CHAT_UI.refreshArchiveScreen = function() {
 	// loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
@@ -1418,3 +1887,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
 	// loadingIndicatorを非表示
 	CHAT_UI.dismissLoadingIndicator();
 }
+<<<<<<< HEAD
+=======
+>>>>>>> origin/develop_apply_design_chat
+>>>>>>> origin/develop_createRoom_UI

public/js/chat-websocket.js

@@ -365,23 +365,20 @@ function setSocketAction () {
         $('#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 {

public/js/constant.js

@@ -25,3 +25,8 @@ const chatRoomType = {
     DM : "1",
     GROUP : "0"
 }
+
+const nameCardAreaId = {
+    MY : "myNamecard",
+    USER : "userNamecard"
+}
\ No newline at end of file

public/js/language_en.js

@@ -59,6 +59,20 @@ $.lang.en = {
     "favorite":"Favorite List",
     "mygroup":"My Group",
     "groupChatRoom":"Group",
+<<<<<<< HEAD
+=======
+    "myGroup":"My Group",
+    "allGroup":"All Group",
+    "returnToRootGroup":"Return to Root Group",
+    "returnToParentGroup":"Return to Parent Group",
+    "quickBtn":"Quick Button",
+    "groupPath":"Group Path",
+    "childGroup":"Minor Group",
+    "groupUser":" Member List",
+    "chat":"Chat",
+    "voice":"Call",
+    "addFavorite":"Add Favorite"
+>>>>>>> origin/develop_createRoom_UI
     "archiveListTitle":"Archive",
     "archiveTypeImage":"Image",
     "archiveTypeMovie":"Movie",

public/js/language_ja.js

@@ -59,6 +59,20 @@ $.lang.ja = {
     "favorite":"お気に入りリスト",
     "mygroup":"マイグループ",
     "groupChatRoom":"グループ",
+<<<<<<< HEAD
+=======
+    "myGroup":"マイグループ",
+    "allGroup":"全グループ",
+    "returnToRootGroup":"トップグループに戻る",
+    "returnToParentGroup":"上位グループに戻る",
+    "quickBtn":"クイックボタン",
+    "groupPath":"グループパンクズ",
+    "childGroup":"下位グループ",
+    "groupUser":"所属ユーザ",
+    "chat":"チャット",
+    "voice":"通話",
+    "addFavorite":"お気に入り追加"
+>>>>>>> origin/develop_createRoom_UI
     "archiveListTitle":"アーカイブ",
     "archiveTypeImage":"画像",
     "archiveTypeMovie":"動画",

public/js/language_ko.js

@@ -59,6 +59,20 @@ $.lang.ko = {
     "favorite":"즐겨찾기리스트",
     "mygroup":"마이그룹",
     "groupChatRoom":"그룹",
+<<<<<<< HEAD
+=======
+    "myGroup":"내그룹",
+    "allGroup":"전그룹",
+    "returnToRootGroup":"최상위그룹으로 돌아가기",
+    "returnToParentGroup":"상위그룹으로 돌아가기",
+    "quickBtn":"퀵버튼",
+    "groupPath":"그룹 경로",
+    "childGroup":"하위 그룹",
+    "groupUser":"소속 사용자",
+    "chat":"채팅",
+    "voice":"통화",
+    "addFavorite":"즐겨찾기추가"
+>>>>>>> origin/develop_createRoom_UI
     "archiveListTitle":"아카이브",
     "archiveTypeImage":"이미지",
     "archiveTypeMovie":"동영상",

public_new/archive.html

@@ -64,7 +64,6 @@
       </ul>
     </div>
   </main>
-
   <!-- フッター -->
   <footer>
     <div class="footer-wrap">

public_new/chat.html

@@ -68,8 +68,6 @@
     <!-- オーバーレイ -->
     <div class="chat_list">
       <ul class="overlay_src_msg">
-
-
       </ul>
     </div>
   </main>
@@ -123,7 +121,6 @@
     String.prototype.replaceAll = function(org, dest) {
       return this.split(org).join(dest);
     }
-
     let CHAT_SERVER_URL = '';
     let CMS_SERVER_URL = '';
     let ASSET_PATH = './';
@@ -133,6 +130,7 @@
     $("#loadingArea").load("./loading.html");
     android.getLoginParameter();
     android.getGlobalParameter();
+    android.saveSelectedUserList("");
 
     function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
       CHAT_SERVER_URL = chatServerUrl;
@@ -142,6 +140,7 @@
       IS_ONLINE = isOnline;
       console.log("onChat");
       CHAT_UI.refreshRoomList(chatRoomType.GROUP);
+      CHAT_UI.dismissLoadingIndicator();
     };
 </script>
 </body>

public_new/chat_add_user.html

@@ -10,421 +10,172 @@
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/chat.css">
+  <link rel="stylesheet" href="./css/contact.css">
   <link rel="stylesheet" href="./css/footer.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
 </head>
 <body>
-  <!-- ナビメニュー -->
-  <nav>
-    <div class="row h-100 align-items-center">
-      <div class="col-4 pr-0">
-        <div class="nav-item">
-          <div class="nav_prev">
-            <a href="chat_room.html"><span>ルーム</span></a>
-          </div>
+<!-- ナビメニュー -->
+<nav>
+  <div class="row h-100 align-items-center">
+    <div class="col-4 pr-0">
+      <div class="nav-item">
+        <div class="nav_prev">
+          <a href="chat_room.html"><span>ルーム</span></a>
         </div>
       </div>
-      <div class="col-4 p-0">
-        <div class="nav-item p-0">
-          <h1 class="nav-ttl">ユーザー招待</h1>
-        </div>
+    </div>
+    <div class="col-4 p-0">
+      <div class="nav-item p-0">
+        <h1 class="nav-ttl" id="title" style="font-size: 13px;">ユーザ招待</h1>
       </div>
-      <div class="col-4 pl-0">
-        <div class="nav-item text-right">
-        </div>
-      </div><!-- .col -->
-    </div><!-- .row -->
-  </nav><!-- nav -->
-
-  <!-- コンテンツ -->
-  <main id="chat_add_user">
-    <form action="chat_add_user_confirm.html" method="post">
-      <!-- ユーザー検索 -->
-      <div class="search_form">
-        <form>
-          <input type="search" name="search" placeholder="ユーザー検索">
-          <span class="src_icon"></span>
-          <a href="#" class="cancel none">キャンセル</a>
-        </form>
+    </div>
+    <div class="col-4 pl-0">
+      <div class="nav-item text-right">
       </div>
-      <!-- タブ -->
-      <div class="content tabs">
-        <input id="tab1" type="radio" name="tab_item" checked>
-        <label class="tab_item" for="tab1">マイグループ</label>
-        <input id="tab2" type="radio" name="tab_item">
-        <label class="tab_item" for="tab2">全グループ</label>
-        <div class="tab_content" id="tab1_content">
-          <div class="chat_list">
-            <!-- お気に入りグループ -->
-            <div class="category">お気に入り</div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star active"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star active"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <!-- マイグループ -->
-            <div class="category">マイグループ1</div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <!-- マイグループ -->
-            <div class="category">マイグループ2</div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
+    </div><!-- .col -->
+  </div><!-- .row -->
+</nav><!-- nav -->
+
+<!-- コンテンツ -->
+<main id="chat_add_user">
+  <form id="addUserForm" action="chat_add_user_confirm.html" method="post">
+    <!-- ユーザー検索 -->
+    <div class="search_form my-2">
+      <form>
+        <input type="search" name="search" placeholder="ユーザー検索">
+        <span class="src_icon"></span>
+        <a href="#" class="cancel none">キャンセル</a>
+      </form>
+    </div>
+
+    <!-- タブ -->
+    <div class="content tabs">
+      <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
+      <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
+      <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
+      <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
+      <div class="tab_content" id="tab1_content">
+        <div class="chat_list">
+          <!-- お気に入りグループ -->
+          <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
+          <div id="favoriteListForMakeRoom"></div>
+          <div id="myGroupListForMakeRoom"></div>
         </div>
-        <div class="tab_content" id="tab2_content">
-          <div class="chat_list">
-            <!-- 全グループ -->
-            <div class="category">グループ1</div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <div class="category">グループ2</div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
+      </div>
+      <div class="tab_content" id="tab2_content">
+        <div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
+        <div class="chat_list">
+          <!-- 全グループ -->
+          <ul class="p-0 chat_make_room_list">
+            <li class="d-flex align-items-center">
+              <a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
+                <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
                     <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+                      <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                     </div>
                   </div>
-                  <div class="chat_item_m">
+                  <div class="chat_item_m px-0">
                     <div class="d-flex flex-column">
                       <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                        <span class="chat_item_ttl">トップグループに戻る</span>
                       </div>
                     </div>
                   </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
                 </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
+              </a>
+            </li>
+            <li class="d-flex align-items-center">
+              <a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
+                <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
                     <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+                      <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                     </div>
                   </div>
-                  <div class="chat_item_m">
+                  <div class="chat_item_m px-0">
                     <div class="d-flex flex-column">
                       <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                        <span class="chat_item_ttl">上位グループに戻る</span>
                       </div>
                     </div>
                   </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
                 </div>
-              </li>
-            </ul>
-          </div>
+              </a>
+            </li>
+            <div id="childGroupListAreaForMakeRoom"></div>
+            <div id="userInGroupListForMakeRoom"></div>
+          </ul>
         </div>
       </div>
-      <!-- オーバーレイ -->
-      <div class="chat_list">
-        <ul class="overlay_src_msg">
-        </ul>
-      </div>
-      <!-- ユーザー招待確認ボタン -->
-      <div class="add_user_confirm_btn">
-        <button type="button" name="button">
-          確認<br>
-          <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
-      </div>
-    </form>
-  </main>
-
+    </div>
+    <div class="chat_make_room">
+      <ul class="overlay_src_msg">
+      </ul>
+    </div>
 
+    <!-- ルーム解説ボタン -->
+    <div class="make_room_confirm_btn content" id="addUserConfirmBtn">
+      <button type="button" name="button">
+        確認<br>
+        <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
+    </div>
+  </form>
+</main>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>
 <script src="./js/libs/moment.js"></script>
+<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+<script src="./js/libs/mustache.min.js"></script>
 <script src="./js/libs/bootstrap.min.js"></script>
 <script src="./js/libs/jquery.mark.min.js"></script>
-<script src="./js/chat.js"></script>
 <script src="./js/common.js"></script>
+<script src="./js/loading.js"></script>
+<script src="./js/language.js"></script>
+<script src="./js/language_ko.js" charset="UTF-8"></script>
+<script src="./js/language_ja.js" charset="UTF-8"></script>
+<script src="./js/language_en.js" charset="UTF-8"></script>
+<script src="./js/constant.js"></script>
+<script src="./js/chat.js"></script>
+<script src="./js/chat-ui.js"></script>
+<script src="./js/chat-util.js"></script>
+<script src="./js/chat-db.js"></script>
+<script src="./js/chat-add-user.js"></script>
+<script>
+    String.prototype.replaceAll = function(org, dest) {
+      return this.split(org).join(dest);
+    }
+
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    android.getLoginParameter();
+    android.getGlobalParameter();
+
+    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      if (CHAT_DB.loadSelectedUsers() != "") {
+        let selectedUsers = CHAT_DB.loadSelectedUsers();
+        selectedUsers.forEach(function(user) {
+          CHAT.globalSelectedUserList.push(user.shopMemberId);
+        })
+      };
+
+      if (CHAT.globalSelectedUserList.length > 0) {
+        $('.select_member_num').text(CHAT.globalSelectedUserList.length);
+      } else {
+        $('.select_member_num').text('0');
+      }
+      CHAT_UI.refreshMyGroupForAddUser();
+    };
+  </script>
 </body>
 </html>

public_new/chat_add_user_confirm.html

@@ -43,165 +43,58 @@
       <div class="chat_list">
         <h2>参加者</h2>
         <ul class="p-0 chat_make_room_list">
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
+          <div id="selectedUserList"></div>
         </ul>
       </div>
 
       <!-- ユーザー招待ボタン -->
       <div class="add_user_btn">
-        <button type="button" name="button">招待</button>
+        <button type="button" name="button" id="addUserBtn">招待</button>
       </div>
     </form>
   </main>
 
+  <script src="./js/libs/jquery-3.3.1.min.js"></script>
+  <script src="./js/language.js"></script>
+  <script src="./js/language_ko.js" charset="UTF-8"></script>
+  <script src="./js/language_ja.js" charset="UTF-8"></script>
+  <script src="./js/language_en.js" charset="UTF-8"></script>
+  <script src="./js/libs/moment.js"></script>
+  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+  <script src="./js/libs/mustache.min.js"></script>
+  <script src="./js/libs/bootstrap.min.js"></script>
+  <script src="./js/libs/jquery.mark.min.js"></script>
+  <script src="./js/common.js"></script>
+  <script src="./js/loading.js"></script>
+  <script src="./js/constant.js"></script>
+  <script src="./js/chat.js"></script>
+  <script src="./js/chat-ui.js"></script>
+  <script src="./js/chat-util.js"></script>
+  <script src="./js/chat-db.js"></script>
+  <script>
+    String.prototype.replaceAll = function(org, dest) {
+      return this.split(org).join(dest);
+    }
 
-<script src="./js/libs/jquery-3.3.1.min.js"></script>
-<script src="./js/libs/moment.js"></script>
-<script src="./js/libs/bootstrap.min.js"></script>
-<script src="./js/libs/jquery.mark.min.js"></script>
-<script src="./js/chat.js"></script>
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    android.getLoginParameter();
+    android.getGlobalParameter();
+
+    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      //CHAT_UI.showMakeRoomConfirmView();
+      CHAT_UI.showAddUserConfirmView();
+    };
+  </script>
 </body>
 </html>

public_new/chat_make_room.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/chat.css">
+  <link rel="stylesheet" href="./css/contact.css">
   <link rel="stylesheet" href="./css/footer.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
 </head>
@@ -26,7 +27,7 @@
       </div>
       <div class="col-4 p-0">
         <div class="nav-item p-0">
-          <h1 class="nav-ttl">ルーム開設</h1>
+          <h1 class="nav-ttl" id="title" style="font-size: 13px;">ルーム開設</h1>
         </div>
       </div>
       <div class="col-4 pl-0">
@@ -37,385 +38,144 @@
   </nav><!-- nav -->
 
   <!-- コンテンツ -->
-  <main>
-    <form class="" action="chat_make_room_confirm.html" method="post">
+  <main id="chatMakeRoom">
+    <form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
       <!-- ユーザー検索 -->
       <div class="search_form my-2">
         <form>
           <input type="search" name="search" placeholder="ユーザー検索">
           <span class="src_icon"></span>
+          <a href="#" class="cancel none">キャンセル</a>
         </form>
       </div>
 
       <!-- タブ -->
-      <div class="tabs">
-        <input id="tab1" type="radio" name="tab_item" checked>
-        <label class="tab_item" for="tab1">マイグループ</label>
-        <input id="tab2" type="radio" name="tab_item">
-        <label class="tab_item" for="tab2">全グループ</label>
+      <div class="content tabs">
+        <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item">
+        <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
+        <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item" checked>
+        <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
         <div class="tab_content" id="tab1_content">
           <div class="chat_list">
             <!-- お気に入りグループ -->
             <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l">
-                    <div class="thumbnail4 thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m px-0">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star active"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star active"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <!-- マイグループ -->
-            <div class="category"><div class="category_name"><span>マイグループ1</span></div></div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <!-- マイグループ -->
-            <div class="category"><div class="category_name"><span>マイグループ2</span></div></div>
-            <ul class="p-0 chat_make_room_list">
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
+            <div id="favoriteListForMakeRoom"></div>
+            <div id="myGroupListForMakeRoom"></div>
           </div>
         </div>
         <div class="tab_content" id="tab2_content">
+          <div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
           <div class="chat_list">
             <!-- 全グループ -->
-            <div class="category"><div class="category_name"><span>グループ1</span></div></div>
             <ul class="p-0 chat_make_room_list">
               <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
+                <a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
+                  <div class="chat_item d-flex flex-row align-items-center">
+                    <div class="chat_item_l">
+                      <div class="thumbnail">
+                        <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
                       </div>
                     </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                    <div class="chat_item_m px-0">
+                      <div class="d-flex flex-column">
+                        <div class="chat_item_t">
+                          <span class="chat_item_ttl">トップグループに戻る</span>
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
+                </a>
               </li>
-            </ul>
-            <div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div>
-            <ul class="p-0 chat_make_room_list">
               <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                <a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
+                  <div class="chat_item d-flex flex-row align-items-center">
+                    <div class="chat_item_l">
+                      <div class="thumbnail">
+                        <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                       </div>
                     </div>
-                  </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
-              </li>
-              <li class="d-flex align-items-center">
-                <div class="chat_item d-flex flex-row align-items-center w-100">
-                  <div class="chat_item_l_chk">
-                    <div class="checkbox">
-                      <label>
-                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
-                        <span class="checkbox-parts"></span>
-                      </label>
-                    </div>
-                  </div>
-                  <div class="chat_item_l">
-                    <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                    </div>
-                  </div>
-                  <div class="chat_item_m">
-                    <div class="d-flex flex-column">
-                      <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                    <div class="chat_item_m px-0">
+                      <div class="d-flex flex-column">
+                        <div class="chat_item_t">
+                          <span class="chat_item_ttl">上位グループに戻る</span>
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
-                </div>
+                </a>
               </li>
+              <div id="childGroupListAreaForMakeRoom"></div>
+              <div id="userInGroupListForMakeRoom"></div>
             </ul>
           </div>
         </div>
       </div>
+      <div class="chat_make_room">
+        <ul class="overlay_src_msg" style="padding-inline-start: 20px;">
+        </ul>
+      </div>
 
       <!-- ルーム解説ボタン -->
-      <div class="make_room_confirm_btn">
+      <div class="make_room_confirm_btn content" id="makeRoomConfirmBtn">
         <button type="button" name="button">
           ルーム開設<br>
           <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
       </div>
     </form>
   </main>
+  <script src="./js/libs/jquery-3.3.1.min.js"></script>
+  <script src="./js/libs/moment.js"></script>
+  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+  <script src="./js/libs/mustache.min.js"></script>
+  <script src="./js/libs/bootstrap.min.js"></script>
+  <script src="./js/libs/jquery.mark.min.js"></script>
+  <script src="./js/common.js"></script>
+  <script src="./js/loading.js"></script>
+  <script src="./js/language.js"></script>
+  <script src="./js/language_ko.js" charset="UTF-8"></script>
+  <script src="./js/language_ja.js" charset="UTF-8"></script>
+  <script src="./js/language_en.js" charset="UTF-8"></script>
+  <script src="./js/constant.js"></script>
+  <script src="./js/chatMakeRoom.js"></script>
+  <script src="./js/chat.js"></script>
+  <script src="./js/chat-ui.js"></script>
+  <script src="./js/chat-util.js"></script>
+  <script src="./js/chat-db.js"></script>
+  <script>
+    String.prototype.replaceAll = function(org, dest) {
+      return this.split(org).join(dest);
+    }
+
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    android.getLoginParameter();
+    android.getGlobalParameter();
 
+    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      if (CHAT_DB.loadSelectedUsers() != "") {
+        let selectedUsers = CHAT_DB.loadSelectedUsers();
+        selectedUsers.forEach(function(user) {
+          CHAT.globalSelectedUserList.push(user.shopMemberId);
+        })
+      };
 
-<script src="./js/libs/jquery-3.3.1.min.js"></script>
-<script src="./js/libs/moment.js"></script>
-<script src="./js/libs/bootstrap.min.js"></script>
-<script src="./js/libs/jquery.mark.min.js"></script>
-<script src="./js/chat.js"></script>
-<script src="./js/common.js"></script>
+      if (CHAT.globalSelectedUserList.length > 0) {
+        $('.select_member_num').text(CHAT.globalSelectedUserList.length);
+      } else {
+        $('.select_member_num').text('0');
+      }
+      CHAT_UI.refreshAllGroupForMakeRoom(groupSearchFlg.ALL);
+    };
+  </script>
 </body>
 </html>

public_new/chat_make_room_confirm.html

@@ -19,8 +19,8 @@
     <div class="row h-100 align-items-center">
       <div class="col-4 pr-0">
         <div class="nav-item">
-          <div class="nav_prev">
-            <a href="chat_make_room.html"><span>ルーム開設</span></a>
+          <div class="nav_prev" id="prevBtn">
+            <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
           </div>
         </div>
       </div>
@@ -41,163 +41,19 @@
     <form action="chat_room.html" method="post">
       <!-- ルーム名入力 -->
       <div class="room_name">
-        <label for="room_name"><h2>ルーム名</h2></label>
-        <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
+        <label><h2>ルーム名</h2></label>
+        <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
       </div>
 
       <!-- 参加者一覧 -->
       <div class="chat_list">
         <h2>参加者</h2>
         <ul class="p-0 chat_make_room_list">
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="chat_item d-flex flex-row align-items-center w-100">
-              <div class="chat_item_l">
-                <div class="thumbnail">
-                  <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
-                </div>
-              </div>
-              <div class="chat_item_m px-0">
-                <div class="d-flex flex-column">
-                  <div class="chat_item_t">
-                    <span class="chat_item_ttl">名前　太郎</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </li>
+          <div id="selectedUserList"></div>
         </ul>
       </div>
-
       <!-- ルーム解説ボタン -->
-      <div class="make_room_btn">
+      <div class="make_room_btn" id="makeRoomBtn">
         <button type="button" name="button">
           チャット開始</button>
       </div>
@@ -205,10 +61,46 @@
   </main>
 
 
-<script src="./js/libs/jquery-3.3.1.min.js"></script>
-<script src="./js/libs/moment.js"></script>
-<script src="./js/libs/bootstrap.min.js"></script>
-<script src="./js/libs/jquery.mark.min.js"></script>
-<script src="./js/chat.js"></script>
+  <script src="./js/libs/jquery-3.3.1.min.js"></script>
+  <script src="./js/libs/moment.js"></script>
+  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+  <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+  <script src="./js/libs/mustache.min.js"></script>
+  <script src="./js/libs/bootstrap.min.js"></script>
+  <script src="./js/libs/jquery.mark.min.js"></script>
+  <script src="./js/common.js"></script>
+  <script src="./js/loading.js"></script>
+  <script src="./js/language.js"></script>
+  <script src="./js/language_ko.js" charset="UTF-8"></script>
+  <script src="./js/language_ja.js" charset="UTF-8"></script>
+  <script src="./js/language_en.js" charset="UTF-8"></script>
+  <script src="./js/constant.js"></script>
+  <script src="./js/chat.js"></script>
+  <script src="./js/chat-ui.js"></script>
+  <script src="./js/chat-util.js"></script>
+  <script src="./js/chat-db.js"></script>
+  <script>
+    String.prototype.replaceAll = function(org, dest) {
+      return this.split(org).join(dest);
+    }
+
+    let CHAT_SERVER_URL = '';
+    let CMS_SERVER_URL = '';
+    let ASSET_PATH = './';
+    let PLATFORM = '';
+    let IS_MOBILE = true;
+    let IS_ONLINE = false;
+    android.getLoginParameter();
+    android.getGlobalParameter();
+
+    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+      CHAT_SERVER_URL = chatServerUrl;
+      CMS_SERVER_URL = cmsServerUrl;
+      PLATFORM = platform;
+      IS_MOBILE = isMobile;
+      IS_ONLINE = isOnline;
+      CHAT_UI.showMakeRoomConfirmView();
+    };
+  </script>
 </body>
 </html>

public_new/chat_room.html

@@ -52,42 +52,9 @@
 
     </div>
 
-    <!-- フィルター -->
-    <div id="filter" class="user_list filter d-flex flex-row none">
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-    </div>
 
+    <!-- フィルター -->
+    <div id="filter" class="user_list filter d-flex flex-row none"></div>
     <div class="chat_list">
       <ul class="overlay_src_msg">
       </ul>
@@ -208,7 +175,6 @@
     android.getLoginParameter();
     android.getGlobalParameter();
 
-
     function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
       CHAT_SERVER_URL = chatServerUrl;
       CMS_SERVER_URL = cmsServerUrl;
@@ -216,6 +182,7 @@
       IS_MOBILE = isMobile;
       IS_ONLINE = isOnline;
       CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
+
     };
   </script>
 

public_new/collaboration_overlay_add_user_list.html

@@ -109,8 +109,8 @@
               </div>
             </div>
             <div class="user_item_l">
-              <div class="thumbnail">
-                <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+               <div class="thumbnail">
+                 <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
               </div>
             </div>
             <div class="user_item_m">

public_new/css/chat.css

@@ -35,8 +35,8 @@ input[name="tab_item"] {
   clear: both;
   overflow: hidden;
 }
-#tab1:checked ~ #tab1_content,
-#tab2:checked ~ #tab2_content{
+#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
+#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
   display: block;
 }
 

public_new/js/chat-add-user.js

+$(function() {
+  // メンバー検索
+
+  $('#chat_add_user .search_form input[type="search"]').keyup(function(){
+    var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
+    $('.overlay_src_msg').empty();
+
+    //全グループ検索画面
+    if (isAllGroup) {
+        var keyword = $('#chat_add_user .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+
+        //グループデータ検索
+        var groupList = CHAT_DB.getGroupByName(keyword);
+        var groupTemplate;
+        $.get({ url: "./template/template_make_room_group_list.html", async: false }
+            , function(text) {
+                groupTemplate = text;
+        });
+
+        groupList.forEach(function(group) {
+            let html = Mustache.render(groupTemplate, {
+                name: group.groupName,
+                id: group.groupId,
+            });
+
+            let obj = jQuery.parseHTML(html);
+            $('.overlay_src_msg').append(obj);
+        })
+
+        //ユーザデータ検索
+        var userList = CHAT_DB.getAllGroupShopMemberNotInRoomByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').append(obj);
+
+　　//連絡先画面
+    } else {
+        var keyword = $('#chat_add_user .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+        var userList = CHAT_DB.getMyGroupShopMemberNotInRoomByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').html(obj);
+    }
+  });
+});

public_new/js/chat-db.js

@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) {
     }
 };
 
+CHAT_DB.getFavoriteUsersNotInRoom = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getFavoriteUsersNotInRoom());
+    }
+};
+
 CHAT_DB.getFavoriteUsers = function() {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
@@ -82,6 +91,16 @@ CHAT_DB.getGroupInfo = function(groupId) {
     }
 };
 
+CHAT_DB.loadSelectedUsers = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+        console.log(JSON.parse(android.getSelectedUserList()));
+    	return JSON.parse(android.getSelectedUserList());
+    }
+}
+
 CHAT_DB.getNameCardData = function(shopMemberId) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
@@ -99,6 +118,15 @@ CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) {
     }
 };
 
+CHAT_DB.getMyGroupShopMemberNotInRoomByName = function(shopMemberName) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getMyGroupShopMemberNotInRoomByName(shopMemberName));
+    }
+};
+
 CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
@@ -108,6 +136,15 @@ CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
     }
 };
 
+CHAT_DB.getAllGroupShopMemberNotInRoomByName = function(shopMemberName) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getAllGroupShopMemberNotInRoomByName(shopMemberName));
+    }
+};
+
 CHAT_DB.getGroupByName = function(groupName) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
         // TODO
     }
 };
+
+CHAT_DB.searchMessages = function(keyword, userList) {
+    if (CHAT_UTIL.isIOS()) {
+        // TODO
+    } else if (CHAT_UTIL.isAndroid()) {
+        return JSON.parse(android.searchMessages(keyword, userList));
+    }
+};
+
+CHAT_DB.getMyGroupUsersNotInRoom = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getMyGroupUsersNotInRoom());
+    }
+};
\ No newline at end of file

public_new/js/chat-ui.js

@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) {
     messageTextBox.val('');
 
     if (message.length > 0) {
-        console.log('createMessage');
-        console.log(socket);
         socket.emit(
-            //'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
-            'createMessage', { text: message }
+            'createMessage', { text: message + messageSeperator + messageType.TEXT }
             , 0
         );
     }
@@ -568,12 +565,14 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) {
 
 //loadingIndicatorを表示
 CHAT_UI.showLoadingIndicator = function() {
-    $('.loading-indicator').css('display', 'block');
+    var h = $(window).height();
+    $('#loader-bg ,#loader').height(h).css('display','block');
 }
 
 //loadingIndicatorを表示しない
 CHAT_UI.dismissLoadingIndicator = function() {
-    $('.loading-indicator').css('display', 'none');
+    var h = $(window).height();
+    $('#loader-bg ,#loader').height(h).css('display','none');
 }
 
 //画面の方向をcheck
@@ -895,9 +894,7 @@ $('#chatButton').on('click', function(event) {
 
 CHAT_UI.refreshContactScreen = function() {
     CHAT_UI.showLoadingIndicator();
-    $(".modal-backdrop").remove();
-    $('#myProfileModal').html('');
-    $('#userProfileModal').html('');
+    $('#userNameCard').modal('hide');
     $('#favoriteList').html('');
     $('#myGroupList').html('');
     //画面タイトル設定
@@ -1000,6 +997,8 @@ CHAT_UI.refreshContactScreen = function() {
 }
 
 CHAT_UI.refreshRoomList = function(roomType) {
+    CHAT_UI.showLoadingIndicator();
+    console.log('START');
     if (roomType == chatRoomType.DM) {
         $('#tabDM').prop('checked', true);
     } else {
@@ -1011,7 +1010,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
     }
     var rooms = CHAT_DB.getRoomList(roomType, null);
     CHAT.globalIsInvite = false;
-    activeRoomId = null;
     // #36146に対応
    $('#groupChatList').empty();
    $('#dmChatList').empty();
@@ -1089,7 +1087,8 @@ CHAT_UI.refreshRoomList = function(roomType) {
     if (CHAT_UI.isLandscapeMode()) {
         $(".chat_list").removeClass("col-12").addClass("col-6");
     }
-
+    console.log('DONE');
+    CHAT_UI.dismissLoadingIndicator();
 };
 
 CHAT_UI.joinRoom = function(roomId,roomName) {
@@ -1143,6 +1142,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
       , function(text) {
         topUserListTemplate = text;
     });
+    var filterUserListTemplate;
+    $.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
+      , function(text) {
+        filterUserListTemplate = text;
+    });
+
 
     usersInRoom.forEach(function(user) {
         user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
@@ -1152,6 +1157,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
     });
     let obj = jQuery.parseHTML(html);
     $('#user_list').append(obj);
+
+    let filterHtml = Mustache.render(filterUserListTemplate, {
+         userList: usersInRoom
+    });
+    let filterObj = jQuery.parseHTML(filterHtml);
+    $('#filter').append(filterObj);
+
+
     messages.forEach(function(message) {
         let template = userMessageTemplate;
         if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
@@ -1176,13 +1189,20 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
          message.message = replacePath;
         /* if (message.message contain) {
          }*/
+
+         var isToday = false;
+         if (messageTime.createdAt.includes(':')) {
+            isToday = true;
+         }
+
          let html = Mustache.render(template, {
              text: message.message,
              from: message.loginId,
              shopMemberId: message.shopMemberId,
              profileImage: message.profileUrl,
              createdAtDay: messageTime.createdAtDay,
-             createdAtTime: messageTime.createdAtTime
+             createdAtTime: messageTime.createdAtTime,
+             isToday: isToday
          });
          html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
          workVal = html + workVal;
@@ -1218,6 +1238,7 @@ $('#tabGroup').on('click', function(e) {
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
 
+
 $('#tabAllGroup').on('click', function(e) {
     CHAT_UI.refreshAllGroupSearch('0');
 });
@@ -1226,6 +1247,28 @@ $('#tabMyGroup').on('click', function(e) {
     CHAT_UI.refreshContactScreen();
 });
 
+$('#tabMyGroupOnMakeRoom').on('click', function(e) {
+    CHAT_UI.refreshMyGroupForMakeRoom();
+});
+
+$('#tabAllGroupOnMakeRoom').on('click', function(e) {
+    CHAT_UI.refreshAllGroupForMakeRoom('0');
+});
+
+$('#makeRoomConfirmBtn').on('click', function(e) {
+    android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
+    $('#makeRoomForm').submit();
+});
+
+$('#addUserConfirmBtn').on('click', function(e) {
+    android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
+    $('#addUserForm').submit();
+});
+
+CHAT_UI.roomDisplayOff = function() {
+    android.roomDisplayOff();
+}
+
 CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
     if ($(star).hasClass('active')) {
         CHAT_UI.removeFavoriteUser(shopMemberId);
@@ -1253,17 +1296,22 @@ CHAT_UI.removeFavoriteUser = function(shopMemberId) {
 };
 
 CHAT_UI.insertFavoriteUser = function(shopMemberId) {
-    CHAT_UI.showLoadingIndicator();
     $('#userNameCard').modal('hide');
     $('#myNameCard').modal('hide');
-    android.addFavoriteUser(shopMemberId);
-    $('.shopmember_'+shopMemberId).removeClass('disable');
-    $('.shopmember_'+shopMemberId).addClass('active');
+    var result = android.addFavoriteUser(shopMemberId);
+    if (!result) {
+        $('.shopmember_'+groupId).addClass('disable');
+        $('.shopmember_'+groupId).removeClass('active');
+        CHAT_UI.dismissLoadingIndicator();
+        return;
+    } else {
+        $('.shopmember_'+groupId).removeClass('disable');
+        $('.shopmember_'+groupId).addClass('active');
+    }
     CHAT_UI.dismissLoadingIndicator();
 };
 
 CHAT_UI.removeFavoriteGroup = function(groupId) {
-    CHAT_UI.showLoadingIndicator();
     android.removeFavoriteGroup(groupId);
     $('.group_'+groupId).removeClass('active');
     $('.group_'+groupId).addClass('disable');
@@ -1272,9 +1320,16 @@ CHAT_UI.removeFavoriteGroup = function(groupId) {
 
 CHAT_UI.insertFavoriteGroup = function(groupId) {
     CHAT_UI.showLoadingIndicator();
-    android.addFavoriteGroup(groupId);
-    $('.group_'+groupId).removeClass('disable');
-    $('.group_'+groupId).addClass('active');
+    var result = android.addFavoriteGroup(groupId);
+    if (!result) {
+        $('.group_'+groupId).addClass('disable');
+        $('.group_'+groupId).removeClass('active');
+        CHAT_UI.dismissLoadingIndicator();
+        return;
+    } else {
+        $('.group_'+groupId).removeClass('disable');
+        $('.group_'+groupId).addClass('active');
+    }
     CHAT_UI.dismissLoadingIndicator();
 };
 
@@ -1325,17 +1380,13 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) {
         groupPathTemplate = text;
     });
 
-    var groupPathCount = 0;
     result.groupPathList.forEach(function(groupPath) {
-        if (!(groupPathCount < (result.groupPathList.length - 3))) {
-            let html = Mustache.render(groupPathTemplate, {
-                name: groupPath.groupName,
-                id: groupPath.groupId
-            });
-            let obj = jQuery.parseHTML(html);
-            $('#groupPathArea').append(obj);
-        }
-        groupPathCount++;
+        let html = Mustache.render(groupPathTemplate, {
+            name: groupPath.groupName,
+            id: groupPath.groupId
+        });
+        let obj = jQuery.parseHTML(html);
+        $('#groupPathArea').append(obj);
     })
 
     //該当グループの下位グループ表示。
@@ -1594,3 +1645,454 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
 };
 
 
+CHAT_UI.refreshMyGroupForMakeRoom = function() {
+    $(".modal-backdrop").remove();
+    $('#favoriteListForMakeRoom').html('');
+    $('#myGroupListForMakeRoom').html('');
+    //画面タイトル設定
+    let contactListTitle = getLocalizedString("userSearch");
+    $('#title').text(contactListTitle);
+
+    // グループの様式を読み込む
+    var groupTemplate;
+    $.get({ url: "./template/template_make_room_group_list.html", async: false }
+      , function(text) {
+        groupTemplate = text;
+    });
+
+    // ユーザの様式を読み込む
+    var userTemplate;
+    $.get({ url: "./template/template_make_room_user_list.html", async: false }
+      , function(text) {
+        userTemplate = text;
+    });
+
+    var groupUserTemplate;
+    $.get({ url: "./template/template_make_room_group_user_list.html", async: false }
+      , function(text) {
+        groupUserTemplate = text;
+    });
+
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo('0');
+        android.updateMyInfo();
+        android.updateGroupUser();
+        android.updateFavorite();
+    }
+
+    //お気に入りグループ取得。
+    var favoriteGroupList = CHAT_DB.getFavoriteGroups();
+    favoriteGroupList.forEach(function(favoriteGroup) {
+        let html = Mustache.render(groupTemplate, {
+            name: favoriteGroup.groupName,
+            id: favoriteGroup.groupId,
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+        $('#favoriteListForMakeRoom').append(obj);
+    })
+    //お気に入りユーザ取得。
+    var favoriteUserList = CHAT_DB.getFavoriteUsers();
+    favoriteUserList.forEach(function(favoriteUser) {
+        favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
+        let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+            return shopMemberId == favoriteUser.shopMemberId;
+        })
+        if (findObj) {
+            favoriteUser.checked = 'checked';
+        }
+    });
+    let html = Mustache.render(userTemplate, {
+        userList: favoriteUserList
+    });
+    let obj = jQuery.parseHTML(html);
+    $('#favoriteListForMakeRoom').append(obj);
+
+    /*favoriteUserList.forEach(function(favoriteUser) {
+        favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
+        let html = Mustache.render(userTemplate, {
+            shopMemberId: favoriteUser.shopMemberId,
+            profileImage: favoriteUser.profileImagePath,
+            name: favoriteUser.shopMemberName,
+            isFavorite: true
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+
+        $('#favoriteList').append(obj);
+    })*/
+
+    var myGroupList = CHAT_DB.getMyGroupUsers();
+    myGroupList.forEach(function(myGroup) {
+
+        myGroup.groupUserList.forEach(function(groupUser) {
+            groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == groupUser.shopMemberId;
+            })
+            if (findObj) {
+                groupUser.checked = 'checked';
+            }
+        })
+        let html = Mustache.render(groupUserTemplate, {
+            groupName: myGroup.groupName,
+            groupUserList: myGroup.groupUserList
+        });
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+
+        $('#myGroupListForMakeRoom').append(obj);
+    })
+}
+
+CHAT_UI.refreshAllGroupForMakeRoom = function(groupId) {
+
+    $('.cancel').addClass('none');
+    $('.search_form input').removeClass('focus');
+    $('.search_form input').val('');
+    $('.search_form form').removeClass();
+    $('.content').removeClass('none');
+    $('.overlay_src_msg').empty();
+
+    $('#tabAllGroupOnMakeRoom').prop('checked', true);
+
+    //オンライン状態であればサーバから情報更新。
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo(groupId);
+    }
+
+    //画面エリアを初期化。
+    $('#parentGroupBtnForMakeRoom').off();
+    $('#rootGroupBtnForMakeRoom').off();
+    $('#childGroupListAreaForMakeRoom').html('');
+    $('#userInGroupListForMakeRoom').html('');
+    $('#groupPathAreaForMakeRoom').html('');
+
+    //DBからグループ情報を取得。
+    var result = CHAT_DB.getGroupInfo(groupId);
+
+    //上位グループ、トップグループ遷移ボタンのイベント追加。
+    if (typeof result.parentGroupId !== 'undefined') {
+        $('#parentGroupBtnForMakeRoom').on('click', function() {
+            CHAT_UI.refreshAllGroupForMakeRoom(result.parentGroupId);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        $('#rootGroupBtnForMakeRoom').on('click', function() {
+            CHAT_UI.refreshAllGroupForMakeRoom(result.rootGroupId);
+        });
+    }
+
+    //該当グループのパースを表示。
+    var groupPathTemplate;
+    $.get({ url: "./template/template_make_room_group_path.html", async: false }
+      , function(text) {
+        groupPathTemplate = text;
+    });
+
+    var groupPathCount = 0;
+    result.groupPathList.forEach(function(groupPath) {
+        if (!(groupPathCount < (result.groupPathList.length - 3))) {
+            let html = Mustache.render(groupPathTemplate, {
+                name: groupPath.groupName,
+                id: groupPath.groupId
+            });
+            let obj = jQuery.parseHTML(html);
+            $('#groupPathAreaForMakeRoom').append(obj);
+        }
+        groupPathCount++;
+    })
+
+    //該当グループの下位グループ表示。
+    var groupTemplate;
+    $.get({ url: "./template/template_make_room_group_list.html", async: false }
+      , function(text) {
+        groupTemplate = text;
+    });
+
+    result.childGroupList.forEach(function(childGroup) {
+        let html = Mustache.render(groupTemplate, {
+            name: childGroup.groupName,
+            id: childGroup.groupId,
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+
+        });
+        $('#childGroupListAreaForMakeRoom').append(obj);
+    })
+
+    //該当グループの所属ユーザを表示。
+    var userTemplate;
+    $.get({ url: "./template/template_make_room_user_list.html", async: false }
+      , function(text) {
+        userTemplate = text;
+    });
+    result.groupUserList.forEach(function(groupUser) {
+        groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
+        let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+            return shopMemberId == groupUser.shopMemberId;
+        })
+        if (findObj) {
+            groupUser.checked = 'checked';
+        }
+    })
+    let html = Mustache.render(userTemplate, {
+        userList: result.groupUserList
+    });
+    let obj = jQuery.parseHTML(html);
+    $('#userInGroupListForMakeRoom').append(obj);
+};
+
+CHAT_UI.checkForMakeChat = function(checkMemberId) {
+    let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+        return shopMemberId == checkMemberId;
+    })
+    if (findObj) {
+        // remove
+        CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(shopMemberId) {
+            return checkMemberId != shopMemberId;
+        });
+    } else {
+        // add
+        CHAT.globalSelectedUserList.push(checkMemberId);
+    }
+    if($('.checkbox' + checkMemberId).prop('checked')){
+        $('.checkbox' + checkMemberId).removeAttr('checked');
+    }else{
+      $('.checkbox' + checkMemberId).attr('checked', true);
+    }
+    let cnt = CHAT.globalSelectedUserList.length;
+    if (CHAT.globalSelectedUserList.length > 0) {
+        $('.select_member_num').text(cnt);
+    } else {
+        $('.select_member_num').text('0');
+    }
+};
+
+CHAT_UI.showMakeRoomConfirmView = function() {
+    $('#selectedUserList').html('');
+
+    var userTemplate;
+    $.get({ url: "./template/template_make_room_confirm_user_list.html", async: false }
+      , function(text) {
+        userTemplate = text;
+    });
+
+    var selectedUserList = CHAT_DB.loadSelectedUsers();
+
+    selectedUserList.forEach(function(user){
+         let html = Mustache.render(userTemplate, {
+                     id: user.shopMemberId,
+                     profileImage: CHAT.getProfileImgUrl(user.profileUrl),
+                     name: user.shopMemberName
+                 });
+         let obj = jQuery.parseHTML(html);
+         $('#selectedUserList').append(obj);
+     })
+
+     $("#makeRoomBtn").off().on('click', function() {
+                 // #36130に対応
+         const trimmedRoomName = $('#newRoomName').val().trim();
+         if (trimmedRoomName.length == 0) {
+
+             // loadingIndicatorを表示
+             CHAT_UI.showLoadingIndicator();
+             let userIdList = new Array();
+             let userNameList = new Array();
+
+             selectedUserList.forEach(function(user){
+                userIdList.push(user.shopMemberId);
+                userNameList.push(user.shopMemberName);
+             })
+
+             //TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
+             // 参加ユーザ名でルーム名を生成
+             let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
+             //todo android create room api
+             android.createChatRoom("1",userIdList.join(','),newRoomName);
+
+         } else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
+              || trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
+              || trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
+              || trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
+             // #36147
+             // #36174
+             $("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
+             $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+             $('#customAlert').appendTo("body").modal({
+                 backdrop: 'static',
+                 keyboard: false
+             })
+             .on('click', '#customAlertOk', function(e) {
+             });
+         } else if (trimmedRoomName.length > 20) {
+             // #36142
+             var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
+
+             // #36174
+             $("#customAlertTitle").text(getLocalizedString("nameTooLong"));
+             $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+             $('#customAlert').appendTo("body").modal({
+                 backdrop: 'static',
+                 keyboard: false
+             })
+             .on('click', '#customAlertOk', function(e) {
+                 $('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
+             });
+
+         } else {
+             //loadingIndicatorを表示
+             CHAT_UI.showLoadingIndicator();
+             let userIdList = new Array();
+
+             selectedUserList.forEach(function(user){
+                userIdList.push(user.shopMemberId);
+             })
+
+             // ルーム名のtrimmingした後、URIencodingを行う
+             const encodedRoomName = encodeURIComponent(trimmedRoomName);
+             android.createChatRoom("1",userIdList.join(','),encodedRoomName);
+
+         }
+     });
+}
+
+CHAT_UI.showAddUserConfirmView = function() {
+    $('#selectedUserList').html('');
+
+    var userTemplate;
+    $.get({ url: "./template/template_add_user_confirm_user_list.html", async: false }
+        , function(text) {
+            userTemplate = text;
+        }
+    );
+
+    var selectedUserList = CHAT_DB.loadSelectedUsers();
+
+    console.log("check = " + selectedUserList);
+    selectedUserList.forEach(function(user){
+         let html = Mustache.render(userTemplate, {
+                 id: user.shopMemberId,
+                 profileImage: CHAT.getProfileImgUrl(user.profileUrl),
+                 name: user.shopMemberName
+         });
+         let obj = jQuery.parseHTML(html);
+         $('#selectedUserList').append(obj);
+    })
+
+    $("#addUserBtn").off().on('click', function() {
+        CHAT_UI.showLoadingIndicator();
+        let userIdList = new Array();
+        selectedUserList.forEach(function(user){
+            userIdList.push(user.shopMemberId);
+        })
+        android.inviteUsers(userIdList.join(','));
+     });
+}
+
+CHAT_UI.refreshMyGroupForAddUser = function() {
+    $(".modal-backdrop").remove();
+    $('#favoriteListForMakeRoom').html('');
+    $('#myGroupListForMakeRoom').html('');
+    //画面タイトル設定
+    let contactListTitle = getLocalizedString("userSearch");
+    $('#title').text(contactListTitle);
+
+    // グループの様式を読み込む
+    var groupTemplate;
+    $.get({ url: "./template/template_make_room_group_list.html", async: false }
+      , function(text) {
+        groupTemplate = text;
+    });
+
+    // ユーザの様式を読み込む
+    var userTemplate;
+    $.get({ url: "./template/template_make_room_user_list.html", async: false }
+      , function(text) {
+        userTemplate = text;
+    });
+
+    var groupUserTemplate;
+    $.get({ url: "./template/template_make_room_group_user_list.html", async: false }
+      , function(text) {
+        groupUserTemplate = text;
+    });
+
+    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo('0');
+        android.updateMyInfo();
+        android.updateGroupUser();
+        android.updateFavorite();
+    }
+
+    //お気に入りグループ取得。
+    var favoriteGroupList = CHAT_DB.getFavoriteGroups();
+    favoriteGroupList.forEach(function(favoriteGroup) {
+        let html = Mustache.render(groupTemplate, {
+            name: favoriteGroup.groupName,
+            id: favoriteGroup.groupId,
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+        $('#favoriteListForMakeRoom').append(obj);
+    })
+    //お気に入りユーザ取得。
+    var favoriteUserList = CHAT_DB.getFavoriteUsersNotInRoom();
+    favoriteUserList.forEach(function(favoriteUser) {
+        favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
+        let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+            return shopMemberId == favoriteUser.shopMemberId;
+        })
+        if (findObj) {
+            favoriteUser.checked = 'checked';
+        }
+    });
+    let html = Mustache.render(userTemplate, {
+        userList: favoriteUserList
+    });
+    let obj = jQuery.parseHTML(html);
+    $('#favoriteListForMakeRoom').append(obj);
+
+    /*favoriteUserList.forEach(function(favoriteUser) {
+        favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
+        let html = Mustache.render(userTemplate, {
+            shopMemberId: favoriteUser.shopMemberId,
+            profileImage: favoriteUser.profileImagePath,
+            name: favoriteUser.shopMemberName,
+            isFavorite: true
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+
+        $('#favoriteList').append(obj);
+    })*/
+
+    var myGroupList = CHAT_DB.getMyGroupUsersNotInRoom();
+    myGroupList.forEach(function(myGroup) {
+
+        myGroup.groupUserList.forEach(function(groupUser) {
+            groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == groupUser.shopMemberId;
+            })
+            if (findObj) {
+                groupUser.checked = 'checked';
+            }
+        })
+        let html = Mustache.render(groupUserTemplate, {
+            groupName: myGroup.groupName,
+            groupUserList: myGroup.groupUserList
+        });
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+
+        $('#myGroupListForMakeRoom').append(obj);
+    })
+}
\ No newline at end of file

public_new/js/chat-websocket.js

@@ -6,7 +6,6 @@ var CHAT_SOCKET = {};
 CHAT_SOCKET.connectSocket = function () {
     if (IS_ONLINE == 'true') {
         socket = io(CHAT_SERVER_URL);
-        console.log(socket);
         setSocketAction();
     } else {
         //オフラインの場合、DBからルーム一覧を表示。
@@ -37,7 +36,6 @@ function setSocketAction () {
     });
 
     socket.on('disconnect', function() {
-        console.log('disconnect');
         //socketが切断されたら黒画面で画面を更新する
         $('.overlay').addClass('active undismissable');
         //alert('Disconnected from the server');
@@ -45,7 +43,6 @@ function setSocketAction () {
     });
 
     socket.on('connect_error', function() {
-        console.log('connect_error');
         CHAT_UI.dismissLoadingIndicator();
     });
 
@@ -163,8 +160,6 @@ function setSocketAction () {
     // New Message
     // #36170
     socket.on('newMessage', function(message, roomId, roomName) {
-        console.log(message);
-        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
         var userMessageTemplate;
         $.get({ url: "./template/template_user_message.html", async: false }
           , function(text) {
@@ -186,28 +181,33 @@ function setSocketAction () {
             // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
             template = myMessageTemplate;
         }
+        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
+        message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
+        try {
+            message.text = decodeURIComponent(message.text)
+        } catch(e) {
+            message.text = message.text
+        }
+        if ( message.text.includes(messageSeperator) ) {
+            message.text = message.text.split(messageSeperator)[0];
+        }
+        var replacePath = message.text;
+        replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
+        message.text = replacePath;
+        //TODO newMessageの際にDB格納が必要。
+        let html = Mustache.render(template, {
+            text: message.text,
+            from: message.from,
+            profileImage: message.profileImagePath,
+            createdAtDay: messageTime.createdAtDay,
+            createdAtTime: messageTime.createdAtTime,
+            isToday: true
+        });
+        // イメージの場合、img tagを追加する
+        html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
+        $('#messages').append(html);
 
-         message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
-         try {
-             message.text = decodeURIComponent(message.text)
-         } catch(e) {
-             message.text = message.text
-         }
-         var replacePath = message.text;
-         replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
-         message.text = replacePath;
-         let html = Mustache.render(template, {
-             text: message.text,
-             from: message.from,
-             profileImage: message.profileImagePath,
-             createdAtDay: messageTime.createdAtDay,
-             createdAtTime: messageTime.createdAtTime
-         });
-         // イメージの場合、img tagを追加する
-         html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
-         $('#messages').append(html);
-
-         // 画像、動画の描画を待ってからスクロール
+        // 画像、動画の描画を待ってからスクロール
         setTimeout(function () {
             CHAT_UI.scrollToBottom();
         }, 300);

public_new/js/chat.js

@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) {
             }
 
             socket.emit('createMessage', {
-                //text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
-                text: encodedText
+                text: encodedText + messageSeperator + messageType.IMAGE
             }, 1);
 
         } else {    // 動画の処理
@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) {
             }
 
             socket.emit('createMessage', {
-                //text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
-                text: encodedText
+                text: encodedText + messageSeperator + messageType.VIDEO
             }, 1);
         }
 
@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
                 });
 
             } else {
-                console.log('No error');
                 if (loginParam.roomName != undefined && loginParam.roomName != "null") {
                     $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
                 } else {
@@ -272,165 +269,250 @@ CHAT.leaveRoom = function() {
 }
 
 $(function() {
-  // ルーム開設メンバー数カウント
-  $('input:checkbox').change(function() {
-    if($(this).prop('checked')){
-      $(this).attr('checked', true);
-    }else{
-      $(this).removeAttr('checked');
-    }
-  }).trigger('change');
-
-  // チェックした人数カウント
-  $('input:checkbox').change(function() {
-      var cnt = $('.checkbox input:checkbox:checked').length;
-      $('.select_member_num').text(cnt);
-  }).trigger('change');
-
-  // ルーム人数選択確認イベント
-  $('.make_room_btn button').click(function(){
-    $('form').submit();
-  });
-  // ルーム人数選択イベント
-  $('.make_room_confirm_btn button').click(function(){
-    $('form').submit();
-  });
-  // ユーザー追加確認イベント
-  $('.add_user_confirm_btn button').click(function(){
-    $('form').submit();
-  });
-  // ユーザー追加イベント
-  $('.add_user_btn button').click(function(){
-    $('form').submit();
-  });
-  // ルーム名変更イベント
-  $('.change_room_name_btn button').click(function(){
-    $('form').submit();
-  });
-
-  // 検索アイコン押下イベント
-  $('.nav_item_wrap .search_menu').click(function(){
-    $('.nav_item_wrap').addClass('none');
-    $('.chat_room_src_form').removeClass('none');
-    $('.room_container').addClass('none');
-    $('.overlay_src_msg').removeClass('none');
-    // フィルタ表示
-    $('#filter').removeClass('none');
-    $('#user_list').addClass('none');
-  });
-  $('.chat_room_src_form .cancel').click(function(){
-    $('.nav_item_wrap').removeClass('none');
-    $('.chat_room_src_form').addClass('none');
-    $('.chat_room_src_form input').val('');
-    $('.room_container').removeClass('none');
-    $('.overlay_src_msg').empty();
-    // ユーザーリスト表示
-    $('#filter').addClass('none');
-    $('#user_list').removeClass('none');
-  });
-
-  // フィルタ選択イベント
-  $('#filter .img_wrap').click(function(){
-    // チェックアイコン追加
-    $(this).toggleClass("filter");
-  });
-
-  $('#chat .search_form input[type="search"]').click(function(){
-    let roomListTitle = getLocalizedString("room_search_placeholder");
-    $('#chatTitle').text(roomListTitle);
-  });
-
-  $('#chat .search_form .cancel').click(function(){
-    let roomListTitle = getLocalizedString("roomListTitle");
-    $('#chatTitle').text(roomListTitle);
-  });
-
-  // チャットメンバー検索
-  $('#chat .search_form input[type="search"]').keyup(function(){
-    $('.overlay_src_msg').empty();
-    var keyword = $('#chat .search_form input[type="search"]').val();
-    if (keyword == '' || keyword.length < 2) {
-        return;
-    }
-    var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
-    let roomListTitle = getLocalizedString("room_search_placeholder");
-    $('#chatTitle').text(roomListTitle);
-    var template;
-    $.get({ url: "./template/template_room_list.html", async: false }
-      , function(text) {
-        template = text;
+    // ルーム人数選択確認イベント
+    $('.make_room_btn button').click(function(){
+        $('form').submit();
     });
-    rooms.forEach(function(room) {
-      room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
-      if (room.message) {
-          room.message = room.message.toString()
-      } else {
-          room.message = getLocalizedString("noMessages")
-      }
-      var displayMsg;
-      if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
-      if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
-      var attendUserName = [];
-      room.attendUsers.forEach(function(user) {
-        user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
-        attendUserName.push(user.shopMemberName);
-      });
-      var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
-      if (room.chatRoomName == "") {
-          room.chatRoomName = attendUserName.join(', ');
-      }
-      let html = Mustache.render(template, {
-        thumbnailCount: thumbnailCount,
-        roomName: room.chatRoomName,
-        roomId: room.chatRoomId,
-        profileImage: room.profileImagePath,
-        lastMessage: displayMsg ,
-        time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
-        unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
-        userCnt: room.attendUsers.length + 1,
-        attendUsers: room.attendUsers
-      });
-      // Click event
-      let obj = $(jQuery.parseHTML(html)).on('click', function() {
-      });
-
-      $('.overlay_src_msg').append(obj);
+    // ルーム人数選択イベント
+    $('.make_room_confirm_btn button').click(function(){
+        $('form').submit();
     });
-    if (CHAT_UI.isLandscapeMode()) {
-        $(".chat_list").removeClass("col-12").addClass("col-6");
-    }
-  });
-  // ルームメンバー検索
-  $('#chat_room .search_form input[type="search"]').keyup(function(){
-    $.ajax({
-      url: 'search_message_user_list.html',
-      type: 'POST',
-      datatype: 'html'
-    }).done(function (data) {
-      $('.overlay_src_msg').html(data);
-      })
-  });
-  // ユーザー招待メンバー検索
-  $('#chat_add_user .search_form input[type="search"]').keyup(function(){
-    $.ajax({
-      url: 'search_message_user_list.html',
-      type: 'POST',
-      datatype: 'html'
-    }).done(function (data) {
-      $('.overlay_src_msg').html(data);
-      })
-  });
-
-  // チャットルーム
-  // メッセージ検索イベント
-  $('.chat_room_src_form input[type="search"]').keyup(function(){
-    $.ajax({
-      url: 'search_message.html',
-      type: 'POST',
-      datatype: 'html'
-    }).done(function (data) {
-      $('.overlay_src_msg').html(data);
-      })
-  });
+    // ユーザー追加確認イベント
+    $('.add_user_confirm_btn button').click(function(){
+        $('form').submit();
+    });
+    // ユーザー追加イベント
+    $('.add_user_btn button').click(function(){
+        $('form').submit();
+    });
+    // ルーム名変更イベント
+    $('.change_room_name_btn button').click(function(){
+        $('form').submit();
+    });
+
+    // 検索アイコン押下イベント
+    $('.nav_item_wrap .search_menu').click(function(){
+        $('.nav_item_wrap').addClass('none');
+        $('.chat_room_src_form').removeClass('none');
+        $('.room_container').addClass('none');
+        $('.overlay_src_msg').removeClass('none');
+        // フィルタ表示
+        $('#filter').removeClass('none');
+        $('#user_list').addClass('none');
+    });
+    $('.chat_room_src_form .cancel').click(function(){
+        $('.nav_item_wrap').removeClass('none');
+        $('.chat_room_src_form').addClass('none');
+        $('.chat_room_src_form input').val('');
+        $('.room_container').removeClass('none');
+        $('.overlay_src_msg').empty();
+        // ユーザーリスト表示
+        $('#filter').addClass('none');
+        $('#user_list').removeClass('none');
+    });
+
+    // フィルタ選択イベント
+    $('#filter .img_wrap').click(function(){
+        // チェックアイコン追加
+        $(this).toggleClass("filter");
+    });
+
+    $('#chat .search_form input[type="search"]').click(function(){
+        let roomListTitle = getLocalizedString("room_search_placeholder");
+        $('#chatTitle').text(roomListTitle);
+    });
+
+    $('#chat .search_form .cancel').click(function(){
+        let roomListTitle = getLocalizedString("roomListTitle");
+        $('#chatTitle').text(roomListTitle);
+    });
+
+    $('#chat_add_user .search_form .cancel').click(function(){
+        CHAT.globalSelectedUserList.forEach(function(userId) {
+            if ($('.checkbox' + userId).prop('checked')) {
+              $('.checkbox' + checkMemberId).attr('checked', true);
+            } else {
+              $('.checkbox' + checkMemberId).removeAttr('checked');
+            }
+        });
+    });
+
+    // チャットメンバー検索
+    $('#chat .search_form input[type="search"]').keyup(function(){
+        $('.overlay_src_msg').empty();
+        var keyword = $('#chat .search_form input[type="search"]').val();
+        if (keyword == '' || keyword.length < 2) { return; }
+        var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
+        let roomListTitle = getLocalizedString("room_search_placeholder");
+        $('#chatTitle').text(roomListTitle);
+        var template;
+        $.get({ url: "./template/template_room_list.html", async: false }
+            , function(text) {
+                template = text;
+        });
+
+        rooms.forEach(function(room) {
+            room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
+            if (room.message) {
+                room.message = room.message.toString()
+            } else {
+                room.message = getLocalizedString("noMessages")
+            }
+            var displayMsg;
+            if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
+            if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
+            var attendUserName = [];
+            room.attendUsers.forEach(function(user) {
+                user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+                attendUserName.push(user.shopMemberName);
+            });
+            var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
+            if (room.chatRoomName == "") {
+                room.chatRoomName = attendUserName.join(', ');
+            }
+            let html = Mustache.render(template, {
+                thumbnailCount: thumbnailCount,
+                roomName: room.chatRoomName,
+                roomId: room.chatRoomId,
+                profileImage: room.profileImagePath,
+                lastMessage: displayMsg ,
+                time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
+                unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
+                userCnt: room.attendUsers.length + 1,
+                attendUsers: room.attendUsers
+            });
+            // Click event
+            let obj = jQuery.parseHTML(html);
+            $('.overlay_src_msg').append(obj);
+        });
+        if (CHAT_UI.isLandscapeMode()) {
+            $(".chat_list").removeClass("col-12").addClass("col-6");
+        }
+    });
+
+    // ルームメンバー検索
+    $('#chat_room .search_form input[type="search"]').keyup(function(){
+        $.ajax({
+            url: 'search_message_user_list.html',
+            type: 'POST',
+            datatype: 'html'
+        }).done(function (data) {
+            $('.overlay_src_msg').html(data);
+        })
+    });
+
+    // チャットルーム
+    // メッセージ検索イベント
+    $('.chat_room_src_form input[type="search"]').keyup(function(){
+        let workVal = "";
+        var keyword = $('.chat_room_src_form input[type="search"]').val();
+        $('.overlay_src_msg').empty();
+        var checkedUserList = [];
+        $('.img_wrap.filter').each(function(user) {
+            var selectedUser = $('.img_wrap.filter')[user];
+            checkedUserList.push($(selectedUser).data('user-id'));
+        })
+        if (keyword.length < 2) { return; }
+        var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
+        var userMessageTemplate;
+        $.get({ url: "./template/template_user_message.html", async: false }
+          , function(text) {
+            userMessageTemplate = text;
+        });
+        var myMessageTemplate;
+        $.get({ url: "./template/template_my_message.html", async: false }
+          , function(text) {
+            myMessageTemplate = text;
+        });
 
+        let jQueryMessages = $('.overlay_src_msg');
+        messages.forEach(function(message) {
+            let template = userMessageTemplate;
+            if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
+                 template = myMessageTemplate;
+            }
+            if (message.messageType == messageType.SYSTEM) {
+                template = systemMessageTemplate;
+            }
+            let messageTime = CHAT_UTIL.formatDate(message.insertDate);
+            if (message.profileUrl) {
+                message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
+            } else {
+                message.profileUrl = CHAT.getProfileImgUrl("")
+            }
+             message.message = message.message.toString();
+             var replacePath = message.message;
+             replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
+             message.message = replacePath;
+             let html = Mustache.render(template, {
+                 text: message.message,
+                 from: message.loginId,
+                 shopMemberId: message.shopMemberId,
+                 profileImage: message.profileUrl,
+                 createdAtDay: messageTime.createdAtDay,
+                 createdAtTime: messageTime.createdAtTime
+             });
+             html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
+             workVal = html + workVal;
+        })
+        jQueryMessages.prepend(workVal);
+    });
+
+    $('.filter_img').on('click', function() {
+        let workVal = "";
+        var keyword = $('.chat_room_src_form input[type="search"]').val();
+        $('.overlay_src_msg').empty();
+        var checkedUserList = [];
+        $('.img_wrap.filter').each(function(user) {
+            var selectedUser = $('.img_wrap.filter')[user];
+            checkedUserList.push($(selectedUser).data('user-id'));
+        })
+        if (keyword.length < 2) { return; }
+        var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
+        var userMessageTemplate;
+        $.get({ url: "./template/template_user_message.html", async: false }
+          , function(text) {
+            userMessageTemplate = text;
+        });
+        var myMessageTemplate;
+        $.get({ url: "./template/template_my_message.html", async: false }
+          , function(text) {
+            myMessageTemplate = text;
+        });
+
+        let jQueryMessages = $('.overlay_src_msg');
+        messages.forEach(function(message) {
+            let template = userMessageTemplate;
+            if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
+                 template = myMessageTemplate;
+            }
+            if (message.messageType == messageType.SYSTEM) {
+                template = systemMessageTemplate;
+            }
+            let messageTime = CHAT_UTIL.formatDate(message.insertDate);
+            // ユーザの様式を読み込む
+
+            if (message.profileUrl) {
+                message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
+            } else {
+                message.profileUrl = CHAT.getProfileImgUrl("")
+            }
+             message.message = message.message.toString();
+             var replacePath = message.message;
+             replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
+             message.message = replacePath;
+
+             let html = Mustache.render(template, {
+                 text: message.message,
+                 from: message.loginId,
+                 shopMemberId: message.shopMemberId,
+                 profileImage: message.profileUrl,
+                 createdAtDay: messageTime.createdAtDay,
+                 createdAtTime: messageTime.createdAtTime
+             });
+             html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
+             workVal = html + workVal;
+        })
+        jQueryMessages.prepend(workVal);
+    });
 });

public_new/js/chatMakeRoom.js

+$(function() {
+  // メンバー検索
+
+  $('#chatMakeRoom .search_form input[type="search"]').keyup(function(){
+    var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
+    $('.overlay_src_msg').empty();
+
+    //全グループ検索画面
+    if (isAllGroup) {
+        var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+
+        //グループデータ検索
+        var groupList = CHAT_DB.getGroupByName(keyword);
+        var groupTemplate;
+        $.get({ url: "./template/template_make_room_group_list.html", async: false }
+            , function(text) {
+                groupTemplate = text;
+        });
+
+        groupList.forEach(function(group) {
+            let html = Mustache.render(groupTemplate, {
+                name: group.groupName,
+                id: group.groupId,
+            });
+
+            let obj = jQuery.parseHTML(html);
+            $('.overlay_src_msg').append(obj);
+        })
+
+        //ユーザデータ検索
+        var userList = CHAT_DB.getAllGroupShopMemberByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').append(obj);
+
+　　//連絡先画面
+    } else {
+        var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
+        if (keyword == '') {
+            return;
+        }
+        var userList = CHAT_DB.getMyGroupShopMemberByName(keyword);
+        var userTemplate;
+        $.get({ url: "./template/template_make_room_user_list.html", async: false }
+            , function(text) {
+                userTemplate = text;
+        });
+        userList.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
+                return shopMemberId == user.shopMemberId;
+            })
+            if (findObj) {
+                user.checked = 'checked';
+            }
+        });
+        let html = Mustache.render(userTemplate, {
+            userList: userList
+        });
+        let obj = jQuery.parseHTML(html);
+        $('.overlay_src_msg').html(obj);
+    }
+  });
+});

public_new/js/common.js

@@ -55,6 +55,7 @@ $(function() {
   $('.message_input_form').click(function(){
     $('.message_input_send').removeClass('none');
     $('.attach_file').addClass('none');
+    $('.footer_content_b').addClass('none');
   });
 
  $('.message_input_form').on('focusout',function(e){
@@ -63,6 +64,7 @@ $(function() {
     }
     $('.message_input_send').addClass('none');
     $('.attach_file').removeClass('none');
+    $('.footer_content_b').removeClass('none');
   });
 
 });

public_new/js/constant.js

@@ -27,7 +27,13 @@ const chatRoomType = {
     ALL : "2"
 }
 
+const groupSearchFlg = {
+    ROOT : "0"
+}
+
 const nameCardAreaId = {
     MY : "myNamecard",
     USER : "userNamecard"
-}
\ No newline at end of file
+}
+
+const messageSeperator = "<::split>";

public_new/js/loading.js

 
-$(window).load(function () { //読み込み完了したら実行する
+$(window).on('load',function () { //読み込み完了したら実行する
   $('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
   $('#loader').delay(600).fadeOut(300);
 });

public_new/modal_chat_menu.html

@@ -11,6 +11,7 @@
         <ul>
           <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li>
           <li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
+          <li ><a href="javascript:return false;" onclick="CHAT_UI.roomDisplayOff();"><img src="icon/icon_chat_gray.png" alt="ユーザー招待">部屋非表示</a></li>
         </ul>
       </div>
     </div>

public_new/template/template_add_user_confirm_user_list.html

+<ul class="p-0 chat_make_room_list">
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></div>
+                </div>
+            </div>
+            <div class="chat_item_m px-0">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file

public_new/template/template_add_user_user_list.html

+<ul class="p-0 chat_make_room_list">
+    {{#userList}}
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l_chk">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
+                </div>
+            </div>
+            <div class="chat_item_m">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{shopMemberName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    {{/userList}}
+</ul>
\ No newline at end of file

public_new/template/template_chatroom_user_filter_list.html

+{{#userList}}
+<div class="user_item">
+  <div class="d-flex flex-column">
+    <div class="img_wrap filter_img" data-user-id="{{shopMemberId}}">
+      <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
+    </div>
+    <span>{{shopMemberName}}</span>
+  </div>
+</div>
+{{/userList}}
\ No newline at end of file

public_new/template/template_make_room_confirm_user_list.html

+<ul class="p-0 chat_make_room_list">
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></div>
+                </div>
+            </div>
+            <div class="chat_item_m px-0">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+</ul>
\ No newline at end of file

public_new/template/template_make_room_group_list.html

+<li class="d-flex align-items-center">
+    <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
+        <div class="chat_item d-flex flex-row align-items-center">
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <img src="icon/icon_folder.png" alt="フォルダ" />
+                </div>
+            </div>
+            <div class="chat_item_m px-0">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{name}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </a>
+</li>
\ No newline at end of file

public_new/template/template_make_room_group_path.html

+<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
\ No newline at end of file

public_new/template/template_make_room_group_user_list.html

+<div class="category"><div class="category_name"><span>{{groupName}}</span></div></div>
+<ul class="p-0 chat_make_room_list">
+    {{#groupUserList}}
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l_chk">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
+                </div>
+            </div>
+            <div class="chat_item_m">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{shopMemberName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    {{/groupUserList}}
+</ul>
\ No newline at end of file

public_new/template/template_make_room_user_list.html

+<ul class="p-0 chat_make_room_list">
+    {{#userList}}
+    <li class="d-flex align-items-center">
+        <div class="chat_item d-flex flex-row align-items-center w-100">
+            <div class="chat_item_l_chk">
+                <div class="checkbox">
+                    <label>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
+                </div>
+            </div>
+            <div class="chat_item_m">
+                <div class="d-flex flex-column">
+                    <div class="chat_item_t">
+                        <span class="chat_item_ttl">{{shopMemberName}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+    {{/userList}}
+</ul>
\ No newline at end of file

public_new/template/template_my_message.html

 <div class="room_right">
   <div class="text">{{text}}</div>
+  {{#isToday}}
+  <div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
+  {{/isToday}}
+  {{^isToday}}
   <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
+  {{/isToday}}
   <div class="read d-flex align-items-end"><span></span></div>
 </div>
\ No newline at end of file

public_new/template/template_user_message.html

 <div class="room_left">
   <figure>
-    <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'" ></a>
+    <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
   </figure>
   <div class="room_left-text">
     <div class="name">{{from}}</div>
     <div class="text">{{text}}</div>
   </div>
+  {{#isToday}}
+  <div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
+  {{/isToday}}
+  {{^isToday}}
   <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
+  {{/isToday}}
   <div class="read d-flex align-items-end"><span></span></div>
 </div>
\ No newline at end of file