WIP: removing chat.js and chat-ui.js

public_new/archive.html

@@ -117,9 +117,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- view -->
   <!-- view -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/archive.js"></script>
+  <script src="./js/views/archive/archive.js"></script>
 
 
   <!-- Template archive -->
   <!-- Template archive -->
   <script id="archive-template" type="text/template">
   <script id="archive-template" type="text/template">
@@ -149,7 +147,6 @@
       return this.split(org).join(dest);
       return this.split(org).join(dest);
     }
     }
 
 
-    $("#chatMenuModal").load("./modal_chat_menu.html");
     $("#loadingArea").load("./loading.html");
     $("#loadingArea").load("./loading.html");
 
 
     NativeBridgeDelegate.getLoginParameter();
     NativeBridgeDelegate.getLoginParameter();

public_new/archive_detail.html

@@ -74,9 +74,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- view -->
   <!-- view -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/archive.js"></script>
+  <script src="./js/views/archive/archive.js"></script>
 
 
   <!-- Template archive-detail -->
   <!-- Template archive-detail -->
   <script id="archive-detail-template" type="text/template">
   <script id="archive-detail-template" type="text/template">
@@ -123,67 +121,6 @@
     </li>
     </li>
   </script>
   </script>
 
 
-  <!-- Template archive-namecard -->
-  <script id="archive-namecard-template" type="text/template">
-    <div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content">
-          <div class="modal-header border-0">
-            <div class="profile_desc d-flex flex-row">
-              <img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
-              <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
-            </div>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            {{#groupPathList}}
-            <li style="display: block;">・{{.}}</li>
-            {{/groupPathList}}
-          </div>
-          <div class="modal-footer border-0 justify-content-center">
-            {{#isFavorite}}
-            <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUser({{shopMemberId}})">
-              <div class="d-flex flex-column">
-                <div class="img_wrap">
-                  <img src="icon/icon_profile_favorite.png" alt="お気に入り">
-                </div>
-                <span>お気に入り解除</span>
-              </div>
-            </button>
-            {{/isFavorite}}
-            {{^isFavorite}}
-            <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUser({{shopMemberId}})">
-              <div class="d-flex flex-column">
-                <div class="img_wrap">
-                  <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
-                </div>
-                <span>お気に入り登録</span>
-              </div>
-            </button>
-            {{/isFavorite}}
-            <button type="button" class="border-0 bg_green" >
-              <div class="d-flex flex-column">
-                <div class="img_wrap">
-                  <img src="icon/icon_profile_phone.png" alt="通話">
-                </div>
-                <span>通話</span>
-              </div>
-            </button>
-            <button type="button" class="border-0 bg_blue">
-              <div class="d-flex flex-column">
-                <div class="img_wrap">
-                  <img src="icon/icon_profile_chat.png" alt="チャット">
-                </div>
-                <span>チャット</span>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </script>
   <script>
   <script>
     var archiveId;
     var archiveId;
 
 

public_new/chat.html

@@ -123,8 +123,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
+  <script src="./js/views/chats/chat-list.js"></script>
 
 
   <script>
   <script>
     String.prototype.replaceAll = function (org, dest) {
     String.prototype.replaceAll = function (org, dest) {
@@ -144,8 +143,8 @@
           alert(getLocalizedString("inform_exit_host_collaboration"));
           alert(getLocalizedString("inform_exit_host_collaboration"));
         }
         }
       }
       }
-      CHAT_UI.refreshRoomList(ChatRoomType.GROUP);
-      CHAT_UI.dismissLoadingIndicator();
+      ChatList.refreshRoomList(ChatRoomType.GROUP);
+      Common.dismissLoadingIndicator();
     };
     };
   </script>
   </script>
 </body>
 </body>

public_new/chat_add_user.html

@@ -151,9 +151,8 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/chat-add-user.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/chats/management/chat-add-user.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>
@@ -168,12 +167,12 @@
       const selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
       const selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
       if (selectedUsers != "") {
       if (selectedUsers != "") {
         selectedUsers.forEach(function (user) {
         selectedUsers.forEach(function (user) {
-          CHAT.globalSelectedUserList.push(user.shopMemberId);
+          ChatManagementCommon.selectedUserList.push(user.shopMemberId);
         })
         })
       };
       };
 
 
-      if (CHAT.globalSelectedUserList.length > 0) {
-        $('.select_member_num').text(CHAT.globalSelectedUserList.length);
+      if (ChatManagementCommon.selectedUserList.length > 0) {
+        $('.select_member_num').text(ChatManagementCommon.selectedUserList.length);
       } else {
       } else {
         $('.select_member_num').text('0');
         $('.select_member_num').text('0');
       }
       }

public_new/chat_add_user_confirm.html

@@ -81,8 +81,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>
@@ -93,7 +92,7 @@
     NativeBridgeDelegate.getGlobalParameter();
     NativeBridgeDelegate.getGlobalParameter();
 
 
     function getGlobalParam() {
     function getGlobalParam() {
-      CHAT_UI.showAddUserConfirmView();
+      ChatManagementCommon.showAddUserConfirmView();
     };
     };
   </script>
   </script>
 </body>
 </body>

public_new/chat_change_room_name.html

@@ -80,9 +80,8 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/chat-room.js"></script>
+  <script src="./js/views/chats/chat-room.js"></script>
+  <script src="./js/views/chats/management/chat-room-change.js"></script>
 
 
   <script>
   <script>
     String.prototype.replaceAll = function (org, dest) {
     String.prototype.replaceAll = function (org, dest) {

public_new/chat_make_room.html

@@ -152,9 +152,8 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/chatMakeRoom.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/chats/management/chat-make-room.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>
@@ -169,12 +168,12 @@
       if (NativeBridgeDataSource.loadSelectedUsers() != "") {
       if (NativeBridgeDataSource.loadSelectedUsers() != "") {
         let selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
         let selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
         selectedUsers.forEach(function (user) {
         selectedUsers.forEach(function (user) {
-          CHAT.globalSelectedUserList.push(user.shopMemberId);
+          ChatManagementCommon.selectedUserList.push(user.shopMemberId);
         })
         })
       };
       };
 
 
-      if (CHAT.globalSelectedUserList.length > 0) {
-        $('.select_member_num').text(CHAT.globalSelectedUserList.length);
+      if (ChatManagementCommon.selectedUserList.length > 0) {
+        $('.select_member_num').text(ChatManagementCommon.selectedUserList.length);
       } else {
       } else {
         $('.select_member_num').text('0');
         $('.select_member_num').text('0');
       }
       }

public_new/chat_make_room_confirm.html

@@ -88,8 +88,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>
@@ -103,7 +102,7 @@
     $("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"));
     $("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"));
 
 
     function getGlobalParam() {
     function getGlobalParam() {
-      CHAT_UI.showMakeRoomConfirmView();
+      ChatManagementCommon.showMakeRoomConfirmView();
     };
     };
   </script>
   </script>
 </body>
 </body>

public_new/chat_room.html

@@ -168,10 +168,8 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
   <script src="./js/utils/chat-media-handler.js"></script>
   <script src="./js/utils/chat-media-handler.js"></script>
-  <script src="./js/chat-room.js"></script>
+  <script src="./js/views/chats/chat-room.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>

public_new/collaboration.html

@@ -156,11 +156,11 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
-  <script src="./js/share.js"></script>
+  <script src="./js/views/collaboration/share.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
   <script>
   <script>
     $("#footer_collabo").load("./footer_collabo.html");
     $("#footer_collabo").load("./footer_collabo.html");
@@ -206,24 +206,16 @@
           alert(getLocalizedString('not_support_version'));
           alert(getLocalizedString('not_support_version'));
           if (typeof android != "undefined") {
           if (typeof android != "undefined") {
             NativeBridgeDelegate.openCommunicationHome();
             NativeBridgeDelegate.openCommunicationHome();
+            NativeBridgeDelegate.openCommunicationHome();
+            NativeBridgeDelegate.openCommunicationHome();
           }
           }
         }
         }
       }
       }
 
 
       initCollaborationUI(joinCollaborationType);
       initCollaborationUI(joinCollaborationType);
       globalUserInfo.coWorkType = CHAT_UTIL.getCoviewTypeFromCollaborationType(joinCollaborationType);
       globalUserInfo.coWorkType = CHAT_UTIL.getCoviewTypeFromCollaborationType(joinCollaborationType);
-      globalUserInfo.coWorkType = CHAT_UTIL.getCoviewTypeFromCollaborationType(joinCollaborationType);
       if (collaborationJoinFlg != '2') {
       if (collaborationJoinFlg != '2') {
-        CHAT_SOCKET.connectSocket();
-        const joinInfo = new JoinInfo(
-          currentUserInfo.sid,
-          currentUserInfo.loginID,
-          currentUserInfo.shopName,
-          roomInfo.roomID,
-          roomInfo.roomName,
-          currentUserInfo.shopMembeID
-        );
-        CHAT_SOCKET.emitJoin(joinInfo, false, false);
+        CHAT_SOCKET.initialJoin();
       }
       }
     };
     };
   </script>
   </script>

public_new/collaboration_documents.html

@@ -98,10 +98,10 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
   <script>
   <script>
     $("#footer_collabo").load("./footer_collabo.html");
     $("#footer_collabo").load("./footer_collabo.html");
@@ -126,16 +126,7 @@
       collaborationJoinFlg = NativeBridgeDataSource.getCollaborationJoinFlg();
       collaborationJoinFlg = NativeBridgeDataSource.getCollaborationJoinFlg();
 
 
       globalUserInfo.coWorkType = CollaborationTypeKey.DOCUMENT;
       globalUserInfo.coWorkType = CollaborationTypeKey.DOCUMENT;
-      CHAT_SOCKET.connectSocket();
-      const joinInfo = new JoinInfo(
-        currentUserInfo.sid,
-        currentUserInfo.loginID,
-        currentUserInfo.shopName,
-        roomInfo.roomID,
-        roomInfo.roomName,
-        currentUserInfo.shopMembeID
-      );
-      CHAT_SOCKET.emitJoin(joinInfo, false, false);
+      CHAT_SOCKET.initialJoin();
     };
     };
   </script>
   </script>
 </body>
 </body>

public_new/collaboration_picture.html

@@ -160,11 +160,11 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
-  <script src="./js/share.js"></script>
+  <script src="./js/views/collaboration/share.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
   <script>
   <script>
     $("#footer_collabo").load("./footer_collabo.html");
     $("#footer_collabo").load("./footer_collabo.html");
@@ -191,17 +191,7 @@
 
 
       globalUserInfo.coWorkType = CollaborationTypeKey.CAMERA;
       globalUserInfo.coWorkType = CollaborationTypeKey.CAMERA;
       if (collaborationJoinFlg != '2') {
       if (collaborationJoinFlg != '2') {
-        CHAT_SOCKET.connectSocket();
-        CHAT_SOCKET.connectSocket();
-        const joinInfo = new JoinInfo(
-          currentUserInfo.sid,
-          currentUserInfo.loginID,
-          currentUserInfo.shopName,
-          roomInfo.roomID,
-          roomInfo.roomName,
-          currentUserInfo.shopMembeID
-        );
-        CHAT_SOCKET.emitJoin(joinInfo, false, false);
+        CHAT_SOCKET.initialJoin();
       }
       }
     };
     };
   </script>
   </script>

public_new/collaboration_video.html

@@ -149,11 +149,11 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
-  <script src="./js/share.js"></script>
+  <script src="./js/views/collaboration/share.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
 </body>
 </body>
 <script>
 <script>
@@ -181,16 +181,7 @@
 
 
     globalUserInfo.coWorkType = CollaborationTypeKey.VIDEO;
     globalUserInfo.coWorkType = CollaborationTypeKey.VIDEO;
     if (collaborationJoinFlg != '2') {
     if (collaborationJoinFlg != '2') {
-      CHAT_SOCKET.connectSocket();
-      const joinInfo = new JoinInfo(
-        currentUserInfo.sid,
-        currentUserInfo.loginID,
-        currentUserInfo.shopName,
-        roomInfo.roomID,
-        roomInfo.roomName,
-        currentUserInfo.shopMembeID
-      );
-      CHAT_SOCKET.emitJoin(joinInfo, false, false);
+      CHAT_SOCKET.initialJoin();
     }
     }
   };
   };
 </script>
 </script>

public_new/collaboration_voice.html

@@ -94,11 +94,11 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
-  <script src="./js/share.js"></script>
+  <script src="./js/views/collaboration/share.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
   <script>
   <script>
     $("#footer_collabo").load("./footer_collabo.html");
     $("#footer_collabo").load("./footer_collabo.html");
@@ -125,16 +125,7 @@
 
 
       globalUserInfo.coWorkType = CollaborationTypeKey.AUDIO;
       globalUserInfo.coWorkType = CollaborationTypeKey.AUDIO;
       if (collaborationJoinFlg != '2') {
       if (collaborationJoinFlg != '2') {
-        CHAT_SOCKET.connectSocket();
-        const joinInfo = new JoinInfo(
-          currentUserInfo.sid,
-          currentUserInfo.loginID,
-          currentUserInfo.shopName,
-          roomInfo.roomID,
-          roomInfo.roomName,
-          currentUserInfo.shopMembeID
-        );
-        CHAT_SOCKET.emitJoin(joinInfo, false, false);
+        CHAT_SOCKET.initialJoin();
       }
       }
     };
     };
   </script>
   </script>

public_new/collaboration_whiteboard.html

@@ -151,11 +151,11 @@
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <script src="./js/sockets/chat-websocket-message.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/collaboration.js"></script>
+  <script src="./js/views/chats/management/chat-management-common.js"></script>
+  <script src="./js/views/collaboration/collaboration.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
   <script src="https://biztaskyell.abookcloud.com/coview_api.js"></script>
