Skip to content

C
chat_webview
Commit 807f9237 by Lee Munkyeong
Options

Merge branch 'origin/develop_apply_design_chat' into 'origin/develop_apply_design' 

Origin/develop apply design chat

See merge request !13
parents 45f74721 750300a0
Showing with 2247 additions and 1366 deletions
public/css/chat.css
...@@ -98,6 +98,7 @@ img { ...@@ -98,6 +98,7 @@ img {
float: left; float: left;
padding: 0 0 0 15px; padding: 0 0 0 15px;
width: 85%; width: 85%;
padding-top: 6px;
} }
#room_list, #group_list, #user_list, #select_user_list { #room_list, #group_list, #user_list, #select_user_list {
...@@ -506,7 +507,7 @@ a.article:hover { ...@@ -506,7 +507,7 @@ a.article:hover {
padding-left: 12%; padding-left: 12%;
} }
.userCheckBox{ .userCheckBox{
margin-left: -12%; margin-left: 80%;
} }
.nav-item .dropdown-toggle::after{ .nav-item .dropdown-toggle::after{
...@@ -710,7 +711,7 @@ a.article:hover { ...@@ -710,7 +711,7 @@ a.article:hover {
} }
.chat-list-type-btn { .chat-list-type-btn {
width: 30%; width: 40%;
} }
#my_info > div > div { #my_info > div > div {
padding-left: 5%; padding-left: 5%;
...@@ -724,6 +725,10 @@ a.article:hover { ...@@ -724,6 +725,10 @@ a.article:hover {
padding-left: 5%; padding-left: 5%;
} }
#my_group_list > div > div {
padding-left: 5%;
}
.contact-seperator { .contact-seperator {
width: 100%; width: 100%;
background-color: #095395!important; background-color: #095395!important;
...@@ -741,9 +746,6 @@ a.article:hover { ...@@ -741,9 +746,6 @@ a.article:hover {
min-height: 250px; min-height: 250px;
top: 20%; top: 20%;
background: #F7FFF4; background: #F7FFF4;
}
#namecard {
z-index: 10051; z-index: 10051;
} }
...@@ -760,6 +762,44 @@ a.article:hover { ...@@ -760,6 +762,44 @@ a.article:hover {
text-align: center; 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 { .inbox_archive {
width: 100%; width: 100%;
} }
...@@ -888,3 +928,7 @@ a.article:hover { ...@@ -888,3 +928,7 @@ a.article:hover {
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
<<<<<<< HEAD
=======
>>>>>>> origin/develop_apply_design_chat
>>>>>>> origin/develop_createRoom_UI
public/index.html
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
</div> </div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <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="heading_srch">
<div class="srch_bar"> <div class="srch_bar">
<div class="stylish-input-group"> <div class="stylish-input-group">
...@@ -232,14 +232,48 @@ ...@@ -232,14 +232,48 @@
</div> </div>
</div> </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> </div>
<div id="myGroupArea">
<label class="contact-seperator" id="favorite-seperator">Favorite</label> <div id="my_info" class="inbox_user row">
<div id="favorite_list" 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> </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> </div>
...@@ -384,8 +418,9 @@ ...@@ -384,8 +418,9 @@
</ul> </ul>
</div> </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"> <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"> <div class="col-4">
<img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton"> <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
...@@ -398,7 +433,7 @@ ...@@ -398,7 +433,7 @@
</div> </div>
</nav> </nav>
<script id="my-namecard-template" type="text/template"> <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"> <div class="namecard_img">
<img src="./images/user-profile.png" alt> <img src="./images/user-profile.png" alt>
<div class="namedard-img-upload" >Upload</div> <div class="namedard-img-upload" >Upload</div>
...@@ -411,7 +446,7 @@ ...@@ -411,7 +446,7 @@
</div> </div>
</script> </script>
<script id="namecard-template" type="text/template"> <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"> <div class="namecard_img">
<img src="./images/user-profile.png" alt> <img src="./images/user-profile.png" alt>
<div class="namecard-login-id">{{name}}</div> <div class="namecard-login-id">{{name}}</div>
...@@ -421,11 +456,22 @@ ...@@ -421,11 +456,22 @@
<li><b>{{.}}</b></li> <li><b>{{.}}</b></li>
{{/groupPathList}} {{/groupPathList}}
</div> </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>
<script id="message-template" type="text/template"> <script id="message-template" type="text/template">
<div class="incoming_msg"> <div class="incoming_msg">
<div class="incoming_msg_img"> <div class="incoming_msg_img">
<img src={{{profileImage}}} alt=""> <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
</div> </div>
<div class="received_msg"> <div class="received_msg">
<div class="received_withd_msg"> <div class="received_withd_msg">
...@@ -478,7 +524,7 @@ ...@@ -478,7 +524,7 @@
</div> </div>
</script> </script>
<script id="group-template" type="text/template"> <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_people">
<div class="group_img"> <div class="group_img">
<img src="./images/group-image.png" alt=""> <img src="./images/group-image.png" alt="">
...@@ -512,6 +558,9 @@ ...@@ -512,6 +558,9 @@
</div> </div>
</div> </div>
</script> </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"> <script id="favorite-user-template" type="text/template">
<div class="user_list col-12" data-name="{{name}}"> <div class="user_list col-12" data-name="{{name}}">
<div class="user_people"> <div class="user_people">
......
public/js/chat-db.js
...@@ -14,11 +14,13 @@ CHAT_DB.getRoomList = function(roomType) { ...@@ -14,11 +14,13 @@ CHAT_DB.getRoomList = function(roomType) {
//ロカールDBからログインしたユーザのデータを取得する。 //ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) { CHAT_DB.getMyInfo = function(input) {
var result = JSON.parse(android.getMyInfo());
CHAT.globalLoginParameter.shopMemberId = result.shopMemberId;
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
return JSON.parse(android.getMyInfo()); return result;
} }
}; };
...@@ -58,6 +60,26 @@ CHAT_DB.getMyGroupUsers = function() { ...@@ -58,6 +60,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() { CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn // String形式をJsonに変更してReturn
...@@ -123,4 +145,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) { ...@@ -123,4 +145,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) {
//TODO Android処理追加必要 //TODO Android処理追加必要
} }
}; };
<<<<<<< HEAD
=======
>>>>>>> origin/develop_createRoom_UI
public/js/chat-ui.js
...@@ -55,11 +55,12 @@ $(window).on('resize', function() { ...@@ -55,11 +55,12 @@ $(window).on('resize', function() {
// チャットルーム生成ボタン処理 // チャットルーム生成ボタン処理
$('#createChatRoom').on('click', function() { $('#createChatRoom').on('click', function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); // CHAT_UI.showLoadingIndicator();
let isInvite = false; let isInvite = false;
CHAT.globalIsInvite = isInvite; CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite); // socket.emit('getGroupList', isInvite);
CHAT_UI.refreshGroupSearch('0', isInvite);
}); });
// Room Delete // Room Delete
...@@ -475,10 +476,15 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -475,10 +476,15 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
break; break;
case '#pills-contact': case '#pills-contact':
$('#namecard').html(''); $('#myNamecard').html('');
$('#homeButton').show(); $('#homeButton').show();
$("#backButton").hide(); $("#backButton").hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('#myGroupArea').show();
$('#newRoomName').val('');
$('#userSelectionLength').text('');
CHAT.globalSelectedUserList = [];
$('#allGroupArea').hide();
$('#my_info').show(); $('#my_info').show();
$('#bottomNav').show(); $('#bottomNav').show();
break; break;
...@@ -647,7 +653,7 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -647,7 +653,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
let html = Mustache.render(template, { let html = Mustache.render(template, {
id: user.shopMemberId, id: user.shopMemberId,
profileImage: user.profileImagePath, profileImage: user.profileImagePath,
name: user.loginId name: user.shopMemberName
}); });
// TODO 次のコミットに参考事項 // TODO 次のコミットに参考事項
// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので // チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
...@@ -671,7 +677,7 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -671,7 +677,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
socket.emit('getGroupList', isInvite) CHAT_UI.refreshGroupSearch("0", isInvite);
}); });
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
...@@ -714,10 +720,8 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -714,10 +720,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
// ルーム名のURIencodingを行う // ルーム名のURIencodingを行う
//const encodedRoomName = encodeURIComponent(newRoomName); //const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api //todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName); android.createChatRoom("1", userIdList.join(','), newRoomName);
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) { /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
...@@ -807,15 +811,8 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -807,15 +811,8 @@ CHAT_UI.showConfirmView = function(isInvite) {
// ルーム名のtrimmingした後、URIencodingを行う // ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName); const encodedRoomName = encodeURIComponent(trimmedRoomName);
socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) { android.createChatRoom("1",userIdList.join(','),encodedRoomName);
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');
});
});
} }
} }
} }
...@@ -879,6 +876,19 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -879,6 +876,19 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#dmBtn").text(getLocalizedString("directMessageChatRoom")) $("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
$("#groupBtn").text(getLocalizedString("groupChatRoom")) $("#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")) $("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup")) $("#mygroup-seperator").text(getLocalizedString("mygroup"))
} }
...@@ -906,28 +916,183 @@ CHAT_UI.waitForLoadingImage = function(div, callback) { ...@@ -906,28 +916,183 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
} }
$('#contactButton').on('click', function(event){ $('#contactButton').on('click', function(event){
CHAT_UI.refreshContactScreen(); let isCreate = false;
let isInvite = false;
CHAT_UI.refreshContactScreen(isCreate, isInvite);
}); });
$('#chatButton').on('click', function(event){ $('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM); 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') {
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refreshGroupSearch(result.parentGroupId, isInvite);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#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){ $('#archiveButton').on('click', function(event){
CHAT_UI.refreshArchiveScreen(); CHAT_UI.refreshArchiveScreen();
}); });
<<<<<<< HEAD
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
=======
CHAT_UI.refreshContactScreen = function(isCreate, isInvite) {
>>>>>>> origin/develop_createRoom_UI
//loadingIndicatorを表示 //loadingIndicatorを表示
$('#my_info').html(''); $('#my_info').html('');
$('#favorite_list').html(''); $('#favorite_list').html('');
$('#my_group_list').html(''); $('#my_group_list').html('');
CHAT_UI.showLoadingIndicator(); 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(); const groupTemplate = $('#group-template').html();
...@@ -935,41 +1100,43 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -935,41 +1100,43 @@ CHAT_UI.refreshContactScreen = function() {
// ユーザの様式を読み込む // ユーザの様式を読み込む
const userTemplate = $('#user-template').html(); const userTemplate = $('#user-template').html();
const myNamecardTemplate = $('#my-namecard-template').html(); const myNamecardTemplate = $('#my-namecard-template').html();
const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
android.updateGroupInfo(); android.updateGroupInfo('0');
android.updateMyInfo(); android.updateMyInfo();
android.updateGroupUser(); 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, { let myNamecardHtml = Mustache.render(myNamecardTemplate, {
loginId: myInfo.shopMemberId, loginId: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath, profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName, name: myInfo.shopMemberName,
groupPathList: myInfo.groupPathList groupPathList: myInfo.groupPathList
}); });
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){ let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
}); });
$('#namecard').append(myNamecardObj); $('#myNamecard').append(myNamecardObj);
let html = Mustache.render(userTemplate, { let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId, id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath, profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName name: myInfo.shopMemberName
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function(){ let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.showNamecard('namecard'); CHAT_UI.showNamecard('myNamecard');
}); });
$('#my_info').append(obj); $('#my_info').append(obj);
}
var groupUserList = CHAT_DB.getMyGroupUsers(); var groupUserList = CHAT_DB.getMyGroupUsers();
groupUserList.forEach(function(groupUser) { groupUserList.forEach(function(groupUser) {
...@@ -981,13 +1148,36 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -981,13 +1148,36 @@ CHAT_UI.refreshContactScreen = function() {
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function(){ let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action if (isCreate != true) {
if (IS_ONLINE == 'true') { CHAT_UI.makeNameCard(groupUser.shopMemberId);
android.updateUserInfo(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); $('#my_group_list').append(obj);
}) })
var favoriteCount = 0; var favoriteCount = 0;
...@@ -999,6 +1189,10 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -999,6 +1189,10 @@ CHAT_UI.refreshContactScreen = function() {
let obj = $(jQuery.parseHTML(html)).on('click', function(){ let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action //TODO need onClick Action
if (isCreate != true) {
} else {
CHAT_UI.refreshGroupSearch(favoriteGroup.groupId, isInvite);
}
}); });
favoriteCount++ favoriteCount++
$('#favorite_list').append(obj); $('#favorite_list').append(obj);
...@@ -1015,7 +1209,34 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1015,7 +1209,34 @@ CHAT_UI.refreshContactScreen = function() {
let obj = $(jQuery.parseHTML(html)).on('click', function(){ let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action //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++ favoriteCount++
$('#favorite_list').append(obj); $('#favorite_list').append(obj);
}) })
...@@ -1027,6 +1248,19 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1027,6 +1248,19 @@ CHAT_UI.refreshContactScreen = function() {
$('#favorite_list').show(); $('#favorite_list').show();
$('#favorite-seperator').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(); CHAT_UI.dismissLoadingIndicator();
} }
...@@ -1126,10 +1360,8 @@ CHAT_UI.joinRoom = function(roomId,roomName) { ...@@ -1126,10 +1360,8 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
}; };
CHAT_UI.loadMessages = function(messages, roomId, roomName) { CHAT_UI.loadMessages = function(messages, roomId, roomName) {
$('#messages').html(''); $('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName); $('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder")); $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
let jQueryMessages = $('#messages'); let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する // スクロールの変化を防ぐため以前画面の高さを保存する
...@@ -1157,6 +1389,7 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) { ...@@ -1157,6 +1389,7 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.message, text: message.message,
from: message.loginId, from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileImagePath, profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay, createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime createdAtTime: messageTime.createdAtTime
...@@ -1199,31 +1432,267 @@ $('#groupBtn').on('click', function (e){ ...@@ -1199,31 +1432,267 @@ $('#groupBtn').on('click', function (e){
CHAT_UI.refreshRoomList(chatRoomType.GROUP); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
}); });
CHAT_UI.showNamecard = function(id) { CHAT_UI.showNamecard = function(id) {
$('#namecard').appendTo("body").modal({ $('#'+id).appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
} }
CHAT_UI.hideNamecard = function(id) { 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) { CHAT_UI.showUserNamecard = function(shopMemberId) {
// $('#namecard').appendTo("body").modal({ // $('#myNamecard').appendTo("body").modal({
// backdrop: 'static', // backdrop: 'static',
// keyboard: false // 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') {
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#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) {
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
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) {
var nameCardInfo = CHAT_DB.getNameCardData(chatRoomId);
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') {
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#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() { CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
...@@ -1418,3 +1887,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1418,3 +1887,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// loadingIndicatorを非表示 // loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
<<<<<<< HEAD
=======
>>>>>>> origin/develop_apply_design_chat
>>>>>>> origin/develop_createRoom_UI
public/js/chat-websocket.js
...@@ -365,23 +365,20 @@ function setSocketAction () { ...@@ -365,23 +365,20 @@ function setSocketAction () {
$('#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) { if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length); $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else { } else {
......
public/js/constant.js
...@@ -25,3 +25,8 @@ const chatRoomType = { ...@@ -25,3 +25,8 @@ const chatRoomType = {
DM : "1", DM : "1",
GROUP : "0" 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 = { ...@@ -59,6 +59,20 @@ $.lang.en = {
"favorite":"Favorite List", "favorite":"Favorite List",
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"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", "archiveListTitle":"Archive",
"archiveTypeImage":"Image", "archiveTypeImage":"Image",
"archiveTypeMovie":"Movie", "archiveTypeMovie":"Movie",
......
public/js/language_ja.js
...@@ -59,6 +59,20 @@ $.lang.ja = { ...@@ -59,6 +59,20 @@ $.lang.ja = {
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ", "groupChatRoom":"グループ",
<<<<<<< HEAD
=======
"myGroup":"マイグループ",
"allGroup":"全グループ",
"returnToRootGroup":"トップグループに戻る",
"returnToParentGroup":"上位グループに戻る",
"quickBtn":"クイックボタン",
"groupPath":"グループパンクズ",
"childGroup":"下位グループ",
"groupUser":"所属ユーザ",
"chat":"チャット",
"voice":"通話",
"addFavorite":"お気に入り追加"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像", "archiveTypeImage":"画像",
"archiveTypeMovie":"動画", "archiveTypeMovie":"動画",
......
public/js/language_ko.js
...@@ -59,6 +59,20 @@ $.lang.ko = { ...@@ -59,6 +59,20 @@ $.lang.ko = {
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹", "groupChatRoom":"그룹",
<<<<<<< HEAD
=======
"myGroup":"내그룹",
"allGroup":"전그룹",
"returnToRootGroup":"최상위그룹으로 돌아가기",
"returnToParentGroup":"상위그룹으로 돌아가기",
"quickBtn":"퀵버튼",
"groupPath":"그룹 경로",
"childGroup":"하위 그룹",
"groupUser":"소속 사용자",
"chat":"채팅",
"voice":"통화",
"addFavorite":"즐겨찾기추가"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveTypeImage":"이미지", "archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상", "archiveTypeMovie":"동영상",
......
public_new/archive.html
...@@ -64,7 +64,6 @@ ...@@ -64,7 +64,6 @@
</ul> </ul>
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer>
<div class="footer-wrap"> <div class="footer-wrap">
......
public_new/chat.html
...@@ -68,8 +68,6 @@ ...@@ -68,8 +68,6 @@
<!-- オーバーレイ --> <!-- オーバーレイ -->
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
</div> </div>
</main> </main>
...@@ -123,7 +121,6 @@ ...@@ -123,7 +121,6 @@
String.prototype.replaceAll = function(org, dest) { String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest); return this.split(org).join(dest);
} }
let CHAT_SERVER_URL = ''; let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = ''; let CMS_SERVER_URL = '';
let ASSET_PATH = './'; let ASSET_PATH = './';
...@@ -133,6 +130,7 @@ ...@@ -133,6 +130,7 @@
$("#loadingArea").load("./loading.html"); $("#loadingArea").load("./loading.html");
android.getLoginParameter(); android.getLoginParameter();
android.getGlobalParameter(); android.getGlobalParameter();
android.saveSelectedUserList("");
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl; CHAT_SERVER_URL = chatServerUrl;
...@@ -142,6 +140,7 @@ ...@@ -142,6 +140,7 @@
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
console.log("onChat"); console.log("onChat");
CHAT_UI.refreshRoomList(chatRoomType.GROUP); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
CHAT_UI.dismissLoadingIndicator();
}; };
</script> </script>
</body> </body>
......
public_new/chat_add_user.html
...@@ -10,421 +10,172 @@ ...@@ -10,421 +10,172 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.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/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
<div class="row h-100 align-items-center"> <div class="row h-100 align-items-center">
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="chat_room.html"><span>ルーム</span></a> <a href="chat_room.html"><span>ルーム</span></a>
</div>
</div> </div>
</div> </div>
<div class="col-4 p-0"> </div>
<div class="nav-item p-0"> <div class="col-4 p-0">
<h1 class="nav-ttl">ユーザー招待</h1> <div class="nav-item p-0">
</div> <h1 class="nav-ttl" id="title" style="font-size: 13px;">ユーザ招待</h1>
</div> </div>
<div class="col-4 pl-0"> </div>
<div class="nav-item text-right"> <div class="col-4 pl-0">
</div> <div class="nav-item text-right">
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="chat_add_user">
<form action="chat_add_user_confirm.html" method="post">
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div> </div>
<!-- タブ --> </div><!-- .col -->
<div class="content tabs"> </div><!-- .row -->
<input id="tab1" type="radio" name="tab_item" checked> </nav><!-- nav -->
<label class="tab_item" for="tab1">マイグループ</label>
<input id="tab2" type="radio" name="tab_item"> <!-- コンテンツ -->
<label class="tab_item" for="tab2">全グループ</label> <main id="chat_add_user">
<div class="tab_content" id="tab1_content"> <form id="addUserForm" action="chat_add_user_confirm.html" method="post">
<div class="chat_list"> <!-- ユーザー検索 -->
<!-- お気に入りグループ --> <div class="search_form my-2">
<div class="category">お気に入り</div> <form>
<ul class="p-0 chat_make_room_list"> <input type="search" name="search" placeholder="ユーザー検索">
<li class="d-flex align-items-center"> <span class="src_icon"></span>
<div class="chat_item d-flex flex-row align-items-center w-100"> <a href="#" class="cancel none">キャンセル</a>
<div class="chat_item_l_chk"> </form>
<div class="checkbox"> </div>
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <!-- タブ -->
<span class="checkbox-parts"></span> <div class="content tabs">
</label> <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
</div> <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
</div> <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
<div class="chat_item_l"> <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="thumbnail"> <div class="tab_content" id="tab1_content">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <div class="chat_list">
</div> <!-- お気に入りグループ -->
</div> <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
<div class="chat_item_m"> <div id="favoriteListForMakeRoom"></div>
<div class="d-flex flex-column"> <div id="myGroupListForMakeRoom"></div>
<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 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 disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category">マイグループ1</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">マイグループ2</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>
</div> </div>
<div class="tab_content" id="tab2_content"> </div>
<div class="chat_list"> <div class="tab_content" id="tab2_content">
<!-- 全グループ --> <div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
<div class="category">グループ1</div> <div class="chat_list">
<ul class="p-0 chat_make_room_list"> <!-- 全グループ -->
<li class="d-flex align-items-center"> <ul class="p-0 chat_make_room_list">
<div class="chat_item d-flex flex-row align-items-center w-100"> <li class="d-flex align-items-center">
<div class="chat_item_l_chk"> <a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
<div class="checkbox"> <div class="chat_item d-flex flex-row align-items-center">
<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">グループ2</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="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span> <span class="chat_item_ttl">トップグループに戻る</span>
</div> </div>
</div> </div>
</div> </div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div> </div>
</li> </a>
<li class="d-flex align-items-center"> </li>
<div class="chat_item d-flex flex-row align-items-center w-100"> <li class="d-flex align-items-center">
<div class="chat_item_l_chk"> <a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
<div class="checkbox"> <div class="chat_item d-flex flex-row align-items-center">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span> <span class="chat_item_ttl">上位グループに戻る</span>
</div> </div>
</div> </div>
</div> </div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div> </div>
</li> </a>
</ul> </li>
</div> <div id="childGroupListAreaForMakeRoom"></div>
<div id="userInGroupListForMakeRoom"></div>
</ul>
</div> </div>
</div> </div>
<!-- オーバーレイ --> </div>
<div class="chat_list"> <div class="chat_make_room">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
</div> </div>
<!-- ユーザー招待確認ボタン -->
<div class="add_user_confirm_btn">
<button type="button" name="button">
確認<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div>
</form>
</main>
<!-- ルーム解説ボタン -->
<div class="make_room_confirm_btn content" id="addUserConfirmBtn">
<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/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.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/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.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 src="./js/chat-add-user.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);
})
};
if (CHAT.globalSelectedUserList.length > 0) {
$('.select_member_num').text(CHAT.globalSelectedUserList.length);
} else {
$('.select_member_num').text('0');
}
CHAT_UI.refreshMyGroupForAddUser();
};
</script>
</body> </body>
</html> </html>
public_new/chat_add_user_confirm.html
...@@ -43,165 +43,58 @@ ...@@ -43,165 +43,58 @@
<div class="chat_list"> <div class="chat_list">
<h2>参加者</h2> <h2>参加者</h2>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <div id="selectedUserList"></div>
<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>
</ul> </ul>
</div> </div>
<!-- ユーザー招待ボタン --> <!-- ユーザー招待ボタン -->
<div class="add_user_btn"> <div class="add_user_btn">
<button type="button" name="button">招待</button> <button type="button" name="button" id="addUserBtn">招待</button>
</div> </div>
</form> </form>
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.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/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/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);
}
<script src="./js/libs/jquery-3.3.1.min.js"></script> let CHAT_SERVER_URL = '';
<script src="./js/libs/moment.js"></script> let CMS_SERVER_URL = '';
<script src="./js/libs/bootstrap.min.js"></script> let ASSET_PATH = './';
<script src="./js/libs/jquery.mark.min.js"></script> let PLATFORM = '';
<script src="./js/chat.js"></script> 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();
CHAT_UI.showAddUserConfirmView();
};
</script>
</body> </body>
</html> </html>
public_new/chat_make_room.html
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.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/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item 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> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -37,385 +38,144 @@ ...@@ -37,385 +38,144 @@
</nav><!-- nav --> </nav><!-- nav -->
<!-- コンテンツ --> <!-- コンテンツ -->
<main> <main id="chatMakeRoom">
<form class="" action="chat_make_room_confirm.html" method="post"> <form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<div class="search_form my-2"> <div class="search_form my-2">
<form> <form>
<input type="search" name="search" placeholder="ユーザー検索"> <input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span> <span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form> </form>
</div> </div>
<!-- タブ --> <!-- タブ -->
<div class="tabs"> <div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked> <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item">
<label class="tab_item" for="tab1">マイグループ</label> <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
<input id="tab2" type="radio" name="tab_item"> <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab2">全グループ</label> <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
<ul class="p-0 chat_make_room_list"> <div id="favoriteListForMakeRoom"></div>
<li class="d-flex align-items-center"> <div id="myGroupListForMakeRoom"></div>
<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> </div>
</div> </div>
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
<div class="category"><div class="category_name"><span>グループ1</span></div></div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
<div class="chat_item_l_chk"> <div class="chat_item d-flex flex-row align-items-center">
<div class="checkbox"> <div class="chat_item_l">
<label> <div class="thumbnail">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
<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>
</div> <div class="chat_item_m px-0">
<div class="chat_item_r"> <div class="d-flex flex-column">
<span class="star disable"></span> <div class="chat_item_t">
</div> <span class="chat_item_ttl">トップグループに戻る</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>
</div> </div>
<div class="chat_item_r"> </a>
<span class="star disable"></span>
</div>
</div>
</li> </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"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
<div class="chat_item_l_chk"> <div class="chat_item d-flex flex-row align-items-center">
<div class="checkbox"> <div class="chat_item_l">
<label> <div class="thumbnail">
<input type="checkbox" name="checkbox[]" class="checkbox-input"> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
<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>
</div> <div class="chat_item_m px-0">
<div class="chat_item_r"> <div class="d-flex flex-column">
<span class="star disable"></span> <div class="chat_item_t">
</div> <span class="chat_item_ttl">上位グループに戻る</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>
</div> </div>
<div class="chat_item_r"> </a>
<span class="star disable"></span>
</div>
</div>
</li> </li>
<div id="childGroupListAreaForMakeRoom"></div>
<div id="userInGroupListForMakeRoom"></div>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="chat_make_room">
<ul class="overlay_src_msg" style="padding-inline-start: 20px;">
</ul>
</div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="make_room_confirm_btn"> <div class="make_room_confirm_btn content" id="makeRoomConfirmBtn">
<button type="button" name="button"> <button type="button" name="button">
ルーム開設<br> ルーム開設<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button> <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div> </div>
</form> </form>
</main> </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> if (CHAT.globalSelectedUserList.length > 0) {
<script src="./js/libs/moment.js"></script> $('.select_member_num').text(CHAT.globalSelectedUserList.length);
<script src="./js/libs/bootstrap.min.js"></script> } else {
<script src="./js/libs/jquery.mark.min.js"></script> $('.select_member_num').text('0');
<script src="./js/chat.js"></script> }
<script src="./js/common.js"></script> CHAT_UI.refreshAllGroupForMakeRoom(groupSearchFlg.ALL);
};
</script>
</body> </body>
</html> </html>
public_new/chat_make_room_confirm.html
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<div class="row h-100 align-items-center"> <div class="row h-100 align-items-center">
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev" id="prevBtn">
<a href="chat_make_room.html"><span>ルーム開設</span></a> <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,163 +41,19 @@ ...@@ -41,163 +41,19 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label><h2>ルーム名</h2></label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
</div> </div>
<!-- 参加者一覧 --> <!-- 参加者一覧 -->
<div class="chat_list"> <div class="chat_list">
<h2>参加者</h2> <h2>参加者</h2>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <div id="selectedUserList"></div>
<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>
</ul> </ul>
</div> </div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="make_room_btn"> <div class="make_room_btn" id="makeRoomBtn">
<button type="button" name="button"> <button type="button" name="button">
チャット開始</button> チャット開始</button>
</div> </div>
...@@ -205,10 +61,46 @@ ...@@ -205,10 +61,46 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/chat.js"></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> </body>
</html> </html>
public_new/chat_room.html
...@@ -52,42 +52,9 @@ ...@@ -52,42 +52,9 @@
</div> </div>
<!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none">
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
</div>
<!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none"></div>
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
...@@ -208,7 +175,6 @@ ...@@ -208,7 +175,6 @@
android.getLoginParameter(); android.getLoginParameter();
android.getGlobalParameter(); android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl; CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl; CMS_SERVER_URL = cmsServerUrl;
...@@ -216,6 +182,7 @@ ...@@ -216,6 +182,7 @@
IS_MOBILE = isMobile; IS_MOBILE = isMobile;
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName); CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
}; };
</script> </script>
......
public_new/collaboration_overlay_add_user_list.html
...@@ -109,8 +109,8 @@ ...@@ -109,8 +109,8 @@
</div> </div>
</div> </div>
<div class="user_item_l"> <div class="user_item_l">
<div class="thumbnail"> <div class="thumbnail">
<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> </div>
<div class="user_item_m"> <div class="user_item_m">
......
public_new/css/chat.css
...@@ -35,8 +35,8 @@ input[name="tab_item"] { ...@@ -35,8 +35,8 @@ input[name="tab_item"] {
clear: both; clear: both;
overflow: hidden; overflow: hidden;
} }
#tab1:checked ~ #tab1_content, #tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{ #tabAllGroupOnMakeRoom:checked ~ #tab2_content{
display: block; display: block;
} }
......
public_new/js/chat-add-user.js 0 → 100644
$(function() {
// メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){
var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
$('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#chat_add_user .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.getAllGroupShopMemberNotInRoomByName(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 = $('#chat_add_user .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
var userList = CHAT_DB.getMyGroupShopMemberNotInRoomByName(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/chat-db.js
...@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) { ...@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) {
} }
}; };
CHAT_DB.getFavoriteUsersNotInRoom = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteUsersNotInRoom());
}
};
CHAT_DB.getFavoriteUsers = function() { CHAT_DB.getFavoriteUsers = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -82,6 +91,16 @@ CHAT_DB.getGroupInfo = function(groupId) { ...@@ -82,6 +91,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) { CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -99,6 +118,15 @@ CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) { ...@@ -99,6 +118,15 @@ CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) {
} }
}; };
CHAT_DB.getMyGroupShopMemberNotInRoomByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupShopMemberNotInRoomByName(shopMemberName));
}
};
CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) { CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -108,6 +136,15 @@ CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) { ...@@ -108,6 +136,15 @@ CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
} }
}; };
CHAT_DB.getAllGroupShopMemberNotInRoomByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getAllGroupShopMemberNotInRoomByName(shopMemberName));
}
};
CHAT_DB.getGroupByName = function(groupName) { CHAT_DB.getGroupByName = function(groupName) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) { ...@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
// TODO // TODO
} }
}; };
CHAT_DB.searchMessages = function(keyword, userList) {
if (CHAT_UTIL.isIOS()) {
// TODO
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.searchMessages(keyword, userList));
}
};
CHAT_DB.getMyGroupUsersNotInRoom = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsersNotInRoom());
}
};
\ No newline at end of file
public_new/js/chat-ui.js
...@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) { ...@@ -197,11 +197,8 @@ CHAT_UI.sendMessage = function(e) {
messageTextBox.val(''); messageTextBox.val('');
if (message.length > 0) { if (message.length > 0) {
console.log('createMessage');
console.log(socket);
socket.emit( socket.emit(
//'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; } 'createMessage', { text: message + messageSeperator + messageType.TEXT }
'createMessage', { text: message }
, 0 , 0
); );
} }
...@@ -568,12 +565,14 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) { ...@@ -568,12 +565,14 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function() { CHAT_UI.showLoadingIndicator = function() {
$('.loading-indicator').css('display', 'block'); var h = $(window).height();
$('#loader-bg ,#loader').height(h).css('display','block');
} }
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function() { CHAT_UI.dismissLoadingIndicator = function() {
$('.loading-indicator').css('display', 'none'); var h = $(window).height();
$('#loader-bg ,#loader').height(h).css('display','none');
} }
//画面の方向をcheck //画面の方向をcheck
...@@ -895,9 +894,7 @@ $('#chatButton').on('click', function(event) { ...@@ -895,9 +894,7 @@ $('#chatButton').on('click', function(event) {
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
$(".modal-backdrop").remove(); $('#userNameCard').modal('hide');
$('#myProfileModal').html('');
$('#userProfileModal').html('');
$('#favoriteList').html(''); $('#favoriteList').html('');
$('#myGroupList').html(''); $('#myGroupList').html('');
//画面タイトル設定 //画面タイトル設定
...@@ -1000,6 +997,8 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1000,6 +997,8 @@ CHAT_UI.refreshContactScreen = function() {
} }
CHAT_UI.refreshRoomList = function(roomType) { CHAT_UI.refreshRoomList = function(roomType) {
CHAT_UI.showLoadingIndicator();
console.log('START');
if (roomType == chatRoomType.DM) { if (roomType == chatRoomType.DM) {
$('#tabDM').prop('checked', true); $('#tabDM').prop('checked', true);
} else { } else {
...@@ -1011,7 +1010,6 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1011,7 +1010,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
} }
var rooms = CHAT_DB.getRoomList(roomType, null); var rooms = CHAT_DB.getRoomList(roomType, null);
CHAT.globalIsInvite = false; CHAT.globalIsInvite = false;
activeRoomId = null;
// #36146に対応 // #36146に対応
$('#groupChatList').empty(); $('#groupChatList').empty();
$('#dmChatList').empty(); $('#dmChatList').empty();
...@@ -1089,7 +1087,8 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1089,7 +1087,8 @@ CHAT_UI.refreshRoomList = function(roomType) {
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6"); $(".chat_list").removeClass("col-12").addClass("col-6");
} }
console.log('DONE');
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.joinRoom = function(roomId,roomName) { CHAT_UI.joinRoom = function(roomId,roomName) {
...@@ -1143,6 +1142,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1143,6 +1142,12 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
, function(text) { , function(text) {
topUserListTemplate = text; topUserListTemplate = text;
}); });
var filterUserListTemplate;
$.get({ url: "./template/template_chatroom_user_filter_list.html", async: false }
, function(text) {
filterUserListTemplate = text;
});
usersInRoom.forEach(function(user) { usersInRoom.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl); user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
...@@ -1152,6 +1157,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1152,6 +1157,14 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
}); });
let obj = jQuery.parseHTML(html); let obj = jQuery.parseHTML(html);
$('#user_list').append(obj); $('#user_list').append(obj);
let filterHtml = Mustache.render(filterUserListTemplate, {
userList: usersInRoom
});
let filterObj = jQuery.parseHTML(filterHtml);
$('#filter').append(filterObj);
messages.forEach(function(message) { messages.forEach(function(message) {
let template = userMessageTemplate; let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) { if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
...@@ -1176,13 +1189,20 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1176,13 +1189,20 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
message.message = replacePath; message.message = replacePath;
/* if (message.message contain) { /* if (message.message contain) {
}*/ }*/
var isToday = false;
if (messageTime.createdAt.includes(':')) {
isToday = true;
}
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.message, text: message.message,
from: message.loginId, from: message.loginId,
shopMemberId: message.shopMemberId, shopMemberId: message.shopMemberId,
profileImage: message.profileUrl, profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay, createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime createdAtTime: messageTime.createdAtTime,
isToday: isToday
}); });
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html; html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal; workVal = html + workVal;
...@@ -1218,6 +1238,7 @@ $('#tabGroup').on('click', function(e) { ...@@ -1218,6 +1238,7 @@ $('#tabGroup').on('click', function(e) {
CHAT_UI.refreshRoomList(chatRoomType.GROUP); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
}); });
$('#tabAllGroup').on('click', function(e) { $('#tabAllGroup').on('click', function(e) {
CHAT_UI.refreshAllGroupSearch('0'); CHAT_UI.refreshAllGroupSearch('0');
}); });
...@@ -1226,6 +1247,28 @@ $('#tabMyGroup').on('click', function(e) { ...@@ -1226,6 +1247,28 @@ $('#tabMyGroup').on('click', function(e) {
CHAT_UI.refreshContactScreen(); 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();
});
$('#addUserConfirmBtn').on('click', function(e) {
android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
$('#addUserForm').submit();
});
CHAT_UI.roomDisplayOff = function() {
android.roomDisplayOff();
}
CHAT_UI.favoriteUserChange = function(shopMemberId, star) { CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
if ($(star).hasClass('active')) { if ($(star).hasClass('active')) {
CHAT_UI.removeFavoriteUser(shopMemberId); CHAT_UI.removeFavoriteUser(shopMemberId);
...@@ -1253,17 +1296,22 @@ CHAT_UI.removeFavoriteUser = function(shopMemberId) { ...@@ -1253,17 +1296,22 @@ CHAT_UI.removeFavoriteUser = function(shopMemberId) {
}; };
CHAT_UI.insertFavoriteUser = function(shopMemberId) { CHAT_UI.insertFavoriteUser = function(shopMemberId) {
CHAT_UI.showLoadingIndicator();
$('#userNameCard').modal('hide'); $('#userNameCard').modal('hide');
$('#myNameCard').modal('hide'); $('#myNameCard').modal('hide');
android.addFavoriteUser(shopMemberId); var result = android.addFavoriteUser(shopMemberId);
$('.shopmember_'+shopMemberId).removeClass('disable'); if (!result) {
$('.shopmember_'+shopMemberId).addClass('active'); $('.shopmember_'+groupId).addClass('disable');
$('.shopmember_'+groupId).removeClass('active');
CHAT_UI.dismissLoadingIndicator();
return;
} else {
$('.shopmember_'+groupId).removeClass('disable');
$('.shopmember_'+groupId).addClass('active');
}
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.removeFavoriteGroup = function(groupId) { CHAT_UI.removeFavoriteGroup = function(groupId) {
CHAT_UI.showLoadingIndicator();
android.removeFavoriteGroup(groupId); android.removeFavoriteGroup(groupId);
$('.group_'+groupId).removeClass('active'); $('.group_'+groupId).removeClass('active');
$('.group_'+groupId).addClass('disable'); $('.group_'+groupId).addClass('disable');
...@@ -1272,9 +1320,16 @@ CHAT_UI.removeFavoriteGroup = function(groupId) { ...@@ -1272,9 +1320,16 @@ CHAT_UI.removeFavoriteGroup = function(groupId) {
CHAT_UI.insertFavoriteGroup = function(groupId) { CHAT_UI.insertFavoriteGroup = function(groupId) {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
android.addFavoriteGroup(groupId); var result = android.addFavoriteGroup(groupId);
$('.group_'+groupId).removeClass('disable'); if (!result) {
$('.group_'+groupId).addClass('active'); $('.group_'+groupId).addClass('disable');
$('.group_'+groupId).removeClass('active');
CHAT_UI.dismissLoadingIndicator();
return;
} else {
$('.group_'+groupId).removeClass('disable');
$('.group_'+groupId).addClass('active');
}
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}; };
...@@ -1325,17 +1380,13 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) { ...@@ -1325,17 +1380,13 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) {
groupPathTemplate = text; groupPathTemplate = text;
}); });
var groupPathCount = 0;
result.groupPathList.forEach(function(groupPath) { result.groupPathList.forEach(function(groupPath) {
if (!(groupPathCount < (result.groupPathList.length - 3))) { let html = Mustache.render(groupPathTemplate, {
let html = Mustache.render(groupPathTemplate, { name: groupPath.groupName,
name: groupPath.groupName, id: groupPath.groupId
id: groupPath.groupId });
}); let obj = jQuery.parseHTML(html);
let obj = jQuery.parseHTML(html); $('#groupPathArea').append(obj);
$('#groupPathArea').append(obj);
}
groupPathCount++;
}) })
//該当グループの下位グループ表示。 //該当グループの下位グループ表示。
...@@ -1594,3 +1645,454 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1594,3 +1645,454 @@ 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) {
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(checkMemberId);
}
if($('.checkbox' + checkMemberId).prop('checked')){
$('.checkbox' + checkMemberId).removeAttr('checked');
}else{
$('.checkbox' + checkMemberId).attr('checked', true);
}
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();
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);
}
});
}
CHAT_UI.showAddUserConfirmView = function() {
$('#selectedUserList').html('');
var userTemplate;
$.get({ url: "./template/template_add_user_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);
})
$("#addUserBtn").off().on('click', function() {
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
selectedUserList.forEach(function(user){
userIdList.push(user.shopMemberId);
})
android.inviteUsers(userIdList.join(','));
});
}
CHAT_UI.refreshMyGroupForAddUser = 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.getFavoriteUsersNotInRoom();
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.getMyGroupUsersNotInRoom();
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);
})
}
\ No newline at end of file
public_new/js/chat-websocket.js
...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {}; ...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
...@@ -37,7 +36,6 @@ function setSocketAction () { ...@@ -37,7 +36,6 @@ function setSocketAction () {
}); });
socket.on('disconnect', function() { socket.on('disconnect', function() {
console.log('disconnect');
//socketが切断されたら黒画面で画面を更新する //socketが切断されたら黒画面で画面を更新する
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
//alert('Disconnected from the server'); //alert('Disconnected from the server');
...@@ -45,7 +43,6 @@ function setSocketAction () { ...@@ -45,7 +43,6 @@ function setSocketAction () {
}); });
socket.on('connect_error', function() { socket.on('connect_error', function() {
console.log('connect_error');
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
...@@ -163,8 +160,6 @@ function setSocketAction () { ...@@ -163,8 +160,6 @@ function setSocketAction () {
// New Message // New Message
// #36170 // #36170
socket.on('newMessage', function(message, roomId, roomName) { socket.on('newMessage', function(message, roomId, roomName) {
console.log(message);
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate; var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false } $.get({ url: "./template/template_user_message.html", async: false }
, function(text) { , function(text) {
...@@ -186,28 +181,33 @@ function setSocketAction () { ...@@ -186,28 +181,33 @@ function setSocketAction () {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = myMessageTemplate; template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try {
message.text = decodeURIComponent(message.text)
} catch(e) {
message.text = message.text
}
if ( message.text.includes(messageSeperator) ) {
message.text = message.text.split(messageSeperator)[0];
}
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
//TODO newMessageの際にDB格納が必要。
let html = Mustache.render(template, {
text: message.text,
from: message.from,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isToday: true
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // 画像、動画の描画を待ってからスクロール
try {
message.text = decodeURIComponent(message.text)
} catch(e) {
message.text = message.text
}
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
let html = Mustache.render(template, {
text: message.text,
from: message.from,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
// 画像、動画の描画を待ってからスクロール
setTimeout(function () { setTimeout(function () {
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}, 300); }, 300);
......
public_new/js/chat.js
...@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) { ...@@ -126,8 +126,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']' text: encodedText + messageSeperator + messageType.IMAGE
text: encodedText
}, 1); }, 1);
} else { // 動画の処理 } else { // 動画の処理
...@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) { ...@@ -152,8 +151,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.VIDEO+']' text: encodedText + messageSeperator + messageType.VIDEO
text: encodedText
}, 1); }, 1);
} }
...@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -247,7 +245,6 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
}); });
} else { } else {
console.log('No error');
if (loginParam.roomName != undefined && loginParam.roomName != "null") { if (loginParam.roomName != undefined && loginParam.roomName != "null") {
$('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName); $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
} else { } else {
...@@ -272,165 +269,250 @@ CHAT.leaveRoom = function() { ...@@ -272,165 +269,250 @@ CHAT.leaveRoom = function() {
} }
$(function() { $(function() {
// ルーム開設メンバー数カウント // ルーム人数選択確認イベント
$('input:checkbox').change(function() { $('.make_room_btn button').click(function(){
if($(this).prop('checked')){ $('form').submit();
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
}).trigger('change');
// チェックした人数カウント
$('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt);
}).trigger('change');
// ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){
$('form').submit();
});
// ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){
$('form').submit();
});
// ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){
$('form').submit();
});
// ユーザー追加イベント
$('.add_user_btn button').click(function(){
$('form').submit();
});
// ルーム名変更イベント
$('.change_room_name_btn button').click(function(){
$('form').submit();
});
// 検索アイコン押下イベント
$('.nav_item_wrap .search_menu').click(function(){
$('.nav_item_wrap').addClass('none');
$('.chat_room_src_form').removeClass('none');
$('.room_container').addClass('none');
$('.overlay_src_msg').removeClass('none');
// フィルタ表示
$('#filter').removeClass('none');
$('#user_list').addClass('none');
});
$('.chat_room_src_form .cancel').click(function(){
$('.nav_item_wrap').removeClass('none');
$('.chat_room_src_form').addClass('none');
$('.chat_room_src_form input').val('');
$('.room_container').removeClass('none');
$('.overlay_src_msg').empty();
// ユーザーリスト表示
$('#filter').addClass('none');
$('#user_list').removeClass('none');
});
// フィルタ選択イベント
$('#filter .img_wrap').click(function(){
// チェックアイコン追加
$(this).toggleClass("filter");
});
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
// チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty();
var keyword = $('#chat .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) {
return;
}
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
}); });
rooms.forEach(function(room) { // ルーム人数選択イベント
room.profileImagePath = ASSET_PATH + 'images/user-profile.png' $('.make_room_confirm_btn button').click(function(){
if (room.message) { $('form').submit();
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
var displayMsg;
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('.overlay_src_msg').append(obj);
}); });
if (CHAT_UI.isLandscapeMode()) { // ユーザー追加確認イベント
$(".chat_list").removeClass("col-12").addClass("col-6"); $('.add_user_confirm_btn button').click(function(){
} $('form').submit();
}); });
// ルームメンバー検索 // ユーザー追加イベント
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('.add_user_btn button').click(function(){
$.ajax({ $('form').submit();
url: 'search_message_user_list.html', });
type: 'POST', // ルーム名変更イベント
datatype: 'html' $('.change_room_name_btn button').click(function(){
}).done(function (data) { $('form').submit();
$('.overlay_src_msg').html(data); });
})
}); // 検索アイコン押下イベント
// ユーザー招待メンバー検索 $('.nav_item_wrap .search_menu').click(function(){
$('#chat_add_user .search_form input[type="search"]').keyup(function(){ $('.nav_item_wrap').addClass('none');
$.ajax({ $('.chat_room_src_form').removeClass('none');
url: 'search_message_user_list.html', $('.room_container').addClass('none');
type: 'POST', $('.overlay_src_msg').removeClass('none');
datatype: 'html' // フィルタ表示
}).done(function (data) { $('#filter').removeClass('none');
$('.overlay_src_msg').html(data); $('#user_list').addClass('none');
}) });
}); $('.chat_room_src_form .cancel').click(function(){
$('.nav_item_wrap').removeClass('none');
// チャットルーム $('.chat_room_src_form').addClass('none');
// メッセージ検索イベント $('.chat_room_src_form input').val('');
$('.chat_room_src_form input[type="search"]').keyup(function(){ $('.room_container').removeClass('none');
$.ajax({ $('.overlay_src_msg').empty();
url: 'search_message.html', // ユーザーリスト表示
type: 'POST', $('#filter').addClass('none');
datatype: 'html' $('#user_list').removeClass('none');
}).done(function (data) { });
$('.overlay_src_msg').html(data);
}) // フィルタ選択イベント
}); $('#filter .img_wrap').click(function(){
// チェックアイコン追加
$(this).toggleClass("filter");
});
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
$('#chat_add_user .search_form .cancel').click(function(){
CHAT.globalSelectedUserList.forEach(function(userId) {
if ($('.checkbox' + userId).prop('checked')) {
$('.checkbox' + checkMemberId).attr('checked', true);
} else {
$('.checkbox' + checkMemberId).removeAttr('checked');
}
});
});
// チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty();
var keyword = $('#chat .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) { return; }
var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
var displayMsg;
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
});
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
});
// ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
});
// チャットルーム
// メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){
let workVal = "";
var keyword = $('.chat_room_src_form input[type="search"]').val();
$('.overlay_src_msg').empty();
var checkedUserList = [];
$('.img_wrap.filter').each(function(user) {
var selectedUser = $('.img_wrap.filter')[user];
checkedUserList.push($(selectedUser).data('user-id'));
})
if (keyword.length < 2) { return; }
var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
let jQueryMessages = $('.overlay_src_msg');
messages.forEach(function(message) {
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
template = myMessageTemplate;
}
if (message.messageType == messageType.SYSTEM) {
template = systemMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
if (message.profileUrl) {
message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileUrl = CHAT.getProfileImgUrl("")
}
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.message = replacePath;
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
jQueryMessages.prepend(workVal);
});
$('.filter_img').on('click', function() {
let workVal = "";
var keyword = $('.chat_room_src_form input[type="search"]').val();
$('.overlay_src_msg').empty();
var checkedUserList = [];
$('.img_wrap.filter').each(function(user) {
var selectedUser = $('.img_wrap.filter')[user];
checkedUserList.push($(selectedUser).data('user-id'));
})
if (keyword.length < 2) { return; }
var messages = CHAT_DB.searchMessages(keyword, checkedUserList.join(','));
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
let jQueryMessages = $('.overlay_src_msg');
messages.forEach(function(message) {
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
template = myMessageTemplate;
}
if (message.messageType == messageType.SYSTEM) {
template = systemMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む
if (message.profileUrl) {
message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileUrl = CHAT.getProfileImgUrl("")
}
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.message = replacePath;
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
jQueryMessages.prepend(workVal);
});
}); });
public_new/js/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/common.js
...@@ -55,6 +55,7 @@ $(function() { ...@@ -55,6 +55,7 @@ $(function() {
$('.message_input_form').click(function(){ $('.message_input_form').click(function(){
$('.message_input_send').removeClass('none'); $('.message_input_send').removeClass('none');
$('.attach_file').addClass('none'); $('.attach_file').addClass('none');
$('.footer_content_b').addClass('none');
}); });
$('.message_input_form').on('focusout',function(e){ $('.message_input_form').on('focusout',function(e){
...@@ -63,6 +64,7 @@ $(function() { ...@@ -63,6 +64,7 @@ $(function() {
} }
$('.message_input_send').addClass('none'); $('.message_input_send').addClass('none');
$('.attach_file').removeClass('none'); $('.attach_file').removeClass('none');
$('.footer_content_b').removeClass('none');
}); });
}); });
public_new/js/constant.js
...@@ -27,7 +27,13 @@ const chatRoomType = { ...@@ -27,7 +27,13 @@ const chatRoomType = {
ALL : "2" ALL : "2"
} }
const groupSearchFlg = {
ROOT : "0"
}
const nameCardAreaId = { const nameCardAreaId = {
MY : "myNamecard", MY : "myNamecard",
USER : "userNamecard" USER : "userNamecard"
} }
\ 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-bg').delay(900).fadeOut(800);//ローディングを隠す
$('#loader').delay(600).fadeOut(300); $('#loader').delay(600).fadeOut(300);
}); });
......
public_new/modal_chat_menu.html
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<ul> <ul>
<li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li> <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li>
<li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li> <li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
<li ><a href="javascript:return false;" onclick="CHAT_UI.roomDisplayOff();"><img src="icon/icon_chat_gray.png" alt="ユーザー招待">部屋非表示</a></li>
</ul> </ul>
</div> </div>
</div> </div>
......
public_new/template/template_add_user_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="thumbnail">
<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_add_user_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="thumbnail">
<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_chatroom_user_filter_list.html 0 → 100644
{{#userList}}
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap filter_img" data-user-id="{{shopMemberId}}">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</div>
{{/userList}}
\ No newline at end of file
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="thumbnail">
<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="thumbnail">
<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 checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<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="thumbnail">
<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_my_message.html
<div class="room_right"> <div class="room_right">
<div class="text">{{text}}</div> <div class="text">{{text}}</div>
{{#isToday}}
<div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
{{/isToday}}
{{^isToday}}
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div> <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
{{/isToday}}
<div class="read d-flex align-items-end"><span></span></div> <div class="read d-flex align-items-end"><span></span></div>
</div> </div>
\ No newline at end of file
public_new/template/template_user_message.html
<div class="room_left"> <div class="room_left">
<figure> <figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'" ></a> <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
</figure> </figure>
<div class="room_left-text"> <div class="room_left-text">
<div class="name">{{from}}</div> <div class="name">{{from}}</div>
<div class="text">{{text}}</div> <div class="text">{{text}}</div>
</div> </div>
{{#isToday}}
<div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
{{/isToday}}
{{^isToday}}
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div> <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
{{/isToday}}
<div class="read d-flex align-items-end"><span></span></div> <div class="read d-flex align-items-end"><span></span></div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment