Fixed chat-web-socket

public_new/js/chat-websocket-message.js

+var bindOnNewMessage = function () {
+  // New Message
+  // #36170
+  socket.on(SOCKET_KEY.NEW_MESSAGE, function (message, roomId, roomName) {
+    console.log(message);
+    const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
+
+    const unwrappedMessageInfo = decodeMessage(message.text);
+    if (
+      unwrappedMessageInfo ==
+      DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL
+    ) {
+      cleanUpCollaborationMessage();
+      return;
+    }
+
+    if (unwrappedMessageInfo.includes(messageSeperator)) {
+      const messageInfo = unwrappedMessageInfo.split(messageSeperator);
+      const messageText = messageInfo[0];
+      const messageType = messageInfo[1];
+
+      if (
+        messageType == MessageType.COMMUNICATIONSTART ||
+        messageType == MessageType.COMMUNICATIONEND
+      ) {
+        addCollaborationMessage(
+          messageInfo,
+          message.userId,
+          roomName,
+          message.insertDate,
+          message.createdAt
+        );
+      } else {
+        addTextMessage(messageText, message, socket.id);
+      }
+    }
+
+    // 画像、動画の描画を待ってからスクロール
+    setTimeout(function () {
+      CHAT_UI.scrollToBottom();
+    }, 300);
+  });
+};
+
+var decodeMessage = function (text) {
+  try {
+    return decodeURIComponent(text);
+  } catch (e) {
+    return text;
+  }
+};
+
+var addCollaborationMessage = function (
+  messageInfo,
+  userID,
+  roomName,
+  insertDate,
+  createdAt
+) {
+  const collaborationType = messageInfo[2];
+  const meetingID = getMeetingID(collaborationType, messageInfo);
+  const userInCollaboration = getUserInfoList(userID);
+
+  userInCollaboration.forEach(function (user) {
+    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+  });
+
+  const openCollaborationMessageTemplate = getTemplate(
+    TemplateURL.OPEN_COLLABORATION_MESSAGE
+  );
+
+  const html = renderCollaborationMessage(
+    openCollaborationMessageTemplate,
+    roomName,
+    userInCollaboration,
+    insertDate,
+    collaborationType,
+    meetingID,
+    createdAt
+  );
+
+  $("#messages").append(html);
+};
+
+var getMeetingID = function (collaborationType, messageInfo) {
+  if (
+    collaborationType ==
+    CHAT_UTIL.getCollaborationType(CollaborationTypeKey.DOCUMENT)
+  ) {
+    return messageInfo[3];
+  } else {
+    return 0;
+  }
+};
+
+var renderCollaborationMessage = function (
+  template,
+  roomName,
+  userList,
+  insertDate,
+  collaborationType,
+  meetingID,
+  createdAt
+) {
+  let messageTime = CHAT_UTIL.formatDate(createdAt);
+  return Mustache.render(template, {
+    roomName: roomName,
+    userCount: 1,
+    userList: userList,
+    insertDate: insertDate,
+    collaborationType: collaborationType,
+    isToday: true,
+    meetingId: meetingID,
+    createdAtDay: messageTime.createdAtDay,
+    createdAtTime: messageTime.createdAtTime,
+    isOtherYear: false,
+  });
+};
+
+var addTextMessage = function (messageText, message, socketID) {
+  const messageTextWithSID = insertSID(messageText);
+  const messageSender = getUserInfoList(message.userId);
+  const shopMemberName = messageSender[0].shopMemberName;
+  const textMessageTemplate = getTextMessageTemplate(message.id === socketID);
+  const profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath);
+  const html = renderTextMessage(
+    textMessageTemplate,
+    messageTextWithSID,
+    shopMemberName,
+    profileImagePath,
+    message.userId,
+    message.createdAt
+  );
+  $("#messages").append(html);
+};
+
+var renderTextMessage = function (
+  template,
+  text,
+  from,
+  profileImagePath,
+  userID,
+  createdAt
+) {
+  let messageTime = CHAT_UTIL.formatDate(createdAt);
+  let dataInsertedTemplate = Mustache.render(template, {
+    text: text,
+    from: from,
+    profileImage: profileImagePath,
+    shopMemberId: userID,
+    createdAtDay: messageTime.createdAtDay,
+    createdAtTime: messageTime.createdAtTime,
+    isToday: true,
+  });
+
+  // イメージの場合、img tagを追加する
+  if (text.includes("attachedImages") || text.includes("attachedVideos")) {
+    return CHAT_UTIL.htmlDecode(dataInsertedTemplate);
+  } else {
+    return dataInsertedTemplate;
+  }
+};
+
+var getUserInfoList = function (userID) {
+  if (CHAT_UTIL.isIOS()) {
+    return JSON.parse(CHAT_DB.getUserInfoList(userID));
+  } else if (CHAT_UTIL.isAndroid()) {
+    return JSON.parse(android.getUserInfoList(userID));
+  }
+};
+
+var cleanUpCollaborationMessage = function () {
+  $(".collabo_area.start").each(function (index, collaborationMessage) {
+    $(collaborationMessage).removeClass("start");
+    $(collaborationMessage).addClass("end");
+    $(collaborationMessage).addClass("disable");
+    $(collaborationMessage)
+      .find(".collaboation_join_button")
+      .attr("disabled", "disabled");
+    $(collaborationMessage)
+      .find(".collaboration_join_message")
+      .text(getLocalizedString("message_ended"));
+  });
+};
+
+var insertSID = function (text) {
+  let replacePath = text;
+  replacePath = replacePath.replaceAll(
+    "?fileName=",
+    "?sid=" + CHAT.globalLoginParameter.sid + "&fileName="
+  );
+  return replacePath;
+};
+
+var getTextMessageTemplate = function (isSenderMySelf) {
+  return getTemplate(
+    isSenderMySelf
+      ? TemplateURL.MY_MESSAGE // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
+      : TemplateURL.USER_MESSAGE
+  );
+};