-  <script src="./js/share.js"></script>
+  <script src="./js/views/collaboration/share.js"></script>
+  <script src="./js/views/contact/namecard.js"></script>
 
 
   <script>
   <script>
     $("#footer_collabo").load("./footer_collabo.html");
     $("#footer_collabo").load("./footer_collabo.html");
@@ -183,16 +183,7 @@
 
 
       globalUserInfo.coWorkType = CollaborationTypeKey.BOARD;
       globalUserInfo.coWorkType = CollaborationTypeKey.BOARD;
       if (collaborationJoinFlg != '2') {
       if (collaborationJoinFlg != '2') {
-        CHAT_SOCKET.connectSocket();
-        const joinInfo = new JoinInfo(
-          currentUserInfo.sid,
-          currentUserInfo.loginID,
-          currentUserInfo.shopName,
-          roomInfo.roomID,
-          roomInfo.roomName,
-          currentUserInfo.shopMembeID
-        );
-        CHAT_SOCKET.emitJoin(joinInfo, false, false);
+        CHAT_SOCKET.initialJoin();
       }
       }
     };
     };
   </script>
   </script>

public_new/contact.html

@@ -200,9 +200,7 @@
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/serverinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <script src="./js/Models/userinfo.js"></script>
   <!-- View -->
   <!-- View -->
-  <script src="./js/chat.js"></script>
-  <script src="./js/chat-ui.js"></script>
-  <script src="./js/contact.js"></script>
+  <script src="./js/views/contact/contact.js"></script>
   <script src="./js/common/loading.js"></script>
   <script src="./js/common/loading.js"></script>
 
 
   <script>
   <script>

public_new/js/chat-error.js

-jQuery("#homeButton").on("click", function () {
-  NativeBridgeDelegate.goHome();
-});
\ No newline at end of file

public_new/js/chat-room.js

-var lastscrollvalue;
-window.onscroll = function () {
-  if (beforeScroll == window.scrollY) {
-    return;
-  }
-  beforeScroll = window.scrollY;
-  const beforeHeight = $(".room_container").height();
-  messageCount = $(".chat_message").length;
-  if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESSAGE) {
-    if (!$("#chatLoader").is(":visible")) {
-      let loader = $(
-        '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
-      );
-      $("#messages").prepend(loader);
-      const messageId = $($(".chat_message").get(0)).data("messageid");
-      NativeBridgeDelegate.updatePreMessage(messageId);
-      let messages = NativeBridgeDataSource.getMessagesWithMessageId(messageId);
-      CHAT_UI.prependMessage(messages);
-      loader.remove();
-      var afterHeight = $(".room_container").height();
-      window.scroll(0, afterHeight - beforeHeight);
-    }
-  }
-};
-
-$("#roomNameChangeBtn").click(function () {
-  var changeRoomName = $("#roomNameInput").val();
-  var trimmedRoomName = $("#roomNameInput").val().trim();
-  if (trimmedRoomName.length == 0) {
-    alert(getLocalizedString("error_empty_room_name"));
-    return;
-  }
-  NativeBridgeDelegate.changeRoomName(changeRoomName);
-});

public_new/js/chat-ui-clickEvents.js

-//メッセージ送信
-$("#messageInput").on("keypress", function (event) {
-  if (event.which == 13) {
-    // Enterキーの処理
-    $("#messageSend").click();
-  }
-});
-
-$("#tabDM").on("click", function (e) {
-  CHAT_UI.refreshRoomList(ChatRoomType.DM);
-});
-
-$("#tabGroup").on("click", function (e) {
-  CHAT_UI.refreshRoomList(ChatRoomType.GROUP);
-});
-
-$("#tabAllGroup").on("click", function (e) {
-  CHAT_UI.refreshAllGroupSearch("0");
-});
-
-$("#tabMyGroup").on("click", function (e) {
-  $("#contactSearch").attr("placeholder", getLocalizedString("userSearch"));
-  CHAT_UI.refreshContactScreen();
-});
-
-$("#tabMyGroupOnMakeRoom").on("click", function (e) {
-  CHAT_UI.refreshMyGroupForMakeRoom();
-});
-
-$("#tabAllGroupOnMakeRoom").on("click", function (e) {
-  CHAT_UI.refreshAllGroupForMakeRoom("0");
-});
-
-$("#tabMyGroupOnAddUser").on("click", function (e) {
-  CHAT_UI.refreshMyGroupForAddUser();
-});
-
-$("#tabAllGroupOnAddUser").on("click", function (e) {
-  CHAT_UI.refreshAllGroupForAddUser("0");
-});
-
-$("#tabMyGroupOnAddUserInCollaboration").on("click", function (e) {
-  CHAT_UI.refreshMyGroupForAddUserInCollaboration();
-});
-
-$("#tabAllGroupOnAddUserInCollaboration").on("click", function (e) {
-  CHAT_UI.refreshAllGroupForAddUserInCollaboration("0");
-});
-
-$("#makeRoomConfirmBtn").on("click", function (e) {
-  const selectedUserList = CHAT.globalSelectedUserList.join(",");
-  NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
-  $("#makeRoomForm").submit();
-});
-
-$("#addUserConfirmBtn").on("click", function (e) {
-  const selectedUserList = CHAT.globalSelectedUserList.join(",");
-  NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
-  $("#addUserForm").submit();
-});

public_new/js/chat-ui-collaboration.js

-CHAT_UI.startCollaboration = function (collaborationType) {
-  if (deviceInfo.isAndroid()) {
-    if (
-      collaborationType == COLLABORATION_TYPE.DOCUMENT &&
-      androidVersion < ANDROID_SDK_VERSION.O
-    ) {
-      alert(getLocalizedString("not_support_version"));
-      return;
-    }
-  }
-
-  if ($(".collabo_area.start").length != 0) {
-    if (!confirm(getLocalizedString("already_exist_collaboration"))) {
-      CHAT_UI.dismissLoadingIndicator();
-      return;
-    }
-    const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL;
-    CHAT_SOCKET.emitCreateMessage(sendData, 0);
-    NativeBridgeDelegate.finishAllCollaboration();
-  }
-  NativeBridgeDelegate.startCollaboration(collaborationType);
-};
-
-CHAT_UI.refreshJoinedCollaboration = function (loginIdList) {
-  for (var count = 0; count < loginIdList.length; count++) {
-    loginIdList[count] = loginIdList[count].replaceAll(
-      globalUserInfo.shopName + "_",
-      ""
-    );
-  }
-
-  CHAT_UI.showLoadingIndicator();
-  $("#collaboration_overlay_user_list").html("");
-
-  var joinedUserListTemplate;
-  $.get(
-    { url: "./collaboration_overlay_user_list.html", async: false },
-    function (text) {
-      joinedUserListTemplate = text;
-    }
-  );
-
-  var joinedUserList = NativeBridgeDataSource.getUserListByLoginId(loginIdList);
-  var sortedUserList = new Array();
-
-  loginIdList.forEach(function (userId) {
-    joinedUserList.forEach(function (user) {
-      if (userId == user.loginId) {
-        sortedUserList.push(user);
-      }
-    });
-  });
-
-  sortedUserList.forEach(function (user) {
-    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
-  });
-
-  let html = Mustache.render(joinedUserListTemplate, {
-    joinedUserList: sortedUserList,
-  });
-
-  let obj = jQuery.parseHTML(html);
-  $("#collaboration_overlay_user_list").append(obj);
-
-  CHAT_UI.dismissLoadingIndicator();
-};
-
-CHAT_UI.refreshMyGroupForAddUserInCollaboration = function () {
-  if (CHAT.globalSelectedUserList.length > 0) {
-    $(".select_member_num").text(CHAT.globalSelectedUserList.length);
-  } else {
-    $(".select_member_num").text("0");
-  }
-  $("#favoriteListForAddUserInCollaboration").html("");
-  $("#myGroupListForAddUserInCollaboration").html("");
-
-  $("#tabMyGroupOnAddUserInCollaboration").prop("checked", true);
-
-  // グループの様式を読み込む
-  var groupTemplate = getTemplate(
-    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
-  );
-
-  // ユーザの様式を読み込む
-  var userTemplate = getTemplate(
-    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
-  );
-
-  var groupUserTemplate = getTemplate(
-    TemplateURL.ADD_USER_GROUP_USER_LIST_IN_COLLABORATION
-  );
-
-  NativeBridgeDelegate.updateContactInfo();
-
-  //お気に入りグループ取得。
-  var favoriteGroupList = NativeBridgeDataSource.getFavoriteGroups();
-  favoriteGroupList.forEach(function (favoriteGroup) {
-    let html = Mustache.render(groupTemplate, {
-      name: favoriteGroup.groupName,
-      id: favoriteGroup.groupId,
-    });
-
-    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
-    $("#favoriteListForAddUserInCollaboration").append(obj);
-  });
-  //お気に入りユーザ取得。
-  var favoriteUserList = NativeBridgeDataSource.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);
-  $("#favoriteListForAddUserInCollaboration").append(obj);
-
-  var myGroupList = NativeBridgeDataSource.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 () {});
-
-    $("#myGroupListForAddUserInCollaboration").append(obj);
-  });
-  $("#addUserInCollaboration").modal("show");
-  CHAT_UI.dismissLoadingIndicator();
-};
-
-CHAT_UI.refreshAllGroupForAddUserInCollaboration = function (paramGroupId) {
-  var groupId = paramGroupId;
-  $(".content").removeClass("none");
-
-  $("#tabAllGroupOnAddUserInCollaboration").prop("checked", true);
-
-  NativeBridgeDelegate.updateGroupInfo(groupId);
-
-  //画面エリアを初期化。
-  $("#parentGroupBtnForAddUserInCollaboration").off();
-  $("#rootGroupBtnForAddUserInCollaboration").off();
-  $("#childGroupListAreaForAddUserInCollaboration").html("");
-  $("#userInGroupListForAddUserInCollaboration").html("");
-  $("#groupPathAreaForAddUserInCollaboration").html("");
-
-  //DBからグループ情報を取得。
-  var result = NativeBridgeDataSource.getGroupInfoForAddUser(groupId);
-  //上位グループ、トップグループ遷移ボタンのイベント追加。
-  if (typeof result.parentGroupId !== "undefined") {
-    $("#parentGroupBtnForAddUserInCollaboration").on("click", function () {
-      CHAT_UI.refreshAllGroupForAddUserInCollaboration(result.parentGroupId);
-    });
-  }
-  if (typeof result.rootGroupId !== "undefined") {
-    if (paramGroupId == 0) {
-      groupId = result.rootGroupId;
-    }
-    $("#rootGroupBtnForAddUserInCollaboration").on("click", function () {
-      CHAT_UI.refreshAllGroupForAddUserInCollaboration(result.rootGroupId);
-    });
-  }
-  if (groupId == result.rootGroupId || paramGroupId == "0") {
-    $("#rootGroupAreaInCollaboration").addClass("none");
-    $("#parentGroupAreaInCollaboration").addClass("none");
-  } else {
-    $("#rootGroupAreaInCollaboration").removeClass("none");
-    $("#parentGroupAreaInCollaboration").removeClass("none");
-  }
-  //該当グループのパースを表示。
-  var groupPathTemplate = getTemplate(
-    TemplateURL.ADD_USER_GROUP_PATH_IN_COLLABORATION
-  );
-
-  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);
-      $("#groupPathAreaForAddUserInCollaboration").append(obj);
-    }
-    groupPathCount++;
-  });
-
-  //該当グループの下位グループ表示。
-  var groupTemplate = getTemplate(
-    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
-  );
-
-  result.childGroupList.forEach(function (childGroup) {
-    let html = Mustache.render(groupTemplate, {
-      name: childGroup.groupName,
-      id: childGroup.groupId,
-    });
-
-    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
-    $("#childGroupListAreaForAddUserInCollaboration").append(obj);
-  });
-
-  //該当グループの所属ユーザを表示。
-  var userTemplate = getTemplate(
-    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
-  );
-
-  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);
-  $("#userInGroupListForAddUserInCollaboration").append(obj);
-};
-
-CHAT_UI.makeNameCardInCollaboration = function (shopMemberId) {
-  if (currentUserInfo.shopMemberId == shopMemberId) {
-    return;
-  }
-  var nameCardInfo = NativeBridgeDataSource.getNameCardData(shopMemberId);
-  var namecardTemplate;
-  var changeHostTemplate;
-
-  $.get({ url: "./modal_collabo_profile.html", async: false }, function (text) {
-    namecardTemplate = text;
-  });
-
-  let isCollaborationHost = coview_api.getRoomUsers();
-  nameCardInfo.profileUrl = CHAT.getProfileImgUrl(nameCardInfo.profileUrl);
-  let whosHost = $("#collaboration_user_" + nameCardInfo.loginId).hasClass(
-    "host"
-  );
-  let namecardHtml = Mustache.render(namecardTemplate, {
-    shopMemberId: nameCardInfo.shopMemberId,
-    profileUrl: nameCardInfo.profileUrl,
-    loginId: nameCardInfo.loginId,
-    name: nameCardInfo.shopMemberName,
-    groupPathList: nameCardInfo.groupPathList,
-    isFavorite: nameCardInfo.isFavorite,
-    isHost: isCollaborationHost,
-    whosHost: whosHost,
-  });
-
-  let namecardObj = $(jQuery.parseHTML(namecardHtml)).on(
-    "click",
-    function () {}
-  );
-
-  $("#userProfileModalInCollaboration").html(namecardObj);
-  $("#userNameCardInCollaboration").modal("show");
-};
-
-CHAT_UI.removeFavoriteUserInCollaboration = function (shopMemberId) {
-  CHAT_UI.showLoadingIndicator();
-  $("#userNameCardInCollaboration").modal("hide");
-  NativeBridgeDataSource.removeFavoriteUser(shopMemberId);
-  CHAT_UI.dismissLoadingIndicator();
-};
-
-CHAT_UI.insertFavoriteUserInCollaboration = function (shopMemberId) {
-  $("#userNameCardInCollaboration").modal("hide");
-  NativeBridgeDataSource.addFavoriteUser(shopMemberId);
-  CHAT_UI.dismissLoadingIndicator();
-};

