Skip to content

C
chat_webview
Commit 9a9fc89d by Lee Munkyeong
Options

UI作業。

parent 62c2f5a6
Showing with 66 additions and 64 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,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);
......
public_new/js/constant.js
...@@ -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
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