Skip to content

C
chat_webview
Commit bbe64164 by Kang Donghun
Options

Merge branch 'origin/develop_createRoom_UI' into origin/develop_apply_design_chat 

# Conflicts:
#	public/css/chat.css
#	public/js/chat-db.js
#	public/js/chat-ui.js
#	public/js/language_en.js
#	public/js/language_ja.js
#	public/js/language_ko.js
#	public_new/archive.html
#	public_new/archive_detail.html
#	public_new/chat.html
#	public_new/chat_add_user.html
#	public_new/chat_add_user_confirm.html
#	public_new/chat_change_room_name.html
#	public_new/chat_make_room.html
#	public_new/chat_make_room_confirm.html
#	public_new/chat_room.html
#	public_new/collaboration_overlay_add_user_list.html
#	public_new/contact.html
#	public_new/css/archive.css
#	public_new/css/chat.css
#	public_new/css/collaboration.css
#	public_new/css/common.css
#	public_new/js/archive.js
#	public_new/js/chat-db.js
#	public_new/js/chat-ui.js
#	public_new/js/chat-websocket.js
#	public_new/js/chat.js
#	public_new/js/common.js
#	public_new/js/constant.js
#	public_new/js/contact.js
#	public_new/js/language_en.js
#	public_new/js/language_ja.js
#	public_new/js/language_ko.js
#	public_new/js/loading.js
#	public_new/loading.html
#	public_new/modal_chat_profile.html
#	public_new/modal_collabo_profile.html
#	public_new/modal_collabo_profile2.html
#	public_new/search_message_user_list.html
#	public_new/template/template_group_list.html
#	public_new/template/template_group_user_list.html
#	public_new/template/template_my_message.html
#	public_new/template/template_my_name_card.html
#	public_new/template/template_room_list.html
#	public_new/template/template_user_list.html
#	public_new/template/template_user_message.html
#	public_new/template/template_user_name_card.html
parents c74665ad ce671c08
Showing with 1462 additions and 614 deletions
public/css/chat.css
......@@ -98,6 +98,7 @@ img {
float: left;
padding: 0 0 0 15px;
width: 85%;
padding-top: 6px;
}
#room_list, #group_list, #user_list, #select_user_list {
......@@ -506,7 +507,7 @@ a.article:hover {
padding-left: 12%;
}
.userCheckBox{
margin-left: -12%;
margin-left: 80%;
}
.nav-item .dropdown-toggle::after{
......@@ -710,7 +711,7 @@ a.article:hover {
}
.chat-list-type-btn {
width: 30%;
width: 40%;
}
#my_info > div > div {
padding-left: 5%;
......@@ -724,6 +725,10 @@ a.article:hover {
padding-left: 5%;
}
#my_group_list > div > div {
padding-left: 5%;
}
.contact-seperator {
width: 100%;
background-color: #095395!important;
......@@ -741,9 +746,6 @@ a.article:hover {
min-height: 250px;
top: 20%;
background: #F7FFF4;
}
#namecard {
z-index: 10051;
}
......@@ -760,6 +762,44 @@ a.article:hover {
text-align: center;
}
<<<<<<< HEAD
=======
.border-bottom-gray {
border-bottom: 1px solid #c4c4c4;
}
#childGroupList > div > div {
padding-left: 5%;
}
#userInGroupList > div > div {
padding-left: 5%;
}
.group-navigater {
margin-right: 10px;
}
.namecard-action-area {
display: -webkit-box;
}
.namecard-action-btn {
text-align: center;
}
.name-chat {
background-color: yellow;
}
.name-voice {
background-color: green;
}
.name-favorite {
background-color: blue;
}
>>>>>>> origin/develop_createRoom_UI
.inbox_archive {
width: 100%;
}
......@@ -888,3 +928,7 @@ a.article:hover {
text-align: center;
overflow: hidden;
}
<<<<<<< HEAD
=======
>>>>>>> origin/develop_apply_design_chat
>>>>>>> origin/develop_createRoom_UI
public/index.html
......@@ -221,7 +221,7 @@
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="inbox_people">
<div class="inbox_people" >
<div class="heading_srch">
<div class="srch_bar">
<div class="stylish-input-group">
......@@ -232,14 +232,48 @@
</div>
</div>
</div>
<div id="my_info" class="inbox_user row">
<div id="groupButtonArea" class="text-center border-bottom-gray">
<button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
<button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
</div>
<label class="contact-seperator" id="favorite-seperator">Favorite</label>
<div id="favorite_list" class="inbox_user row">
<div id="myGroupArea">
<div id="my_info" class="inbox_user row">
</div>
<label class="contact-seperator" id="favorite-seperator">Favorite</label>
<div id="favorite_list" class="inbox_user row">
</div>
<label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row">
</div>
</div>
<label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row">
<div id="allGroupArea">
<label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
<div id="groupPathArea" style="float:left;">
</div>
<label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
<div id="groupBtnArea">
<div class="user_list col-12" id="rootGroupBtn">
<div class="user_people">
<div class="user_ib">
<h5>MOVE TO ROOT GROUP</h5>
</div>
</div>
</div>
<div class="user_list col-12" id="parentGroupBtn">
<div class="user_people">
<div class="user_ib">
<h5>MOVE TO PARENTS GROUP</h5>
</div>
</div>
</div>
</div>
<label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
<div id="childGroupList" class="inbox_user row group-search-list">
</div>
<label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
<div id="userInGroupList" class="inbox_user row group-search-list">
</div>
</div>
......@@ -384,8 +418,9 @@
</ul>
</div>
<div class="popup" id="myNamecard"></div>
<div class="popup" id="userNamecard"></div>
<div class="popup" id="namecard"></div>
<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
<div class="col-4">
<img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
......@@ -398,7 +433,7 @@
</div>
</nav>
<script id="my-namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div>
<div class="namecard_img">
<img src="./images/user-profile.png" alt>
<div class="namedard-img-upload" >Upload</div>
......@@ -411,7 +446,7 @@
</div>
</script>
<script id="namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div>
<div class="namecard_img">
<img src="./images/user-profile.png" alt>
<div class="namecard-login-id">{{name}}</div>
......@@ -421,11 +456,22 @@
<li><b>{{.}}</b></li>
{{/groupPathList}}
</div>
<div class="text-center">
<button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button>
<button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button>
{{#isFavorite}}
<button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
{{/isFavorite}}
{{^isFavotire}}
<button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
{{/isFavorite}}
</div>
</script>
<script id="message-template" type="text/template">
<div class="incoming_msg">
<div class="incoming_msg_img">
<img src={{{profileImage}}} alt="">
<img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
</div>
<div class="received_msg">
<div class="received_withd_msg">
......@@ -478,7 +524,7 @@
</div>
</script>
<script id="group-template" type="text/template">
<div class="group_list col-12" data-name="{{name}}">
<div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
<div class="group_people">
<div class="group_img">
<img src="./images/group-image.png" alt="">
......@@ -512,6 +558,9 @@
</div>
</div>
</script>
<script id="group-navigater-template" type="text/template">
<label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
</script>
<script id="favorite-user-template" type="text/template">
<div class="user_list col-12" data-name="{{name}}">
<div class="user_people">
......
public/js/chat-db.js
......@@ -14,11 +14,14 @@ CHAT_DB.getRoomList = function(roomType) {
//ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) {
var result = JSON.parse(android.getMyInfo());
CHAT.globalLoginParameter.shopMemberId = result.shopMemberId;
console.log(CHAT.globalLoginParameter.shopMemberId);
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyInfo());
return result;
}
};
......@@ -58,6 +61,26 @@ CHAT_DB.getMyGroupUsers = function() {
}
};
<<<<<<< HEAD
=======
CHAT_DB.getGroupInfo = function(groupId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getGroupInfo(groupId));
}
};
CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getNameCardData(shopMemberId));
}
};
>>>>>>> origin/develop_createRoom_UI
CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn
......@@ -123,4 +146,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) {
//TODO Android処理追加必要
}
};
<<<<<<< HEAD
=======
>>>>>>> origin/develop_createRoom_UI
public/js/chat-ui.js
......@@ -55,11 +55,12 @@ $(window).on('resize', function() {
// チャットルーム生成ボタン処理
$('#createChatRoom').on('click', function() {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// CHAT_UI.showLoadingIndicator();
let isInvite = false;
CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite);
// socket.emit('getGroupList', isInvite);
CHAT_UI.refreshGroupSearch('0', isInvite);
});
// Room Delete
......@@ -475,10 +476,15 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
break;
case '#pills-contact':
$('#namecard').html('');
$('#myNamecard').html('');
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#myGroupArea').show();
$('#newRoomName').val('');
$('#userSelectionLength').text('');
CHAT.globalSelectedUserList = [];
$('#allGroupArea').hide();
$('#my_info').show();
$('#bottomNav').show();
break;
......@@ -647,7 +653,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
let html = Mustache.render(template, {
id: user.shopMemberId,
profileImage: user.profileImagePath,
name: user.loginId
name: user.shopMemberName
});
// TODO 次のコミットに参考事項
// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
......@@ -671,7 +677,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
$('#backButton').off().on('click', function() {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('getGroupList', isInvite)
CHAT_UI.refreshGroupSearch("0", isInvite);
});
$("#userSelectionConfirmBtn").off().on('click', function(){
......@@ -714,10 +720,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
// ルーム名のURIencodingを行う
//const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName);
android.createChatRoom("1", userIdList.join(','), newRoomName);
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
......@@ -807,15 +811,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
$('#messages').html('');
$('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
$("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show');
});
});
android.createChatRoom("1",userIdList.join(','),encodedRoomName);
}
}
}
......@@ -879,6 +876,19 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
$("#groupBtn").text(getLocalizedString("groupChatRoom"))
$("#myGroupBtn").text(getLocalizedString("myGroup"))
$("#allGroupBtn").text(getLocalizedString("allGroup"))
$("#groupPathSeperator").text(getLocalizedString("groupPath"))
$("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
$("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
$("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
$("#childGroupSeperator").text(getLocalizedString("childGroup"))
$("#groupUserSeperator").text(getLocalizedString("groupUser"))
$("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup"))
}
......@@ -906,28 +916,185 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
}
$('#contactButton').on('click', function(event){
CHAT_UI.refreshContactScreen();
let isCreate = false;
let isInvite = false;
CHAT_UI.refreshContactScreen(isCreate, isInvite);
});
$('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM);
});
<<<<<<< HEAD
=======
<<<<<<< HEAD
CHAT_UI.refreshGroupSearch = function(groupId, isInvite) {
CHAT_UI.showLoadingIndicator();
$('#pills-contact-tab').tab('show');
//画面タイトル設定
let memberSelectTitle = getLocalizedString("userSearch")
$('.titleRoomName').text(memberSelectTitle);
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
$('#rootGroupBtn').off();
$('#parentGroupBtn').off();
$('#backButton').show();
$('#homeButton').hide();
$('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite);
});
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.refreshGroupSearch(result.parentGroupId, isInvite);
});
}
if (typeof result.rootGroupId !== 'undefined') {
console.log(result.rootGroupId);
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refreshGroupSearch(result.rootGroupId, isInvite);
});
}
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.refreshGroupSearch(groupPath.groupId, isInvite);
});
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.refreshGroupSearch(childGroup.groupId, isInvite);
});
$('#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 groupUser.shopMemberId != element.shopMemberId;
});
} else {
// add
CHAT.globalSelectedUserList.push({shopMemberName:groupUser.shopMemberName, shopMemberId : groupUser.shopMemberId, profileImagePath: groupUser.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.shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
$('#userInGroupList').append(obj);
})
$('#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();
}
}
});
$('#myGroupBtn').off().on('click', function() {
let isCreate = true;
CHAT_UI.refreshContactScreen(isCreate, isInvite);
});
CHAT_UI.dismissLoadingIndicator();
$('.userCheckBox').show();
$('#groupButtonArea').show();
$('#allGroupArea').show();
$('#myGroupArea').hide();
}
>>>>>>> origin/develop_createRoom_UI
$('#archiveButton').on('click', function(event){
CHAT_UI.refreshArchiveScreen();
});
<<<<<<< HEAD
CHAT_UI.refreshContactScreen = function() {
=======
CHAT_UI.refreshContactScreen = function(isCreate, isInvite) {
>>>>>>> origin/develop_createRoom_UI
//loadingIndicatorを表示
$('#my_info').html('');
$('#favorite_list').html('');
$('#my_group_list').html('');
CHAT_UI.showLoadingIndicator();
$('#pills-contact-tab').tab('show');
if (isCreate != true) {
$('#pills-contact-tab').tab('show');
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('.titleRoomName').text(contactListTitle);
$('#backButton').hide();
$('#homeButton').show();
$('#userSelectionConfirmBtn').hide();
}
$('#myGroupArea').show();
$('#allGroupArea').hide();
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('.titleRoomName').text(contactListTitle);
// グループの様式を読み込む
const groupTemplate = $('#group-template').html();
......@@ -935,41 +1102,43 @@ CHAT_UI.refreshContactScreen = function() {
// ユーザの様式を読み込む
const userTemplate = $('#user-template').html();
const myNamecardTemplate = $('#my-namecard-template').html();
const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') {
android.updateGroupInfo();
android.updateGroupInfo('0');
android.updateMyInfo();
android.updateGroupUser();
}
var myInfo = CHAT_DB.getMyInfo();
if (isCreate != true) {
var myInfo = CHAT_DB.getMyInfo();
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
let myNamecardHtml = Mustache.render(myNamecardTemplate, {
loginId: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName,
groupPathList: myInfo.groupPathList
});
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
let myNamecardHtml = Mustache.render(myNamecardTemplate, {
loginId: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName,
groupPathList: myInfo.groupPathList
});
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
});
$('#namecard').append(myNamecardObj);
});
$('#myNamecard').append(myNamecardObj);
let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName
});
let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.showNamecard('namecard');
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.showNamecard('myNamecard');
});
$('#my_info').append(obj);
$('#my_info').append(obj);
}
var groupUserList = CHAT_DB.getMyGroupUsers();
groupUserList.forEach(function(groupUser) {
......@@ -981,13 +1150,37 @@ CHAT_UI.refreshContactScreen = function() {
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
if (IS_ONLINE == 'true') {
android.updateUserInfo(groupUser.shopMemberId);
}
console.log('click');
if (isCreate != true) {
CHAT_UI.makeNameCard(groupUser.shopMemberId);
} else {
if ($(this).find('.userCheckBox.active').length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return groupUser.shopMemberId != element.shopMemberId;
});
} else {
// add
CHAT.globalSelectedUserList.push({shopMemberName:groupUser.shopMemberName, shopMemberId : groupUser.shopMemberId, profileImagePath: groupUser.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.shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
$('#my_group_list').append(obj);
})
var favoriteCount = 0;
......@@ -999,6 +1192,10 @@ CHAT_UI.refreshContactScreen = function() {
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
if (isCreate != true) {
} else {
CHAT_UI.refreshGroupSearch(favoriteGroup.groupId, isInvite);
}
});
favoriteCount++
$('#favorite_list').append(obj);
......@@ -1015,7 +1212,34 @@ CHAT_UI.refreshContactScreen = function() {
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
if (isCreate != true) {
} else {
if ($(this).find('.userCheckBox.active').length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return favoriteUser.shopMemberId != element.shopMemberId;
});
} else {
// add
CHAT.globalSelectedUserList.push({shopMemberName:favoriteUser.shopMemberName, shopMemberId : favoriteUser.shopMemberId, profileImagePath: favoriteUser.profileImagePath});
}
$(this).find('.userCheckBox').toggleClass('active');
if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionL ength').text(CHAT.globalSelectedUserList.length);
} else {
$('#userSelectionLength').text('');
}
}
});
let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
return selectedUser.shopMemberId == favoriteUser.shopMemberId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
favoriteCount++
$('#favorite_list').append(obj);
})
......@@ -1027,6 +1251,19 @@ CHAT_UI.refreshContactScreen = function() {
$('#favorite_list').show();
$('#favorite-seperator').show();
}
if (isCreate == true) {
$('.userCheckBox').show();
$('#allGroupBtn').off().on('click', function() {
CHAT_UI.refreshGroupSearch("0", isInvite);
});
} else {
$('.userCheckBox').hide();
$('#allGroupBtn').off().on('click', function() {
CHAT_UI.refesshAllGroupSearch("0");
});
};
CHAT_UI.dismissLoadingIndicator();
}
......@@ -1126,10 +1363,8 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
};
CHAT_UI.loadMessages = function(messages, roomId, roomName) {
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する
......@@ -1157,6 +1392,7 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
......@@ -1199,31 +1435,277 @@ $('#groupBtn').on('click', function (e){
CHAT_UI.refreshRoomList(chatRoomType.GROUP);
});
CHAT_UI.showNamecard = function(id) {
$('#namecard').appendTo("body").modal({
$('#'+id).appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
}
CHAT_UI.hideNamecard = function(id) {
$('#namecard').modal('hide');
$('#'+id).modal('hide');
}
$(document).click(function (e) {
if($(e.target).hasClass('my-name-card-close')){
CHAT_UI.hideNamecard('namecard');
}
});
CHAT_UI.showUserNamecard = function(shopMemberId) {
// $('#namecard').appendTo("body").modal({
// $('#myNamecard').appendTo("body").modal({
// backdrop: 'static',
// keyboard: false
// })
}
<<<<<<< HEAD
=======
$('#allGroupBtn').on('click', function (e){
CHAT_UI.refesshAllGroupSearch('0')
});
CHAT_UI.refesshAllGroupSearch = function(groupId) {
const userNamecardTemplate = $('#namecard-template').html();
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(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#userInGroupList').append(obj);
})
$('#myGroupBtn').off().on('click', function (e){
$('#myGroupArea').show();
$('#allGroupArea').hide();
});
$('.userCheckBox').hide();
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
CHAT_UI.startChat = function (userShopMemberId,userName) {
CHAT_UI.showLoadingIndicator();
var userIdList = [];
userIdList.push(userShopMemberId);
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' +userName;
android.createChatRoom(chatRoomType.DM, userIdList.join(','),newRoomName);
CHAT_UI.hideNamecard(nameCardAreaId.USER);
};
CHAT_UI.startVoice = function () {
//add Android Chat click
console.log("VoiceClick");
};
CHAT_UI.changeFavorite = function () {
//add Android Chat click
console.log("FavoriteClick");
};
CHAT_UI.removeFavoriteUser = function (shopMemberId) {
//add Android Chat click
console.log("removeFU");
};
CHAT_UI.insertFavoriteUser = function (shopMemberId) {
//add Android Chat click
console.log("insertFU");
};
CHAT_UI.changeFavorite = function () {
//add Android Chat click
console.log("FavoriteClick");
};
CHAT_UI.makeNameCard = function (shopMemberId) {
console.log('makeNameCard Click');
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
console.log(nameCardInfo);
const userNamecardTemplate = $('#namecard-template').html();
let namecardHtml = Mustache.render(userNamecardTemplate, {
loginId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
};
CHAT_UI.makeNameCardInChatRoom = function (chatRoomId) {
console.log('makeNameCard Click');
var nameCardInfo = CHAT_DB.getNameCardData(chatRoomId);
console.log(nameCardInfo);
const userNamecardTemplate = $('#namecard-template').html();
let namecardHtml = Mustache.render(userNamecardTemplate, {
loginId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
};
CHAT_UI.refesshAllGroupSearchFaborite = function(groupId) {
const userNamecardTemplate = $('#namecard-template').html();
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(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#userInGroupList').append(obj);
})
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
>>>>>>> origin/develop_createRoom_UI
CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
......@@ -1418,3 +1900,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
}
<<<<<<< HEAD
=======
>>>>>>> origin/develop_apply_design_chat
>>>>>>> origin/develop_createRoom_UI
public/js/chat-websocket.js
......@@ -365,23 +365,20 @@ function setSocketAction () {
$('#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 {
......
public/js/constant.js
......@@ -25,3 +25,8 @@ const chatRoomType = {
DM : "1",
GROUP : "0"
}
const nameCardAreaId = {
MY : "myNamecard",
USER : "userNamecard"
}
\ No newline at end of file
public/js/language_en.js
......@@ -59,6 +59,20 @@ $.lang.en = {
"favorite":"Favorite List",
"mygroup":"My Group",
"groupChatRoom":"Group",
<<<<<<< HEAD
=======
"myGroup":"My Group",
"allGroup":"All Group",
"returnToRootGroup":"Return to Root Group",
"returnToParentGroup":"Return to Parent Group",
"quickBtn":"Quick Button",
"groupPath":"Group Path",
"childGroup":"Minor Group",
"groupUser":" Member List",
"chat":"Chat",
"voice":"Call",
"addFavorite":"Add Favorite"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"Archive",
"archiveTypeImage":"Image",
"archiveTypeMovie":"Movie",
......
public/js/language_ja.js
......@@ -59,6 +59,20 @@ $.lang.ja = {
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ",
<<<<<<< HEAD
=======
"myGroup":"マイグループ",
"allGroup":"全グループ",
"returnToRootGroup":"トップグループに戻る",
"returnToParentGroup":"上位グループに戻る",
"quickBtn":"クイックボタン",
"groupPath":"グループパンクズ",
"childGroup":"下位グループ",
"groupUser":"所属ユーザ",
"chat":"チャット",
"voice":"通話",
"addFavorite":"お気に入り追加"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像",
"archiveTypeMovie":"動画",
......
public/js/language_ko.js
......@@ -59,6 +59,20 @@ $.lang.ko = {
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹",
<<<<<<< HEAD
=======
"myGroup":"내그룹",
"allGroup":"전그룹",
"returnToRootGroup":"최상위그룹으로 돌아가기",
"returnToParentGroup":"상위그룹으로 돌아가기",
"quickBtn":"퀵버튼",
"groupPath":"그룹 경로",
"childGroup":"하위 그룹",
"groupUser":"소속 사용자",
"chat":"채팅",
"voice":"통화",
"addFavorite":"즐겨찾기추가"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"아카이브",
"archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상",
......
public_new/archive.html
......@@ -64,7 +64,6 @@
</ul>
</div>
</main>
<!-- フッター -->
<footer>
<div class="footer-wrap">
......
public_new/chat.html
......@@ -68,8 +68,6 @@
<!-- オーバーレイ -->
<div class="chat_list">
<ul class="overlay_src_msg">
</ul>
</div>
</main>
......
public_new/chat_add_user_confirm.html
......@@ -78,8 +78,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -94,8 +93,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -110,8 +108,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -126,8 +123,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -142,8 +138,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -158,8 +153,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -174,8 +168,7 @@
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......
public_new/chat_make_room.html
......@@ -10,6 +10,7 @@
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/contact.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
......@@ -26,7 +27,7 @@
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ルーム開設</h1>
<h1 class="nav-ttl" id="title" style="font-size: 13px;">ルーム開設</h1>
</div>
</div>
<div class="col-4 pl-0">
......@@ -37,385 +38,144 @@
</nav><!-- nav -->
<!-- コンテンツ -->
<main>
<form class="" action="chat_make_room_confirm.html" method="post">
<main id="chatMakeRoom">
<form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
<!-- ユーザー検索 -->
<div class="search_form my-2">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- タブ -->
<div class="tabs">
<input id="tab1" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">マイグループ</label>
<input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">全グループ</label>
<div class="content tabs">
<input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
<input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail4 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star active"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star active"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ1</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ2</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<div id="favoriteListForMakeRoom"></div>
<div id="myGroupListForMakeRoom"></div>
</div>
</div>
<div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
<div class="chat_list">
<!-- 全グループ -->
<div class="category"><div class="category_name"><span>グループ1</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
<a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">トップグループに戻る</span>
</div>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</a>
</li>
</ul>
<div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
<a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">上位グループに戻る</span>
</div>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</a>
</li>
<div id="childGroupListAreaForMakeRoom"></div>
<div id="userInGroupListForMakeRoom"></div>
</ul>
</div>
</div>
</div>
<div class="chat_make_room">
<ul class="overlay_src_msg">
</ul>
</div>
<!-- ルーム解説ボタン -->
<div class="make_room_confirm_btn">
<div class="make_room_confirm_btn content" id="makeRoomConfirmBtn">
<button type="button" name="button">
ルーム開設<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div>
</form>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/loading.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chatMakeRoom.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
if (CHAT_DB.loadSelectedUsers() != "") {
let selectedUsers = CHAT_DB.loadSelectedUsers();
selectedUsers.forEach(function(user) {
CHAT.globalSelectedUserList.push(user.shopMemberId);
})
};
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
if (CHAT.globalSelectedUserList.length > 0) {
$('.select_member_num').text(CHAT.globalSelectedUserList.length);
} else {
$('.select_member_num').text('0');
}
CHAT_UI.refreshMyGroupForMakeRoom();
};
</script>
</body>
</html>
public_new/chat_make_room_confirm.html
......@@ -19,8 +19,8 @@
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat_make_room.html"><span>ルーム開設</span></a>
<div class="nav_prev" id="prevBtn">
<a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
</div>
</div>
</div>
......@@ -41,163 +41,19 @@
<form action="chat_room.html" method="post">
<!-- ルーム名入力 -->
<div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
<label><h2>ルーム名</h2></label>
<input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
</div>
<!-- 参加者一覧 -->
<div class="chat_list">
<h2>参加者</h2>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<div id="selectedUserList"></div>
</ul>
</div>
<!-- ルーム解説ボタン -->
<div class="make_room_btn">
<div class="make_room_btn" id="makeRoomBtn">
<button type="button" name="button">
チャット開始</button>
</div>
......@@ -205,10 +61,46 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/loading.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
CHAT_UI.showMakeRoomConfirmView();
};
</script>
</body>
</html>
public_new/chat_room.html
......@@ -54,10 +54,7 @@
<!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none">
</div>
<div id="filter" class="user_list filter d-flex flex-row none"></div>
<div class="chat_list">
<ul class="overlay_src_msg">
</ul>
......@@ -178,7 +175,6 @@
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
......
public_new/collaboration_overlay_add_user_list.html
......@@ -61,8 +61,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......@@ -85,8 +84,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......@@ -109,8 +107,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......@@ -133,8 +130,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......@@ -157,8 +153,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......@@ -181,8 +176,7 @@
</div>
</div>
<div class="user_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="thumbnail"><div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
......
public_new/css/chat.css
......@@ -35,8 +35,8 @@ input[name="tab_item"] {
clear: both;
overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{
#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
display: block;
}
......@@ -96,48 +96,80 @@ input[name="tab_item"] {
background: aliceblue;
}
/* サムネイル画像 */
<<<<<<< HEAD
.chat_item_l .thumbnail {
=======
.chat_item_l .thubnail {
>>>>>>> origin/develop_createRoom_UI
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
<<<<<<< HEAD
.chat_item_l .thumbnail img{
width: 50px;
height: 50px;
}
.chat_item_l .thumbnail4 img {
=======
.chat_item_l .thubnail img{
width: 50px;
height: 50px;
}
.chat_item_l .thubnail4 img {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 25px;
float: left;
}
<<<<<<< HEAD
.chat_item_l .thumbnail3 .img_wrap:nth-child(1) {
=======
.chat_item_l .thubnail3 .img_wrap:nth-child(1) {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
<<<<<<< HEAD
.chat_item_l .thumbnail3 .img_wrap:nth-child(1) img {
=======
.chat_item_l .thubnail3 .img_wrap:nth-child(1) img {
>>>>>>> origin/develop_createRoom_UI
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
<<<<<<< HEAD
.chat_item_l .thumbnail3 .img_wrap:nth-child(2) {
=======
.chat_item_l .thubnail3 .img_wrap:nth-child(2) {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
<<<<<<< HEAD
.chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 30px;
}
.chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
=======
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 30px;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(3) {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 25px;
position: relative;
......@@ -145,20 +177,32 @@ input[name="tab_item"] {
float: left;
}
<<<<<<< HEAD
.chat_item_l .thumbnail2 .img_wrap:nth-child(1) {
=======
.chat_item_l .thubnail2 .img_wrap:nth-child(1) {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
<<<<<<< HEAD
.chat_item_l .thumbnail2 .img_wrap:nth-child(2) {
=======
.chat_item_l .thubnail2 .img_wrap:nth-child(2) {
>>>>>>> origin/develop_createRoom_UI
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
}
<<<<<<< HEAD
.chat_item_l .thumbnail2 .img_wrap img {
=======
.chat_item_l .thubnail2 .img_wrap img {
>>>>>>> origin/develop_createRoom_UI
width: 50px;
height: 50px;
position: absolute;
......
public_new/js/chat-db.js
......@@ -82,6 +82,16 @@ CHAT_DB.getGroupInfo = function(groupId) {
}
};
CHAT_DB.loadSelectedUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
console.log(JSON.parse(android.getSelectedUserList()));
return JSON.parse(android.getSelectedUserList());
}
}
CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
......@@ -224,4 +234,4 @@ CHAT_DB.searchMessages = function(keyword, userList) {
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.searchMessages(keyword, userList));
}
};
\ No newline at end of file
};
public_new/js/chat-ui.js
......@@ -1008,7 +1008,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
}
var rooms = CHAT_DB.getRoomList(roomType, null);
CHAT.globalIsInvite = false;
activeRoomId = null;
// #36146に対応
$('#groupChatList').empty();
$('#dmChatList').empty();
......@@ -1244,6 +1243,19 @@ $('#tabMyGroup').on('click', function(e) {
CHAT_UI.refreshContactScreen();
});
$('#tabMyGroupOnMakeRoom').on('click', function(e) {
CHAT_UI.refreshMyGroupForMakeRoom();
});
$('#tabAllGroupOnMakeRoom').on('click', function(e) {
CHAT_UI.refreshAllGroupForMakeRoom('0');
});
$('#makeRoomConfirmBtn').on('click', function(e) {
android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
$('#makeRoomForm').submit();
});
CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
if ($(star).hasClass('active')) {
CHAT_UI.removeFavoriteUser(shopMemberId);
......@@ -1612,3 +1624,322 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
};
CHAT_UI.refreshMyGroupForMakeRoom = function() {
$(".modal-backdrop").remove();
$('#favoriteListForMakeRoom').html('');
$('#myGroupListForMakeRoom').html('');
//画面タイトル設定
let contactListTitle = getLocalizedString("userSearch");
$('#title').text(contactListTitle);
// グループの様式を読み込む
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
// ユーザの様式を読み込む
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var groupUserTemplate;
$.get({ url: "./template/template_make_room_group_user_list.html", async: false }
, function(text) {
groupUserTemplate = text;
});
if (IS_ONLINE == 'true') {
android.updateGroupInfo('0');
android.updateMyInfo();
android.updateGroupUser();
android.updateFavorite();
}
//お気に入りグループ取得。
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function(favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName,
id: favoriteGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#favoriteListForMakeRoom').append(obj);
})
//お気に入りユーザ取得。
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == favoriteUser.shopMemberId;
})
if (findObj) {
favoriteUser.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: favoriteUserList
});
let obj = jQuery.parseHTML(html);
$('#favoriteListForMakeRoom').append(obj);
/*favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(userTemplate, {
shopMemberId: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName,
isFavorite: true
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#favoriteList').append(obj);
})*/
var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function(myGroup) {
myGroup.groupUserList.forEach(function(groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
})
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#myGroupListForMakeRoom').append(obj);
})
}
CHAT_UI.refreshAllGroupForMakeRoom = function(groupId) {
$('.cancel').addClass('none');
$('.search_form input').removeClass('focus');
$('.search_form input').val('');
$('.search_form form').removeClass();
$('.content').removeClass('none');
$('.overlay_src_msg').empty();
$('#tabAllGroupOnMakeRoom').prop('checked', true);
//オンライン状態であればサーバから情報更新。
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
//画面エリアを初期化。
$('#parentGroupBtnForMakeRoom').off();
$('#rootGroupBtnForMakeRoom').off();
$('#childGroupListAreaForMakeRoom').html('');
$('#userInGroupListForMakeRoom').html('');
$('#groupPathAreaForMakeRoom').html('');
//DBからグループ情報を取得。
var result = CHAT_DB.getGroupInfo(groupId);
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== 'undefined') {
$('#parentGroupBtnForMakeRoom').on('click', function() {
CHAT_UI.refreshAllGroupForMakeRoom(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#rootGroupBtnForMakeRoom').on('click', function() {
CHAT_UI.refreshAllGroupForMakeRoom(result.rootGroupId);
});
}
//該当グループのパースを表示。
var groupPathTemplate;
$.get({ url: "./template/template_make_room_group_path.html", async: false }
, function(text) {
groupPathTemplate = text;
});
var groupPathCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (!(groupPathCount < (result.groupPathList.length - 3))) {
let html = Mustache.render(groupPathTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = jQuery.parseHTML(html);
$('#groupPathAreaForMakeRoom').append(obj);
}
groupPathCount++;
})
//該当グループの下位グループ表示。
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#childGroupListAreaForMakeRoom').append(obj);
})
//該当グループの所属ユーザを表示。
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
result.groupUserList.forEach(function(groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
})
let html = Mustache.render(userTemplate, {
userList: result.groupUserList
});
let obj = jQuery.parseHTML(html);
$('#userInGroupListForMakeRoom').append(obj);
};
CHAT_UI.checkForMakeChat = function(checkMemberId) {
var nameInfo = CHAT_DB.getNameCardData(checkMemberId);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == checkMemberId;
})
if (findObj) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(shopMemberId) {
return checkMemberId != shopMemberId;
});
} else {
// add
CHAT.globalSelectedUserList.push(nameInfo.shopMemberId);
}
if($('.checkbox' + checkMemberId).prop('checked')){
$('.checkbox' + checkMemberId).attr('checked', true);
}else{
$('.checkbox' + checkMemberId).removeAttr('checked');
}
let cnt = CHAT.globalSelectedUserList.length;
if (CHAT.globalSelectedUserList.length > 0) {
$('.select_member_num').text(cnt);
} else {
$('.select_member_num').text('0');
}
};
CHAT_UI.showMakeRoomConfirmView = function() {
$('#selectedUserList').html('');
var userTemplate;
$.get({ url: "./template/template_make_room_confirm_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var selectedUserList = CHAT_DB.loadSelectedUsers();
console.log("check = " + selectedUserList);
selectedUserList.forEach(function(user){
let html = Mustache.render(userTemplate, {
id: user.shopMemberId,
profileImage: CHAT.getProfileImgUrl(user.profileUrl),
name: user.shopMemberName
});
let obj = jQuery.parseHTML(html);
$('#selectedUserList').append(obj);
})
$("#makeRoomBtn").off().on('click', function() {
// #36130に対応
const trimmedRoomName = $('#newRoomName').val().trim();
if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
let userNameList = new Array();
selectedUserList.forEach(function(user){
userIdList.push(user.shopMemberId);
userNameList.push(user.shopMemberName);
})
//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
//todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName);
} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
|| trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
|| trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
|| trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
// #36147
// #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
} else if (trimmedRoomName.length > 20) {
// #36142
var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
$('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
});
} else {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
selectedUserList.forEach(function(user){
userIdList.push(user.shopMemberId);
})
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
android.createChatRoom("1",userIdList.join(','),encodedRoomName);
}
});
}
\ No newline at end of file
public_new/js/chatMakeRoom.js 0 → 100644
$(function() {
// メンバー検索
$('#chatMakeRoom .search_form input[type="search"]').keyup(function(){
var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
$('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
//グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, {
name: group.groupName,
id: group.groupId,
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
})
//ユーザデータ検索
var userList = CHAT_DB.getAllGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
　　//連絡先画面
} else {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
var userList = CHAT_DB.getMyGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').html(obj);
}
});
});
public_new/js/constant.js
......@@ -32,4 +32,4 @@ const nameCardAreaId = {
USER : "userNamecard"
}
const messageSeperator = "<::split>";
\ No newline at end of file
const messageSeperator = "<::split>";
public_new/js/loading.js
$(window).load(function () { //読み込み完了したら実行する
$(window).on('load',function () { //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
$('#loader').delay(600).fadeOut(300);
});
......
public_new/template/template_make_room_confirm_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{name}}</span>
</div>
</div>
</div>
</div>
</li>
</ul>
\ No newline at end of file
public_new/template/template_make_room_group_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{name}}</span>
</div>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/template/template_make_room_group_path.html 0 → 100644
<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
public_new/template/template_make_room_group_user_list.html 0 → 100644
<div class="category"><div class="category_name"><span>{{groupName}}</span></div></div>
<ul class="p-0 chat_make_room_list">
{{#groupUserList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/groupUserList}}
</ul>
\ No newline at end of file
public_new/template/template_make_room_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
{{#userList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/userList}}
</ul>
\ No newline at end of file
public_new/template/template_user_list.html
......@@ -4,8 +4,8 @@
<a href="javascript:return false;" onclick="CHAT_UI.makeNameCard({{shopMemberId}})" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......
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