public_new/js/collaboration.js

-document.addEventListener("DOMContentLoaded", function () {
-  no_scroll();
-
-  // メニューオーバーレイ表示
-  $(".menu_btn").click(function () {
-    var w = $(this).width();
-
-    $(this).toggleClass("hide");
-    $("#overlay_menu .item").toggleClass("hide");
-  });
-
-  // ユーザーリストオーバーレイ表示
-  $(".user_btn").click(function () {
-    var w = $(this).width();
-
-    $(this).toggleClass("hide");
-    $("#overlay_user_list.overlay")
-      .toggleClass("slidein")
-      .css({ transform: "translateX(" & -w & ")" });
-
-    if ($(this).hasClass("hide")) {
-      return_scroll();
-    } else {
-      scrollTo(0, 0);
-      no_scroll();
-    }
-  });
-
-  // モーダルonモーダル（前のモーダルを非表示に）
-  // ホスト変更ボタン押下イベント
-  $(".ch_host_btn").click(function () {
-    var target = $(this).val();
-    changeModal(target, "changeHostModal");
-  });
-
-  /* モーダルの切り替え */
-  function changeModal(beforeModal, afterModal) {
-    $(beforeModal).modal("hide");
-    $(afterModal).modal("show");
-  }
-
-  // 閉じるイベント
-  $(".close_btn").click(function () {
-    $("#overlay_add_user_list").addClass("none");
-    no_scroll();
-  });
-
-  // ユーザー追加イベント
-  $(".inv_btn").click(function () {
-    $("#overlay_add_user_list").addClass("none");
-  });
-
-  // ユーザー招待メンバー検索
-  $(".add_user_btn").click(function () {
-    return_scroll();
-    CHAT_UI.showLoadingIndicator();
-    CHAT.globalSelectedUserList = [];
-    CHAT_UI.refreshMyGroupForAddUserInCollaboration();
-    $("#addUserConfirmBtnInCollaboration")
-      .off()
-      .on("click", function () {
-        $("#addUserInCollaboration").modal("hide");
-        const selectedUserList = CHAT.globalSelectedUserList.join(",");
-        NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
-        CHAT_UI.confirmInviteUserListInCollaboration();
-      });
-  });
-});
-
-function penOff() {
-  if (!$("#penBtn .pen").hasClass("disable")) {
-    $("#coviewPenCtrBtn").click();
-    $("#penBtn .pen").addClass("disable");
-  }
-}
-
-function no_scroll() {
-  document.addEventListener("mousewheel", scroll_control, { passive: false });
-  document.addEventListener("touchmove", scroll_control, { passive: false });
-}
-// スクロール禁止解除
-function return_scroll() {
-  document.removeEventListener("mousewheel", scroll_control, {
-    passive: false,
-  });
-  document.removeEventListener("touchmove", scroll_control, { passive: false });
-}
-function scroll_control(event) {
-  if (event.cancelable) {
-    event.preventDefault();
-  }
-}
-
-CHAT_UI.confirmInviteUserListInCollaboration = function () {
-  var selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
-  if (selectedUsers != "") {
-    $("#selectedUserListinCollaboration").html("");
-
-    var selectedUserList = NativeBridgeDataSource.loadSelectedUsers();
-    selectedUserList.forEach(function (user) {
-      user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
-    });
-
-    var modalTemplate;
-    $.get(
-      { url: "./modal_add_user_confirm.html", async: false },
-      function (text) {
-        modalTemplate = text;
-      }
-    );
-    let html = Mustache.render(modalTemplate, {
-      userList: selectedUserList,
-    });
-    let obj = jQuery.parseHTML(html);
-    $("#modal_add_user_confirm").html(obj);
-    $("#modalAddUserConfirm").modal("show");
-  } else {
-  }
-  $("#cancelAddUserBtn")
-    .off()
-    .on("click", function () {
-      console.log("cancelClick");
-      $("#modalAddUserConfirm").modal("hide");
-      $("#addUserInCollaboration").modal("show");
-    });
-
-  $("#addUserBtn")
-    .off()
-    .on("click", function () {
-      CHAT_UI.showLoadingIndicator();
-      let userIdList = new Array();
-      selectedUserList.forEach(function (user) {
-        userIdList.push(user.shopMemberId);
-      });
-      const commaJoinedUserIDList = userIdList.join(",");
-      const collaborationType = CHAT_UTIL.getCollaborationType(
-        globalUserInfo.coWorkType
-      );
-
-      NativeBridgeDelegate.inviteCollaboration(
-        commaJoinedUserIDList,
-        collaborationType
-      );
-
-      CHAT_UI.dismissLoadingIndicator();
-      $("#modalAddUserConfirm").modal("hide");
-    });
-};

public_new/js/common/common.js

@@ -68,24 +68,50 @@ document.addEventListener("DOMContentLoaded", function () {
     $(".overlay_src_msg").empty();
     $(".overlay_src_msg").empty();
     $(".craeteRoomButton").removeClass("none");
     $(".craeteRoomButton").removeClass("none");
   });
   });
+});
 
 
-  $(".message_input_form").on("focus", function (e) {
-    setTimeout(function () {
-      $(".message_input_send").removeClass("none");
-      $(".attach_file").addClass("none");
-      $(".footer_content_b").addClass("none");
-    }, 10);
-  });
+var Common = {};
 
 
-  $(".message_input_form").on("focusout", function (e) {
-    setTimeout(function () {
-      if ($(e.relatedTarget).hasClass("message_input_send")) {
-        CHAT_UI.sendMessage();
+//loadingIndicatorを表示
+Common.showLoadingIndicator = function () {
+  var h = $(window).height();
+  $("#loader-bg ,#loader").height(h).css("display", "block");
+};
+
+//loadingIndicatorを表示しない
+Common.dismissLoadingIndicator = function () {
+  var h = $(window).height();
+  $("#loader-bg ,#loader").height(h).css("display", "none");
+};
+
+Common.refreshForOnline = function () {
+  $(".footer_item a").removeClass("ui-state-disabled");
+};
+
+Common.refreshForOffline = function () {
+  $(".footer_item a").addClass("ui-state-disabled"); 
+};
+
+// #36170 画像パスが存在しない場合はデフォルトの画像を返す
+// 存在する場合はプロフィール画像取得用APIのURLを生成して返す
+Common.getProfileImgUrl = function (path) {
+  if (path == undefined || path == "") {
+    return "./img/noImage.png";
+  } else {
+    if (path.includes("/mnt")) {
+      var userInfo = path.split("/").reverse();
+      return (
+        serverInfo.cmsURL +
+        "/chatapi/user?profileFileName=" +
+        userInfo[0] +
+        "&profileGetLoginId=" +
+        userInfo[1] +
+        "&sid=" +
+        currentUserInfo.sid +
+        "&cmd=12"
+      );
     } else {
     } else {
-        $(".message_input_send").addClass("none");
-        $(".attach_file").removeClass("none");
-        $(".footer_content_b").removeClass("none");
+      return path;
     }
     }
-    }, 10);
-  });
-});
+  }
+};
\ No newline at end of file

public_new/js/common/native-bridge-delegate.js

@@ -368,3 +368,25 @@ NativeBridgeDelegate.changeCollaboration = function (type, meetingID) {
     android.changeCollaboration(type, meetingID);
     android.changeCollaboration(type, meetingID);
   }
   }
 };
 };
+
+
+var ReverseDelegate = {};
+/* reverse delegates  */
+// for android native call
+ReverseDelegate.leaveRoom = function () {
+  CHAT_SOCKET.emitLeaveRoom();
+};
+
+// 該当チャットルームに参加するためログイン情報をサーバに渡す
+getLoginParameter = function () {
+  Common.dismissLoadingIndicator();
+};
+
+
+// for android call
+CHAT_UI.displayExistRoom = function (roomId) {
+  if (confirm("error_already_exist_same_user")) {
+    NativeBridgeDelegate.joinRoom(roomId);
+  }
+  return;
+};

public_new/js/sockets/chat-websocket-message.js

@@ -64,7 +64,7 @@ var addCollaborationMessage = function (
   );
   );
 
 
   userInCollaboration.forEach(function (user) {
   userInCollaboration.forEach(function (user) {
-    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
   });
   });
 
 
   const openCollaborationMessageTemplate = getTemplate(
   const openCollaborationMessageTemplate = getTemplate(
@@ -127,7 +127,7 @@ var addTextMessage = function (messageText, message, socketID) {
   );
   );
   const shopMemberName = messageSender[0].shopMemberName;
   const shopMemberName = messageSender[0].shopMemberName;
   const textMessageTemplate = getTextMessageTemplate(message.id === socketID);
   const textMessageTemplate = getTextMessageTemplate(message.id === socketID);
-  const profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath);
+  const profileImagePath = Common.getProfileImgUrl(message.profileImagePath);
   const html = renderTextMessage(
   const html = renderTextMessage(
     textMessageTemplate,
     textMessageTemplate,
     messageTextWithSID,
     messageTextWithSID,

public_new/js/sockets/chat-websocket.js

@@ -50,9 +50,9 @@ var bindOnConnect = function () {
     // socketが接続されたらチャット画面で画面を更新する
     // socketが接続されたらチャット画面で画面を更新する
     $(".overlay").removeClass("active undismissable");
     $(".overlay").removeClass("active undismissable");
     // loadingIndicatorを表示
     // loadingIndicatorを表示
-    CHAT_UI.showLoadingIndicator();
+    Common.showLoadingIndicator();
     NativeBridgeDelegate.getLoginParameter();
     NativeBridgeDelegate.getLoginParameter();
-    CHAT_UI.dismissLoadingIndicator();
+    Common.dismissLoadingIndicator();
   });
   });
 };
 };
 
 
@@ -60,13 +60,13 @@ var bindOnDisconnect = function () {
   socket.on(SOCKET_KEY.DISCONNECT, function () {
   socket.on(SOCKET_KEY.DISCONNECT, function () {
     //socketが切断されたら黒画面で画面を更新する
     //socketが切断されたら黒画面で画面を更新する
     $(".overlay").addClass("active undismissable");
     $(".overlay").addClass("active undismissable");
-    CHAT_UI.dismissLoadingIndicator();
+    Common.dismissLoadingIndicator();
   });
   });
 };
 };
 
 
 var bindOnConnectError = function () {
 var bindOnConnectError = function () {
   socket.on(SOCKET_KEY.CONNECT_ERROR, function () {
   socket.on(SOCKET_KEY.CONNECT_ERROR, function () {
-    CHAT_UI.dismissLoadingIndicator();
+    Common.dismissLoadingIndicator();
   });
   });
 };
 };
 
 
@@ -125,10 +125,10 @@ var bindOnShowServerError = function () {
         keyboard: false,
         keyboard: false,
       })
       })
       .on("click", "#customAlertOk", function (e) {});
       .on("click", "#customAlertOk", function (e) {});
-    CHAT_UI.dismissLoadingIndicator();
+    Common.dismissLoadingIndicator();
 
 
     if (message == "Room not found") {
     if (message == "Room not found") {
-      CHAT.saveRoomInfo();
+      CHAT_SOCKET.saveRoomInfo();
     }
     }
   });
   });
 };
 };
@@ -156,14 +156,14 @@ CHAT_SOCKET.emitJoin = function (
         errorHandlingForEmitJoin();
         errorHandlingForEmitJoin();
       }
       }
       if (needsDismissLoadingIndicator) {
       if (needsDismissLoadingIndicator) {
-        CHAT_UI.dismissLoadingIndicator();
+        Common.dismissLoadingIndicator();
       }
       }
       return;
       return;
     }
     }
 
 
     if (needsDismissLoadingIndicator) {
     if (needsDismissLoadingIndicator) {
       // loadingIndicatorを表示しない
       // loadingIndicatorを表示しない
-      CHAT_UI.dismissLoadingIndicator();
+      Common.dismissLoadingIndicator();
     }
     }
   });
   });
 };
 };
