CHATルームUI

public_new/css/chat.css

@@ -675,6 +675,17 @@ input[name="tab_item"] {
   background: #5B666F;
 }
 
+.message_input_send {
+  margin: auto 10px;
+  text-align: center;
+  height: 45px;
+  width: 90px;
+  background: #0070CA;
+  color: #fff;
+  border: none;
+  font-size: 18px;
+}
+
 /**************************** modal *************************/
 /* メニューモーダル */
 .menu_modal .modal-body ul {

public_new/js/chat-db.js

@@ -105,3 +105,12 @@ CHAT_DB.getGroupByName = function(groupName) {
     	return JSON.parse(android.getGroupByName(groupName));
     }
 };
+
+CHAT_DB.getUsersInRoom = function(roomId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getUsersInRoom(roomId));
+    }
+}

public_new/js/chat-ui.js

@@ -1100,32 +1100,78 @@ CHAT_UI.refreshRoomList = function(roomType) {
 };
 
 CHAT_UI.joinRoom = function(roomId,roomName) {
+    //native側に入場対象のroomId,roomNameを保存。(ルーム詳細画面初期化の時に使用。)
+    android.joinRoom(roomId,roomName);
+};
+
+CHAT_UI.loadMessages = function(roomId, roomName) {
+    console.log('loadMessages] START--');
+    console.log(CHAT.globalLoginParameter);
     if (IS_ONLINE == 'true') {
+        CHAT_SOCKET.connectSocket();
+        console.log('loadMessages] isOnline--');
         android.updateMessages(roomId);
         socket.emit('joinRoom', roomId, roomName, function() {
+            console.log('loadMessages] Seccess Emit Soket (joinRoom)');
         });
     }
     var messages = CHAT_DB.getMessages(roomId);
-    CHAT_UI.loadMessages(messages, roomId, roomName)
-};
-
-CHAT_UI.loadMessages = function(messages, roomId, roomName) {
+    var usersInRoom = CHAT_DB.getUsersInRoom(roomId);
+    console.log(usersInRoom);
 
-    $('#messages').html('');
-    $('.titleRoomName').text(roomName).data('roomName', roomName);
-    $('#pills-chat-tab').tab('show');
-    $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
+    $('#roomTitle').text(roomName).data('roomName', roomName);
     let jQueryMessages = $('#messages');
     // スクロールの変化を防ぐため以前画面の高さを保存する
     let beforeHeight = jQueryMessages.prop('scrollHeight');
     // メッセージ文字列の生成
     let workVal = "";
+    var userTemplate;
+    $.get({ url: "./template/template_user_list.html", async: false }
+      , function(text) {
+        userTemplate = text;
+    });
+    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;
+    });
+    var topUserListTemplate;
+    $.get({ url: "./template/template_chatroom_user_list.html", async: false }
+      , function(text) {
+        topUserListTemplate = text;
+    });
+
+    usersInRoom.forEach(function(user) {
+        user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
+    });
+    let html = Mustache.render(topUserListTemplate, {
+         userList: usersInRoom
+    });
+    let obj = jQuery.parseHTML(html);
+    $('#user_list').append(obj);
+
     messages.forEach(function(message) {
-            let template = $('#message-template').html();
-            if (message.selfFlg == 1) {
-                 template = $('#message-template-me').html();
+        console.log(message);
+
+        let template = userMessageTemplate;
+        if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
+             template = myMessageTemplate;
+        }
+        if (message.messageType == messageType.SYSTEM) {
+            template = systemMessageTemplate;
         }
         let messageTime = CHAT_UTIL.formatDate(message.insertDate);
+        // ユーザの様式を読み込む
 
         if (message.profileUrl) {
             message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
@@ -1169,8 +1215,6 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
     // ユーザ削除ボタン表示しない
     $("#userSelectionDeleteBtn").hide();
 
-        CHAT_UI.dismissLoadingIndicator();// add some...
-
     // チャットに遷移する
     $('#pills-chat-tab').tab('show');
 };

public_new/js/chat-websocket.js

@@ -4,25 +4,16 @@ var socket;
 var CHAT_SOCKET = {};
 
 CHAT_SOCKET.connectSocket = function () {
-    CHAT_UI.dismissLoadingIndicator();
     if (IS_ONLINE == 'true') {
         socket = io(CHAT_SERVER_URL);
+        console.log(socket);
         setSocketAction();
-        android.updateRoomList();
-        CHAT_UI.refreshRoomList(chatRoomType.DM);
-        CHAT_UI.dismissLoadingIndicator();
-        $('#createChatRoom').show();
     } else {
         //オフラインの場合、DBからルーム一覧を表示。
         if (CHAT_UTIL.isIOS()) {
              //TODO IOSの場合
         } else if (CHAT_UTIL.isAndroid()) {
-            //$('.overlay').removeClass('active undismissable');
-            // loadingIndicatorを表示
-            CHAT_UI.showLoadingIndicator();
-            CHAT_UI.refreshRoomList(chatRoomType.DM);
-            CHAT_UI.dismissLoadingIndicator();
-            $('#createChatRoom').show();
+
         }
     }
 };
@@ -280,7 +271,10 @@ function setSocketAction () {
 
     // Update User List In Room
     // サイドバーのユーザーリストアップデート。
-    socket.on('updateUserList', function(users, onlineUsers) {
+/*    socket.on('updateUserList', function(users, onlineUsers) {
+        console.log(users);
+        console.log(onlineUsers);
+
         if (users.length > 0) {
             $('#users').removeData();
             $('#users').data(users);
@@ -318,7 +312,7 @@ function setSocketAction () {
             ul.append(li);
         });
     $('#users').html(ul);
-    });
+    });*/
 
     // Update Group List(Invite)
     socket.on('refreshGroupList', function(groups, isInvite) {

public_new/js/chat.js

@@ -215,13 +215,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
 }
 
 // 該当チャットルームに参加するためログイン情報をサーバに渡す
-getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) {
+getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode, shopMemberId) {
     var loginParam = new Object()
     loginParam.sid = sid;
     loginParam.loginId = loginId;
     loginParam.shopName = shopName;
     loginParam.roomId = roomId;
     loginParam.roomName = roomName;
+    loginParam.shopMemberId = shopMemberId;
 
     CHAT.globalLoginParameter = loginParam;
 

public_new/js/common.js

@@ -50,4 +50,16 @@ $(function() {
     $('.overlay_src_msg').empty();
   });
 
+  $('.message_input_form').click(function(){
+    console.log('ONCLICK---');
+    $('.message_input_send').removeClass('none');
+    $('.attach_file').addClass('none');
+  });
+
+ $('.message_input_form').focusout(function(){
+    console.log('OUTFOCUS---');
+    $('.message_input_send').addClass('none');
+    $('.attach_file').removeClass('none');
+  });
+
 });

public_new/template/template_chatroom_user_list.html

+{{#userList}}
+<div class="user_item">
+  <a href="javascript:return false;" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
+    <div class="d-flex flex-column">
+      <div class="img_wrap">
+        <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
+      </div>
+      <span>{{shopMemberName}}</span>
+    </div>
+  </a>
+</div>
+{{/userList}}
\ No newline at end of file

public_new/template/template_close_collaboration_message.html

+<!-- 通話 -->
+<div class="collabo_area_container">
+  <!-- 時刻 -->
+  <div class="collabo_date text-right">
+    <span>12:23 PM</span>
+  </div>
+  <div class="collabo_area disable">
+    <div class="collabo_desc">
+      <div class="collabo_room_name d-flex flex-row">
+        <span>ルーム名ルーム名</span>
+        <span>の通話</span>
+      </div>
+      <div class="d-flex flex-row justify-content-between">
+        <div class="collabo_user_list d-flex flex-row">
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="num"><span>10</span></div>
+        </div>
+        <div class="collabo_time">
+          <span>1:10:20</span>
+        </div>
+      </div>
+      <div class="collabo_btn">
+        <button type="button" name="button">
+          <img src="icon/icon_profile_phone.png" alt="通話">
+          <span>終了しました</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

public_new/template/template_my_message.html

+<div class="room_right">
+  <div class="text">{{from}}</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

public_new/template/template_open_collaboration_message.html

+<!-- 通話 -->
+<div class="collabo_area_container">
+  <!-- 時刻 -->
+  <div class="collabo_date text-right">
+    <span>12:23 PM</span>
+  </div>
+  <div class="collabo_area">
+    <div class="collabo_desc">
+      <div class="collabo_room_name d-flex flex-row">
+        <span>ルーム名ルーム名ルーム名ルーム名</span>
+        <span>の通話</span>
+      </div>
+      <div class="d-flex flex-row justify-content-between">
+        <div class="collabo_user_list d-flex flex-row">
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
+          <div class="num"><span>10</span></div>
+        </div>
+        <div class="collabo_time">
+          <span>1:10:20</span>
+        </div>
+      </div>
+      <div class="collabo_btn">
+        <button type="button" name="button">
+          <img src="icon/icon_profile_phone.png" alt="通話">
+          <span>参加する</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

public_new/template/template_room_list.html

 <li class="d-flex align-items-center">
-  <a href="chat_room.html" class="w-100">
+  <a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
     <div class="chat_item d-flex flex-row align-items-center">
       <div class="chat_item_l">
         <div class="thubnail{{thumbnailCount}} thubnail">

public_new/template/template_system_message.html

+<div class="sys_msg text-center">2021/03/04</div>
\ No newline at end of file

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>
+  </figure>
+  <div class="room_left-text">
+    <div class="name">{{from}}</div>
+    <div class="text">{{text}}</div>
+  </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