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;
   float: left;
   padding: 0 0 0 15px;
   padding: 0 0 0 15px;
   width: 85%;
   width: 85%;
+  padding-top: 6px;
 }
 }
 
 
 #room_list, #group_list, #user_list, #select_user_list {
 #room_list, #group_list, #user_list, #select_user_list {
@@ -506,7 +507,7 @@ a.article:hover {
   padding-left: 12%;
   padding-left: 12%;
 }
 }
 .userCheckBox{
 .userCheckBox{
-  margin-left: -12%;
+  margin-left: 80%;
 }
 }
 
 
 .nav-item .dropdown-toggle::after{
 .nav-item .dropdown-toggle::after{
@@ -710,7 +711,7 @@ a.article:hover {
 }
 }
 
 
 .chat-list-type-btn {
 .chat-list-type-btn {
-  width: 30%;
+  width: 40%;
 }
 }
 #my_info > div > div {
 #my_info > div > div {
   padding-left: 5%;
   padding-left: 5%;
@@ -724,6 +725,10 @@ a.article:hover {
   padding-left: 5%;
   padding-left: 5%;
 }
 }
 
 
+#my_group_list > div > div {
+  padding-left: 5%;
+}
+
 .contact-seperator {
 .contact-seperator {
   width: 100%;
   width: 100%;
   background-color: #095395!important;
   background-color: #095395!important;
@@ -741,9 +746,6 @@ a.article:hover {
   min-height: 250px;
   min-height: 250px;
   top: 20%;
   top: 20%;
   background: #F7FFF4;
   background: #F7FFF4;
-}
-
-#namecard {
   z-index: 10051;
   z-index: 10051;
 }
 }
 
 
@@ -760,6 +762,44 @@ a.article:hover {
   text-align: center;
   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 {
 .inbox_archive {
   width: 100%;
   width: 100%;
 }
 }
@@ -888,3 +928,7 @@ a.article:hover {
   text-align: center;
   text-align: center;
   overflow: hidden;
   overflow: hidden;
 }
 }
+<<<<<<< HEAD
+=======
+>>>>>>> origin/develop_apply_design_chat
+>>>>>>> origin/develop_createRoom_UI

public/index.html

@@ -221,7 +221,7 @@
     </div>
     </div>
 
 
     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
     <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="heading_srch">
           <div class="srch_bar">
           <div class="srch_bar">
             <div class="stylish-input-group">
             <div class="stylish-input-group">
@@ -232,15 +232,49 @@
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
+        <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>
+        <div id="myGroupArea">
           <div id="my_info" class="inbox_user row">
           <div id="my_info" class="inbox_user row">
           </div>
           </div>
-
           <label class="contact-seperator" id="favorite-seperator">Favorite</label>
           <label class="contact-seperator" id="favorite-seperator">Favorite</label>
           <div id="favorite_list" class="inbox_user row">
           <div id="favorite_list" class="inbox_user row">
           </div>
           </div>
           <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
           <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
           <div id="my_group_list" class="inbox_user row">
           <div id="my_group_list" class="inbox_user row">
           </div>
           </div>
+        </div>
+
+        <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>
 
 
 
 
       </div>
       </div>
@@ -384,8 +418,9 @@
   </ul>
   </ul>
 </div>
 </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">
 <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">
   <div class="col-4">
     <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
     <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
@@ -398,7 +433,7 @@
   </div>
   </div>
 </nav>
 </nav>
 <script id="my-namecard-template" type="text/template">
 <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">
   <div class="namecard_img">
     <img src="./images/user-profile.png" alt>
     <img src="./images/user-profile.png" alt>
     <div class="namedard-img-upload" >Upload</div>
     <div class="namedard-img-upload" >Upload</div>
@@ -411,7 +446,7 @@
   </div>
   </div>
 </script>
 </script>
 <script id="namecard-template" type="text/template">
 <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">
   <div class="namecard_img">
     <img src="./images/user-profile.png" alt>
     <img src="./images/user-profile.png" alt>
     <div class="namecard-login-id">{{name}}</div>
     <div class="namecard-login-id">{{name}}</div>
@@ -421,11 +456,22 @@
     <li><b>{{.}}</b></li>
     <li><b>{{.}}</b></li>
     {{/groupPathList}}
     {{/groupPathList}}
   </div>
   </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>
 <script id="message-template" type="text/template">
 <script id="message-template" type="text/template">
   <div class="incoming_msg">
   <div class="incoming_msg">
     <div class="incoming_msg_img">
     <div class="incoming_msg_img">
-      <img src={{{profileImage}}} alt="">
+      <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
     </div>
     </div>
     <div class="received_msg">
     <div class="received_msg">
       <div class="received_withd_msg">
       <div class="received_withd_msg">
@@ -478,7 +524,7 @@
   </div>
   </div>
 </script>
 </script>
 <script id="group-template" type="text/template">
 <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_people">
       <div class="group_img">
       <div class="group_img">
         <img src="./images/group-image.png" alt="">
         <img src="./images/group-image.png" alt="">
@@ -512,6 +558,9 @@
     </div>
     </div>
   </div>
   </div>
 </script>
 </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">
 <script id="favorite-user-template" type="text/template">
   <div class="user_list col-12" data-name="{{name}}">
   <div class="user_list col-12" data-name="{{name}}">
     <div class="user_people">
     <div class="user_people">

public/js/chat-db.js

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

public/js/chat-ui.js