@@ -208,3 +208,22 @@ CHAT_SOCKET.emitGetGroupList = function (isInvite) {
 CHAT_SOCKET.emitLeaveRoom = function () {
 CHAT_SOCKET.emitLeaveRoom = function () {
   socket.emit(SOCKET_KEY.LEAVE_ROOM, function () {});
   socket.emit(SOCKET_KEY.LEAVE_ROOM, function () {});
 };
 };
+
+CHAT_SOCKET.saveRoomInfo = function (roomID, roomName) {
+  roomInfo.roomID = roomID;
+  roomInfo.roomName = roomName;
+  NativeBridgeDelegate.saveVisitRoomInfo(roomID, roomName);
+};
+
+CHAT_SOCKET.initialJoin = function() {
+  CHAT_SOCKET.connectSocket();
+  const joinInfo = new JoinInfo(
+    currentUserInfo.sid,
+    currentUserInfo.loginID,
+    currentUserInfo.shopName,
+    roomInfo.roomID,
+    roomInfo.roomName,
+    currentUserInfo.shopMembeID
+  );
+  CHAT_SOCKET.emitJoin(joinInfo, false, false);
+}

public_new/js/utils/chat-media-handler.js

@@ -21,7 +21,7 @@ $("#image-form").on("submit", function (e) {
   if (file) {
   if (file) {
     $(".overlay").addClass("active undismissable");
     $(".overlay").addClass("active undismissable");
     $(".loader").addClass("active");
     $(".loader").addClass("active");
-    CHAT_UI.showLoadingIndicator();
+    Common.showLoadingIndicator();
     var fd = new FormData($(this)[0]);
     var fd = new FormData($(this)[0]);
     console.log($(this)[0]);
     console.log($(this)[0]);
     //画像の大きさが500pixelより大きかったら、thumbnailを生成
     //画像の大きさが500pixelより大きかったら、thumbnailを生成
@@ -61,7 +61,7 @@ $("#video-form").on("submit", function (e) {
   if (file) {
   if (file) {
     $(".overlay").addClass("active undismissable");
     $(".overlay").addClass("active undismissable");
     $(".loader").addClass("active");
     $(".loader").addClass("active");
-    CHAT_UI.showLoadingIndicator();
+    Common.showLoadingIndicator();
     var fd = new FormData($(this)[0]);
     var fd = new FormData($(this)[0]);
 
 
     if (!file.type.includes("image")) {
     if (!file.type.includes("image")) {
@@ -82,7 +82,7 @@ $("#video-form").on("submit", function (e) {
 // this method call from android only for now
 // this method call from android only for now
 CHAT_UI.videoEncodeFail = function () {
 CHAT_UI.videoEncodeFail = function () {
   alert(getLocalizedString("error_send_video"));
   alert(getLocalizedString("error_send_video"));
-  CHAT_UI.dismissLoadingIndicator();
+  Common.dismissLoadingIndicator();
 };
 };
 
 
 // this method call from android only for now
 // this method call from android only for now
@@ -107,7 +107,7 @@ CHAT_UI.videoEncodeEnd = function (encodedUri) {
         processData: false,
         processData: false,
         error: function () {
         error: function () {
           alert(getLocalizedString("error_send_video"));
           alert(getLocalizedString("error_send_video"));
-          CHAT_UI.dismissLoadingIndicator();
+          Common.dismissLoadingIndicator();
         },
         },
       })
       })
       .done(function (res) {
       .done(function (res) {
@@ -174,8 +174,271 @@ CHAT_UI.videoEncodeEnd = function (encodedUri) {
 
 
         $(".overlay").removeClass("active undismissable");
         $(".overlay").removeClass("active undismissable");
         $(".loader").removeClass("active");
         $(".loader").removeClass("active");
-        CHAT_UI.dismissLoadingIndicator();
+        Common.dismissLoadingIndicator();
       });
       });
   });
   });
   xhr.send();
   xhr.send();
 };
 };
+
+
+// Video のサムネイルファイル生成する
+CHAT.createVideoThumbnailAndUpload = function (sourceImage, callback) {
+  var fileReader = new FileReader();
+
+  fileReader.onload = function () {
+    var blob = new Blob([fileReader.result], { type: sourceImage.type });
+    var url = URL.createObjectURL(blob);
+    var video = document.createElement("video");
+    var timeupdate = function () {
+      if (snapImage()) {
+        video.removeEventListener("timeupdate", timeupdate);
+        video.pause();
+      }
+    };
+    video.addEventListener("loadeddata", function () {
+      if (snapImage()) {
+        video.removeEventListener("timeupdate", timeupdate);
+      }
+    });
+    var snapImage = function () {
+      var canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas
+        .getContext("2d")
+        .drawImage(video, 0, 0, canvas.width, canvas.height);
+
+      fetch(canvas.toDataURL("image/jpeg"))
+        .then(function (res) {
+          return res.arrayBuffer();
+        })
+        .then(function (buf) {
+          // 回転された画像をFormDataに保存
+          const newFile = new File([buf], sourceImage.name, {
+            type: "image/jpeg",
+          });
+          callback(newFile, true);
+          // ajax End
+        })
+        .catch((error) => {
+          // fetch Error catch Block
+          if (error) {
+            console.log(error);
+          }
+        });
+      return true;
+    };
+    video.addEventListener("timeupdate", timeupdate);
+    video.preload = "metadata";
+    video.src = url;
+    // Load video in Safari / IE11
+    video.muted = true;
+    video.playsInline = true;
+    video.pause();
+  };
+  fileReader.readAsArrayBuffer(sourceImage);
+};
+
+
+// Ajaxでイメージをアップロードする
+CHAT.uploadImage = function (formData) {
+  formData.append("roomId", roomInfo.roomID);
+  formData.append("sid", currentUserInfo.sid);
+  jQuery
+    .ajax({
+      async: true,
+      url: serverInfo.cmsURL + "/chatapi/file/upload",
+      type: "post",
+      data: formData,
+      contentType: false,
+      processData: false,
+      error: function () {
+        alert("読み込み失敗");
+        Common.dismissLoadingIndicator();
+      },
+    })
+    .done(function (res) {
+      var imgPath =
+        serverInfo.cmsURL +
+        "/chatapi/file/getImage?fileName=" +
+        res.fileName +
+        "&roomId=" +
+        roomInfo.roomID;
+      var imageName = res.fileName;
+
+      // uploadFileの判断
+      var extension = imageName
+        .substr(imageName.lastIndexOf(".") + 1)
+        .toLowerCase();
+
+      // 画像の処理
+      if (
+        res.fileType == "jpeg" ||
+        res.fileType == "jpg" ||
+        res.fileType == "png"
+      ) {
+        if (res.thumbnailPath && res.thumbnailPath.length > 0) {
+          imgPath =
+            serverInfo.cmsURL +
+            "/chatapi/file/getImage?fileName=" +
+            res.thumbImageFileName +
+            "&roomId=" +
+            roomInfo.roomID;
+          imageName = res.thumbImageFileName;
+        }
+        let downloadPath =
+          serverInfo.cmsURL +
+          "/chatapi/file/download?fileName=" +
+          imageName +
+          "&roomId=" +
+          roomInfo.roomID;
+        // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
+        const lightbox = $("<a/>", {
+          "data-lightbox": "attachedImages",
+          "data-title": imageName,
+        });
+        const image = $("<img/>", {
+          src: imgPath,
+          width: "auto",
+          style: "max-width:100%",
+          "data-toggle": "modal",
+          onclick: "imageModal(this);",
+        });
+        const downloadIcon = $("<a/>", {
+          href: downloadPath,
+          class: "fa fa-download",
+          download: res.fileName,
+        });
+
+        lightbox.append(image);
+        lightbox.append(downloadIcon);
+        let text = lightbox.prop("outerHTML");
+        let encodedText;
+        try {
+          encodedText = encodeURIComponent(text);
+        } catch (e) {
+          encodedText = text;
+        }
+        const sendData = encodedText + messageSeperator + MessageType.IMAGE;
+        CHAT_SOCKET.emitCreateMessage(sendData, 1);
+      } else {
+        // 動画の処理
+        if (res.thumbnailPath && res.thumbnailPath.length > 0) {
+          imgPath =
+            serverInfo.cmsURL +
+            "/chatapi/file/getImage?fileName=" +
+            res.thumbImageFileName +
+            "&roomId=" +
+            roomInfo.roomID;
+        }
+
+        let downloadPath =
+          serverInfo.cmsURL +
+          "/chatapi/file/download?fileName=" +
+          imageName +
+          "&roomId=" +
+          roomInfo.roomID;
+
+        var videoSrc =
+          serverInfo.cmsURL +
+          "/chatapi/file/getImage?fileName=" +
+          res.fileName +
+          "&roomId=" +
+          roomInfo.roomID;
+        const totalDiv = $("<div/>", { id: "attachedImages" });
+        const videoTag = $("<video/>", {
+          controls: "true",
+          width: "auto",
+          style: "max-width:100%",
+        });
+        const source = $("<source/>", { src: videoSrc });
+        const downloadIcon = $("<a/>", {
+          href: downloadPath,
+          class: "fa fa-download",
+          download: res.fileName,
+        });
+
+        videoTag.append(source);
+        totalDiv.append(videoTag);
+        totalDiv.append(downloadIcon);
+
+        let text = totalDiv.prop("outerHTML");
+        let encodedText;
+        try {
+          encodedText = encodeURIComponent(text);
+        } catch (e) {
+          encodedText = text;
+        }
+        const sendData = encodedText + messageSeperator + MessageType.VIDEO;
+        CHAT_SOCKET.emitCreateMessage(sendData, 1);
+      }
+
+      $(".overlay").removeClass("active undismissable");
+      $(".loader").removeClass("active");
+      Common.dismissLoadingIndicator();
+    });
+};
+
+
+// Thumbnailのファイルを生成する。
+CHAT.createThumbnailAndUpload = function (sourceImage, callback) {
+  const fileReader = new FileReader();
+  const img = new Image();
+  fileReader.onloadend = function () {
+    img.src = fileReader.result;
+  };
+
+  img.onload = function () {
+    const elem = document.createElement("canvas");
+    var rate;
+    var width = img.width;
+    var height = img.height;
+    if (img.width <= 500 && img.height <= 500) {
+      callback(undefined, false);
+      return;
+    }
+
+    if (img.width > img.height) {
+      rate = 500 / img.width;
+    } else {
+      rate = 500 / img.height;
+    }
+    elem.width = width * rate;
+    elem.height = height * rate;
+
+    const ctx = elem.getContext("2d");
+
+    ctx.drawImage(
+      img,
+      0,
+      0,
+      img.width,
+      img.height,
+      0,
+      0,
+      elem.width,
+      elem.height
+    );
+    // ctx.drawImage(img, 0, 0, width, height);
+
+    fetch(elem.toDataURL("image/jpeg"))
+      .then(function (res) {
+        return res.arrayBuffer();
+      })
+      .then(function (buf) {
+        const newFile = new File([buf], sourceImage.name, {
+          type: "image/jpeg",
+        });
+
+        callback(newFile, true);
+      })
+      .catch((error) => {
+        // fetch Error catch Block
+        if (error) {
+          console.log(error);
+        }
+      });
+  };
+
+  fileReader.readAsDataURL(sourceImage);
+};
\ No newline at end of file

public_new/js/archive.js → public_new/js/views/archive/archive.js

@@ -112,3 +112,213 @@ var renderArchiveTemplate = function (
     typeImage: typeImageURL,
     typeImage: typeImageURL,
   });
   });
 };
 };
+
+// アーカイブ詳細
+CHAT_UI.refreshArchiveDetailScreen = function (archiveId) {
+  // loadingIndicatorを表示
+  Common.showLoadingIndicator();
+
+  // 初期化
+  $("#archiveDetail").html("");
+
+  // アーカイブ詳細の様式を読み込む
+  const archiveDetailTemplate = $("#archive-detail-template").html();
+  if (serverInfo.isOnline == "true") {
+    NativeBridgeDelegate.updateArchiveDetail(archiveId);
+  }
+  // アーカイブ詳細取得
+  const archive = NativeBridgeDataSource.getArchiveDetail(archiveId);
+
+  // 保存ユーザ情報を取得
+  const userInfo = NativeBridgeDataSource.getUserInfo(archive.saveUserId);
+  userInfo.profileUrl = Common.getProfileImgUrl(userInfo.profileUrl);
+
+  // アーカイブ情報を表示
+  const html = Mustache.render(archiveDetailTemplate, {
+    fileName: archive.archiveName,
+    insertDate: archive.archiveDate,
+    chatRoomName: archive.roomName,
+    chatRoomId: archive.roomId,
+    profileImage: userInfo.profileUrl,
+    userName: userInfo.shopMemberName,
+    userId: userInfo.shopMemberId,
+  });
+
+  var obj = $(jQuery.parseHTML(html)).on("click", function () {});
+  $("#archiveDetail").append(obj);
+
+  // プレイヤーの切り替え
+  const archiveFilePath = CHAT.createGetDataUrl(
+    archive.filePath,
+    archive.roomId
+  );
+
+  switch (archive.archiveType) {
+    case "0": // 画像
+    case 0:
+      $("#archive_player").prepend(
+        '<img class="archive_player" src="' + archiveFilePath + '" />'
+      );
+      break;
+    case "1": // 動画
+    case 1:
+      if (deviceInfo.isiOS()) {
+        $("#archive_player").prepend(
+          '<video class="archive_player" controls autoplay muted playsinline controlsList="nodownload"><source src="' +
+            archiveFilePath +
+            '" type="video/mp4"><source src="' +
+            archiveFilePath +
+            '" type="video/ogv"><source src="' +
+            archiveFilePath +
+            '" type="video/webm"></video>'
+        );
+      } else {
+        $("#archive_player").prepend(
+          '<video class="archive_player" src=' +
+            archiveFilePath +
+            ' controls autoplay muted playsinline controlsList="nodownload"></video>'
+        );
+      }
+      break;
+    case "2": // 音声
+    case 2:
+      if (deviceInfo.isiOS()) {
+        $("#archive_player").prepend(
+          '<audio class="archive_audio_player" controls controlsList="nodownload"><source src="' +
+            archiveFilePath +
+            '" type="audio/wav"><source src="' +
+            archiveFilePath +
+            '" type="audio/ogg"></audio>'
+        );
+      } else {
+        $("#archive_player").prepend(
+          '<audio class="archive_audio_player" src=' +
+            archiveFilePath +
+            ' controls controlsList="nodownload"></audio>'
+        );
+      }
+      $("#archive_player").prepend(
+        '<img class="archive_player" src=' + "./img/capture.png" + " />"
+      );
+      break;
+    case "3": // 文書
+    case 3:
+      // リリースに文書とその他は含めないため今回は非表示
+      break;
+    default:
+    // リリースに文書とその他は含めないため今回は非表示
+  }
+
+  // ユーザの様式を読み込む
+  const archiveUserTemplate = $("#archive-user-template").html();
+
+  // 参加ユーザ情報を表示
+  let attendUserList = archive.attendUserIds;
+  if (typeof android != "undefined") {
+    // ios実装不要
+    attendUserList = JSON.parse(archive.attendUserIds);
+  }
+
+  attendUserList.forEach(function (user) {
+    if (user == "") {
+      return;
+    }
+    var userInfo = NativeBridgeDataSource.getUserInfo(user);
+    userInfo.profileUrl = Common.getProfileImgUrl(userInfo.profileUrl);
+    const html = Mustache.render(archiveUserTemplate, {
+      profileImage: userInfo.profileUrl,
+      userName: userInfo.shopMemberName,
+    });
+
+    const obj = $(jQuery.parseHTML(html)).on("click", function () {
+      // ネームカード表示
+      CHAT_UI.makeNameCard(user);
+    });
+
+    $("#attendUser").append(obj);
+  });
+
+  currentUserInfo.configureLanguage();
+  // TODO: peacekim:: check localization works or not
+  $(".ttl_detail").text(getLocalizedString("detail"));
+  $("#archiveFileName").text(getLocalizedString("archiveFileName"));
+  $("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"));
+  $("#archiveRoomName").text(getLocalizedString("archiveRoomName"));
+  $("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"));
+  $("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"));
+
+  // チャットルームへのリンク付け
+  document.getElementById("joinChatRoom").onclick = function () {
+    NativeBridgeDelegate.joinRoom(archive.roomId, archive.roomName);
+  };
+
+  // loadingIndicatorを非表示
+  Common.dismissLoadingIndicator();
+};
+
+CHAT.createGetDataUrl = function (fileName, roomId) {
+  var filePath =
+    serverInfo.cmsURL +
+    "/chatapi/file/getImage?sid=" +
+    currentUserInfo.sid +
+    "&fileName=" +
+    fileName +
+    "&roomId=" +
+    roomId;
+  return filePath;
+};
+
+// アーカイブ一覧
+CHAT_UI.refreshArchiveScreen = function () {
+  // loadingIndicatorを表示
+  Common.showLoadingIndicator();
+
+  // 初期化
+  $("#archiveList").html("");
+
+  // アーカイブの様式を読み込む
+  const archiveTemplate = $("#archive-template").html();
+
+  // アーカイブ一覧取得
+  if (serverInfo.isOnline == "true") {
+    NativeBridgeDelegate.updateArchiveList();
+  }
+
+  // ローカルDBのデータを表示
+  var archiveList = NativeBridgeDataSource.getArchiveList();
+  if (typeof archiveList == "undefined") {
+    Common.dismissLoadingIndicator();
+    return;
+  }
+  archiveList.forEach(function (archive) {
+    var typeImage = "";
+    switch (archive.archiveType) {
+      case 0: // 画像
+        typeImage = "icon/icon_collabo_picture.png";
+        break;
+      case 1: // 動画
+        typeImage = "icon/icon_collabo_videocam.png";
+        break;
+      case 2: // 音声
+        typeImage = "icon/icon_collabo_headset.png";
+        break;
+      case 3: // 文書
+        typeImage = "icon/icon_collabo_document.png";
+        break;
+      default:
+        // その他
+        typeImage = "";
+    }
+    let html = Mustache.render(archiveTemplate, {
+      archiveId: archive.archiveId,
+      fileName: archive.archiveName,
+      insertDate: archive.archiveDate,
+      typeImage: typeImage,
+    });
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
+    $("#archiveList").append(obj);
+  });
+
+  // loadingIndicatorを非表示
+  Common.dismissLoadingIndicator();
+};

