Merge branch 'features/1.3.0_chat' into 'features/1.3.0'

Features/1.3.0 chat

See merge request !44

ABVJE_BL/src/jp/agentec/abook/abv/bl/acms/client/json/ChatPushDataJSON.java

 package jp.agentec.abook.abv.bl.acms.client.json;
 
-import com.sun.org.apache.bcel.internal.generic.PUSH;
-
 import jp.agentec.abook.abv.bl.acms.client.AcmsClient;
 import jp.agentec.abook.abv.bl.common.exception.AcmsException;
 import jp.agentec.abook.abv.bl.common.exception.JSONValidationException;

ABVJE_Launcher_Android/assets/chat/public/js/chat.js

-const SERVER_URL = "http://192.168.1.22:3000"
+const SERVER_URL = CHAT_SERVER_URL + ':' + CHAT_SERVER_PORT;
 const socket = io(SERVER_URL);
 
 // 招待するメンバーを保存する変数
@@ -84,12 +84,12 @@ function isLandscapeMode(){
   return $(this).width() > $(this).height()
 }
 
-//userProfileImagePathが使えるpathかをcheckしてpathをreturn
-function profileImgPathValidCheck(path) {
-  if(path == undefined || path.includes('acms/images/') == false) {
+//userProfileImagePathが使えるイメージの拡張子をcheckしてpathをreturn
+function profileImgPathValidCheck(path, checkProfileExist) {
+  if (checkProfileExist == 1 && path.length > 0) {
     path = './images/user-profile.png'
   }
-  return path
+  return path;
 }
 
 window.onload = function(){
@@ -228,14 +228,17 @@ socket.on('refreshRoomList', function(rooms, activeRoomId = null){
         });
       }
     });
-
-    jQuery('.roomListIcon').show()
-    jQuery('#createChatRoom').show()
-
     // チャットルームリストに追加する
     jQuery('#room_list').append(obj);
   });
 
