チャット詳細実装

8fc5ddaf · Lee Munkyeong · b994ba6e · 8fc5ddaf · 8fc5ddaf · 8fc5ddaf
Commit 8fc5ddaf authored Feb 18, 2021 by Lee Munkyeong
Hide whitespace changes
Inline Side-by-side

Showing with 153 additions and 81 deletions

public/css/chat.css
+23 -0

public/index.html
+8 -3

public/js/chat-db.js
+30 -2

public/js/chat-ui.js
+90 -75

public/js/chat-websocket.js
+2 -1

No files found.
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -680,3 +680,25 @@ a.article:hover {
 #errorEnd{
  margin-top: 15vh;
 }
+.collapsible {
+  height: 40px;
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+}
+.collapsible-active, .collapsible:hover {
+  background-color: #ccc;
+}
+.collapsible-content {
+  display: none;
+  overflow: hidden;
+  background-color: #f1f1f1;
+}
\ No newline at end of file
--- a/public/index.html
+++ b/public/index.html
@@ -236,10 +236,15 @@
        </div>
        <div id="my_info" class="inbox_user row">
        </div>
-        <div id="favorite_list" class="inbox_user row">
+        <div class="collapsible-content">
+          <div id="favorite_list" class="inbox_user row">
+          </div>
        </div>
-        <div id="my_group_list" class="inbox_user row">
+        <div class="collapsible-content">
+          <div id="my_group_list" class="inbox_user row">
+          </div>
        </div>
      </div>
    </div>
@@ -354,7 +359,7 @@
    </li>
  </ul>
 </div>
-<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav">
+<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
  <div class="col-4">
    <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
  </div>

--- a/public/js/chat-db.js
+++ b/public/js/chat-db.js
@@ -13,11 +13,38 @@ CHAT_DB.getRoomList = function(input) {
 };
 //ロカールDBからログインしたユーザのデータを取得する。
-CHAT_DB.getMyinfo = function(input) {
+CHAT_DB.getMyInfo = function(input) {
    if (CHAT_UTIL.isIOS()) {
        //TODO IOS処理追加必要
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
-    	return JSON.parse(android.getMyinfo());
+    	return JSON.parse(android.getMyInfo());
+    }
+};
+CHAT_DB.getMessages = function(roomId) {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getMessageList(roomId));
+    }
+};
+CHAT_DB.getFavoriteUsers = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getFavoriteUsers());
+    }
+};
+CHAT_DB.getFavoriteGroups = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getFavoriteGroups());
    }
 };
\ No newline at end of file
--- a/public/js/chat-ui.js
+++ b/public/js/chat-ui.js
@@ -73,7 +73,7 @@ $('#roomDeleteButton').on('click', function(e) {
 				$('#messages').html('');
 				$('.titleRoomName').text(roomName).data('roomName', roomName);
 				$('#pills-chat-tab').tab('show');
-				$("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
+				$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
 			});
 		});
@@ -147,10 +147,11 @@ $('#messages').scroll(function(){
 			// ローディングアイコンを追加する
 			let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
 			$('#messages').prepend(loader)
-			socket.emit('getMessages', $(this).children().length, function() {
+            loader.remove();
-				// ローディングアイコンを削除する
+//			socket.emit('getMessages', $(this).children().length, function() {
-				loader.remove();
+//				// ローディングアイコンを削除する
-			});
+//				loader.remove();
+//			});
 		}
 	}
 });
@@ -390,18 +391,18 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			$('#newRoomName').val('');
 			$('#userSelectionLength').text('');
 			CHAT.globalSelectedUserList = [];
+            $('#bottomNav').hide();
 			$('#backButton').off().on('click', function() {
 				//loadingIndicatorを表示
 				CHAT_UI.showLoadingIndicator();
-				socket.emit('leaveRoom', function() {
+				CHAT.saveRoomInfo();
-					CHAT.saveRoomInfo();
+				if (IS_ONLINE == 'true') {
-                    if (IS_ONLINE == 'true') {
+				    socket.emit('leaveRoom', function() {
                        android.updateRoomList();
-                        CHAT_UI.refreshRoomList();
+				    });
-                        CHAT_UI.dismissLoadingIndicator();
+				}
-                    }
+				CHAT_UI.refreshRoomList();
-				});
+                CHAT_UI.dismissLoadingIndicator();
 			});
 			console.log("show #pills-chat")
 			//loadingIndicatorを表示しない