public_new/js/views/chats/chat-list.js

+var ChatList = {};
+
+$("#tabDM").on("click", function (e) {
+  ChatList.refreshRoomList(ChatRoomType.DM);
+});
+
+$("#tabGroup").on("click", function (e) {
+  ChatList.refreshRoomList(ChatRoomType.GROUP);
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+  const chatSearchInput = $('#chat .search_form input[type="search"]');
+  const chatSearchCancel = $("#chat .search_form .cancel");
+  chatSearchInput.click(function () {
+    let roomListTitle = getLocalizedString("room_search_placeholder");
+    $("#chatTitle").text(roomListTitle);
+  });
+
+  chatSearchCancel.click(function () {
+    let roomListTitle = getLocalizedString("roomListTitle");
+    $("#chatTitle").text(roomListTitle);
+  });
+
+  // チャットメンバー検索
+  chatSearchInput.keyup(function (e) {
+    var rooms;
+    var keyword = chatSearchInput.val();
+    if (e.KeyCode == 13 || e.key == "Enter") {
+      if (keyword.length != 0 && keyword != "") {
+        chatSearchInput.blur();
+        return;
+      }
+    } else if (keyword == "" || keyword.length < 2) {
+      $(".overlay_src_msg").empty();
+      return;
+    }
+    CHAT.searchRoom(keyword, rooms);
+    if (e.KeyCode == 13 || e.key == "Enter") {
+      chatSearchInput.blur();
+      return;
+    }
+  });
+  // iOSキーボード変換検知用
+  chatSearchInput.on(
+    "compositionend",
+    function () {
+      if (deviceInfo.isIOS()) {
+        var rooms;
+        var keyword = chatSearchInput.val();
+        CHAT.searchRoom(keyword, rooms);
+      }
+    }
+  );
+});
+
+ChatList.refreshRoomList = function (roomType) {
+  if (serverInfo.isOnline == "true") {
+    Common.refreshForOnline();
+  } else {
+    Common.refreshForOffline();
+  }
+  const beforeRoomType = NativeBridgeDataSource.getBeforeRoomType();
+
+  if (beforeRoomType != null) {
+    roomType = beforeRoomType;
+    NativeBridgeDelegate.clearBeforeRoomType();
+  }
+  Common.showLoadingIndicator();
+  if (roomType == ChatRoomType.DM) {
+    $("#tabDM").prop("checked", true);
+  } else {
+    $("#tabGroup").prop("checked", true);
+  }
+
+  if (serverInfo.isOnline == "true") {
+    NativeBridgeDelegate.updateRoomList();
+  }
+  var rooms = NativeBridgeDataSource.getRoomList(roomType, null);
+  // #36146に対応
+  $("#groupChatList").empty();
+  $("#dmChatList").empty();
+  let roomListTitle = getLocalizedString("roomListTitle");
+  $("#chatTitle").text(roomListTitle);
+  if (rooms.length === 0) {
+    // 検索結果がない場合のメッセージを追加
+    let emptyListString = getLocalizedString("roomListEmptyString");
+    switch (roomType) {
+      case ChatRoomType.GROUP:
+        $("#groupChatList").append(
+          `<center class="text-secondary">${emptyListString}</center>`
+        );
+        break;
+      case ChatRoomType.DM:
+        $("#dmChatList").append(
+          `<center class="text-secondary">${emptyListString}</center>`
+        );
+        break;
+      default:
+    }
+  }
+
+  var template = getTemplate(TemplateURL.ROOM_LIST);
+
+  rooms.forEach(function (room) {
+    room.profileImagePath = "./images/user-profile.png";
+    if (room.message) {
+      room.message = room.message.toString();
+    } else {
+      room.message = getLocalizedString("noMessages");
+    }
+    var displayMsg;
+    //TODO 協業の場合処理追加必要
+    switch (room.messageType) {
+      case MessageType.TEXT:
+        displayMsg = room.message;
+        break;
+      case MessageType.IMAGE:
+        displayMsg = getLocalizedString("image");
+        break;
+      case MessageType.VIDEO:
+        displayMsg = getLocalizedString("video");
+        break;
+      case MessageType.COMMUNICATIONSTART:
+        displayMsg = getLocalizedString("collaboration_start");
+        break;
+      case MessageType.COMMUNICATIONEND:
+        displayMsg = getLocalizedString("collaboration_end");
+        break;
+      default:
+        break;
+    }
+    var attendUserName = [];
+
+    room.attendUsers.forEach(function (user) {
+      user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+      attendUserName.push(user.shopMemberName);
+    });
+    var thumbnailCount =
+      room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
+    if (room.chatRoomName == "") {
+      room.chatRoomName = attendUserName.join(", ");
+    }
+    var unreadMessageCount = room.unreadCount == 0 ? "" : room.unreadCount;
+    if (unreadMessageCount > 999) {
+      unreadMessageCount = "999+";
+    }
+    let html = Mustache.render(template, {
+      thumbnailCount: thumbnailCount,
+      roomName: room.chatRoomName,
+      roomId: room.chatRoomId,
+      profileImage: room.profileImagePath,
+      lastMessage: displayMsg,
+      time: room.insertDate
+        ? CHAT_UTIL.formatDate(room.insertDate).createdAt
+        : "",
+      unreadMsgCnt: unreadMessageCount,
+      userCnt: room.attendUsers.length + 1,
+      attendUsers: room.attendUsers,
+    });
+    // Click event
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {
+      //TODO ルームに入る処理追加必要
+    });
+    // ルームグループごとに追加。
+    switch (roomType) {
+      case ChatRoomType.GROUP:
+        $("#groupChatList").append(obj);
+        break;
+      case ChatRoomType.DM:
+        $("#dmChatList").append(obj);
+        break;
+      default:
+    }
+  });
+
+  console.log("DONE");
+  Common.dismissLoadingIndicator();
+};
+
+// チャットルーム検索
+CHAT.searchRoom = function (keyword, rooms) {
+  const overlayMessage = $(".overlay_src_msg");
+  overlayMessage.empty();
+  rooms = NativeBridgeDataSource.getRoomList(ChatRoomType.ALL, keyword);
+  let roomListTitle = getLocalizedString("room_search_placeholder");
+  $("#chatTitle").text(roomListTitle);
+
+  var template = getTemplate(TemplateURL.ROOM_LIST);
+  rooms.forEach(function (room) {
+    room.profileImagePath = "./images/user-profile.png";
+    const roomMessage = getRoomMessage(room.message);
+    const displayMessage = getDisplayMessage(room.messageType, roomMessage);
+
+    let html = renderRoom(template, room, displayMessage);
+
+    // Click event
+    let obj = jQuery.parseHTML(html);
+    overlayMessage.append(obj);
+  });
+
+  if (rooms.length == 0) {
+    const noResultMsg = getNoResultMessage();
+    overlayMessage.append(noResultMsg);
+  }
+};
+
+var getRoomMessage = function (message) {
+  if (message) {
+    return message.toString();
+  } else {
+    return getLocalizedString("noMessages");
+  }
+};
+
+var getDisplayMessage = function (messageType, roomMessage) {
+  switch (messageType) {
+    case MessageType.TEXT:
+      return roomMessage;
+    case MessageType.SYSTEM:
+      return roomMessage;
+    case MessageType.IMAGE:
+      return getLocalizedString("image");
+    case MessageType.VIDEO:
+      return getLocalizedString("video");
+    case MessageType.COMMUNICATIONSTART:
+      return getLocalizedString("collaboration_start");
+    case MessageType.COMMUNICATIONEND:
+      return getLocalizedString("collaboration_end");
+    default:
+      return "";
+  }
+};
+
+var renderRoom = function (template, room, displayMessage) {
+  var attendUserName = [];
+  room.attendUsers.forEach(function (user) {
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+    attendUserName.push(user.shopMemberName);
+  });
+  const thumbnailCount =
+    room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
+  const time = room.insertDate
+    ? CHAT_UTIL.formatDate(room.insertDate).createdAt
+    : "";
+  if (room.chatRoomName == "") {
+    room.chatRoomName = attendUserName.join(", ");
+  }
+  return Mustache.render(template, {
+    thumbnailCount: thumbnailCount,
+    roomName: room.chatRoomName,
+    roomId: room.chatRoomId,
+    profileImage: room.profileImagePath,
+    lastMessage: displayMessage,
+    time: time,
+    unreadMsgCnt: room.unreadCount == 0 ? "" : room.unreadCount,
+    userCnt: room.attendUsers.length + 1,
+    attendUsers: room.attendUsers,
+  });
+};
+
+CHAT_UI.refreshForOnline = function () { 
+  serverInfo.isOnline = "true";
+  $(".craeteRoomButton").off("click", CHAT_UI.offlineHandler);
+  $(".craeteRoomButton").css("opacity", "1.0");
+};
+
+CHAT_UI.refreshForOffline = function () {
+  serverInfo.isOnline = "false";
+  $(".craeteRoomButton").on("click", CHAT_UI.offlineHandler);
+  $(".craeteRoomButton").css("opacity", "0.3");
+}
+
+CHAT_UI.offlineHandler = function (e) {
+  e.preventDefault();
+};

public_new/js/chat-add-user.js → public_new/js/views/chats/management/chat-add-user.js

 // 名前空間
 // 名前空間
-var CHAT_ADD_USER = {};
+var ChatAddUser = {};
 
 
 document.addEventListener("DOMContentLoaded", function () {
 document.addEventListener("DOMContentLoaded", function () {
   // メンバー検索
   // メンバー検索
   bindMemberSearch();
   bindMemberSearch();
   // iOSキーボード変換検知用
   // iOSキーボード変換検知用
   bindiOSKeyBoardEvent();
   bindiOSKeyBoardEvent();
+
+  $("#chat_add_user .search_form .cancel").click(function () {
+    let roomListTitle = getLocalizedString("inviteUsersSubtitle");
+    $("#addUserTitle").text(roomListTitle);
+  });
 });
 });
 
 
 // ユーザー検索
 // ユーザー検索
