Skip to content

C
chat_webview
Commit 386a6f81 by Kang Donghun
Options

UIとロジック追加実装

parent 507fa5e1
Showing with 258 additions and 36 deletions
public/js/chat-ui.js
...@@ -915,6 +915,112 @@ $('#chatButton').on('click', function(event){ ...@@ -915,6 +915,112 @@ $('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM); CHAT_UI.refreshRoomList(chatRoomType.DM);
}); });
CHAT_UI.refreshGroupSearch = function(isInvite) {
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
$('#rootGroupBtn').off();
$('#parentGroupBtn').off();
var result = CHAT_DB.getGroupInfo(groupId);
$('#childGroupList').html('');
$('#userInGroupList').html('');
$('#groupPathArea').html('');
if (typeof result.parentGroupId !== 'undefined') {
console.log(result.parentGroupId);
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
console.log(result.rootGroupId);
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
});
}
const groupNaviTemplate = $('#group-navigater-template').html();
var groupCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (groupCount != 0) {
$('#groupPathArea').append("<label class='group-navigater'> > </label>");
}
let html = Mustache.render(groupNaviTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
});
groupCount++;
$('#groupPathArea').append(obj);
})
const groupTemplate = $('#group-template').html();
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
});
$('#childGroupList').append(obj);
})
const userTemplate = $('#user-template').html();
result.groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
if (IS_ONLINE == 'true') {
if ($(this).find('.userCheckBox.active').length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return user.loginId != element.loginId;
});
} else {
// add
CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
}
$(this).find('.userCheckBox').toggleClass('active');
if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else {
$('#userSelectionLength').text('');
}
}
});
let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
return selectedUser.loginId == user.loginId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
$('#user_list').append(obj);
$('.userCheckBox').show();
$('#userInGroupList').append(obj);
})
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
$('#my_info').html(''); $('#my_info').html('');
...@@ -1323,7 +1429,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) { ...@@ -1323,7 +1429,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
$('#userInGroupList').append(obj); $('#userInGroupList').append(obj);
}) })
$('.userCheckBox').hide();
$('#myGroupArea').hide(); $('#myGroupArea').hide();
$('#allGroupArea').show(); $('#allGroupArea').show();
} }
......
public/js/chat-websocket.js
...@@ -333,60 +333,173 @@ function setSocketAction () { ...@@ -333,60 +333,173 @@ function setSocketAction () {
// Update Group List(Invite) // Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite){ socket.on('refreshGroupList', function(groups, isInvite){
$('#group_list').html(''); // $('#group_list').html('');
const template = $('#group-template').html(); // const template = $('#group-template').html();
if (groups.length === 0) { // if (groups.length === 0) {
$('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>'); // $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
} // }
// グループ名と人数を表記する。 // // グループ名と人数を表記する。
groups.forEach(function(group) { // groups.forEach(function(group) {
let html = Mustache.render(template, { // let html = Mustache.render(template, {
name: group.groupName, // name: group.groupName,
info: group.memberCnt + getLocalizedString("people") // info: group.memberCnt + getLocalizedString("people")
}); // });
// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える // // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
let obj = $(jQuery.parseHTML(html)).on('click', function() { // let obj = $(jQuery.parseHTML(html)).on('click', function() {
// loadingIndicatorを表示 // // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); // CHAT_UI.showLoadingIndicator();
socket.emit('getUserListInGroup', group.groupId, isInvite); // socket.emit('getUserListInGroup', group.groupId, isInvite);
$('#groupName').text(group.groupName); // $('#groupName').text(group.groupName);
}); // });
$('#group_list').append(obj); // $('#group_list').append(obj);
}); // });
//
// Rotate // // Rotate
if (CHAT_UI.isLandscapeMode()) { // if (CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12"); // $(".group_list").addClass("col-6").removeClass("col-12");
} // }
//
// Set Title // // Set Title
let memberSelectTitle = getLocalizedString("groupSearch") // let memberSelectTitle = getLocalizedString("groupSearch")
//
$('#pills-group-tab').tab('show'); // $('#pills-group-tab').tab('show');
//
$('#backButton').show(); // $('#backButton').show();
//
if (isInvite) { if (isInvite) {
$('.titleRoomName').text(memberSelectTitle);
$('#newRoomName, .roomListIcon, .chatRoomIcon').hide(); $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite); CHAT_UI.setConfirmButtonEvent(isInvite);
}); });
} else { } else {
$('.titleRoomName').text(memberSelectTitle);
$('.roomListIcon, .chatRoomIcon, #newRoomName').hide(); $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite); CHAT_UI.setConfirmButtonEvent(isInvite);
}); });
} }
//
// if (CHAT.globalSelectedUserList.length > 0) {
// $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
// } else {
// $('#userSelectionLength').text('');
// }
//
// $('#backButton').off().on('click', function() {
// // loadingIndicatorを表示
// CHAT_UI.showLoadingIndicator();
// if (isInvite) {
// $('#pills-chat-tab').tab('show');
// } else {
// if (IS_ONLINE == 'true') {
// android.updateRoomList();
// CHAT_UI.refreshRoomList(chatRoomType.DM);
// CHAT_UI.dismissLoadingIndicator();
// }
// }
// });
$('#rootGroupBtn').off();
$('#parentGroupBtn').off();
var result = CHAT_DB.getGroupInfo(groupId);
$('#childGroupList').html('');
$('#userInGroupList').html('');
$('#groupPathArea').html('');
if (typeof result.parentGroupId !== 'undefined') {
console.log(result.parentGroupId);
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refreshGroupList(isInvite, result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
console.log(result.rootGroupId);
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refreshGroupList(isInvite, result.rootGroupId);
});
}
const groupNaviTemplate = $('#group-navigater-template').html();
var groupCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (groupCount != 0) {
$('#groupPathArea').append("<label class='group-navigater'> > </label>");
}
let html = Mustache.render(groupNaviTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refreshGroupList(isInvite, groupPath.groupId);
});
groupCount++;
$('#groupPathArea').append(obj);
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupPath.groupId);
android.updateMyInfo();
}
})
const groupTemplate = $('#group-template').html();
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refreshGroupList(isInvite, childGroup.groupId);
});
$('#childGroupList').append(obj);
})
const userTemplate = $('#user-template').html();
result.groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
if (IS_ONLINE == 'true') {
if ($(this).find('.userCheckBox.active').length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return user.loginId != element.loginId;
});
} else {
// add
CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
}
$(this).find('.userCheckBox').toggleClass('active');
if (CHAT.globalSelectedUserList.length > 0) { if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length); $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else { } else {
$('#userSelectionLength').text(''); $('#userSelectionLength').text('');
} }
}
});
let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
return selectedUser.loginId == user.loginId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
$('#user_list').append(obj);
$('.userCheckBox').show();
$('#userInGroupList').append(obj);
})
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
// loadingIndicatorを表示 // loadingIndicatorを表示
...@@ -401,6 +514,9 @@ function setSocketAction () { ...@@ -401,6 +514,9 @@ function setSocketAction () {
} }
} }
}); });
$('#myGroupArea').hide();
$('#allGroupArea').show();
}); });
// Update User List(Invite) // Update User List(Invite)
......
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