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 @@
</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,16 +181,20 @@ 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,
......
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 {
......@@ -349,9 +346,7 @@ $(function() {
$('#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;
}
if (keyword == '' || keyword.length < 2) { return; }
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
......@@ -360,6 +355,7 @@ $(function() {
, function(text) {
template = text;
});
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
......@@ -391,15 +387,14 @@ $(function() {
attendUsers: room.attendUsers
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
});
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
});
// ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){
$.ajax({
......@@ -424,13 +419,115 @@ $(function() {
// チャットルーム
// メッセージ検索イベント
$('.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);
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
......@@ -31,3 +31,5 @@ const nameCardAreaId = {
MY : "myNamecard",
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