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){
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() {
//loadingIndicatorを表示
$('#my_info').html('');
......@@ -1323,7 +1429,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
$('#userInGroupList').append(obj);
})
$('.userCheckBox').hide();
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
......
public/js/chat-websocket.js
......@@ -333,60 +333,173 @@ function setSocketAction () {
// Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite){
$('#group_list').html('');
const template = $('#group-template').html();
if (groups.length === 0) {
$('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
}
// グループ名と人数を表記する。
groups.forEach(function(group) {
let html = Mustache.render(template, {
name: group.groupName,
info: group.memberCnt + getLocalizedString("people")
});
// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('getUserListInGroup', group.groupId, isInvite);
$('#groupName').text(group.groupName);
});
$('#group_list').append(obj);
});
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12");
}
// Set Title
let memberSelectTitle = getLocalizedString("groupSearch")
$('#pills-group-tab').tab('show');
$('#backButton').show();
// $('#group_list').html('');
// const template = $('#group-template').html();
// if (groups.length === 0) {
// $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
// }
// // グループ名と人数を表記する。
// groups.forEach(function(group) {
// let html = Mustache.render(template, {
// name: group.groupName,
// info: group.memberCnt + getLocalizedString("people")
// });
// // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
// let obj = $(jQuery.parseHTML(html)).on('click', function() {
// // loadingIndicatorを表示
// CHAT_UI.showLoadingIndicator();
// socket.emit('getUserListInGroup', group.groupId, isInvite);
// $('#groupName').text(group.groupName);
// });
// $('#group_list').append(obj);
// });
//
// // Rotate
// if (CHAT_UI.isLandscapeMode()) {
// $(".group_list").addClass("col-6").removeClass("col-12");
// }
//
// // Set Title
// let memberSelectTitle = getLocalizedString("groupSearch")
//
// $('#pills-group-tab').tab('show');
//
// $('#backButton').show();
//
if (isInvite) {
$('.titleRoomName').text(memberSelectTitle);
$('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite);
});
} else {
$('.titleRoomName').text(memberSelectTitle);
$('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
$('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){
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) {
$('#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);
})
$('#backButton').off().on('click', function() {
// loadingIndicatorを表示
......@@ -401,6 +514,9 @@ function setSocketAction () {
}
}
});
$('#myGroupArea').hide();
$('#allGroupArea').show();
});
// 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