Commit 9a9fc89d by Lee Munkyeong

UI作業。

parent 62c2f5a6
...@@ -52,42 +52,12 @@ ...@@ -52,42 +52,12 @@
</div> </div>
<!-- フィルター --> <!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none"> <div id="filter" class="user_list filter d-flex flex-row none">
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
</div> </div>
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
......
...@@ -217,3 +217,11 @@ CHAT_DB.updateArchiveDetail = function(archiveId) { ...@@ -217,3 +217,11 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
// TODO // TODO
} }
}; };
CHAT_DB.searchMessages = function(keyword, userList) {
if (CHAT_UTIL.isIOS()) {
// TODO
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.searchMessages(keyword, userList));
}
};
\ No newline at end of file
...@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) { ...@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) {
messageTextBox.val(''); messageTextBox.val('');
if (message.length > 0) { if (message.length > 0) {
console.log('createMessage');
console.log(socket);
socket.emit( socket.emit(
//'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; } 'createMessage', { text: message + messageSeperator + messageType.TEXT }
'createMessage', { text: message }
, 0 , 0
); );
} }
...@@ -1143,6 +1140,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1143,6 +1140,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
, function(text) { , function(text) {
topUserListTemplate = text; topUserListTemplate = text;
}); });
var filterUserListTemplate;
$.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
, function(text) {
filterUserListTemplate = text;
});
usersInRoom.forEach(function(user) { usersInRoom.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl); user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
...@@ -1152,6 +1155,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1152,6 +1155,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
}); });
let obj = jQuery.parseHTML(html); let obj = jQuery.parseHTML(html);
$('#user_list').append(obj); $('#user_list').append(obj);
let filterHtml = Mustache.render(filterUserListTemplate, {
userList: usersInRoom
});
let filterObj = jQuery.parseHTML(filterHtml);
$('#filter').append(filterObj);
messages.forEach(function(message) { messages.forEach(function(message) {
let template = userMessageTemplate; let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) { if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
......
...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {}; ...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
...@@ -37,7 +36,6 @@ function setSocketAction () { ...@@ -37,7 +36,6 @@ function setSocketAction () {
}); });
socket.on('disconnect', function() { socket.on('disconnect', function() {
console.log('disconnect');
//socketが切断されたら黒画面で画面を更新する //socketが切断されたら黒画面で画面を更新する
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
//alert('Disconnected from the server'); //alert('Disconnected from the server');
...@@ -45,7 +43,6 @@ function setSocketAction () { ...@@ -45,7 +43,6 @@ function setSocketAction () {
}); });
socket.on('connect_error', function() { socket.on('connect_error', function() {
console.log('connect_error');
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
...@@ -163,8 +160,6 @@ function setSocketAction () { ...@@ -163,8 +160,6 @@ function setSocketAction () {
// New Message // New Message
// #36170 // #36170
socket.on('newMessage', function(message, roomId, roomName) { socket.on('newMessage', function(message, roomId, roomName) {
console.log(message);
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate; var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false } $.get({ url: "./template/template_user_message.html", async: false }
, function(text) { , function(text) {
...@@ -186,28 +181,32 @@ function setSocketAction () { ...@@ -186,28 +181,32 @@ function setSocketAction () {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = myMessageTemplate; template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try {
message.text = decodeURIComponent(message.text)
} catch(e) {
message.text = message.text
}
if ( message.text.includes(messageSeperator) ) {
message.text = message.text.split(messageSeperator)[0];
}
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
//TODO newMessageの際にDB格納が必要。
let html = Mustache.render(template, {
text: message.text,
from: message.from,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // 画像、動画の描画を待ってからスクロール
try {
message.text = decodeURIComponent(message.text)
} 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,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
// 画像、動画の描画を待ってからスクロール
setTimeout(function () { setTimeout(function () {
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}, 300); }, 300);
......
...@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) { ...@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']' text: encodedText + messageSeperator + messageType.IMAGE
text: encodedText
}, 1); }, 1);
} else { // 動画の処理 } else { // 動画の処理
...@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) { ...@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.VIDEO+']' text: encodedText + messageSeperator + messageType.VIDEO
text: encodedText
}, 1); }, 1);
} }
...@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
}); });
} else { } else {
console.log('No error');
if (loginParam.roomName != undefined && loginParam.roomName != "null") { if (loginParam.roomName != undefined && loginParam.roomName != "null") {
$('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName); $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
} else { } else {
...@@ -272,165 +269,265 @@ CHAT.leaveRoom = function() { ...@@ -272,165 +269,265 @@ CHAT.leaveRoom = function() {
} }
$(function() { $(function() {
// ルーム開設メンバー数カウント // ルーム開設メンバー数カウント
$('input:checkbox').change(function() { $('input:checkbox').change(function() {
if($(this).prop('checked')){ if($(this).prop('checked')){
$(this).attr('checked', true); $(this).attr('checked', true);
}else{ }else{
$(this).removeAttr('checked'); $(this).removeAttr('checked');
} }
}).trigger('change'); }).trigger('change');
// チェックした人数カウント // チェックした人数カウント
$('input:checkbox').change(function() { $('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length; var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt); $('.select_member_num').text(cnt);
}).trigger('change'); }).trigger('change');
// ルーム人数選択確認イベント // ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){ $('.make_room_btn button').click(function(){
$('form').submit(); $('form').submit();
});
// ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){
$('form').submit();
});
// ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){
$('form').submit();
});
// ユーザー追加イベント
$('.add_user_btn button').click(function(){
$('form').submit();
});
// ルーム名変更イベント
$('.change_room_name_btn button').click(function(){
$('form').submit();
});
// 検索アイコン押下イベント
$('.nav_item_wrap .search_menu').click(function(){
$('.nav_item_wrap').addClass('none');
$('.chat_room_src_form').removeClass('none');
$('.room_container').addClass('none');
$('.overlay_src_msg').removeClass('none');
// フィルタ表示
$('#filter').removeClass('none');
$('#user_list').addClass('none');
});
$('.chat_room_src_form .cancel').click(function(){
$('.nav_item_wrap').removeClass('none');
$('.chat_room_src_form').addClass('none');
$('.chat_room_src_form input').val('');
$('.room_container').removeClass('none');
$('.overlay_src_msg').empty();
// ユーザーリスト表示
$('#filter').addClass('none');
$('#user_list').removeClass('none');
});
// フィルタ選択イベント
$('#filter .img_wrap').click(function(){
// チェックアイコン追加
$(this).toggleClass("filter");
});
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
// チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty();
var keyword = $('#chat .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) {
return;
}
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
}); });
rooms.forEach(function(room) { // ルーム人数選択イベント
room.profileImagePath = ASSET_PATH + 'images/user-profile.png' $('.make_room_confirm_btn button').click(function(){
if (room.message) { $('form').submit();
room.message = room.message.toString() });
} else { // ユーザー追加確認イベント
room.message = getLocalizedString("noMessages") $('.add_user_confirm_btn button').click(function(){
} $('form').submit();
var displayMsg; });
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message; // ユーザー追加イベント
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image"); $('.add_user_btn button').click(function(){
var attendUserName = []; $('form').submit();
room.attendUsers.forEach(function(user) { });
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl); // ルーム名変更イベント
attendUserName.push(user.shopMemberName); $('.change_room_name_btn button').click(function(){
}); $('form').submit();
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length; });
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', '); // 検索アイコン押下イベント
} $('.nav_item_wrap .search_menu').click(function(){
let html = Mustache.render(template, { $('.nav_item_wrap').addClass('none');
thumbnailCount: thumbnailCount, $('.chat_room_src_form').removeClass('none');
roomName: room.chatRoomName, $('.room_container').addClass('none');
roomId: room.chatRoomId, $('.overlay_src_msg').removeClass('none');
profileImage: room.profileImagePath, // フィルタ表示
lastMessage: displayMsg , $('#filter').removeClass('none');
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '', $('#user_list').addClass('none');
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount, });
userCnt: room.attendUsers.length + 1, $('.chat_room_src_form .cancel').click(function(){
attendUsers: room.attendUsers $('.nav_item_wrap').removeClass('none');
}); $('.chat_room_src_form').addClass('none');
// Click event $('.chat_room_src_form input').val('');
let obj = $(jQuery.parseHTML(html)).on('click', function() { $('.room_container').removeClass('none');
}); $('.overlay_src_msg').empty();
// ユーザーリスト表示
$('.overlay_src_msg').append(obj); $('#filter').addClass('none');
$('#user_list').removeClass('none');
});
// フィルタ選択イベント
$('#filter .img_wrap').click(function(){
// チェックアイコン追加
$(this).toggleClass("filter");
});
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
// チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty();
var keyword = $('#chat .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) { return; }
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
var displayMsg;
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
});
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
}); });
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
});
// ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// ユーザー招待メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// チャットルーム
// メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// ユーザー招待メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// チャットルーム
// メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){
let workVal = "";
var keyword = $('.chat_room_src_form input[type="search"]').val();
$('.overlay_src_msg').empty();
var checkedUserList = [];
$('.img_wrap.filter').each(function(user) {
var selectedUser = $('.img_wrap.filter')[user];
checkedUserList.push($(selectedUser).data('user-id'));
})
if (keyword.length < 2) { return; }
var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
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;
});
let jQueryMessages = $('.overlay_src_msg');
messages.forEach(function(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.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileUrl = CHAT.getProfileImgUrl("")
}
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.message = replacePath;
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
jQueryMessages.prepend(workVal);
});
$('.filter_img').on('click', function() {
let workVal = "";
var keyword = $('.chat_room_src_form input[type="search"]').val();
$('.overlay_src_msg').empty();
var checkedUserList = [];
$('.img_wrap.filter').each(function(user) {
var selectedUser = $('.img_wrap.filter')[user];
checkedUserList.push($(selectedUser).data('user-id'));
})
if (keyword.length < 2) { return; }
var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
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;
});
let jQueryMessages = $('.overlay_src_msg');
messages.forEach(function(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.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileUrl = CHAT.getProfileImgUrl("")
}
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.message = replacePath;
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
jQueryMessages.prepend(workVal);
});
}); });
...@@ -30,4 +30,6 @@ const chatRoomType = { ...@@ -30,4 +30,6 @@ const chatRoomType = {
const nameCardAreaId = { const nameCardAreaId = {
MY : "myNamecard", MY : "myNamecard",
USER : "userNamecard" USER : "userNamecard"
} }
\ No newline at end of file
const messageSeperator = "<::split>";
\ No newline at end of file
{{#userList}}
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap filter_img" data-user-id="{{shopMemberId}}">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</div>
{{/userList}}
\ No newline at end of file
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