Skip to content

C
chat_webview
Commit 9a9fc89d by Lee Munkyeong
Options

UI作業。

parent 62c2f5a6
Showing with 326 additions and 227 deletions
public_new/chat_room.html
......@@ -52,42 +52,12 @@
</div>
<!-- フィルター -->
<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 class="chat_list">
<ul class="overlay_src_msg">
</ul>
......
public_new/js/chat-db.js
......@@ -217,3 +217,11 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
// 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
public_new/js/chat-ui.js
......@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) {
messageTextBox.val('');
if (message.length > 0) {
console.log('createMessage');
console.log(socket);
socket.emit(
//'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
'createMessage', { text: message }
'createMessage', { text: message + messageSeperator + messageType.TEXT }
, 0
);
}
......@@ -1143,6 +1140,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
, function(text) {
topUserListTemplate = text;
});
var filterUserListTemplate;
$.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
, function(text) {
filterUserListTemplate = text;
});
usersInRoom.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
......@@ -1152,6 +1155,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
});
let obj = jQuery.parseHTML(html);
$('#user_list').append(obj);
let filterHtml = Mustache.render(filterUserListTemplate, {
userList: usersInRoom
});
let filterObj = jQuery.parseHTML(filterHtml);
$('#filter').append(filterObj);
messages.forEach(function(message) {
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
......
public_new/js/chat-websocket.js
......@@ -6,7 +6,6 @@ var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () {
if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction();
} else {
//オフラインの場合、DBからルーム一覧を表示。
......@@ -37,7 +36,6 @@ function setSocketAction () {
});
socket.on('disconnect', function() {
console.log('disconnect');
//socketが切断されたら黒画面で画面を更新する
$('.overlay').addClass('active undismissable');
//alert('Disconnected from the server');
......@@ -45,7 +43,6 @@ function setSocketAction () {
});
socket.on('connect_error', function() {
console.log('connect_error');
CHAT_UI.dismissLoadingIndicator();
});
......@@ -163,8 +160,6 @@ function setSocketAction () {
// New Message
// #36170
socket.on('newMessage', function(message, roomId, roomName) {
console.log(message);
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
......@@ -186,28 +181,32 @@ function setSocketAction () {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
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 () {
CHAT_UI.scrollToBottom();
}, 300);
......
public_new/js/chat.js
......@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) {
}
socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
text: encodedText
text: encodedText + messageSeperator + messageType.IMAGE
}, 1);
} else { // 動画の処理
......@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) {
}
socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
text: encodedText
text: encodedText + messageSeperator + messageType.VIDEO
}, 1);
}
......@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
});
} else {
console.log('No error');
if (loginParam.roomName != undefined && loginParam.roomName != "null") {
$('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
} else {
......@@ -272,165 +269,265 @@ CHAT.leaveRoom = function() {
}
$(function() {
// ルーム開設メンバー数カウント
$('input:checkbox').change(function() {
if($(this).prop('checked')){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
}).trigger('change');
// チェックした人数カウント
$('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt);
}).trigger('change');
// ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){
$('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;
// ルーム開設メンバー数カウント
$('input:checkbox').change(function() {
if($(this).prop('checked')){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
}).trigger('change');
// チェックした人数カウント
$('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt);
}).trigger('change');
// ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){
$('form').submit();
});
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)).on('click', function() {
});
$('.overlay_src_msg').append(obj);
// ルーム人数選択イベント
$('.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'
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);
});
});
public_new/js/constant.js
......@@ -30,4 +30,6 @@ const chatRoomType = {
const nameCardAreaId = {
MY : "myNamecard",
USER : "userNamecard"
}
\ No newline at end of file
}
const messageSeperator = "<::split>";
\ No newline at end of file
public_new/template/template_chatroom_user_filter_list.html 0 → 100644
{{#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