Skip to content

C
chat_webview
Commit 8fc5ddaf by Lee Munkyeong
Options

チャット詳細実装

parent b994ba6e
Showing with 153 additions and 81 deletions
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
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>
......
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
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();
});
loader.remove();
// socket.emit('getMessages', $(this).children().length, function() {
// // ローディングアイコンを削除する
// 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();
if (IS_ONLINE == 'true') {
CHAT.saveRoomInfo();
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.showLoadingIndicator();
$('#pills-contact-tab').tab('show');
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('.titleRoomName').text(contactListTitle);
// グループの様式を読み込む
const groupTemplate = $('#group-template').html();
// ユーザの様式を読み込む
const userTemplate = $('#user-template').html();
CHAT_UI.refreshContactScreen = function() {
//loadingIndicatorを表示
$('#my_info').html('');
$('#favorite_list').html('');
$('#my_group_list').html('');
CHAT_UI.showLoadingIndicator();
$('#pills-contact-tab').tab('show');
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
let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName
});
var myInfo = CHAT_DB.getMyInfo();
let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action
console.log('myInfoClick');
});
console.log(myInfo);
$('#my_info').append(obj);
//TODO get favorite list
//TODO get my group user list
console.log('LOAD DONE CONTACT SCREEN');
CHAT_UI.dismissLoadingIndicator();
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
});
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() {
// $('#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"));
// });
socket.emit('joinRoom', roomId, roomName, function() {
});
} else {
}
//var roomInfo = android.getMessages(roomId);
//ui.loadMessages();
var messages = CHAT_DB.getMessages(roomId);
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) {
let user = users.find((user) => user.loginId == message.loginId)
// userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
if (user) {
message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
} else {
message.profileImagePath = CHAT.getProfileImgUrl("")
}
if (message.profileUrl) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
} 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
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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment