UI作業。

public_new/chat_room.html

@@ -52,42 +52,12 @@
 
     </div>
 
+
     <!-- フィルター -->
     <div id="filter" class="user_list filter d-flex flex-row none">
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
-      <div class="user_item">
-        <div class="d-flex flex-column">
-          <div class="img_wrap">
-            <img src="img/noImage.png" alt="プロフィール画像">
-          </div>
-          <span>名前名前名前名前名前名前名前名前</span>
-        </div>
-      </div>
     </div>
 
+
     <div class="chat_list">
       <ul class="overlay_src_msg">
       </ul>

public_new/js/chat-db.js

@@ -217,3 +217,11 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
         // TODO
     }
 };
+
+CHAT_DB.searchMessages = function(keyword, userList) {
+    if (CHAT_UTIL.isIOS()) {
+        // TODO
+    } else if (CHAT_UTIL.isAndroid()) {
+        return JSON.parse(android.searchMessages(keyword, userList));
+    }
+};
\ No newline at end of file

public_new/js/chat-ui.js

@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) {
     messageTextBox.val('');
 
     if (message.length > 0) {
-        console.log('createMessage');
-        console.log(socket);
         socket.emit(
-            //'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
-            'createMessage', { text: message }
+            'createMessage', { text: message + messageSeperator + messageType.TEXT }
             , 0
         );
     }
@@ -1143,6 +1140,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
       , function(text) {
         topUserListTemplate = text;
     });
+    var filterUserListTemplate;
+    $.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
+      , function(text) {
+        filterUserListTemplate = text;
+    });
+
 
     usersInRoom.forEach(function(user) {
         user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
@@ -1152,6 +1155,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
     });
     let obj = jQuery.parseHTML(html);
     $('#user_list').append(obj);
+
+    let filterHtml = Mustache.render(filterUserListTemplate, {
+         userList: usersInRoom
+    });
+    let filterObj = jQuery.parseHTML(filterHtml);
+    $('#filter').append(filterObj);
+
+
     messages.forEach(function(message) {
         let template = userMessageTemplate;
         if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {

public_new/js/chat-websocket.js

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

public_new/js/constant.js

@@ -30,4 +30,6 @@ const chatRoomType = {
 const nameCardAreaId = {
     MY : "myNamecard",
     USER : "userNamecard"
-}
\ No newline at end of file
+}
+
+const messageSeperator = "<::split>";
\ No newline at end of file

public_new/template/template_chatroom_user_filter_list.html

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