-CHAT_ADD_USER.searchUser = function (keyword) {
+ChatAddUser.searchUser = function (keyword) {
   const isAllGroup = $("#tabAllGroupOnAddUser").is(":checked");
   const isAllGroup = $("#tabAllGroupOnAddUser").is(":checked");
   const overlayMessage = $(".overlay_src_msg");
   const overlayMessage = $(".overlay_src_msg");
   let hasNoData = false;
   let hasNoData = false;
@@ -22,13 +27,15 @@ CHAT_ADD_USER.searchUser = function (keyword) {
     searchGroupData(groupList, overlayMessage);
     searchGroupData(groupList, overlayMessage);
 
 
     //ユーザデータ検索
     //ユーザデータ検索
-    var userList = NativeBridgeDataSource.getAllGroupShopMemberNotInRoomByName(keyword);
+    var userList =
+      NativeBridgeDataSource.getAllGroupShopMemberNotInRoomByName(keyword);
     searchUserData(userList, overlayMessage);
     searchUserData(userList, overlayMessage);
     hasNoData = userList.length == 0 && groupList.length == 0;
     hasNoData = userList.length == 0 && groupList.length == 0;
 
 
     //連絡先画面
     //連絡先画面
   } else {
   } else {
-    var userList = NativeBridgeDataSource.getMyGroupShopMemberNotInRoomByName(keyword);
+    var userList =
+      NativeBridgeDataSource.getMyGroupShopMemberNotInRoomByName(keyword);
     searchUserData(userList, overlayMessage);
     searchUserData(userList, overlayMessage);
     hasNoData = userList.length == 0;
     hasNoData = userList.length == 0;
   }
   }
@@ -65,7 +72,7 @@ var bindMemberSearch = function () {
       return false;
       return false;
     }
     }
 
 
-    CHAT_ADD_USER.searchUser(keyword);
+    ChatAddUser.searchUser(keyword);
 
 
     if (enterKeyPressed) {
     if (enterKeyPressed) {
       searchInput.blur();
       searchInput.blur();
@@ -79,7 +86,7 @@ var bindiOSKeyBoardEvent = function () {
   searchInput.on("compositionend", function () {
   searchInput.on("compositionend", function () {
     if (deviceInfo.isiOS()) {
     if (deviceInfo.isiOS()) {
       var keyword = searchInput.val();
       var keyword = searchInput.val();
-      CHAT_ADD_USER.searchUser(keyword);
+      ChatAddUser.searchUser(keyword);
     }
     }
   });
   });
 };
 };
@@ -118,11 +125,13 @@ var searchUserData = function (userList, overlayMessage) {
 };
 };
 
 
 var setUserProfile = function (user) {
 var setUserProfile = function (user) {
-  user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+  user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
 };
 };
 
 
 var checkUser = function (user) {
 var checkUser = function (user) {
-  let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
+  let findObj = ChatManagementCommon.selectedUserList.find(function (
+    shopMemberId
+  ) {
     return shopMemberId == user.shopMemberId;
     return shopMemberId == user.shopMemberId;
   });
   });
   if (findObj) {
   if (findObj) {
@@ -135,3 +144,181 @@ var renderUserTemplate = function (userTemplate, userList) {
     userList: userList,
     userList: userList,
   });
   });
 };
 };
+
+$("#addUserConfirmBtn").on("click", function (e) {
+  const selectedUserList =
+    ChatManagementCommon.selectedUserList.join(",");
+  NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
+  $("#addUserForm").submit();
+});
+
+$("#tabAllGroupOnAddUser").on("click", function (e) {
+  CHAT_UI.refreshAllGroupForAddUser("0");
+});
+
+$("#tabMyGroupOnAddUser").on("click", function (e) {
+  CHAT_UI.refreshMyGroupForAddUser();
+});
+
+CHAT_UI.refreshMyGroupForAddUser = function () {
+  $(".modal-backdrop").remove();
+  $("#favoriteListForMakeRoom").html("");
+  $("#myGroupListForMakeRoom").html("");
+  //画面タイトル設定
+  let contactListTitle = getLocalizedString("userSearch");
+  $("#title").text(contactListTitle);
+
+  // グループの様式を読み込む
+  var groupTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_LIST);
+
+  // ユーザの様式を読み込む
+  var userTemplate = getTemplate(TemplateURL.ADD_USER_USER_LIST);
+  var groupUserTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_USER_LIST);
+
+  NativeBridgeDelegate.updateContactInfo();
+
+  //お気に入りグループ取得。
+  var favoriteGroupList = NativeBridgeDataSource.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 = NativeBridgeDataSource.getFavoriteUsersNotInRoom();
+  favoriteUserList.forEach(function (favoriteUser) {
+    favoriteUser.profileUrl = Common.getProfileImgUrl(favoriteUser.profileUrl);
+    let findObj = ChatManagementCommon.selectedUserList.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);
+
+  var myGroupList = NativeBridgeDataSource.getMyGroupUsersNotInRoom();
+  myGroupList.forEach(function (myGroup) {
+    myGroup.groupUserList.forEach(function (groupUser) {
+      groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+      let findObj = ChatManagementCommon.selectedUserList.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.refreshAllGroupForAddUser = function (paramGroupId) {
+  var groupId = paramGroupId;
+  $(".cancel").addClass("none");
+  $(".search_form input").removeClass("focus");
+  $(".search_form input").val("");
+  $(".search_form form").removeClass();
+  $(".content").removeClass("none");
+  $(".overlay_src_msg").empty();
+
+  $("#tabAllGroupOnAddUser").prop("checked", true);
+
+  //オンライン状態であればサーバから情報更新。
+  NativeBridgeDelegate.updateGroupInfo(groupId);
+
+  //画面エリアを初期化。
+  $("#parentGroupBtnForAddUser").off();
+  $("#rootGroupBtnForAddUser").off();
+  $("#childGroupListAreaForAddUser").html("");
+  $("#userInGroupListForAddUser").html("");
+  $("#groupPathAreaForAddUser").html("");
+
+  //DBからグループ情報を取得。
+  var result = NativeBridgeDataSource.getGroupInfoForAddUser(groupId);
+
+  //上位グループ、トップグループ遷移ボタンのイベント追加。
+  if (typeof result.parentGroupId !== "undefined") {
+    $("#parentGroupBtnForAddUser").on("click", function () {
+      CHAT_UI.refreshAllGroupForAddUser(result.parentGroupId);
+    });
+  }
+  if (typeof result.rootGroupId !== "undefined") {
+    if (paramGroupId == 0) {
+      groupId = result.rootGroupId;
+    }
+    $("#rootGroupBtnForAddUser").on("click", function () {
+      CHAT_UI.refreshAllGroupForAddUser(result.rootGroupId);
+    });
+  }
+  if (groupId == result.rootGroupId || paramGroupId == "0") {
+    $("#rootGroupArea").addClass("none");
+    $("#parentGroupArea").addClass("none");
+  } else {
+    $("#rootGroupArea").removeClass("none");
+    $("#parentGroupArea").removeClass("none");
+  }
+  //該当グループのパースを表示。
+  var groupPathTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_PATH);
+  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);
+      $("#groupPathAreaForAddUser").append(obj);
+    }
+    groupPathCount++;
+  });
+
+  //該当グループの下位グループ表示。
+  var groupTemplate = getTemplate(TemplateURL.ADD_USER_GROUP_LIST);
+
+  result.childGroupList.forEach(function (childGroup) {
+    let html = Mustache.render(groupTemplate, {
+      name: childGroup.groupName,
+      id: childGroup.groupId,
+    });
+
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
+    $("#childGroupListAreaForAddUser").append(obj);
+  });
+
+  //該当グループの所属ユーザを表示。
+  const userTemplate = getTemplate(TemplateURL.ADD_USER_USER_LIST);
+  result.groupUserList.forEach(function (groupUser) {
+    groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+    let findObj = ChatManagementCommon.selectedUserList.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);
+  $("#userInGroupListForAddUser").append(obj);
+};

public_new/js/chatMakeRoom.js → public_new/js/views/chats/management/chat-make-room.js

@@ -7,6 +7,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
   // iOSキーボード変換検知用
   // iOSキーボード変換検知用
   bindiOSKeyBoardEvent();
   bindiOSKeyBoardEvent();
+
+  bindSearchCancel();
 });
 });
 
 
 // メンバー検索
 // メンバー検索
@@ -95,6 +97,13 @@ var bindiOSKeyBoardEvent = function () {
   });
   });
 };
 };
 
 
