チャット画面UI

bb64ab0d · Lee Munkyeong · ed4601f6 · bb64ab0d · bb64ab0d · bb64ab0d
Commit bb64ab0d authored Mar 25, 2021 by Lee Munkyeong
8 changed files
--- a/public_new/chat.html
+++ b/public_new/chat.html
--- a/public_new/contact.html
+++ b/public_new/contact.html
@@ -22,7 +22,7 @@
      <div class="col-4 pr-0">
        <div class="nav-item">
          <div class="nav_prev">
-            <a href="#"><span>ホーム</span></a>
+            <a href="#" class="home_btn"><span>ホーム</span></a>
          </div>
        </div>
      </div>
@@ -55,7 +55,7 @@
            <div class="chat_item d-flex flex-row align-items-center">
              <div class="chat_item_l">
                <div class="thubnail">
-                  <div class="img_wrap"><img id="myImg" src="img/noImage.png" alt="サムネイル画像" /></div>
+                  <div class="img_wrap"><img id="myImg" src="img/noImage.png" onError="this.src='./img/noImage.png'" /></div>
                </div>
              </div>
              <div class="chat_item_m px-0">

--- a/public_new/css/chat.css
+++ b/public_new/css/chat.css
@@ -42,6 +42,11 @@ input[name="tab_item"] {
  display: block;
 }
