Skip to content

C
chat_webview
Commit 9a9fc89d by Lee Munkyeong
Options

UI作業。

parent 62c2f5a6
Showing with 159 additions and 59 deletions
public_new/chat_room.html
...@@ -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>
......
public_new/js/chat-db.js
...@@ -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
public_new/js/chat-ui.js
...@@ -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) {
......
public_new/js/chat-websocket.js
...@@ -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,16 +181,20 @@ function setSocketAction () { ...@@ -186,16 +181,20 @@ function setSocketAction () {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = myMessageTemplate; template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try { try {
message.text = decodeURIComponent(message.text) message.text = decodeURIComponent(message.text)
} catch(e) { } catch(e) {
message.text = message.text message.text = message.text
} }
if ( message.text.includes(messageSeperator) ) {
message.text = message.text.split(messageSeperator)[0];
}
var replacePath = message.text; var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName='); replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath; message.text = replacePath;
//TODO newMessageの際にDB格納が必要。
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.text, text: message.text,
from: message.from, from: message.from,
......
public_new/js/chat.js
...@@ -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 {
...@@ -349,9 +346,7 @@ $(function() { ...@@ -349,9 +346,7 @@ $(function() {
$('#chat .search_form input[type="search"]').keyup(function(){ $('#chat .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty(); $('.overlay_src_msg').empty();
var keyword = $('#chat .search_form input[type="search"]').val(); var keyword = $('#chat .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) { if (keyword == '' || keyword.length < 2) { return; }
return;
}
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword); var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder"); let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle); $('#chatTitle').text(roomListTitle);
...@@ -360,6 +355,7 @@ $(function() { ...@@ -360,6 +355,7 @@ $(function() {
, function(text) { , function(text) {
template = text; template = text;
}); });
rooms.forEach(function(room) { rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png' room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) { if (room.message) {
...@@ -391,15 +387,14 @@ $(function() { ...@@ -391,15 +387,14 @@ $(function() {
attendUsers: room.attendUsers attendUsers: room.attendUsers
}); });
// Click event // Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = jQuery.parseHTML(html);
});
$('.overlay_src_msg').append(obj); $('.overlay_src_msg').append(obj);
}); });
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6"); $(".chat_list").removeClass("col-12").addClass("col-6");
} }
}); });
// ルームメンバー検索 // ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('#chat_room .search_form input[type="search"]').keyup(function(){
$.ajax({ $.ajax({
...@@ -424,13 +419,115 @@ $(function() { ...@@ -424,13 +419,115 @@ $(function() {
// チャットルーム // チャットルーム
// メッセージ検索イベント // メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){ $('.chat_room_src_form input[type="search"]').keyup(function(){
$.ajax({ let workVal = "";
url: 'search_message.html', var keyword = $('.chat_room_src_form input[type="search"]').val();
type: 'POST', $('.overlay_src_msg').empty();
datatype: 'html' var checkedUserList = [];
}).done(function (data) { $('.img_wrap.filter').each(function(user) {
$('.overlay_src_msg').html(data); 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
...@@ -31,3 +31,5 @@ const nameCardAreaId = { ...@@ -31,3 +31,5 @@ const nameCardAreaId = {
MY : "myNamecard", MY : "myNamecard",
USER : "userNamecard" USER : "userNamecard"
} }
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