+  if(rooms.length > 0){
+    jQuery('.roomListIcon').show()
+  } else {
+    jQuery('.roomListIcon').hide()
+  }
+  jQuery('#createChatRoom').show()
+
   // Rotate
   if(isLandscapeMode()) {
     $(".chat_list").removeClass("col-12").addClass("col-6");
@@ -363,7 +366,7 @@ socket.on('newMessage', function (message){
   }
   let messageTime = formatDate(message.createdAt);
   //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
-  message.profileImagePath = profileImgPathValidCheck(message.profileImagePath)
+  message.profileImagePath = profileImgPathValidCheck(message.profileImagePath, message.checkProfileExist)
 
   try {
     message.text = decodeURIComponent(message.text)
@@ -420,7 +423,7 @@ socket.on('loadMessages', function(messages, shopMemberId){
     let messageTime = formatDate(message.time.time);
 
     //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
-    message.profileImagePath = profileImgPathValidCheck(message.profileImagePath)
+    message.profileImagePath = profileImgPathValidCheck(message.profileImagePath, message.checkProfileExist)
 
     try {
       message.message = decodeURIComponent(message.message)
@@ -490,42 +493,152 @@ jQuery('#image-form').on('submit', function(e){
     jQuery('.loader').addClass('active');
     showLoadingIndicator();
     var fd = new FormData($(this)[0]);
-    // ファイルアップロード
-    jQuery.ajax({
-      async: true,
-      url:  SERVER_URL+"/upload",
-      type: "post",
-      data: fd,
-      contentType: false,
-      processData: false
-    }).done(function( res ) {
-      let imgPath = SERVER_URL + res.path;
-      let downloadPath = SERVER_URL + '/download' + res.path;
-      // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
-      const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':res.fileName});
-      const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
-      const downloadIcon = jQuery('<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;
+
+    //画像の大きさが500pixelより大きかったら、thumbnailを生成
+    createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
+      if(resizeFile && thumbnailCreated) {
+        //ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
+        fd.append('thumb', resizeFile)
       }
 
-      socket.emit('createMessage', {
-        text: encodedText
-      }, 1);
-      jQuery('.overlay').removeClass('active undismissable');
-      jQuery('.loader').removeClass('active');
-      dismissLoadingIndicator();
-    });
+      // イメージをアップロード
+      uploadImage(fd)
+
+    })
+
+//    // ファイルアップロード
+//    jQuery.ajax({
+//      async: true,
+//      url:  SERVER_URL+"/upload",
+//      type: "post",
+//      data: fd,
+//      contentType: false,
+//      processData: false
+//    }).done(function( res ) {
+//      let imgPath = SERVER_URL + res.path;
+//      let downloadPath = SERVER_URL + '/download' + res.path;
+//      // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
+//      const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':res.fileName});
+//      const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
+//      const downloadIcon = jQuery('<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;
+//      }
+//
+//      socket.emit('createMessage', {
+//        text: encodedText
+//      }, 1);
+//      jQuery('.overlay').removeClass('active undismissable');
+//      jQuery('.loader').removeClass('active');
+//      dismissLoadingIndicator();
+//    });
   }
 });
 
+// Ajaxでイメージをアップロードする
+function uploadImage(formData) {
+  jQuery.ajax({
+    async: true,
+    url:  SERVER_URL+"/upload",
+    type: "post",
+    data: formData,
+    contentType: false,
+    processData: false
+  }).done(function( res ){
+    //8
+    var imgPath = SERVER_URL + res.path;
+    var imageName = res.fileName
+
+    if(res.thumbnailPath && res.thumbnailPath.length > 0) {
+      imgPath = SERVER_URL + res.thumbnailPath;
+      imageName = 'thumb_' + imageName;
+    }
+
+    let downloadPath = SERVER_URL + '/download' + res.path;
+    // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
+    const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
+    const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
+    const downloadIcon = jQuery('<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;
+    }
+
+    socket.emit('createMessage', {
+      text: encodedText
+     }, 1);
+
+    jQuery('.overlay').removeClass('active undismissable');
+    jQuery('.loader').removeClass('active');
+    dismissLoadingIndicator();
+  })
+}
+
+// Thumbnailのファイルを生成する。
+function createThumbnailAndUpload(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);
+}
+
 /* --------------------------------------------------- */
 /* Nav Bar Functions                                   */
 /* --------------------------------------------------- */
@@ -747,11 +860,11 @@ socket.on('refreshUserListInGroup', function(users, isInvite){
     //loadingIndicatorを表示
     showLoadingIndicator();
 
-    user.profileimagepath = profileImgPathValidCheck(user.profileimagepath);
+    user.profileImagePath = profileImgPathValidCheck(user.profileImagePath, user.checkProfileExist);
 
     let html = Mustache.render(template, {
       id: user.shopMemberId,
-      profileImage: user.profileimagepath,
+      profileImage: user.profileImagePath,
       name: user.loginId
     });
 
@@ -764,7 +877,7 @@ socket.on('refreshUserListInGroup', function(users, isInvite){
         })
       } else {
         //add
-        globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileimagepath});
+        globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
       }
       jQuery(this).find('.userCheckBox').toggleClass('active');
 
@@ -878,7 +991,7 @@ jQuery('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
       dismissLoadingIndicator();
       break;
     case '#pills-chatlist':
-      jQuery('.roomListIcon, .titleRoomName, #backButton').show();
+      jQuery('.titleRoomName, #backButton').show();
       jQuery('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
 
       // set Title

ABVJE_Launcher_Android/assets/chat/public/js/config.js

+var CHAT_SERVER_URL = "Node Server Address";
+var CHAT_SERVER_PORT = 3000;

ABVJE_Launcher_Android/assets/chat/public/newstart.html

@@ -351,10 +351,7 @@
 <script src="./js/language_ko.js" charset="UTF-8"></script>
 <script src="./js/language_ja.js" charset="UTF-8"></script>
 <script src="./js/language_en.js" charset="UTF-8"></script>
+<script src="./js/config.js"></script>
 <script src="./js/chat.js"></script>
-<script>
-  document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
-  ':35729/livereload.js?snipver=1"></' + 'script>')
-</script> 
 </body>
 </html>
\ No newline at end of file