public_new/js/chat-websocket-refresh-group-list.js

+var bindOnRefreshGroupList = function () {
+  // Update Group List(Invite)
+  socket.on(SOCKET_KEY.REFRESH_GROUPLIST, function (groups, isInvite) {
+    const groupListElement = $("#group_list");
+    groupListElement.html("");
+    const template = $("#group-template").html();
+    if (groups.length === 0) {
+      groupListElement.append(
+        '<center class="text-secondary">' +
+          getLocalizedString(everyoneIsHere) +
+          "</center>"
+      );
+    }
+
+    addGroupNameAndNumberOfUsers(groups);
+
+    // Rotate
+    handleRotate();
+
+    updateTopBar();
+    // Set Title
+    updateTopBar(isInvite);
+
+    updateUserSelectionLength();
+
+    setupBackButton();
+  });
+};
+
+var addGroupNameAndNumberOfUsers = function (groups) {
+  // グループ名と人数を表記する。
+  groups.forEach(function (group) {
+    let html = Mustache.render(template, {
+      name: group.groupName,
+      info: group.memberCnt + getLocalizedString("people"),
+    });
+    // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
+    let obj = $(jQuery.parseHTML(html)).on("click", function () {
+      // loadingIndicatorを表示
+      CHAT_UI.showLoadingIndicator();
+      socket.emit("getUserListInGroup", group.groupId, isInvite);
+      $("#groupName").text(group.groupName);
+    });
+    groupListElement.append(obj);
+  });
+};
+
+var handleRotate = function () {
+  if (CHAT_UI.isLandscapeMode()) {
+    $(".group_list").addClass("col-6").removeClass("col-12");
+  }
+};
+
+var setupBackButton = function () {
+  const backButton = $("#backButton");
+
+  backButton.show();
+
+  backButton.off().on("click", function () {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+    if (isInvite) {
+      $("#pills-chat-tab").tab("show");
+    } else {
+      if (IS_ONLINE == "true") {
+        android.updateRoomList();
+        CHAT_UI.refreshRoomList(ChatRoomType.DM);
+        CHAT_UI.dismissLoadingIndicator();
+      }
+    }
+  });
+};
+
+var updateUserSelectionLength = function () {
+  const userSelectionLength = $("#userSelectionLength");
+  if (CHAT.globalSelectedUserList.length > 0) {
+    userSelectionLength.text(CHAT.globalSelectedUserList.length);
+  } else {
+    userSelectionLength.text("");
+  }
+};
+
+var updateTopBar = function (isInvite) {
+  // Set Title
+  let memberSelectTitle = getLocalizedString("groupSearch");
+
+  $("#pills-group-tab").tab("show");
+
+  const titleRoomName = $(".titleRoomName");
+  const userSelectionConfirmButton = $("#userSelectionConfirmBtn");
+
+  titleRoomName.text(memberSelectTitle);
+  if (isInvite) {
+    $("#newRoomName, .roomListIcon, .chatRoomIcon").hide();
+  } else {
+    $(".roomListIcon, .chatRoomIcon, #newRoomName").hide();
+  }
+  userSelectionConfirmButton.show();
+  userSelectionConfirmButton.off().on("click", function () {
+    CHAT_UI.setConfirmButtonEvent(isInvite);
+  });
+};

public_new/js/chat-websocket-refresh-user-list-in-group.js