@@ -414,7 +415,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			$('#room-search').val('');
 			// set Title
 			let roomListTitle = getLocalizedString("roomListTitle")
+            $('#bottomNav').show();
 			$('.titleRoomName').text(roomListTitle);
 			$('#newRoomName').val('');
 			$('#userSelectionLength').text('');
@@ -430,12 +431,14 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			$('#my_info').show();
 			$('#room_list').hide();
 			$('#room-search').hide();
+			$('#bottomNav').show();
 			break;
 		case '#pills-user':
 			$("#backButton").show();
 			$("#userSelectionDeleteBtn").hide();
 			$('#homeButton').hide();
+			$('#bottomNav').hide();
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			break;
@@ -443,6 +446,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			$("#backButton").show();
 			$("#userSelectionDeleteBtn").hide();
 			$('#homeButton').hide();
+			$('#bottomNav').hide();
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			break;
@@ -451,11 +455,13 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			$('#homeButton').hide();
+			$('#bottomNav').hide();
 			$('.user_people').css("paddingLeft", "0px");
 			break;
 		case '#pills-communication':	// コミュニケーションのタブ
 		case '#pills-setting':	// 設定のタブ
 		case '#pills-profile':	// ユーザプロファイルのタブ
+		    $('#bottomNav').hide();
 			$('.titleRoomName').show();
 			$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
 			$('#backButton').hide();
