Chat UI

5cb24459 · Lee Munkyeong · 13a9186f · 5cb24459 · 5cb24459 · 5cb24459
Commit 5cb24459 authored Mar 30, 2021 by Lee Munkyeong
10 changed files
--- a/public_new/chat_room.html
+++ b/public_new/chat_room.html
@@ -104,26 +104,25 @@
  <footer class="chat_room_footer">
    <!-- フッター上 -->
    <div class="footer-wrap d-flex flex-column">
+      <div>
+        <div class="msg_notification" id="messageNotification" style="text-align:center;display: none;">
+        </div>
+      </div>
      <div class="footer_content_t">
        <div class="d-flex flex-row h-100">
          <div class="footer_item attach_file">
-            <a href="#">
+              <img src="icon/icon_camera.png" alt="写真アイコン" id="fileUploadButton">
-              <img src="icon/icon_camera.png" alt="写真アイコン">
+                <form id="image-form">
-            </a>
+                  <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
+                </form>
          </div>
          <div class="footer_item attach_file">
            <a href="#">
              <img src="icon/icon_videocam.png" alt="動画アイコン">
            </a>
          </div>
-          <input type="text" name="message" class="message_input_form" placeholder="メッセージを入力してください">
+          <input type="text" name="message" class="message_input_form" id="messageInput" placeholder="メッセージを入力してください">
-          <button type="button" name="button" class="message_input_send none" style="text-align: center;
+          <button type="button" name="button" class="message_input_send none" id="messageSend" onclick="CHAT_UI.sendMessage(this);">送信</button>
-    height: 45px;
-    width: 100px;
-    background: #0070CA;
-    color: #fff;
-    border: none;
-    font-size: 18px;">送信</button>
        </div>
      </div>
      <!-- フッター下 -->

--- a/public_new/contact.html
+++ b/public_new/contact.html
@@ -195,7 +195,11 @@
  <div id="loadingArea"></div>
  <div id="myProfileModal"></div>
  <div id="userProfileModal"></div>
+  <div id="loader-bg">
+    <div id="loader">
+      <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
+    </div>
+  </div>
  <script src="./js/libs/jquery-3.3.1.min.js"></script>
  <script src="./js/libs/moment.js"></script>
  <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
@@ -205,6 +209,7 @@
  <script src="./js/libs/jquery.mark.min.js"></script>
  <script src="./js/contact.js"></script>
  <script src="./js/common.js"></script>
+  <script src="./js/loading.js"></script>
  <script src="./js/language.js"></script>
  <script src="./js/language_ko.js" charset="UTF-8"></script>
  <script src="./js/language_ja.js" charset="UTF-8"></script>
@@ -225,7 +230,6 @@
    let PLATFORM = '';
    let IS_MOBILE = true;
    let IS_ONLINE = false;
-    $("#loadingArea").load("./loading.html");
    android.getLoginParameter();
    android.getGlobalParameter();

--- a/public_new/css/chat.css
+++ b/public_new/css/chat.css
@@ -19,6 +19,9 @@
  font-weight: bold;
  transition: all 0.2s ease;
 }
+.msg_notification {
+   display: none;
+ }
 .tab_item:hover {
  opacity: 0.75;
 }
@@ -676,6 +679,7 @@ input[name="tab_item"] {
 }
 .message_input_send {
+  border-radius: 8px;
  margin: auto 10px;
  text-align: center;
  height: 45px;

--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
@@ -191,32 +191,33 @@ CHAT_UI.setOrientation = function(isLandscapeMode) {
 	}
 }