+var bindOnRefreshUserListInGroup = function () {
+  // Update User List(Invite)
+  // #36170
+  socket.on(
+    SOCKET_KEY.REFRESH_USERLIST_INGROUP,
+    function (users, groupId, isInvite) {
+      $("#user_list").html("");
+
+      // Set Title
+      updateTitle();
+
+      addUserList(users);
+
+      // Rotate
+      handleRotateOnUserListInGroup();
+      setupBackButtonOnUserListInGroup(isInvite);
+      setupUserSelectionConfirmButton(isInvite);
+      updateUIOnUserListInGroup();
+    }
+  );
+};
+
+var updateTitle = function () {
+  let memberSelectTitle = getLocalizedString("userSearch");
+  $(".titleRoomName").text(memberSelectTitle);
+};
+
+var addUserList = function (users) {
+  users.forEach(function (user) {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+
+    user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath);
+
+    // クリックするとactive クラスを与え、チェック表示を出させる。
+    let obj = activateCheckUser(
+      user.loginId,
+      user.shopMemberId,
+      user.profileImagePath
+    );
+
+    let findObj = CHAT.globalSelectedUserList.find(function (selectedUser) {
+      return selectedUser.loginId == user.loginId;
+    });
+
+    if (findObj) {
+      $(obj).find(".userCheckBox").toggleClass("active");
+    }
+
+    $("#user_list").append(obj);
+  });
+};
+
+var renderUser = function (template, userID, profileImagePath, userName) {
+  return Mustache.render(template, {
+    id: userID,
+    profileImage: profileImagePath,
+    name: userName,
+  });
+};
+
+var activateCheckUser = function (loginID, shopMemberID, profileImagePath) {
+  const template = $("#user-template").html();
+  let html = renderUser(template, shopMemberID, profileImagePath, loginID);
+
+  return $(jQuery.parseHTML(html)).on("click", function () {
+    if ($(this).find(".userCheckBox.active").length > 0) {
+      // remove
+      CHAT.globalSelectedUserList = filterRemovedUser(loginID);
+    } else {
+      // add
+      addSelectedUser(loginID, shopMemberID, profileImagePath);
+    }
+    $(this).find(".userCheckBox").toggleClass("active");
+    updateUserSelectionLength();
+  });
+};
+
+var filterRemovedUser = function (userID) {
+  return CHAT.globalSelectedUserList.filter(function (element) {
+    return userID != element.loginId;
+  });
+};
+
+var addSelectedUser = function (loginID, shopMemberID, profileImagePath) {
+  CHAT.globalSelectedUserList.push({
+    loginId: loginID,
+    shopMemberId: shopMemberID,
+    profileImagePath: profileImagePath,
+  });
+};
+
+var handleRotateOnUserListInGroup = function () {
+  if (CHAT_UI.isLandscapeMode()) {
+    $(".user_list").addClass("col-6").removeClass("col-12");
+    $(".squareBoxContent span").addClass("landscape_span");
+  }
+};
+
+var setupBackButtonOnUserListInGroup = function (isInvite) {
+  const backButton = $("#backButton");
+  backButton.off().on("click", function () {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+    socket.emit("getGroupList", isInvite);
+  });
+  backButton.show();
+};
+
+var setupUserSelectionConfirmButton = function (isInvite) {
+  const userSelectionConfirmButton = $("#userSelectionConfirmBtn");
+  userSelectionConfirmButton.off().on("click", function () {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+    CHAT_UI.setConfirmButtonEvent(isInvite);
+  });
+  userSelectionConfirmButton.show();
+};
+
+var updateUIOnUserListInGroup = function () {
+  $(".roomListIcon, .chatRoomIcon").hide();
+  $(".userCheckBox").show();
+  $("#pills-user-tab").tab("show");
+};

public_new/js/constant.js

@@ -97,3 +97,16 @@ const TemplateURL = {
   ADD_USER_GROUP_PATH_IN_COLLABORATION:
   ADD_USER_GROUP_PATH_IN_COLLABORATION:
     "./template/template_add_user_group_path_in_collaboration.html",
     "./template/template_add_user_group_path_in_collaboration.html",
 };
 };
+
+const SOCKET_KEY = {
+  CONNECT: "connect",
+  DISCONNECT: "disconnect",
+  CONNECT_ERROR: "connect_error",
+  NEW_MESSAGE: "newMessage",
+  NEW_NOTIFICATION: "newNotification",
+  REFRESH_GROUPLIST: "refreshGroupList",
+  REFRESH_USERLIST_INGROUP: "refreshUserListInGroup",
+  SHOW_SERVER_ERROR: "showServerError",
+  RETRY_JOIN_PROCESS: "retryJoinProcess",
+  JOIN: "join"
+};