+var bindSearchCancel = function () {
+  $("#chatMakeRoom .search_form .cancel").click(function () {
+    let roomListTitle = getLocalizedString("createRoomTitle");
+    $("#makeRoomTitle").text(roomListTitle);
+  });
+};
+
 var renderRoomList = function (url, groupName, groupID) {
 var renderRoomList = function (url, groupName, groupID) {
   return Mustache.render(url, {
   return Mustache.render(url, {
     name: groupName,
     name: groupName,
@@ -104,8 +113,10 @@ var renderRoomList = function (url, groupName, groupID) {
 
 
 var searchUserData = function (userList) {
 var searchUserData = function (userList) {
   userList.forEach(function (user) {
   userList.forEach(function (user) {
-    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
-    let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
+    let findObj = ChatManagementCommon.selectedUserList.find(function (
+      shopMemberId
+    ) {
       return shopMemberId == user.shopMemberId;
       return shopMemberId == user.shopMemberId;
     });
     });
     if (findObj) {
     if (findObj) {
@@ -119,3 +130,89 @@ var renderUser = function (url, userList) {
     userList: userList,
     userList: userList,
   });
   });
 };
 };
+
+$("#makeRoomConfirmBtn").on("click", function (e) {
+  const selectedUserList =
+    ChatManagementCommon.selectedUserList.join(",");
+  NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
+  $("#makeRoomForm").submit();
+});
+
+$("#tabAllGroupOnMakeRoom").on("click", function (e) {
+  ChatManagementCommon.refreshAllGroupForMakeRoom("0");
+});
+
+$("#tabMyGroupOnMakeRoom").on("click", function (e) {
+  CHAT_UI.refreshMyGroupForMakeRoom();
+});
+
+CHAT_UI.refreshMyGroupForMakeRoom = function () {
+  $(".modal-backdrop").remove();
+  $("#favoriteListForMakeRoom").html("");
+  $("#myGroupListForMakeRoom").html("");
+  //画面タイトル設定
+  let contactListTitle = getLocalizedString("userSearch");
+  $("#title").text(contactListTitle);
+
+  // グループの様式を読み込む
+  var groupTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_LIST);
+
+  // ユーザの様式を読み込む
+  var userTemplate = getTemplate(TemplateURL.MAKE_ROOM_USER_LIST);
+
+  var groupUserTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_USER_LIST);
+
+  NativeBridgeDelegate.updateContactInfo();
+
+  //お気に入りグループ取得。
+  var favoriteGroupList = NativeBridgeDataSource.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 = NativeBridgeDataSource.getFavoriteUsers();
+  favoriteUserList.forEach(function (favoriteUser) {
+    favoriteUser.profileUrl = Common.getProfileImgUrl(favoriteUser.profileUrl);
+    let findObj = ChatManagementCommon.selectedUserList.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);
+
+  var myGroupList = NativeBridgeDataSource.getMyGroupUsers();
+  myGroupList.forEach(function (myGroup) {
+    myGroup.groupUserList.forEach(function (groupUser) {
+      groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+      let findObj = ChatManagementCommon.selectedUserList.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);
+  });
+};

public_new/js/views/chats/management/chat-management-common.js

+var ChatManagementCommon = {};
+
+//招待するメンバーを保存する変数
+ChatManagementCommon.selectedUserList = new Array();
+
+ChatManagementCommon.showMakeRoomConfirmView = function () {
+  $("#selectedUserList").html("");
+
+  var userTemplate = getTemplate(TemplateURL.MAKE_ROOM_CONFIRM_USER_LIST);
+
+  var selectedUserList = NativeBridgeDataSource.loadSelectedUsers();
+
+  selectedUserList.forEach(function (user) {
+    let html = Mustache.render(userTemplate, {
+      id: user.shopMemberId,
+      profileImage: Common.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を表示
+        Common.showLoadingIndicator();
+        let userIdList = new Array();
+        let userNameList = new Array();
+
+        selectedUserList.forEach(function (user) {
+          userIdList.push(user.shopMemberId);
+          userNameList.push(user.shopMemberName);
+        });
+
+        // 参加ユーザ名でルーム名を生成
+        let newRoomName =
+          currentUserInfo.loginId + "," + userNameList.join(",");
+        NativeBridgeDelegate.createChatRoom(
+          ChatRoomType.DM,
+          userIdList.join(","),
+          newRoomName,
+          MakeRoomFlag.MAKE_ROOM,
+          false
+        );
+      } 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を表示
+        Common.showLoadingIndicator();
+        let userIdList = new Array();
+
+        selectedUserList.forEach(function (user) {
+          userIdList.push(user.shopMemberId);
+        });
+
+        // TODO: check why here using trimmedroomname instead of encodedRoomName
+        // ルーム名のtrimmingした後、URIencodingを行う
+        const encodedRoomName = encodeURIComponent(trimmedRoomName);
+        NativeBridgeDelegate.createChatRoom(
+          ChatRoomType.DM,
+          userIdList.join(","),
+          trimmedRoomName,
+          MakeRoomFlag.MAKE_ROOM,
+          false
+        );
+      }
+    });
+
+  $("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"));
+};
+
+ChatManagementCommon.showAddUserConfirmView = function () {
+  $("#selectedUserList").html("");
+
+  var userTemplate = getTemplate(TemplateURL.ADD_USER_CONFIRM_USER_LIST);
+  var selectedUserList = NativeBridgeDataSource.loadSelectedUsers();
+
+  selectedUserList.forEach(function (user) {
+    let html = Mustache.render(userTemplate, {
+      id: user.shopMemberId,
+      profileImage: Common.getProfileImgUrl(user.profileUrl),
+      name: user.shopMemberName,
+    });
+    let obj = jQuery.parseHTML(html);
+    $("#selectedUserList").append(obj);
+  });
+
+  $("#addUserBtn")
+    .off()
+    .on("click", function () {
+      Common.showLoadingIndicator();
+      let userIdList = new Array();
+      selectedUserList.forEach(function (user) {
+        userIdList.push(user.shopMemberId);
+      });
+      NativeBridgeDelegate.inviteUsers(userIdList.join(","));
+    });
+};
+
+ChatManagementCommon.refreshAllGroupForMakeRoom = function (paramGroupId) {
+  var groupId = paramGroupId;
+  $(".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);
+
+  //オンライン状態であればサーバから情報更新。
+  NativeBridgeDelegate.updateGroupInfo(groupId);
+
+  //画面エリアを初期化。
+  $("#parentGroupBtnForMakeRoom").off();
+  $("#rootGroupBtnForMakeRoom").off();
+  $("#childGroupListAreaForMakeRoom").html("");
+  $("#userInGroupListForMakeRoom").html("");
+  $("#groupPathAreaForMakeRoom").html("");
+
+  //DBからグループ情報を取得。
+  var result = NativeBridgeDataSource.getGroupInfo(groupId);
+
+  //上位グループ、トップグループ遷移ボタンのイベント追加。
+  if (typeof result.parentGroupId !== "undefined") {
+    $("#parentGroupBtnForMakeRoom").on("click", function () {
+      ChatManagementCommon.refreshAllGroupForMakeRoom(result.parentGroupId);
+    });
+  }
+  if (typeof result.rootGroupId !== "undefined") {
+    if (paramGroupId == 0) {
+      groupId = result.rootGroupId;
+    }
+    $("#rootGroupBtnForMakeRoom").on("click", function () {
+      CHAChatManagementCommon_UI.refreshAllGroupForMakeRoom(result.rootGroupId);
+    });
+  }
+  if (groupId == result.rootGroupId || paramGroupId == "0") {
+    $("#rootGroupArea").addClass("none");
+    $("#parentGroupArea").addClass("none");
+  } else {
+    $("#rootGroupArea").removeClass("none");
+    $("#parentGroupArea").removeClass("none");
+  }
+  //該当グループのパースを表示。
+  var groupPathTemplate = getTemplate(TemplateURL.MAKE_ROOM_GROUP_PATH);
+
+  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 = getTemplate(TemplateURL.MAKE_ROOM_GROUP_LIST);
+
+  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 = getTemplate(TemplateURL.MAKE_ROOM_USER_LIST);
+
+  result.groupUserList.forEach(function (groupUser) {
+    groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+    let findObj = ChatManagementCommon.selectedUserList.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);
+};
+
+ChatManagementCommon.checkForMakeChat = function (checkMemberId) {
+  let findObj = ChatManagementCommon.selectedUserList.find(function (
+    shopMemberId
+  ) {
+    return shopMemberId == checkMemberId;
+  });
+  if (findObj) {
+    // remove
+    ChatManagementCommon.selectedUserList =
+      ChatManagementCommon.selectedUserList.filter(function (
+        shopMemberId
+      ) {
+        return checkMemberId != shopMemberId;
+      });
+    $(".checkbox" + checkMemberId)
+      .prop("checked", false)
+      .trigger("change");
+  } else {
+    // add
+    ChatManagementCommon.selectedUserList.push(checkMemberId);
+    $(".checkbox" + checkMemberId)
+      .prop("checked", true)
+      .trigger("change");
+  }
+
+  let cnt = ChatManagementCommon.selectedUserList.length;
+  if (ChatManagementCommon.selectedUserList.length > 0) {
+    $(".select_member_num").text(cnt);
+  } else {
+    $(".select_member_num").text("0");
+  }
+};

public_new/js/views/chats/management/chat-room-change.js

+var ChatRoomChange = {};
+
+document.addEventListener("DOMContentLoaded", function () {
+  // ルーム名変更イベント
+  $(".change_room_name_btn button").click(function () {
+    $("form").submit();
+  });
+});
+
+$("#roomNameChangeBtn").click(function () {
+  var changeRoomName = $("#roomNameInput").val();
+  var trimmedRoomName = $("#roomNameInput").val().trim();
+  if (trimmedRoomName.length == 0) {
+    alert(getLocalizedString("error_empty_room_name"));
+    return;
+  }
+  NativeBridgeDelegate.changeRoomName(changeRoomName);
+});

public_new/js/share.js → public_new/js/views/collaboration/share.js

@@ -970,7 +970,7 @@ function recordStop(callback) {
     callback();
     callback();
     return;
     return;
   }
   }
-  CHAT_UI.showLoadingIndicator();
+  Common.showLoadingIndicator();
   // アーカイブ保存中は画面操作不可(協業終了,協業切り替え防止)
   // アーカイブ保存中は画面操作不可(協業終了,協業切り替え防止)
   screenLock();
   screenLock();
 
 
@@ -1015,13 +1015,13 @@ function MainManRecordWithCollaboration(action, url, callback) {
       processData: false,
       processData: false,
       success: function (res) {
       success: function (res) {
         recordFinished();
         recordFinished();
-        CHAT_UI.dismissLoadingIndicator();
+        Common.dismissLoadingIndicator();
         console.log(res);
         console.log(res);
         callback();
         callback();
       },
       },
       error: function (err) {
       error: function (err) {
         recordFinished();
         recordFinished();
-        CHAT_UI.dismissLoadingIndicator();
+        Common.dismissLoadingIndicator();
         console.log(err);
         console.log(err);
         callback();
         callback();
       },
       },

public_new/js/contact.js → public_new/js/views/contact/contact.js

@@ -23,7 +23,8 @@ CONTACT.searchUser = function (keyword) {
     groupDataSearch(groupList);
     groupDataSearch(groupList);
 
 
     //ユーザデータ検索
     //ユーザデータ検索
-    const userList = NativeBridgeDataSource.getAllGroupShopMemberByName(keyword);
+    const userList =
+      NativeBridgeDataSource.getAllGroupShopMemberByName(keyword);
     userDataSearch(userList);
     userDataSearch(userList);
 
 
     hasNoData = userList.length == 0 && groupList.length == 0;
     hasNoData = userList.length == 0 && groupList.length == 0;
@@ -104,7 +105,7 @@ var renderGroupList = function (url, groupName, groupID, isFavorite) {
 
 
 var userDataSearch = function (userList) {
 var userDataSearch = function (userList) {
   userList.forEach(function (user) {
   userList.forEach(function (user) {
-    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+    user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
   });
   });
   var userTemplate = getTemplate(TemplateURL.USER_LIST);
   var userTemplate = getTemplate(TemplateURL.USER_LIST);
   let html = renderUserList(userTemplate, userList);
   let html = renderUserList(userTemplate, userList);
@@ -117,3 +118,125 @@ var renderUserList = function (url, userList) {
     userList: userList,
     userList: userList,
   });
   });
 };
 };
+
+$("#tabMyGroup").on("click", function (e) {
+  $("#contactSearch").attr("placeholder", getLocalizedString("userSearch"));
+  CHAT_UI.refreshContactScreen();
+});
+
+$("#tabAllGroup").on("click", function (e) {
+  CHAT_UI.refreshAllGroupSearch("0");
+});
+
+CHAT_UI.refreshContactScreen = function () {
+  Common.showLoadingIndicator();
+  $("#userNameCard").modal("hide");
+  $("#favoriteList").html("");
+  $("#myGroupList").html("");
+  //画面タイトル設定
+  let contactListTitle = getLocalizedString("contactListTitle");
+  $("#title").text(contactListTitle);
+
+  // グループの様式を読み込む
+  const groupTemplate = getTemplate(TemplateURL.GROUP_LIST);
+  // ユーザの様式を読み込む
+  var userTemplate = getTemplate(TemplateURL.USER_LIST);
+
+  var myNamecardTemplate = getTemplate(TemplateURL.MY_NAME_CARD);
+
+  var groupUserTemplate = getTemplate(TemplateURL.GROUP_USER_LIST);
+  NativeBridgeDelegate.updateContactInfo();
+
+  var myInfo = NativeBridgeDataSource.getMyInfo();
+  myInfo.profileImagePath = Common.getProfileImgUrl(myInfo.profileUrl);
+
+  let myNamecardHtml = Mustache.render(myNamecardTemplate, {
+    loginId: myInfo.shopMemberId,
+    profileImage: myInfo.profileImagePath,
+    name: myInfo.shopMemberName,
+    groupPathList: myInfo.groupPathList,
+  });
+  let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on(
+    "click",
+    function () {}
+  );
+
+  $("#myProfileModal").html(myNamecardObj);
+  $("#myName").text(myInfo.shopMemberName);
+  $("#myImg").attr("src", myInfo.profileImagePath);
+
+  //お気に入りグループ取得。
+  var favoriteGroupList = NativeBridgeDataSource.getFavoriteGroups();
+  favoriteGroupList.forEach(function (favoriteGroup) {
+    let html = Mustache.render(groupTemplate, {
+      name: favoriteGroup.groupName,
+      id: favoriteGroup.groupId,
+      isFavorite: true,
+    });
+
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
+    $("#favoriteList").append(obj);
+  });
+  //お気に入りユーザ取得。
+  var favoriteUserList = NativeBridgeDataSource.getFavoriteUsers();
+  favoriteUserList.forEach(function (favoriteUser) {
+    favoriteUser.profileUrl = Common.getProfileImgUrl(favoriteUser.profileUrl);
+    favoriteUser.isFavorite = true;
+  });
+  let html = Mustache.render(userTemplate, {
+    userList: favoriteUserList,
+  });
+  let obj = jQuery.parseHTML(html);
+  $("#favoriteList").append(obj);
+
+  var myGroupList = NativeBridgeDataSource.getMyGroupUsers();
+  myGroupList.forEach(function (myGroup) {
+    myGroup.groupUserList.forEach(function (groupUser) {
+      groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+    });
+    let html = Mustache.render(groupUserTemplate, {
+      groupName: myGroup.groupName,
+      groupUserList: myGroup.groupUserList,
+    });
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
+
+    $("#myGroupList").append(obj);
+  });
+  Common.dismissLoadingIndicator();
+};
+
+// template_group_list.html (GROUP_LIST)
+// >> contact.js
+CHAT_UI.favoriteGroupChange = function (groupId, star) {
+  if ($(star).hasClass("active")) {
+    CHAT_UI.removeFavoriteGroup(groupId);
+  } else if ($(star).hasClass("disable")) {
+    CHAT_UI.insertFavoriteGroup(groupId);
+  }
+};
+
+CHAT_UI.removeFavoriteGroup = function (groupId) {
+  Common.showLoadingIndicator();
+  var result = NativeBridgeDataSource.removeFavoriteGroup(groupId);
+  if (result) {
+    $(".group_" + groupId).removeClass("active");
+    $(".group_" + groupId).addClass("disable");
+  } else {
+    $(".group_" + groupId).addClass("active");
+    $(".group_" + groupId).removeClass("disable");
+  }
+  Common.dismissLoadingIndicator();
+};
+
+CHAT_UI.insertFavoriteGroup = function (groupId) {
+  Common.showLoadingIndicator();
+  const result = NativeBridgeDataSource.addFavoriteGroup(groupID);
+  if (result) {
+    $(".group_" + groupId).removeClass("disable");
+    $(".group_" + groupId).addClass("active");
+  } else {
+    $(".group_" + groupId).addClass("disable");
+    $(".group_" + groupId).removeClass("active");
+  }
+  Common.dismissLoadingIndicator();
+};
\ No newline at end of file

public_new/js/views/contact/namecard.js

+var Namecard = {};
+
+// archive_detail.html
+// collaboration_overlay_user_list.html
+// >> collaboration.js
+// archive.js
+// collaboration.js
+// template_chatroom_user_list.html (CHATROOM_USER_LIST)
+// >> chat-room.js
+// template_group_user_list.html (GROUP_USER_LIST)
+// >> contact.js
+// template_user_list.html
+// >> chat-room.js, contact.js
+// template_user_message.html
+// >> chat-websocket-message.js
+// >> chat-room.js
+CHAT_UI.makeNameCard = function (shopMemberId) {
+  if (currentUserInfo.shopMemberId == shopMemberId) {
+    return;
+  }
+  var nameCardInfo = NativeBridgeDataSource.getNameCardData(shopMemberId);
+  var namecardTemplate = getTemplate(TemplateURL.USER_NAME_CARD);
+
+  nameCardInfo.profileUrl = Common.getProfileImgUrl(nameCardInfo.profileUrl);
+  let namecardHtml = Mustache.render(namecardTemplate, {
+    shopMemberId: nameCardInfo.shopMemberId,
+    profileUrl: nameCardInfo.profileUrl,
+    name: nameCardInfo.shopMemberName,
+    groupPathList: nameCardInfo.groupPathList,
+    chat: getLocalizedString("chat"),
+    voice: getLocalizedString("voice"),
+    favorite: getLocalizedString("addFavorite"),
+    isFavorite: nameCardInfo.isFavorite,
+  });
+
+  let namecardObj = $(jQuery.parseHTML(namecardHtml)).on(
+    "click",
+    function () {}
+  );
+
+  $("#userProfileModal").html(namecardObj);
+  $("#userNameCard").modal("show");
+};
+
+// template_user_name_card.html
+CHAT_UI.startChat = function (userShopMemberId, userName) {
+  Common.showLoadingIndicator();
+  var userIdList = [];
+  userIdList.push(userShopMemberId);
+
+  // 参加ユーザ名でルーム名を生成
+  let newRoomName = currentUserInfo.loginId + "," + userName;
+  NativeBridgeDelegate.createChatRoom(
+    ChatRoomType.DM,
+    userIdList.join(","),
+    newRoomName,
+    MakeRoomFlag.NAME_CARD,
+    false
+  );
+};
+
+// template_user_name_card.html
+CHAT_UI.startVoice = function (userShopMemberId, userName) {
+  Common.showLoadingIndicator();
+  var userIdList = [];
+  userIdList.push(userShopMemberId);
+
+  // 参加ユーザ名でルーム名を生成
+  let newRoomName = currentUserInfo.loginId + "," + userName;
+  NativeBridgeDelegate.createChatRoom(
+    ChatRoomType.DM,
+    userIdList.join(","),
+    newRoomName,
+    MakeRoomFlag.NAME_CARD,
+    true
+  );
+};
+
+// template_group_user_list.html (GROUP_USER_LIST)
+// >> chat-room.js
+// >> contact.js
+// template_user_list.html
+CHAT_UI.favoriteUserChange = function (shopMemberId, star) {
+  if ($(star).hasClass("active")) {
+    CHAT_UI.removeFavoriteUser(shopMemberId);
+  } else if ($(star).hasClass("disable")) {
+    CHAT_UI.insertFavoriteUser(shopMemberId);
+  }
+};
+
+// modal_collabo_profile.html
+// collaboration.js
+// template_user_name_card.html
+CHAT_UI.removeFavoriteUser = function (shopMemberId) {
+  Common.showLoadingIndicator();
+  $("#userNameCard").modal("hide");
+  $("#myNameCard").modal("hide");
+  const result = NativeBridgeDataSource.removeFavoriteUser(shopMemberId);
+  if (result) {
+    $(".shopmember_" + shopMemberId).removeClass("active");
+    $(".shopmember_" + shopMemberId).addClass("disable");
+  } else {
+    $(".shopmember_" + shopMemberId).addClass("active");
+    $(".shopmember_" + shopMemberId).removeClass("disable");
+  }
+  Common.dismissLoadingIndicator();
+};
+
+// modal_collabo_profile.html
+// collaboration.js
+// template_user_name_card.html
+CHAT_UI.insertFavoriteUser = function (shopMemberId) {
+  $("#userNameCard").modal("hide");
+  $("#myNameCard").modal("hide");
+  const result = NativeBridgeDataSource.addFavoriteUser(shopMemberId);
+  if (result) {
+    $(".shopmember_" + shopMemberId).removeClass("disable");
+    $(".shopmember_" + shopMemberId).addClass("active");
+  } else {
+    $(".shopmember_" + shopMemberId).addClass("disable");
+    $(".shopmember_" + shopMemberId).removeClass("active");
+  }
+  Common.dismissLoadingIndicator();
+};
+
+
+// contact.html
+// contact.js
+// template_group_list.html (GROUP_LIST)
+// >> contact.js
+// template_group_path.html (GROUP_PATH)
+// >> self
+// template_user_name_card.html
+// >> CHAT_UI.makeNameCard
+//全グループ検索画面表示。
+CHAT_UI.refreshAllGroupSearch = function (paramGroupId) {
+  var groupId = paramGroupId;
+  if (window.location.pathname.includes("chat_room")) {
+    if (groupId == "") return;
+    NativeBridgeDelegate.setToMoveGroupId(groupId);
+    window.location.href = "contact.html";
+  }
+
+  Common.showLoadingIndicator();
+  $("#userNameCard").modal("hide");
+  $(".cancel").addClass("none");
+  $(".search_form input").removeClass("focus");
+  $(".search_form input").val("");
+  $(".search_form form").removeClass();
+  $(".content").removeClass("none");
+  $(".overlay_src_msg").empty();
+  $("#contactSearch").attr(
+    "placeholder",
+    getLocalizedString("searchUserAndGroup")
+  );
+  $("#tabAllGroup").prop("checked", true);
+
+  //オンライン状態であればサーバから情報更新。
+  NativeBridgeDelegate.updateGroupInfo(groupId);
+
+  //画面エリアを初期化。
+  $("#rootGroupBtn").off();
+  $("#parentGroupBtn").off();
+  $("#childGroupListArea").html("");
+  $("#userInGroupList").html("");
+  $("#groupPathArea").html("");
+
+  //DBからグループ情報を取得。
+  var result = NativeBridgeDataSource.getGroupInfo(groupId);
+
+  //上位グループ、トップグループ遷移ボタンのイベント追加。
+  if (typeof result.parentGroupId !== "undefined") {
+    $("#parentGroupBtn").on("click", function () {
+      CHAT_UI.refreshAllGroupSearch(result.parentGroupId);
+    });
+  }
+  if (typeof result.rootGroupId !== "undefined") {
+    if (paramGroupId == 0) {
+      groupId = result.rootGroupId;
+    }
+    $("#rootGroupBtn").on("click", function () {
+      CHAT_UI.refreshAllGroupSearch(result.rootGroupId);
+    });
+  }
+  if (groupId == result.rootGroupId || paramGroupId == "0") {
+    $("#rootGroupArea").addClass("none");
+    $("#parentGroupArea").addClass("none");
+  } else {
+    $("#rootGroupArea").removeClass("none");
+    $("#parentGroupArea").removeClass("none");
+  }
+  //該当グループのパースを表示。
+  const groupPathTemplate = getTemplate(TemplateURL.GROUP_PATH);
+  result.groupPathList.forEach(function (groupPath) {
+    let html = Mustache.render(groupPathTemplate, {
+      name: groupPath.groupName,
+      id: groupPath.groupId,
+    });
+    let obj = jQuery.parseHTML(html);
+    $("#groupPathArea").append(obj);
+  });
+
+  //該当グループの下位グループ表示。
+  const groupTemplate = getTemplate(TemplateURL.GROUP_LIST);
+  result.childGroupList.forEach(function (childGroup) {
+    let html = Mustache.render(groupTemplate, {
+      name: childGroup.groupName,
+      id: childGroup.groupId,
+      isFavorite: childGroup.isFavorite,
+    });
+
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
+    $("#childGroupListArea").append(obj);
+  });
+
+  //該当グループの所属ユーザを表示。
+  const userTemplate = getTemplate(TemplateURL.USER_LIST);
+
+  result.groupUserList.forEach(function (groupUser) {
+    groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
+  });
+  let html = Mustache.render(userTemplate, {
+    userList: result.groupUserList,
+  });
+  let obj = jQuery.parseHTML(html);
+  $("#userInGroupList").append(obj);
+  Common.dismissLoadingIndicator();
+};
+
+CHAT_UI.refreshForOnline = function () { 
+  $("#favoriteButton").prop("disabled", false);
+};
+
+CHAT_UI.refreshForOffline = function () {
+  $("#favoriteButton").prop("disabled", true);
+};

public_new/modal_collabo_profile.html

@@ -7,7 +7,7 @@
           <span aria-hidden="true">&times;</span>
           <span aria-hidden="true">&times;</span>
         </button>
         </button>
         <div class="profile_desc_ d-flex flex-row">
         <div class="profile_desc_ d-flex flex-row">
-          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
+          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
           <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
           <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
         </div>
         </div>
       </div>
       </div>
@@ -18,7 +18,8 @@
       </div>
       </div>
       <div class="modal-footer border-0 justify-content-center">
       <div class="modal-footer border-0 justify-content-center">
         {{#isFavorite}}
         {{#isFavorite}}
-        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
+        <button type="button" class="border-0 bg_navy"
+          onclick="CHAT_UI.removeFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_profile_favorite.png" alt="お気に入り">
               <img src="icon/icon_profile_favorite.png" alt="お気に入り">
@@ -28,7 +29,8 @@
         </button>
         </button>
         {{/isFavorite}}
         {{/isFavorite}}
         {{^isFavorite}}
         {{^isFavorite}}
-        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
+        <button type="button" class="border-0 bg_navy"
+          onclick="CHAT_UI.insertFavoriteUserInCollaboration({{shopMemberId}})" id="favoriteButton">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
               <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
@@ -38,7 +40,8 @@
         </button>
         </button>
         {{/isFavorite}}
         {{/isFavorite}}
         {{#isHost}}
         {{#isHost}}
-        <button type="button" class="ch_host_btn border-0 bg_green text_white" onclick="hostChangeRequest('{{loginId}}');" >
+        <button type="button" class="ch_host_btn border-0 bg_green text_white"
+          onclick="hostChangeRequest('{{loginId}}');">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_change_host.png" alt="ホスト変更">
               <img src="icon/icon_change_host.png" alt="ホスト変更">
@@ -49,7 +52,8 @@
         {{/isHost}}
         {{/isHost}}
         {{^isHost}}
         {{^isHost}}
         {{#whosHost}}
         {{#whosHost}}
-        <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal" data-target="#hostRequestModal" value="#profileModal2">
+        <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal"
+          data-target="#hostRequestModal" value="#profileModal2">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_change_host.png" alt="ホスト変更">
               <img src="icon/icon_change_host.png" alt="ホスト変更">
@@ -59,7 +63,8 @@
         </button>
         </button>
         {{/whosHost}}
         {{/whosHost}}
         {{^whosHost}}
         {{^whosHost}}
-        <button type="button" class="ch_host_btn border-0 bg_grey text_white" data-toggle="modal" data-target="#hostRequestModal" value="#profileModal2"　disabled>
+        <button type="button" class="ch_host_btn border-0 bg_grey text_white" data-toggle="modal"
+          data-target="#hostRequestModal" value="#profileModal2" 　disabled>
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_change_host.png" alt="ホスト変更">
               <img src="icon/icon_change_host.png" alt="ホスト変更">

public_new/template/template_add_user_group_user_list.html

-<div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>{{groupName}}</span></div></div>
+<div class="category" onclick="CHAT_UI.toggleCategory(this);">
+    <div class="category_name"><span>{{groupName}}</span></div>
+</div>
 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#groupUserList}}
     {{#groupUserList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" >
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_l">
             <div class="chat_item_l">
                 <div class="thumbnail">
                 <div class="thumbnail">
-                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_m">
             <div class="chat_item_m">

public_new/template/template_add_user_group_user_list_in_collaboration.html

-<div class="category" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>{{groupName}}</span></div></div>
+<div class="category" onclick="CHAT_UI.toggleCategory(this);">
+    <div class="category_name"><span>{{groupName}}</span></div>
+</div>
 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#groupUserList}}
     {{#groupUserList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" >
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_l">
             <div class="chat_item_l">
                 <div class="thumbnail">
                 <div class="thumbnail">
-                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_m">
             <div class="chat_item_m">

public_new/template/template_add_user_user_list.html

 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#userList}}
     {{#userList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" >
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>

public_new/template/template_add_user_user_list_in_collaboration.html

 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#userList}}
     {{#userList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" >
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>

public_new/template/template_make_room_group_list.html

 <li class="d-flex align-items-center" style="border-bottom: 1px solid #e2e8f0;">
 <li class="d-flex align-items-center" style="border-bottom: 1px solid #e2e8f0;">
-    <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
+    <a href="#" class="w-100" onclick="ChatManagementCommon.refreshAllGroupForMakeRoom({{id}});">
         <div class="chat_item d-flex flex-row align-items-center">
         <div class="chat_item d-flex flex-row align-items-center">
             <div class="chat_item_l">
             <div class="chat_item_l">
                 <div class="thumbnail-icon">
                 <div class="thumbnail-icon">

public_new/template/template_make_room_group_path.html

-<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
+<a href="#" class="breadcrumb_item" onclick="ChatManagementCommon.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" onclick="CHAT_UI.toggleCategory(this);"><div class="category_name"><span>{{groupName}}</span></div></div>
+<div class="category" onclick="CHAT_UI.toggleCategory(this);">
+    <div class="category_name"><span>{{groupName}}</span></div>
+</div>
 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#groupUserList}}
     {{#groupUserList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" >
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_l">
             <div class="chat_item_l">
                 <div class="thumbnail">
                 <div class="thumbnail">
-                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
+                    <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
                 </div>
                 </div>
             </div>
             </div>
             <div class="chat_item_m">
             <div class="chat_item_m">

public_new/template/template_make_room_user_list.html

 <ul class="p-0 chat_make_room_list">
 <ul class="p-0 chat_make_room_list">
     {{#userList}}
     {{#userList}}
     <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" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});">
+        <div class="chat_item d-flex flex-row align-items-center w-100"
+            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});">
             <div class="chat_item_l_chk">
             <div class="chat_item_l_chk">
                 <div class="checkbox">
                 <div class="checkbox">
                     <label>
                     <label>
-                        <input type="checkbox" id="checkbox{{shopMemberId}}"  name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onclick="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]"
+                            class="checkbox-input checkbox{{shopMemberId}}"
+                            onclick="ChatManagementCommon.checkForMakeChat({{shopMemberId}});" {{checked}}>
                         <span class="checkbox-parts"></span>
                         <span class="checkbox-parts"></span>
                     </label>
                     </label>
                 </div>
                 </div>

public_new/template/template_user_name_card.html

-<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard" aria-hidden="true">
+<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
+  aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
     <div class="modal-content">
       <div class="modal-header border-0">
       <div class="modal-header border-0">
@@ -6,7 +7,7 @@
           <span aria-hidden="true">&times;</span>
           <span aria-hidden="true">&times;</span>
         </button>
         </button>
         <div class="profile_desc_ d-flex flex-row">
         <div class="profile_desc_ d-flex flex-row">
-          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
+          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
           <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
           <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
         </div>
         </div>
       </div>
       </div>
@@ -17,7 +18,8 @@
       </div>
       </div>
       <div class="modal-footer border-0 justify-content-center">
       <div class="modal-footer border-0 justify-content-center">
         {{#isFavorite}}
         {{#isFavorite}}
-        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUser({{shopMemberId}})" id="favoriteButton">
+        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUser({{shopMemberId}})"
+          id="favoriteButton">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_profile_favorite.png" alt="お気に入り">
               <img src="icon/icon_profile_favorite.png" alt="お気に入り">
@@ -27,7 +29,8 @@
         </button>
         </button>
         {{/isFavorite}}
         {{/isFavorite}}
         {{^isFavorite}}
         {{^isFavorite}}
-        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUser({{shopMemberId}})" id="favoriteButton">
+        <button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUser({{shopMemberId}})"
+          id="favoriteButton">
           <div class="d-flex flex-column">
           <div class="d-flex flex-column">
             <div class="img_wrap">
             <div class="img_wrap">
               <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
               <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">