@@ -55,11 +55,12 @@ $(window).on('resize', function() {
 // チャットルーム生成ボタン処理
 // チャットルーム生成ボタン処理
 $('#createChatRoom').on('click', function() {
 $('#createChatRoom').on('click', function() {
     //loadingIndicatorを表示
     //loadingIndicatorを表示
-    CHAT_UI.showLoadingIndicator();
+//    CHAT_UI.showLoadingIndicator();
 
 
     let isInvite = false;
     let isInvite = false;
     CHAT.globalIsInvite = isInvite;
     CHAT.globalIsInvite = isInvite;
-    socket.emit('getGroupList', isInvite);
+//    socket.emit('getGroupList', isInvite);
+    CHAT_UI.refreshGroupSearch('0', isInvite);
 });
 });
 
 
 // Room Delete
 // Room Delete
@@ -475,10 +476,15 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
             break;
             break;
 
 
         case '#pills-contact':
         case '#pills-contact':
-            $('#namecard').html('');
+            $('#myNamecard').html('');
             $('#homeButton').show();
             $('#homeButton').show();
             $("#backButton").hide();
             $("#backButton").hide();
             $('.titleRoomName').show();
             $('.titleRoomName').show();
+            $('#myGroupArea').show();
+            $('#newRoomName').val('');
+            $('#userSelectionLength').text('');
+            CHAT.globalSelectedUserList = [];
+            $('#allGroupArea').hide();
             $('#my_info').show();
             $('#my_info').show();
             $('#bottomNav').show();
             $('#bottomNav').show();
             break;
             break;
@@ -647,7 +653,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
         let html = Mustache.render(template, {
         let html = Mustache.render(template, {
             id: user.shopMemberId,
             id: user.shopMemberId,
             profileImage: user.profileImagePath,
             profileImage: user.profileImagePath,
-            name: user.loginId
+            name: user.shopMemberName
         });
         });
         // TODO 次のコミットに参考事項
         // TODO 次のコミットに参考事項
         // チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
         // チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
@@ -671,7 +677,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
     $('#backButton').off().on('click', function() {
     $('#backButton').off().on('click', function() {
         //loadingIndicatorを表示
         //loadingIndicatorを表示
         CHAT_UI.showLoadingIndicator();
         CHAT_UI.showLoadingIndicator();
-        socket.emit('getGroupList', isInvite)
+        CHAT_UI.refreshGroupSearch("0", isInvite);
     });
     });
 
 
     $("#userSelectionConfirmBtn").off().on('click', function(){
     $("#userSelectionConfirmBtn").off().on('click', function(){
@@ -714,10 +720,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
                     // ルーム名のURIencodingを行う
                     // ルーム名のURIencodingを行う
                     //const encodedRoomName = encodeURIComponent(newRoomName);
                     //const encodedRoomName = encodeURIComponent(newRoomName);
 
 
-
-
                     //todo android create room api
                     //todo android create room api
-                    android.createChatRoom("1",userIdList.join(','),newRoomName);
+                    android.createChatRoom("1", userIdList.join(','), newRoomName);
 
 
 
 
                     /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
                     /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
@@ -807,15 +811,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
 
 
                     // ルーム名のtrimmingした後、URIencodingを行う
                     // ルーム名のtrimmingした後、URIencodingを行う
                     const encodedRoomName = encodeURIComponent(trimmedRoomName);
                     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"))
     $("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
     $("#groupBtn").text(getLocalizedString("groupChatRoom"))
     $("#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"))
     $("#favorite-seperator").text(getLocalizedString("favorite"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
 }
 }
@@ -906,28 +916,183 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
 }
 }
 
 
 $('#contactButton').on('click', function(event){
 $('#contactButton').on('click', function(event){
-    CHAT_UI.refreshContactScreen();
+    let isCreate = false;
+    let isInvite = false;
+    CHAT_UI.refreshContactScreen(isCreate, isInvite);
 });
 });
 
 
 $('#chatButton').on('click', function(event){
 $('#chatButton').on('click', function(event){
     CHAT_UI.refreshRoomList(chatRoomType.DM);
     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){
 $('#archiveButton').on('click', function(event){
     CHAT_UI.refreshArchiveScreen();
     CHAT_UI.refreshArchiveScreen();
 });
 });
 
 
+<<<<<<< HEAD
 CHAT_UI.refreshContactScreen = function() {
 CHAT_UI.refreshContactScreen = function() {
+=======
+CHAT_UI.refreshContactScreen = function(isCreate, isInvite) {
+
+>>>>>>> origin/develop_createRoom_UI
     //loadingIndicatorを表示
     //loadingIndicatorを表示
     $('#my_info').html('');
     $('#my_info').html('');
     $('#favorite_list').html('');
     $('#favorite_list').html('');
     $('#my_group_list').html('');
     $('#my_group_list').html('');
     CHAT_UI.showLoadingIndicator();
     CHAT_UI.showLoadingIndicator();
+    if (isCreate != true) {
         $('#pills-contact-tab').tab('show');
         $('#pills-contact-tab').tab('show');
-
         //画面タイトル設定
         //画面タイトル設定
         let contactListTitle = getLocalizedString("contactListTitle");
         let contactListTitle = getLocalizedString("contactListTitle");
         $('.titleRoomName').text(contactListTitle);
         $('.titleRoomName').text(contactListTitle);
+        $('#backButton').hide();
+        $('#homeButton').show();
+        $('#userSelectionConfirmBtn').hide();
+    }
+    $('#myGroupArea').show();
+    $('#allGroupArea').hide();
+
 
 
     // グループの様式を読み込む
     // グループの様式を読み込む
     const groupTemplate = $('#group-template').html();
     const groupTemplate = $('#group-template').html();
@@ -935,13 +1100,14 @@ CHAT_UI.refreshContactScreen = function() {
     // ユーザの様式を読み込む
     // ユーザの様式を読み込む
     const userTemplate = $('#user-template').html();
     const userTemplate = $('#user-template').html();
     const myNamecardTemplate = $('#my-namecard-template').html();
     const myNamecardTemplate = $('#my-namecard-template').html();
-
+    const userNamecardTemplate = $('#namecard-template').html();
     if (IS_ONLINE == 'true') {
     if (IS_ONLINE == 'true') {
-        android.updateGroupInfo();
+        android.updateGroupInfo('0');
         android.updateMyInfo();
         android.updateMyInfo();
         android.updateGroupUser();
         android.updateGroupUser();
     }
     }
 
 
+    if (isCreate != true) {
         var myInfo = CHAT_DB.getMyInfo();
         var myInfo = CHAT_DB.getMyInfo();
 
 
         myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
         myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
@@ -957,7 +1123,7 @@ CHAT_UI.refreshContactScreen = function() {
         let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
         let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
 
 
         });
         });
-    $('#namecard').append(myNamecardObj);
+        $('#myNamecard').append(myNamecardObj);
 
 
         let html = Mustache.render(userTemplate, {
         let html = Mustache.render(userTemplate, {
             id: myInfo.shopMemberId,
             id: myInfo.shopMemberId,
@@ -966,10 +1132,11 @@ CHAT_UI.refreshContactScreen = function() {
         });
         });
 
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
-        CHAT_UI.showNamecard('namecard');
+            CHAT_UI.showNamecard('myNamecard');
         });
         });
 
 
         $('#my_info').append(obj);
         $('#my_info').append(obj);
+    }
 
 
     var groupUserList = CHAT_DB.getMyGroupUsers();
     var groupUserList = CHAT_DB.getMyGroupUsers();
     groupUserList.forEach(function(groupUser) {
     groupUserList.forEach(function(groupUser) {
@@ -981,13 +1148,36 @@ CHAT_UI.refreshContactScreen = function() {
         });
         });
 
 
         let obj = $(jQuery.parseHTML(html)).on('click', 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);
         $('#my_group_list').append(obj);
     })
     })
     var favoriteCount = 0;
     var favoriteCount = 0;
@@ -999,6 +1189,10 @@ CHAT_UI.refreshContactScreen = function() {
 
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
             //TODO need onClick Action
+            if (isCreate != true) {
+            } else {
+                CHAT_UI.refreshGroupSearch(favoriteGroup.groupId, isInvite);
+            }
         });
         });
         favoriteCount++
         favoriteCount++
         $('#favorite_list').append(obj);
         $('#favorite_list').append(obj);
@@ -1015,7 +1209,34 @@ CHAT_UI.refreshContactScreen = function() {
 
 
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
         let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
             //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++
         favoriteCount++
         $('#favorite_list').append(obj);
         $('#favorite_list').append(obj);
     })
     })
@@ -1027,6 +1248,19 @@ CHAT_UI.refreshContactScreen = function() {
         $('#favorite_list').show();
         $('#favorite_list').show();
         $('#favorite-seperator').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();
     CHAT_UI.dismissLoadingIndicator();
 }
 }
 
 
@@ -1126,10 +1360,8 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
 };
 };
 
 
 CHAT_UI.loadMessages = function(messages, roomId, roomName) {
 CHAT_UI.loadMessages = function(messages, roomId, roomName) {
-
     $('#messages').html('');
     $('#messages').html('');
     $('.titleRoomName').text(roomName).data('roomName', roomName);
     $('.titleRoomName').text(roomName).data('roomName', roomName);
-    $('#pills-chat-tab').tab('show');
     $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
     $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
     let jQueryMessages = $('#messages');
     let jQueryMessages = $('#messages');
         // スクロールの変化を防ぐため以前画面の高さを保存する
         // スクロールの変化を防ぐため以前画面の高さを保存する
@@ -1157,6 +1389,7 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
              let html = Mustache.render(template, {
              let html = Mustache.render(template, {
                  text: message.message,
                  text: message.message,
                  from: message.loginId,
                  from: message.loginId,
+                 shopMemberId: message.shopMemberId,
                  profileImage: message.profileImagePath,
                  profileImage: message.profileImagePath,
                  createdAtDay: messageTime.createdAtDay,
                  createdAtDay: messageTime.createdAtDay,
                  createdAtTime: messageTime.createdAtTime
                  createdAtTime: messageTime.createdAtTime
@@ -1199,31 +1432,267 @@ $('#groupBtn').on('click', function (e){
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
 });
 
 
+
+
 CHAT_UI.showNamecard = function(id) {
 CHAT_UI.showNamecard = function(id) {
-    $('#namecard').appendTo("body").modal({
+    $('#'+id).appendTo("body").modal({
         backdrop: 'static',
         backdrop: 'static',
         keyboard: false
         keyboard: false
     })
     })
 }
 }
 
 
 CHAT_UI.hideNamecard = function(id) {
 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) {
 CHAT_UI.showUserNamecard = function(shopMemberId) {
 
 
-//    $('#namecard').appendTo("body").modal({
+//    $('#myNamecard').appendTo("body").modal({
 //        backdrop: 'static',
 //        backdrop: 'static',
 //        keyboard: false
 //        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() {
 CHAT_UI.refreshArchiveScreen = function() {
 	// loadingIndicatorを表示
 	// loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
 	CHAT_UI.showLoadingIndicator();
@@ -1418,3 +1887,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
 	// loadingIndicatorを非表示
 	// loadingIndicatorを非表示
 	CHAT_UI.dismissLoadingIndicator();
 	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');
         $('#pills-group-tab').tab('show');
 
 
         $('#backButton').show();
         $('#backButton').show();
-
         if (isInvite) {
         if (isInvite) {
-            $('.titleRoomName').text(memberSelectTitle);
             $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
             $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
             $('#userSelectionConfirmBtn').show();
             $('#userSelectionConfirmBtn').show();
             $("#userSelectionConfirmBtn").off().on('click', function(){
             $("#userSelectionConfirmBtn").off().on('click', function(){
                 CHAT_UI.setConfirmButtonEvent(isInvite);
                 CHAT_UI.setConfirmButtonEvent(isInvite);
             });
             });
         } else {
         } else {
-            $('.titleRoomName').text(memberSelectTitle);
             $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
             $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
             $('#userSelectionConfirmBtn').show();
             $('#userSelectionConfirmBtn').show();
             $("#userSelectionConfirmBtn").off().on('click', function(){
             $("#userSelectionConfirmBtn").off().on('click', function(){
                 CHAT_UI.setConfirmButtonEvent(isInvite);
                 CHAT_UI.setConfirmButtonEvent(isInvite);
             });
             });
         }
         }
-
+//
         if (CHAT.globalSelectedUserList.length > 0) {
         if (CHAT.globalSelectedUserList.length > 0) {
             $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
             $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
         } else {
         } else {

public/js/constant.js

@@ -25,3 +25,8 @@ const chatRoomType = {
     DM : "1",
     DM : "1",
     GROUP : "0"
     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",
     "favorite":"Favorite List",
     "mygroup":"My Group",
     "mygroup":"My Group",
     "groupChatRoom":"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",
     "archiveListTitle":"Archive",
     "archiveTypeImage":"Image",
     "archiveTypeImage":"Image",
     "archiveTypeMovie":"Movie",
     "archiveTypeMovie":"Movie",

public/js/language_ja.js

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

public/js/language_ko.js

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

public_new/archive.html

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

public_new/chat.html

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

public_new/chat_add_user.html

@@ -10,12 +10,13 @@
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/chat.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/footer.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
 </head>
 </head>
 <body>
 <body>
-  <!-- ナビメニュー -->
-  <nav>
+<!-- ナビメニュー -->
+<nav>
   <div class="row h-100 align-items-center">
   <div class="row h-100 align-items-center">
     <div class="col-4 pr-0">
     <div class="col-4 pr-0">
       <div class="nav-item">
       <div class="nav-item">
@@ -26,7 +27,7 @@
     </div>
     </div>
     <div class="col-4 p-0">
     <div class="col-4 p-0">
       <div class="nav-item 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>
     </div>
     <div class="col-4 pl-0">
     <div class="col-4 pl-0">
@@ -34,397 +35,147 @@
       </div>
       </div>
     </div><!-- .col -->
     </div><!-- .col -->
   </div><!-- .row -->
   </div><!-- .row -->
-  </nav><!-- nav -->
+</nav><!-- nav -->
 
 
-  <!-- コンテンツ -->
-  <main id="chat_add_user">
-    <form action="chat_add_user_confirm.html" method="post">
+<!-- コンテンツ -->
+<main id="chat_add_user">
+  <form id="addUserForm" action="chat_add_user_confirm.html" method="post">
     <!-- ユーザー検索 -->
     <!-- ユーザー検索 -->
-      <div class="search_form">
+    <div class="search_form my-2">
       <form>
       <form>
         <input type="search" name="search" placeholder="ユーザー検索">
         <input type="search" name="search" placeholder="ユーザー検索">
         <span class="src_icon"></span>
         <span class="src_icon"></span>
         <a href="#" class="cancel none">キャンセル</a>
         <a href="#" class="cancel none">キャンセル</a>
       </form>
       </form>
     </div>
     </div>
+
     <!-- タブ -->
     <!-- タブ -->
     <div class="content tabs">
     <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>
+      <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="tab_content" id="tab1_content">
         <div class="chat_list">
         <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 class="category"><div class="category_name"><span>お気に入り</span></div></div>
+          <div id="favoriteListForMakeRoom"></div>
+          <div id="myGroupListForMakeRoom"></div>
         </div>
         </div>
       </div>
       </div>
       <div class="tab_content" id="tab2_content">
       <div class="tab_content" id="tab2_content">
+        <div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
         <div class="chat_list">
         <div class="chat_list">
           <!-- 全グループ -->
           <!-- 全グループ -->
-            <div class="category">グループ1</div>
           <ul class="p-0 chat_make_room_list">
           <ul class="p-0 chat_make_room_list">
             <li class="d-flex align-items-center">
             <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 href="#" class="w-100" id="rootGroupBtnForMakeRoom">
+                <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
                   <div class="chat_item_l">
                     <div class="thumbnail">
                     <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>
                   </div>
-                  <div class="chat_item_m">
+                  <div class="chat_item_m px-0">
                     <div class="d-flex flex-column">
                     <div class="d-flex flex-column">
                       <div class="chat_item_t">
                       <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                        <span class="chat_item_ttl">トップグループに戻る</span>
                       </div>
                       </div>
                     </div>
                     </div>
                   </div>
                   </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
                 </div>
                 </div>
+              </a>
             </li>
             </li>
             <li class="d-flex align-items-center">
             <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 href="#" class="w-100" id="parentGroupBtnForMakeRoom">
+                <div class="chat_item d-flex flex-row align-items-center">
                   <div class="chat_item_l">
                   <div class="chat_item_l">
                     <div class="thumbnail">
                     <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+                      <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                     </div>
                     </div>
                   </div>
                   </div>
-                  <div class="chat_item_m">
+                  <div class="chat_item_m px-0">
                     <div class="d-flex flex-column">
                     <div class="d-flex flex-column">
                       <div class="chat_item_t">
                       <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
-                      </div>
+                        <span class="chat_item_ttl">上位グループに戻る</span>
                       </div>
                       </div>
                     </div>
                     </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
                   </div>
                   </div>
                 </div>
                 </div>
+              </a>
             </li>
             </li>
+            <div id="childGroupListAreaForMakeRoom"></div>
+            <div id="userInGroupListForMakeRoom"></div>
           </ul>
           </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>
-                  <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>
     </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>
-      </div>
-      <!-- オーバーレイ -->
-      <div class="chat_list">
+    <div class="chat_make_room">
       <ul class="overlay_src_msg">
       <ul class="overlay_src_msg">
       </ul>
       </ul>
     </div>
     </div>
-      <!-- ユーザー招待確認ボタン -->
-      <div class="add_user_confirm_btn">
+
+    <!-- ルーム解説ボタン -->
+    <div class="make_room_confirm_btn content" id="addUserConfirmBtn">
       <button type="button" name="button">
       <button type="button" name="button">
         確認<br>
         確認<br>
         <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
         <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
     </div>
     </div>
   </form>
   </form>
-  </main>
-
-
+</main>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>
 <script src="./js/libs/moment.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/bootstrap.min.js"></script>
 <script src="./js/libs/jquery.mark.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/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>
 </body>
 </html>
 </html>

public_new/chat_add_user_confirm.html

@@ -43,165 +43,58 @@
       <div class="chat_list">
       <div class="chat_list">
         <h2>参加者</h2>
         <h2>参加者</h2>
         <ul class="p-0 chat_make_room_list">
         <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>
         </ul>
       </div>
       </div>
 
 
       <!-- ユーザー招待ボタン -->
       <!-- ユーザー招待ボタン -->
       <div class="add_user_btn">
       <div class="add_user_btn">
-        <button type="button" name="button">招待</button>
+        <button type="button" name="button" id="addUserBtn">招待</button>
       </div>
       </div>
     </form>
     </form>
   </main>
   </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);
+    }
+
+    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();
 
 
-<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>
+    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>
 </body>
 </html>
 </html>

public_new/chat_make_room.html

@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/common.css">
   <link rel="stylesheet" href="./css/chat.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/footer.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
   <link rel="stylesheet" href="./css/font-awesome.css">
 </head>
 </head>
@@ -26,7 +27,7 @@
       </div>
       </div>
       <div class="col-4 p-0">
       <div class="col-4 p-0">
         <div class="nav-item 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>
       </div>
       <div class="col-4 pl-0">
       <div class="col-4 pl-0">
@@ -37,385 +38,144 @@
   </nav><!-- nav -->
   </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">
       <div class="search_form my-2">
         <form>
         <form>
           <input type="search" name="search" placeholder="ユーザー検索">
           <input type="search" name="search" placeholder="ユーザー検索">
           <span class="src_icon"></span>
           <span class="src_icon"></span>
+          <a href="#" class="cancel none">キャンセル</a>
         </form>
         </form>
       </div>
       </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="tab_content" id="tab1_content">
           <div class="chat_list">
           <div class="chat_list">
             <!-- お気に入りグループ -->
             <!-- お気に入りグループ -->
             <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
             <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>
         </div>
         <div class="tab_content" id="tab2_content">
         <div class="tab_content" id="tab2_content">
+          <div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
           <div class="chat_list">
           <div class="chat_list">
             <!-- 全グループ -->
             <!-- 全グループ -->
-            <div class="category"><div class="category_name"><span>グループ1</span></div></div>
             <ul class="p-0 chat_make_room_list">
             <ul class="p-0 chat_make_room_list">
               <li class="d-flex align-items-center">
               <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 href="#" class="w-100" id="rootGroupBtnForMakeRoom">
+                  <div class="chat_item d-flex flex-row align-items-center">
                     <div class="chat_item_l">
                     <div class="chat_item_l">
                       <div class="thumbnail">
                       <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>
                     </div>
-                  <div class="chat_item_m">
+                    <div class="chat_item_m px-0">
                       <div class="d-flex flex-column">
                       <div class="d-flex flex-column">
                         <div class="chat_item_t">
                         <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
-                      </div>
+                          <span class="chat_item_ttl">トップグループに戻る</span>
                         </div>
                         </div>
                       </div>
                       </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
                     </div>
                     </div>
                   </div>
                   </div>
+                </a>
               </li>
               </li>
               <li class="d-flex align-items-center">
               <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 href="#" class="w-100" id="parentGroupBtnForMakeRoom">
+                  <div class="chat_item d-flex flex-row align-items-center">
                     <div class="chat_item_l">
                     <div class="chat_item_l">
                       <div class="thumbnail">
                       <div class="thumbnail">
-                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+                        <img src="icon/icon_prev.png" alt="上位グループに戻る" />
                       </div>
                       </div>
                     </div>
                     </div>
-                  <div class="chat_item_m">
+                    <div class="chat_item_m px-0">
                       <div class="d-flex flex-column">
                       <div class="d-flex flex-column">
                         <div class="chat_item_t">
                         <div class="chat_item_t">
-                        <span class="chat_item_ttl">名前　太郎</span>
+                          <span class="chat_item_ttl">上位グループに戻る</span>
                         </div>
                         </div>
                       </div>
                       </div>
                     </div>
                     </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
-                  </div>
                   </div>
                   </div>
+                </a>
               </li>
               </li>
+              <div id="childGroupListAreaForMakeRoom"></div>
+              <div id="userInGroupListForMakeRoom"></div>
             </ul>
             </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>
         </div>
-                  <div class="chat_item_r">
-                    <span class="star disable"></span>
       </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_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>
+      <div class="chat_make_room">
+        <ul class="overlay_src_msg" style="padding-inline-start: 20px;">
         </ul>
         </ul>
       </div>
       </div>
-        </div>
-      </div>
 
 
       <!-- ルーム解説ボタン -->
       <!-- ルーム解説ボタン -->
-      <div class="make_room_confirm_btn">
+      <div class="make_room_confirm_btn content" id="makeRoomConfirmBtn">
         <button type="button" name="button">
         <button type="button" name="button">
           ルーム開設<br>
           ルーム開設<br>
           <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
           <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
       </div>
       </div>
     </form>
     </form>
   </main>
   </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>
 </body>
 </html>
 </html>

public_new/chat_make_room_confirm.html

@@ -19,8 +19,8 @@
     <div class="row h-100 align-items-center">
     <div class="row h-100 align-items-center">
       <div class="col-4 pr-0">
       <div class="col-4 pr-0">
         <div class="nav-item">
         <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>
         </div>
       </div>
       </div>
@@ -41,163 +41,19 @@
     <form action="chat_room.html" method="post">
     <form action="chat_room.html" method="post">
       <!-- ルーム名入力 -->
       <!-- ルーム名入力 -->
       <div class="room_name">
       <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>
 
 
       <!-- 参加者一覧 -->
       <!-- 参加者一覧 -->
       <div class="chat_list">
       <div class="chat_list">
         <h2>参加者</h2>
         <h2>参加者</h2>
         <ul class="p-0 chat_make_room_list">
         <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>
         </ul>
       </div>
       </div>
-
       <!-- ルーム解説ボタン -->
       <!-- ルーム解説ボタン -->
-      <div class="make_room_btn">
+      <div class="make_room_btn" id="makeRoomBtn">
         <button type="button" name="button">
         <button type="button" name="button">
           チャット開始</button>
           チャット開始</button>
       </div>
       </div>
@@ -205,10 +61,46 @@
   </main>
   </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>
 </body>
 </html>
 </html>

public_new/chat_room.html

@@ -52,42 +52,9 @@
 
 
     </div>
     </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">
     <div class="chat_list">
       <ul class="overlay_src_msg">
       <ul class="overlay_src_msg">
       </ul>
       </ul>
@@ -208,7 +175,6 @@
     android.getLoginParameter();
     android.getLoginParameter();
     android.getGlobalParameter();
     android.getGlobalParameter();
 
 
-
     function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
     function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
       CHAT_SERVER_URL = chatServerUrl;
       CHAT_SERVER_URL = chatServerUrl;
       CMS_SERVER_URL = cmsServerUrl;
       CMS_SERVER_URL = cmsServerUrl;
@@ -216,6 +182,7 @@
       IS_MOBILE = isMobile;
       IS_MOBILE = isMobile;
       IS_ONLINE = isOnline;
       IS_ONLINE = isOnline;
       CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
       CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
+
     };
     };
   </script>
   </script>
 
 

public_new/css/chat.css

@@ -35,8 +35,8 @@ input[name="tab_item"] {
   clear: both;
   clear: both;
   overflow: hidden;
   overflow: hidden;
 }
 }
-#tab1:checked ~ #tab1_content,
-#tab2:checked ~ #tab2_content{
+#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
+#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
   display: block;
   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() {
 CHAT_DB.getFavoriteUsers = function() {
     if (CHAT_UTIL.isIOS()) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
         //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) {
 CHAT_DB.getNameCardData = function(shopMemberId) {
     if (CHAT_UTIL.isIOS()) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
         //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) {
 CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
     if (CHAT_UTIL.isIOS()) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
         //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) {
 CHAT_DB.getGroupByName = function(groupName) {
     if (CHAT_UTIL.isIOS()) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
         //TODO IOS処理追加必要
@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
         // TODO
         // 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('');
     messageTextBox.val('');
 
 
     if (message.length > 0) {
     if (message.length > 0) {
-        console.log('createMessage');
-        console.log(socket);
         socket.emit(
         socket.emit(
-            //'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
-            'createMessage', { text: message }
+            'createMessage', { text: message + messageSeperator + messageType.TEXT }
             , 0
             , 0
         );
         );
     }
     }
@@ -568,12 +565,14 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) {
 
 
 //loadingIndicatorを表示
 //loadingIndicatorを表示
 CHAT_UI.showLoadingIndicator = function() {
 CHAT_UI.showLoadingIndicator = function() {
-    $('.loading-indicator').css('display', 'block');
+    var h = $(window).height();
+    $('#loader-bg ,#loader').height(h).css('display','block');
 }
 }
 
 
 //loadingIndicatorを表示しない
 //loadingIndicatorを表示しない
 CHAT_UI.dismissLoadingIndicator = function() {
 CHAT_UI.dismissLoadingIndicator = function() {
-    $('.loading-indicator').css('display', 'none');
+    var h = $(window).height();
+    $('#loader-bg ,#loader').height(h).css('display','none');
 }
 }
 
 
 //画面の方向をcheck
 //画面の方向をcheck
@@ -895,9 +894,7 @@ $('#chatButton').on('click', function(event) {
 
 
 CHAT_UI.refreshContactScreen = function() {
 CHAT_UI.refreshContactScreen = function() {
     CHAT_UI.showLoadingIndicator();
     CHAT_UI.showLoadingIndicator();
-    $(".modal-backdrop").remove();
-    $('#myProfileModal').html('');
-    $('#userProfileModal').html('');
+    $('#userNameCard').modal('hide');
     $('#favoriteList').html('');
     $('#favoriteList').html('');
     $('#myGroupList').html('');
     $('#myGroupList').html('');
     //画面タイトル設定
     //画面タイトル設定
@@ -1000,6 +997,8 @@ CHAT_UI.refreshContactScreen = function() {
 }
 }
 
 
 CHAT_UI.refreshRoomList = function(roomType) {
 CHAT_UI.refreshRoomList = function(roomType) {
+    CHAT_UI.showLoadingIndicator();
+    console.log('START');
     if (roomType == chatRoomType.DM) {
     if (roomType == chatRoomType.DM) {
         $('#tabDM').prop('checked', true);
         $('#tabDM').prop('checked', true);
     } else {
     } else {
@@ -1011,7 +1010,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
     }
     }
     var rooms = CHAT_DB.getRoomList(roomType, null);
     var rooms = CHAT_DB.getRoomList(roomType, null);
     CHAT.globalIsInvite = false;
     CHAT.globalIsInvite = false;
-    activeRoomId = null;
     // #36146に対応
     // #36146に対応
    $('#groupChatList').empty();
    $('#groupChatList').empty();
    $('#dmChatList').empty();
    $('#dmChatList').empty();
@@ -1089,7 +1087,8 @@ CHAT_UI.refreshRoomList = function(roomType) {
     if (CHAT_UI.isLandscapeMode()) {
     if (CHAT_UI.isLandscapeMode()) {
         $(".chat_list").removeClass("col-12").addClass("col-6");
         $(".chat_list").removeClass("col-12").addClass("col-6");
     }
     }
-
+    console.log('DONE');
+    CHAT_UI.dismissLoadingIndicator();
 };
 };
 
 
 CHAT_UI.joinRoom = function(roomId,roomName) {
 CHAT_UI.joinRoom = function(roomId,roomName) {
@@ -1143,6 +1142,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
       , function(text) {
       , function(text) {
         topUserListTemplate = text;
         topUserListTemplate = text;
     });
     });
+    var filterUserListTemplate;
+    $.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
+      , function(text) {
+        filterUserListTemplate = text;
+    });
+
 
 
     usersInRoom.forEach(function(user) {
     usersInRoom.forEach(function(user) {
         user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
         user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
@@ -1152,6 +1157,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
     });
     });
     let obj = jQuery.parseHTML(html);
     let obj = jQuery.parseHTML(html);
     $('#user_list').append(obj);
     $('#user_list').append(obj);
+
+    let filterHtml = Mustache.render(filterUserListTemplate, {
+         userList: usersInRoom
+    });
+    let filterObj = jQuery.parseHTML(filterHtml);
+    $('#filter').append(filterObj);
+
+
     messages.forEach(function(message) {
     messages.forEach(function(message) {
         let template = userMessageTemplate;
         let template = userMessageTemplate;
         if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
         if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
@@ -1176,13 +1189,20 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
          message.message = replacePath;
          message.message = replacePath;
         /* if (message.message contain) {
         /* if (message.message contain) {
          }*/
          }*/
+
+         var isToday = false;
+         if (messageTime.createdAt.includes(':')) {
+            isToday = true;
+         }
+
          let html = Mustache.render(template, {
          let html = Mustache.render(template, {
              text: message.message,
              text: message.message,
              from: message.loginId,
              from: message.loginId,
              shopMemberId: message.shopMemberId,
              shopMemberId: message.shopMemberId,
              profileImage: message.profileUrl,
              profileImage: message.profileUrl,
              createdAtDay: messageTime.createdAtDay,
              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;
          html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
          workVal = html + workVal;
          workVal = html + workVal;
@@ -1218,6 +1238,7 @@ $('#tabGroup').on('click', function(e) {
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
 });
 
 
+
 $('#tabAllGroup').on('click', function(e) {
 $('#tabAllGroup').on('click', function(e) {
     CHAT_UI.refreshAllGroupSearch('0');
     CHAT_UI.refreshAllGroupSearch('0');
 });
 });
@@ -1226,6 +1247,28 @@ $('#tabMyGroup').on('click', function(e) {
     CHAT_UI.refreshContactScreen();
     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) {
 CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
     if ($(star).hasClass('active')) {
     if ($(star).hasClass('active')) {
         CHAT_UI.removeFavoriteUser(shopMemberId);
         CHAT_UI.removeFavoriteUser(shopMemberId);
@@ -1253,17 +1296,22 @@ CHAT_UI.removeFavoriteUser = function(shopMemberId) {
 };
 };
 
 
 CHAT_UI.insertFavoriteUser = function(shopMemberId) {
 CHAT_UI.insertFavoriteUser = function(shopMemberId) {
-    CHAT_UI.showLoadingIndicator();
     $('#userNameCard').modal('hide');
     $('#userNameCard').modal('hide');
     $('#myNameCard').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.dismissLoadingIndicator();
 };
 };
 
 
 CHAT_UI.removeFavoriteGroup = function(groupId) {
 CHAT_UI.removeFavoriteGroup = function(groupId) {
-    CHAT_UI.showLoadingIndicator();
     android.removeFavoriteGroup(groupId);
     android.removeFavoriteGroup(groupId);
     $('.group_'+groupId).removeClass('active');
     $('.group_'+groupId).removeClass('active');
     $('.group_'+groupId).addClass('disable');
     $('.group_'+groupId).addClass('disable');
@@ -1272,9 +1320,16 @@ CHAT_UI.removeFavoriteGroup = function(groupId) {
 
 
 CHAT_UI.insertFavoriteGroup = function(groupId) {
 CHAT_UI.insertFavoriteGroup = function(groupId) {
     CHAT_UI.showLoadingIndicator();
     CHAT_UI.showLoadingIndicator();
-    android.addFavoriteGroup(groupId);
+    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).removeClass('disable');
         $('.group_'+groupId).addClass('active');
         $('.group_'+groupId).addClass('active');
+    }
     CHAT_UI.dismissLoadingIndicator();
     CHAT_UI.dismissLoadingIndicator();
 };
 };
 
 
@@ -1325,17 +1380,13 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) {
         groupPathTemplate = text;
         groupPathTemplate = text;
     });
     });
 
 
-    var groupPathCount = 0;
     result.groupPathList.forEach(function(groupPath) {
     result.groupPathList.forEach(function(groupPath) {
-        if (!(groupPathCount < (result.groupPathList.length - 3))) {
         let html = Mustache.render(groupPathTemplate, {
         let html = Mustache.render(groupPathTemplate, {
             name: groupPath.groupName,
             name: groupPath.groupName,
             id: groupPath.groupId
             id: groupPath.groupId
         });
         });
         let obj = jQuery.parseHTML(html);
         let obj = jQuery.parseHTML(html);
         $('#groupPathArea').append(obj);
         $('#groupPathArea').append(obj);
-        }
-        groupPathCount++;
     })
     })
 
 
     //該当グループの下位グループ表示。
     //該当グループの下位グループ表示。
@@ -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 () {
 CHAT_SOCKET.connectSocket = function () {
     if (IS_ONLINE == 'true') {
     if (IS_ONLINE == 'true') {
         socket = io(CHAT_SERVER_URL);
         socket = io(CHAT_SERVER_URL);
-        console.log(socket);
         setSocketAction();
         setSocketAction();
     } else {
     } else {
         //オフラインの場合、DBからルーム一覧を表示。
         //オフラインの場合、DBからルーム一覧を表示。
@@ -37,7 +36,6 @@ function setSocketAction () {
     });
     });
 
 
     socket.on('disconnect', function() {
     socket.on('disconnect', function() {
-        console.log('disconnect');
         //socketが切断されたら黒画面で画面を更新する
         //socketが切断されたら黒画面で画面を更新する
         $('.overlay').addClass('active undismissable');
         $('.overlay').addClass('active undismissable');
         //alert('Disconnected from the server');
         //alert('Disconnected from the server');
@@ -45,7 +43,6 @@ function setSocketAction () {
     });
     });
 
 
     socket.on('connect_error', function() {
     socket.on('connect_error', function() {
-        console.log('connect_error');
         CHAT_UI.dismissLoadingIndicator();
         CHAT_UI.dismissLoadingIndicator();
     });
     });
 
 
@@ -163,8 +160,6 @@ function setSocketAction () {
     // New Message
     // New Message
     // #36170
     // #36170
     socket.on('newMessage', function(message, roomId, roomName) {
     socket.on('newMessage', function(message, roomId, roomName) {
-        console.log(message);
-        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
         var userMessageTemplate;
         var userMessageTemplate;
         $.get({ url: "./template/template_user_message.html", async: false }
         $.get({ url: "./template/template_user_message.html", async: false }
           , function(text) {
           , function(text) {
@@ -186,22 +181,27 @@ function setSocketAction () {
             // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
             // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
             template = myMessageTemplate;
             template = myMessageTemplate;
         }
         }
-
+        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
         message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
         message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
         try {
         try {
             message.text = decodeURIComponent(message.text)
             message.text = decodeURIComponent(message.text)
         } catch(e) {
         } catch(e) {
             message.text = message.text
             message.text = message.text
         }
         }
+        if ( message.text.includes(messageSeperator) ) {
+            message.text = message.text.split(messageSeperator)[0];
+        }
         var replacePath = message.text;
         var replacePath = message.text;
         replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
         replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
         message.text = replacePath;
         message.text = replacePath;
+        //TODO newMessageの際にDB格納が必要。
         let html = Mustache.render(template, {
         let html = Mustache.render(template, {
             text: message.text,
             text: message.text,
             from: message.from,
             from: message.from,
             profileImage: message.profileImagePath,
             profileImage: message.profileImagePath,
             createdAtDay: messageTime.createdAtDay,
             createdAtDay: messageTime.createdAtDay,
-             createdAtTime: messageTime.createdAtTime
+            createdAtTime: messageTime.createdAtTime,
+            isToday: true
         });
         });
         // イメージの場合、img tagを追加する
         // イメージの場合、img tagを追加する
         html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
         html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;

public_new/js/chat.js

@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) {
             }
             }
 
 
             socket.emit('createMessage', {
             socket.emit('createMessage', {
-                //text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
-                text: encodedText
+                text: encodedText + messageSeperator + messageType.IMAGE
             }, 1);
             }, 1);
 
 
         } else {    // 動画の処理
         } else {    // 動画の処理
@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) {
             }
             }
 
 
             socket.emit('createMessage', {
             socket.emit('createMessage', {
-                //text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
-                text: encodedText
+                text: encodedText + messageSeperator + messageType.VIDEO
             }, 1);
             }, 1);
         }
         }
 
 
@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
                 });
                 });
 
 
             } else {
             } else {
-                console.log('No error');
                 if (loginParam.roomName != undefined && loginParam.roomName != "null") {
                 if (loginParam.roomName != undefined && loginParam.roomName != "null") {
                     $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
                     $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
                 } else {
                 } else {
@@ -272,21 +269,6 @@ CHAT.leaveRoom = function() {
 }
 }
 
 
 $(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(){
     $('.make_room_btn button').click(function(){
         $('form').submit();
         $('form').submit();
@@ -345,13 +327,21 @@ $(function() {
         $('#chatTitle').text(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(){
     $('#chat .search_form input[type="search"]').keyup(function(){
         $('.overlay_src_msg').empty();
         $('.overlay_src_msg').empty();
         var keyword = $('#chat .search_form input[type="search"]').val();
         var keyword = $('#chat .search_form input[type="search"]').val();
-    if (keyword == '' || keyword.length < 2) {
-        return;
-    }
+        if (keyword == '' || keyword.length < 2) { return; }
         var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
         var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
         let roomListTitle = getLocalizedString("room_search_placeholder");
         let roomListTitle = getLocalizedString("room_search_placeholder");
         $('#chatTitle').text(roomListTitle);
         $('#chatTitle').text(roomListTitle);
@@ -360,6 +350,7 @@ $(function() {
             , function(text) {
             , function(text) {
                 template = text;
                 template = text;
         });
         });
+
         rooms.forEach(function(room) {
         rooms.forEach(function(room) {
             room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
             room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
             if (room.message) {
             if (room.message) {
@@ -391,15 +382,14 @@ $(function() {
                 attendUsers: room.attendUsers
                 attendUsers: room.attendUsers
             });
             });
             // Click event
             // Click event
-      let obj = $(jQuery.parseHTML(html)).on('click', function() {
-      });
-
+            let obj = jQuery.parseHTML(html);
             $('.overlay_src_msg').append(obj);
             $('.overlay_src_msg').append(obj);
         });
         });
         if (CHAT_UI.isLandscapeMode()) {
         if (CHAT_UI.isLandscapeMode()) {
             $(".chat_list").removeClass("col-12").addClass("col-6");
             $(".chat_list").removeClass("col-12").addClass("col-6");
         }
         }
     });
     });
+
     // ルームメンバー検索
     // ルームメンバー検索
     $('#chat_room .search_form input[type="search"]').keyup(function(){
     $('#chat_room .search_form input[type="search"]').keyup(function(){
         $.ajax({
         $.ajax({
@@ -410,27 +400,119 @@ $(function() {
             $('.overlay_src_msg').html(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(){
     $('.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);
+        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_form').click(function(){
     $('.message_input_send').removeClass('none');
     $('.message_input_send').removeClass('none');
     $('.attach_file').addClass('none');
     $('.attach_file').addClass('none');
+    $('.footer_content_b').addClass('none');
   });
   });
 
 
  $('.message_input_form').on('focusout',function(e){
  $('.message_input_form').on('focusout',function(e){
@@ -63,6 +64,7 @@ $(function() {
     }
     }
     $('.message_input_send').addClass('none');
     $('.message_input_send').addClass('none');
     $('.attach_file').removeClass('none');
     $('.attach_file').removeClass('none');
+    $('.footer_content_b').removeClass('none');
   });
   });
 
 
 });
 });

public_new/js/constant.js

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

public_new/js/loading.js

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

public_new/modal_chat_menu.html

@@ -11,6 +11,7 @@
         <ul>
         <ul>
           <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li>
           <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="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>
         </ul>
       </div>
       </div>
     </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="room_right">
   <div class="text">{{text}}</div>
   <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>
   <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 class="read d-flex align-items-end"><span></span></div>
 </div>
 </div>
\ No newline at end of file

public_new/template/template_user_message.html

 <div class="room_left">
 <div class="room_left">
   <figure>
   <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>
   </figure>
   <div class="room_left-text">
   <div class="room_left-text">
     <div class="name">{{from}}</div>
     <div class="name">{{from}}</div>
     <div class="text">{{text}}</div>
     <div class="text">{{text}}</div>
   </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>
   <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 class="read d-flex align-items-end"><span></span></div>
 </div>
 </div>
\ No newline at end of file