@@ -662,7 +668,6 @@ CHAT_UI.showConfirmView = function(isInvite) {
 					android.createChatRoom("1",userIdList.join(','),newRoomName);
 					/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
 						socket.emit('joinRoom', newRoomId, newRoomName, function () {
 							CHAT.saveRoomInfo(newRoomId, newRoomName);
@@ -800,7 +805,7 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 	setLanguage(languageCode);
 	$(".titleRoomName").text(getLocalizedString("roomListTitle"));
 	$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
-	$("#message-search").attr("placeholder",$("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
+	$("#message-search").attr("placeholder",getLocalizedString("chat_search_placeholder"));
 	$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
 	$("#participants").text(getLocalizedString("participants"))
@@ -843,53 +848,57 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
 }
 $('#contactButton').on('click', function(event){
+	CHAT_UI.refreshContactScreen();
+});
-	//loadingIndicatorを表示
+CHAT_UI.refreshContactScreen = function() {
-	CHAT_UI.showLoadingIndicator();
+    //loadingIndicatorを表示
-	$('#pills-contact-tab').tab('show');
+    $('#my_info').html('');
+    $('#favorite_list').html('');
-	//画面タイトル設定
+    $('#my_group_list').html('');
-	let contactListTitle = getLocalizedString("contactListTitle");
+    CHAT_UI.showLoadingIndicator();
-	$('.titleRoomName').text(contactListTitle);
+    $('#pills-contact-tab').tab('show');
-	// グループの様式を読み込む
-	const groupTemplate = $('#group-template').html();
-	// ユーザの様式を読み込む
-	const userTemplate = $('#user-template').html();
-	android.updateGroupInfo();
+    //画面タイトル設定
-	android.updateMyInfo();
+    let contactListTitle = getLocalizedString("contactListTitle");
+    $('.titleRoomName').text(contactListTitle);
-    var myInfo = CHAT.requestMyinfo();
+   	// グループの様式を読み込む
+   	const groupTemplate = $('#group-template').html();
+   	// ユーザの様式を読み込む
+   	const userTemplate = $('#user-template').html();
    if (IS_ONLINE == 'true') {
+        android.updateGroupInfo();
+        android.updateMyInfo();
    }
-	myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileImagePath)
-	//TODO get my Info
+    var myInfo = CHAT_DB.getMyInfo();
-	let html = Mustache.render(userTemplate, {
-		id: myInfo.shopMemberId,
-		profileImage: myInfo.profileImagePath,
-		name: myInfo.shopMemberName
-	});
-	let obj = $(jQuery.parseHTML(html)).on('click',function(){
+    console.log(myInfo);
-		//TODO need onClick Action
-		console.log('myInfoClick');
-	});
-	$('#my_info').append(obj);
-	//TODO get favorite list
+    myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
-	//TODO get my group user list
-	console.log('LOAD DONE CONTACT SCREEN');
-	CHAT_UI.dismissLoadingIndicator();
-});
+    let html = Mustache.render(userTemplate, {
+    	id: myInfo.shopMemberId,
+    	profileImage: myInfo.profileImagePath,
+    	name: myInfo.shopMemberName
+    });
+    let obj = $(jQuery.parseHTML(html)).on('click',function(){
+    	//TODO need onClick Action
+    	console.log('myInfoClick');
+    });
+    $('#my_info').append(obj);
+    //TODO get favorite list
+    //TODO get my group user list
+    console.log('LOAD DONE CONTACT SCREEN');
+    CHAT_UI.dismissLoadingIndicator();
+}
 CHAT_UI.refreshRoomList = function() {
    var rooms = CHAT_DB.getRoomList();
@@ -979,24 +988,22 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
    console.log(roomId);
    if (IS_ONLINE == 'true') {
        android.updateMessages(roomId);
+        socket.emit('joinRoom', roomId, roomName, function() {
-//        socket.emit('joinRoom', roomId, roomName, function() {
+        });
-//            $('#messages').html('');
-//            $('.titleRoomName').text(roomName).data('roomName', roomName);
-//            $('#pills-chat-tab').tab('show');
-//            $("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
-//        });
    } else {
    }
-    //var roomInfo = android.getMessages(roomId);
+    var messages = CHAT_DB.getMessages(roomId);
-    //ui.loadMessages();
+    console.log(messages);
+    CHAT_UI.loadMessages(messages, roomId, roomName)
 };
-CHAT_UI.loadMessages = function(messages, shopMemberId, users, roomId, roomName) {
+CHAT_UI.loadMessages = function(messages, roomId, roomName) {
    $('#messages').html('');
    $('.titleRoomName').text(roomName).data('roomName', roomName);
    $('#pills-chat-tab').tab('show');
-    $("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
+    $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
    let jQueryMessages = $('#messages');
        // スクロールの変化を防ぐため以前画面の高さを保存する
        let beforeHeight = jQueryMessages.prop('scrollHeight');
@@ -1004,22 +1011,15 @@ CHAT_UI.loadMessages = function(messages, shopMemberId, users, roomId, roomName)
        let workVal = "";
        messages.forEach(function(message) {
            let template = $('#message-template').html();
-            if (message.shopMemberId == shopMemberId) {
+            if (message.selfFlg == 1) {
                 template = $('#message-template-me').html();
            }
-            let messageTime = CHAT_UTIL.formatDate(message.time.time);
+            let messageTime = CHAT_UTIL.formatDate(message.insertDate);
-            if (users != undefined) {
+            if (message.profileUrl) {
-                let user = users.find((user) => user.loginId == message.loginId)
+                message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
-                // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
-                if (user) {
-                     message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
-                } else {
-                     message.profileImagePath = CHAT.getProfileImgUrl("")
-                }
            } else {
-                message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
+                message.profileImagePath = CHAT.getProfileImgUrl("")
            }
             // #36147
@@ -1061,4 +1061,19 @@ CHAT_UI.loadMessages = function(messages, shopMemberId, users, roomId, roomName)
        // チャットに遷移する
        $('#pills-chat-tab').tab('show');
 };
\ No newline at end of file
+var coll = document.getElementsByClassName("collapsible");
+var i;
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("collapsible-active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+      content.style.display = "none";
+    } else {
+      content.style.display = "block";
+    }
+  });
+}
\ No newline at end of file
--- a/public/js/chat-websocket.js
+++ b/public/js/chat-websocket.js
@@ -17,10 +17,11 @@ function connectSocket(isOnline) {
        if (CHAT_UTIL.isIOS()) {
             //TODO IOSの場合
        } else if (CHAT_UTIL.isAndroid()) {
-            $('.overlay').removeClass('active undismissable');
+            //$('.overlay').removeClass('active undismissable');
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();
            android.getLoginParameter();
+            console.log('init')
            CHAT_UI.refreshRoomList();
            CHAT_UI.dismissLoadingIndicator();
            $('#createChatRoom').show();