+#tabGroup:checked ~ #tab1_content,
+#tabDM:checked ~ #tab2_content{
+  display: block;
+}
 .tabs input:checked + .tab_item {
  background-color: #0070CA;
  color: #fff;
@@ -127,7 +132,7 @@ input[name="tab_item"] {
 }
 .chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
    width: 25px;
-    height: 25px;
+    height: 30px;
 }
 .chat_item_l .thubnail3 .img_wrap:nth-child(3) {
    width: 25px;

--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
@@ -1003,6 +1003,12 @@ CHAT_UI.refreshContactScreen = function() {
 }
 CHAT_UI.refreshRoomList = function(roomType) {
+    if (roomType == chatRoomType.DM) {
+        $('#tabDM').prop('checked', true);
+    } else {
+        $('#tabGroup').prop('checked', true);
+    }
    if (IS_ONLINE == 'true') {
        android.updateRoomList();
    }
@@ -1011,18 +1017,22 @@ CHAT_UI.refreshRoomList = function(roomType) {
    activeRoomId = null;
    console.log(rooms);
    // #36146に対応
-   $('.chat_list').empty();
+   $('#groupChatList').empty();
+   $('#dmChatList').empty();
    let roomListTitle = getLocalizedString("roomListTitle");
    $('#chatTitle').text(roomListTitle);
    if (rooms.length === 0) {
        console.log('noRoom')
        // 検索結果がない場合のメッセージを追加
-        if (!keywordSearchMode) {
        let emptyListString = getLocalizedString("roomListEmptyString")
-            $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
+        switch(roomType) {
-        } else {
+		    case chatRoomType.GROUP:
-            let emptyListString = getLocalizedString("searchRoomListEmptyString")
+			    $('#groupChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
-            $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
+			    break;
+		    case chatRoomType.DM:
+		        $('#dmChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
+			    break;
+		    default:
 	    }
    }
@@ -1031,6 +1041,7 @@ CHAT_UI.refreshRoomList = function(roomType) {
      , function(text) {
        template = text;
    });
+    console.log(rooms);
    rooms.forEach(function(room) {
        room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
        if (room.message) {
@@ -1042,14 +1053,25 @@ CHAT_UI.refreshRoomList = function(roomType) {
        //TODO 協業の場合処理追加必要
        if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
        if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
+        var attendUserName = [];
+        room.attendUsers.forEach(function(user) {
+            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+            attendUserName.push(user.shopMemberName);
+        });
+        var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
+        if (room.chatRoomName == "") {
+            room.chatRoomName = attendUserName.join(', ');
+        }
        let html = Mustache.render(template, {
+            thumbnailCount: thumbnailCount,
            roomName: room.chatRoomName,
            roomId: room.chatRoomId,
            profileImage: room.profileImagePath,
            lastMessage: displayMsg ,
            time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
            unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
-            userCnt: room.userCount
+            userCnt: room.attendUsers.length + 1,
+            attendUsers: room.attendUsers
        });
        // Click event
        let obj = $(jQuery.parseHTML(html)).on('click', function() {
@@ -1058,13 +1080,15 @@ CHAT_UI.refreshRoomList = function(roomType) {
            CHAT_UI.joinRoom(roomId,roomName);*/
            //TODO ルームに入る処理追加必要
        });
+        console.log(obj);
        // ルームグループごとに追加。
        switch(roomType) {
 		    case chatRoomType.GROUP:
+		        console.log(roomType);
 			    $('#groupChatList').append(obj);
 			    break;
 		    case chatRoomType.DM:
+		        console.log(roomType);
 			    $('#dmChatList').append(obj);
 			    break;
 		    default:
@@ -1155,21 +1179,20 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
 };
-$('#dmBtn').on('click', function(e) {
+$('#tabDM').on('click', function(e) {
    CHAT_UI.refreshRoomList(chatRoomType.DM);
 });
-$('#groupBtn').on('click', function(e) {
+$('#tabGroup').on('click', function(e) {
    CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
-$('#myGroupBtn').on('click', function(e) {
+$('#tabAllGroup').on('click', function(e) {
-    $('#myGroupArea').show();
+    CHAT_UI.refreshAllGroupSearch('0');
-    $('#allGroupArea').hide();
 });
-$('#tabAllGroup').on('click', function(e) {
+$('#tabMyGroup').on('click', function(e) {
-    CHAT_UI.refesshAllGroupSearch('0')
+    CHAT_UI.refreshContactScreen();
 });
 CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
@@ -1217,7 +1240,7 @@ CHAT_UI.insertFavoriteGroup = function(groupId) {
 };
 //全グループ検索画面表示。
-CHAT_UI.refesshAllGroupSearch = function(groupId) {
+CHAT_UI.refreshAllGroupSearch = function(groupId) {
    $('.cancel').addClass('none');
    $('.search_form input').removeClass('focus');
@@ -1246,12 +1269,12 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
    //上位グループ、トップグループ遷移ボタンのイベント追加。
    if (typeof result.parentGroupId !== 'undefined') {
        $('#parentGroupBtn').on('click', function() {
-            CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
+            CHAT_UI.refreshAllGroupSearch(result.parentGroupId);
        });
    }
    if (typeof result.rootGroupId !== 'undefined') {
        $('#rootGroupBtn').on('click', function() {
-            CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
+            CHAT_UI.refreshAllGroupSearch(result.rootGroupId);
        });
    }

--- a/public_new/js/common.js
+++ b/public_new/js/common.js
 // アコーディオン
-$('.category').on('click',function () {
+$('.category').on('click', function() {
  $(this).toggleClass("open");
  $(this).next().slideToggle();
 });
+$('.home_btn').on('click', function() {
+  android.goHome();
+});
 $(function() {
  var h = $(window).height(); //画面の高さを取得

--- a/public_new/template/template_group_list.html
+++ b/public_new/template/template_group_list.html
 <li class="d-flex align-items-center">
-  <a href="#" class="w-100" onclick="CHAT_UI.refesshAllGroupSearch({{id}});">
+  <a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupSearch({{id}});">
    <div class="chat_item d-flex flex-row align-items-center">
      <div class="chat_item_l">
        <div class="thubnail">

--- a/public_new/template/template_group_path.html
+++ b/public_new/template/template_group_path.html
-<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refesshAllGroupSearch({{id}});"><span>{{name}}</span></a>
+<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupSearch({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
--- a/public_new/template/template_room_list.html
+++ b/public_new/template/template_room_list.html
@@ -2,11 +2,13 @@
  <a href="chat_room.html" class="w-100">
    <div class="chat_item d-flex flex-row align-items-center">
      <div class="chat_item_l">
-        <div class="thubnail4 thubnail">
+        <div class="thubnail{{thumbnailCount}} thubnail">
-          <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+          {{#attendUsers}}
-          <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+          <div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
-          <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+          {{/attendUsers}}
-          <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
+          {{^attendUsers}}
+          <div class="img_wrap"><img src='./img/noImage.png'/></div>
+          {{/attendUsers}}
        </div>
      </div>
      <div class="chat_item_m px-0">
@@ -15,9 +17,7 @@
            <div class="chat_item_t ">
              <span class="chat_item_ttl">{{roomName}}</span>
            </div>
            <span class="chat_item_num">({{userCnt}})</span>
          </div>
          <div class="chat_item_desc">
            {{lastMessage}}