-//メッセージ送信
+CHAT_UI.sendMessage = function(e) {
-$('#message-form').on('keypress', function(event) {
+    console.log('messageSend');
-    if (event.which == 13) {
+    const messageTextBox = $('#messageInput');
-        // Enterキーの処理
-        $('#message-send-btn').click();
-    }
-});
-// 送信ボタンの処理
-$('#message-send-btn').on('click', function(e) {
-    e.preventDefault();
-    const messageTextBox = $('#message-form');
    const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
    messageTextBox.val('');
    if (message.length > 0) {
+        console.log(message);
        socket.emit(
+            //'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
            'createMessage', { text: message }
            , 0
        );
    }
-    $('#message-form').focus();
+    $('.message_input_group').focus();
+}
+//メッセージ送信
+$('#messageInput').on('keypress', function(event) {
+    if (event.which == 13) {
+        // Enterキーの処理
+        $('#messageSend').click();
+    }
 });
 // 写真アップロード
 $('#fileUploadButton').on('click', function() {
+    console.log('onclickPhoto');
    $('#imageInputTag').click();
 });
@@ -226,6 +227,7 @@ $('#fileUploadButton2').on('click', function() {
 });
 $('#imageInputTag').on('change', function() {
+    console.log('onchangePhoto');
    $('#image-form').submit();
 });
@@ -234,6 +236,7 @@ $('#imageInputTag2').on('change', function() {
 });
 $('#image-form').on('submit', function(e) {
+    console.log('onSubmitPhoto');
    e.preventDefault();
    const imageInputTag = $('#imageInputTag');
    const file = imageInputTag.prop('files')[0];
@@ -545,9 +548,12 @@ $('#pills-confirm-tab').on('shown.bs.tab', function(e) {
 });
 CHAT_UI.scrollToBottom = function() {
-    const messages = $('#messages');
+    const messages = $('.room_contents');
    const scrollHeight = messages.prop('scrollHeight');
-    messages.scrollTop(scrollHeight);
+    //messages.scrollTop(scrollHeight);
+    $('html, body').animate({
+        scrollTop: scrollHeight
+    }, 500);
 };
 CHAT_UI.scrollToLastMarkedUnseen = function(value) {
@@ -817,8 +823,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
    $("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
    $("#participants").text(getLocalizedString("participants"))
-    $("#fileUploadButton").text(getLocalizedString("photo"))
+    //$("#fileUploadButton").text(getLocalizedString("photo"))
-    $("#fileUploadButton2").text(getLocalizedString("video"))
+    //$("#fileUploadButton2").text(getLocalizedString("video"))
    $("#okayLabel").text(getLocalizedString("okayLabel"))
    $("#completeLabel").text(getLocalizedString("completeLabel"))
@@ -1111,6 +1117,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
        CHAT_SOCKET.connectSocket();
        console.log('loadMessages] isOnline--');
        android.updateMessages(roomId);
+        socket.emit('exitRoom',roomId);
        socket.emit('joinRoom', roomId, roomName, function() {
            console.log('loadMessages] Seccess Emit Soket (joinRoom)');
        });
@@ -1159,10 +1166,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
    });
    let obj = jQuery.parseHTML(html);
    $('#user_list').append(obj);
    messages.forEach(function(message) {
-        console.log(message);
        let template = userMessageTemplate;
        if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
             template = myMessageTemplate;
@@ -1174,21 +1178,23 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
        // ユーザの様式を読み込む
        if (message.profileUrl) {
-            message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
+            message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
        } else {
-            message.profileImagePath = CHAT.getProfileImgUrl("")
+            message.profileUrl = CHAT.getProfileImgUrl("")
        }
         // #36147
         message.message = message.message.toString();
         var replacePath = message.message;
-         replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
+         replacePath = replacePath.replaceAll('?fileName=','?sid='+CHAT.globalLoginParameter.sid+'&fileName=');
         message.message = replacePath;
+        /* if (message.message contain) {
+         }*/
         let html = Mustache.render(template, {
             text: message.message,
             from: message.loginId,
             shopMemberId: message.shopMemberId,
-             profileImage: message.profileImagePath,
+             profileImage: message.profileUrl,
             createdAtDay: messageTime.createdAtDay,
             createdAtTime: messageTime.createdAtTime
         });
@@ -1214,9 +1220,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
    // ユーザ削除ボタン表示しない
    $("#userSelectionDeleteBtn").hide();
+    CHAT_UI.scrollToBottom();
-    // チャットに遷移する
-    $('#pills-chat-tab').tab('show');
 };

--- a/public_new/js/chat-websocket.js
+++ b/public_new/js/chat-websocket.js
@@ -163,12 +163,30 @@ function setSocketAction () {
    // New Message
    // #36170
    socket.on('newMessage', function(message, roomId, roomName) {
-        let template = $('#message-template').html();
+        console.log('newMessage');
+        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
+        var userMessageTemplate;
+        $.get({ url: "./template/template_user_message.html", async: false }
+          , function(text) {
+            userMessageTemplate = text;
+        });
+        var myMessageTemplate;
+        $.get({ url: "./template/template_my_message.html", async: false }
+          , function(text) {
+            myMessageTemplate = text;
+        });
+        var systemMessageTemplate;
+        $.get({ url: "./template/template_system_message.html", async: false }
+          , function(text) {
+            systemMessageTemplate = text;
+        });
+        let template = userMessageTemplate;
        if (message.id === socket.id) {
            // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
-            template = $('#message-template-me').html();
+            template = myMessageTemplate;
        }
-        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
         message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
         try {
@@ -176,7 +194,9 @@ function setSocketAction () {
         } 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,
@@ -186,12 +206,13 @@ function setSocketAction () {
         });
         // イメージの場合、img tagを追加する
         html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
+         console.log(html);
         $('#messages').append(html);
         // 画像、動画の描画を待ってからスクロール
        setTimeout(function () {
            CHAT_UI.scrollToBottom();
-        }, 1500);
+        }, 300);
    });
    // Notification

--- a/public_new/js/chat.js
+++ b/public_new/js/chat.js
@@ -87,17 +87,22 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
 // Ajaxでイメージをアップロードする
 CHAT.uploadImage = function(formData) {
+    console.log('uploadImage');
    formData.append('roomId', CHAT.globalLoginParameter.roomId);
+    formData.append('sid', CHAT.globalLoginParameter.sid);
+    console.log(formData);
    jQuery.ajax({
        async: true,
-        url:    CMS_SERVER_URL+"/file/upload",
+        url:    CMS_SERVER_URL+"/chatapi/file/upload",
        type: "post",
        data: formData,
        contentType: false,
        processData: false
    }).done(function(res) {
        // 8
-        var imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+        console.log('DONE');
+        console.log(res);
+        var imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
        var imageName = res.fileName
        // uploadFileの判断
@@ -106,11 +111,10 @@ CHAT.uploadImage = function(formData) {
        // 画像の処理
        if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
            if (res.thumbnailPath && res.thumbnailPath.length > 0) {
-                imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+                imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
                imageName = res.thumbImageFileName;
            }
+            let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
-            let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
            // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
            const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
            const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
@@ -127,6 +131,7 @@ CHAT.uploadImage = function(formData) {
            }
            socket.emit('createMessage', {
+                //text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
                text: encodedText
            }, 1);
@@ -152,7 +157,7 @@ CHAT.uploadImage = function(formData) {
            }
            socket.emit('createMessage', {
-                text: encodedText
+                text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
            }, 1);
        }

--- a/public_new/js/common.js
+++ b/public_new/js/common.js
@@ -56,8 +56,13 @@ $(function() {
    $('.attach_file').addClass('none');
  });
- $('.message_input_form').focusout(function(){
+ $('.message_input_form').on('focusout',function(e){
    console.log('OUTFOCUS---');
+    console.log(e);
+    if($(e.relatedTarget).hasClass('message_input_send')){
+      CHAT_UI.sendMessage();
+    }
+    console.log(e.relatedTarget)
    $('.message_input_send').addClass('none');
    $('.attach_file').removeClass('none');
  });

--- a/public_new/template/template_my_message.html
+++ b/public_new/template/template_my_message.html
 <div class="room_right">
-  <div class="text">{{from}}</div>
+  <div class="text">{{text}}</div>
  <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
  <div class="read d-flex align-items-end"><span></span></div>
 </div>
\ No newline at end of file
--- a/public_new/template/template_user_message.html
+++ b/public_new/template/template_user_message.html
 <div class="room_left">
  <figure>
-    <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="img/noImage.png" alt="プロフィール画像"></a>
+    <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
  </figure>
  <div class="room_left-text">
    <div class="name">{{from}}</div>

--- a/public_new/template/template_user_name_card.html
+++ b/public_new/template/template_user_name_card.html
@@ -3,7 +3,7 @@
    <div class="modal-content">
      <div class="modal-header border-0">
        <div class="prifile_desc d-flex flex-row">
-          <img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
+          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
          <div class="prifile_name"><span>{{name}}</span></div>
        </div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -44,7 +44,7 @@
            <span>通話</span>
          </div>
        </button>
-        <button type="button" class="border-0 bg_blue">
+        <button type="button" class="border-0 bg_blue" onclick="CHAT_UI.startChat('{{shopMemberId}}','{{name}}');">
          <div class="d-flex flex-column">
            <div class="img_wrap">
              <img src="icon/icon_profile_chat.png" alt="チャット">