Commit 7cc4d958 by Lee Munkyeong

Merge branch 'devlop_contactUI' into 'release_sp3'

Devlop contact ui

See merge request !3
parents 65204d49 f2274453
...@@ -122,6 +122,12 @@ img { ...@@ -122,6 +122,12 @@ img {
float: left; float: left;
width: 11%; width: 11%;
} }
.namecard_img {
margin: 5% 35% 5% 35%;
width: 30%;
}
.srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:90%; padding:4px 0 4px 6px; background:none; } .srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:90%; padding:4px 0 4px 6px; background:none; }
.srch_bar .input-group-addon button { .srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0; background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
...@@ -389,7 +395,7 @@ a.article:hover { ...@@ -389,7 +395,7 @@ a.article:hover {
position:fixed; position:fixed;
width:60px; width:60px;
height:60px; height:60px;
bottom:20px; bottom:60px;
right:18px; right:18px;
background-color:#095395; background-color:#095395;
color:#FFF; color:#FFF;
...@@ -680,3 +686,76 @@ a.article:hover { ...@@ -680,3 +686,76 @@ a.article:hover {
#errorEnd{ #errorEnd{
margin-top: 15vh; margin-top: 15vh;
} }
.collapsible {
height: 40px;
background-color: #eee;
color: #444;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible-active, .collapsible:hover {
background-color: #ccc;
}
.collapsible-content {
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.chat-list-type-btn {
width: 30%;
}
#my_info > div > div {
padding-left: 5%;
}
#favorite_list > div > div {
padding-left: 5%;
}
#my_group_list > div > div {
padding-left: 5%;
}
.contact-seperator {
width: 100%;
background-color: #095395!important;
color: white;
margin-bottom: 0px;
}
.popup {
display: none;
position: fixed;
padding: 10px;
width: 80%;
left: 10%;
min-height: 250px;
top: 20%;
background: #F7FFF4;
}
#namecard {
z-index: 10051;
}
.namecard-login-id {
margin-top: 15%;
text-align: center;
}
.namedard-img-upload {
background: rgba(0,0,0,0.6);
position: relative;
margin-top: -25%;
color: white;
text-align: center;
}
...@@ -22,15 +22,7 @@ ...@@ -22,15 +22,7 @@
let IS_MOBILE = true; let IS_MOBILE = true;
let IS_ONLINE = false; let IS_ONLINE = false;
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
};
android.getGlobalParameter();
</script> </script>
</head> </head>
<body> <body>
...@@ -149,12 +141,17 @@ ...@@ -149,12 +141,17 @@
</div> </div>
<div class="tab-content" id="pills-tabContent"> <div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab"> <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab">
<div class="search-group"> <div class="search-group">
<div class="input-group search-bar-fixed"> <div class="input-group search-bar-fixed">
<input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="&#xF002;" autocomplete="off"> <input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="&#xF002;" autocomplete="off">
</div> </div>
</div> </div>
<div class="text-center">
<button type="button" class="btn btn-primary chat-list-type-btn" id="dmBtn"></button>
<button type="button" class="btn btn-primary chat-list-type-btn" id="groupBtn"></button>
</div>
<div class="inbox_people"> <div class="inbox_people">
<div id="room_list" class="inbox_chat row"> <div id="room_list" class="inbox_chat row">
</div> </div>
...@@ -163,6 +160,7 @@ ...@@ -163,6 +160,7 @@
</a> </a>
</div> </div>
</div> </div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
... ...
</div> </div>
...@@ -221,6 +219,33 @@ ...@@ -221,6 +219,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="inbox_people">
<div class="heading_srch">
<div class="srch_bar">
<div class="stylish-input-group">
<input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span>
</div>
</div>
</div>
<div id="my_info" class="inbox_user row">
</div>
<label class="contact-seperator" id="favorite-seperator">Favorite</label>
<div id="favorite_list" class="inbox_user row">
</div>
<label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row">
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab"> <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
<div class="inbox_people"> <div class="inbox_people">
<div class="heading_srch"> <div class="heading_srch">
...@@ -291,6 +316,12 @@ ...@@ -291,6 +316,12 @@
<i class="fa fa-comments fa-6" aria-hidden="true"></i> <i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a> </a>
</li> </li>
<!-- Display None (d-none) contact -->
<li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) chatList --> <!-- Display None (d-none) chatList -->
<li class="nav-item d-none justify-content-center"> <li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false"> <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
...@@ -326,6 +357,45 @@ ...@@ -326,6 +357,45 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="popup" id="namecard"></div>
<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
<div class="col-4">
<img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
</div>
<div class="col-4">
<img src="./icon/ic_communication_menu.png" style="width: 35%;" id="chatButton">
</div>
<div class="col-4">
<img src="./icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton">
</div>
</nav>
<script id="my-namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
<div class="namecard_img">
<img src="./images/user-profile.png" alt>
<div class="namedard-img-upload" >Upload</div>
<div class="namecard-login-id" >{{name}}</div>
</div>
<div id="myGroupNameList">
{{#groupPathList}}
<li><b>{{.}}</b></li>
{{/groupPathList}}
</div>
</script>
<script id="namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
<div class="namecard_img">
<img src="./images/user-profile.png" alt>
<div class="namecard-login-id">{{name}}</div>
</div>
<div id="groupNameList">
{{#groupPathList}}
<li><b>{{.}}</b></li>
{{/groupPathList}}
</div>
</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">
...@@ -385,7 +455,7 @@ ...@@ -385,7 +455,7 @@
<div class="group_list col-12" data-name="{{name}}"> <div class="group_list col-12" data-name="{{name}}">
<div class="group_people"> <div class="group_people">
<div class="group_img"> <div class="group_img">
<img src="${chatUrl}images/group-image.png" alt=""> <img src="./images/group-image.png" alt="">
</div> </div>
<div class="group_ib"> <div class="group_ib">
<h5>{{name}}</h5> <h5>{{name}}</h5>
...@@ -416,6 +486,28 @@ ...@@ -416,6 +486,28 @@
</div> </div>
</div> </div>
</script> </script>
<script id="favorite-user-template" type="text/template">
<div class="user_list col-12" data-name="{{name}}">
<div class="user_people">
<div class="user_img">
<img src="{{profileImage}}" alt="">
</div>
<div class="user_ib">
<h5>{{name}}</h5>
<p>{{info}}</p>
</div>
<div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
<div class="squareBoxContent">
<div>
<span>
<i class="fas fa-check"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</script>
<script src="./socket.io/dist/socket.io.js"></script> <script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
......
...@@ -3,11 +3,57 @@ var CHAT_DB = {}; ...@@ -3,11 +3,57 @@ var CHAT_DB = {};
//ロカールDBからルーム一覧情報を取得 //ロカールDBからルーム一覧情報を取得
CHAT_DB.getRoomList = function(input) { CHAT_DB.getRoomList = function(roomType) {
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.getRoomList()); return JSON.parse(android.getRoomList(roomType));
}
};
//ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyInfo());
}
};
CHAT_DB.getMessages = function(roomId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMessageList(roomId));
}
};
CHAT_DB.getFavoriteUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteUsers());
}
};
CHAT_DB.getFavoriteGroups = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteGroups());
}
};
CHAT_DB.getMyGroupUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsers());
} }
}; };
\ No newline at end of file
var socket; var socket;
connectSocket(IS_ONLINE);
function connectSocket(isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
if (isOnline == 'true') { CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
connectSocket();
};
android.getGlobalParameter();
function connectSocket() {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
setSocketAction(); setSocketAction();
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList(); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show(); $('#createChatRoom').show();
} else { } else {
...@@ -14,11 +25,11 @@ function connectSocket(isOnline) { ...@@ -14,11 +25,11 @@ function connectSocket(isOnline) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
$('.overlay').removeClass('active undismissable'); //$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
android.getLoginParameter(); android.getLoginParameter();
CHAT_UI.refreshRoomList(); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show(); $('#createChatRoom').show();
} }
...@@ -211,72 +222,72 @@ function setSocketAction () { ...@@ -211,72 +222,72 @@ function setSocketAction () {
// 新しいメッセージを受信する場合の処理 // 新しいメッセージを受信する場合の処理
// #36170 // #36170
socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){ // socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
let jQueryMessages = $('#messages'); // let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する // // スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight'); // let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成 // // メッセージ文字列の生成
let workVal = ""; // let workVal = "";
messages.forEach(function(message) { // messages.forEach(function(message) {
let template = $('#message-template').html(); // let template = $('#message-template').html();
if (message.shopMemberId == shopMemberId) { // if (message.shopMemberId == shopMemberId) {
template = $('#message-template-me').html(); // template = $('#message-template-me').html();
} // }
let messageTime = CHAT_UTIL.formatDate(message.time.time); // let messageTime = CHAT_UTIL.formatDate(message.time.time);
//
if (users != undefined) { // if (users != undefined) {
let user = users.find((user) => user.loginId == message.loginId) // let user = users.find((user) => user.loginId == message.loginId)
//
// userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更 // // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
if (user) { // if (user) {
message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath) // message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
} else { // } else {
message.profileImagePath = CHAT.getProfileImgUrl("") // message.profileImagePath = CHAT.getProfileImgUrl("")
} // }
} else { // } else {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
} // }
//
// #36147 // // #36147
message.message = message.message.toString(); // message.message = message.message.toString();
var replacePath = message.message; // var replacePath = message.message;
replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms'); // replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
message.message = replacePath; // message.message = replacePath;
let html = Mustache.render(template, { // let html = Mustache.render(template, {
text: message.message, // text: message.message,
from: message.loginId, // from: message.loginId,
profileImage: message.profileImagePath, // profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay, // createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime // createdAtTime: messageTime.createdAtTime
}); // });
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;
}) // })
//
// メッセージの画面描画 // // メッセージの画面描画
jQueryMessages.prepend(workVal); // jQueryMessages.prepend(workVal);
if (beforeHeight !== 0) { // if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持 // // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function () { // setTimeout(function () {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight); // jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400); // }, 400);
} else { // } else {
// 新規に入室の場合は最下部へスクロール // // 新規に入室の場合は最下部へスクロール
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom); // CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得 // // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) { // if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll(); // $('#messages').scroll();
} // }
} // }
//
// ユーザ削除ボタン表示しない // // ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide(); // $("#userSelectionDeleteBtn").hide();
//
CHAT_UI.dismissLoadingIndicator();// add some... // CHAT_UI.dismissLoadingIndicator();// add some...
//
// チャットに遷移する // // チャットに遷移する
$('#pills-chat-tab').tab('show'); // $('#pills-chat-tab').tab('show');
}); // });
// Update User List In Room // Update User List In Room
// サイドバーのユーザーリストアップデート。 // サイドバーのユーザーリストアップデート。
...@@ -383,7 +394,11 @@ function setSocketAction () { ...@@ -383,7 +394,11 @@ function setSocketAction () {
if (isInvite) { if (isInvite) {
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
} else { } else {
socket.emit('getRoomList'); if (IS_ONLINE == 'true') {
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
}
} }
}); });
}); });
......
...@@ -267,4 +267,17 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam ...@@ -267,4 +267,17 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
CHAT.leaveRoom = function() { CHAT.leaveRoom = function() {
socket.emit('leaveRoom', function() { socket.emit('leaveRoom', function() {
}); });
}
CHAT.requestMyinfo = function() {
jQuery.ajax({
async: true,
url: CMS_SERVER_URL + "/chatapi/user?sid=" + CHAT.globalLoginParameter.sid + "&cmd=" + userAPICmd.MYINFO,
type: "get",
processData: false,
contentType: false
}).done(function(res) {
console.log(res);
return res;
})
} }
\ No newline at end of file
...@@ -16,3 +16,12 @@ const messageType = { ...@@ -16,3 +16,12 @@ const messageType = {
SYSTEM : 3 , SYSTEM : 3 ,
COMMUNICATION : 4 COMMUNICATION : 4
} }
const userAPICmd = {
MYINFO : 9
}
const chatRoomType = {
DM : "1",
GROUP : "0"
}
...@@ -52,5 +52,11 @@ $.lang.en = { ...@@ -52,5 +52,11 @@ $.lang.en = {
"serverErrorOccured":"App will not be able to communicate with the server. \n After a few moments, please try again.", "serverErrorOccured":"App will not be able to communicate with the server. \n After a few moments, please try again.",
"memberDeleteTitle":"Do you want to remove selected members from the list?", "memberDeleteTitle":"Do you want to remove selected members from the list?",
"photo":"Photo", "photo":"Photo",
"video":"Video" "video":"Video",
"contactListTitle":"Contact",
"contactSearch":"Contact search",
"directMessageChatRoom":"DM",
"favorite":"Favorite List",
"mygroup":"My Group",
"groupChatRoom":"Group"
} }
...@@ -52,5 +52,11 @@ $.lang.ja = { ...@@ -52,5 +52,11 @@ $.lang.ja = {
"serverErrorOccured":"サーバと通信できません。\nしばらく時間をおいて再度操作してください。", "serverErrorOccured":"サーバと通信できません。\nしばらく時間をおいて再度操作してください。",
"memberDeleteTitle":"選択したメンバーをリストから削除しますか?", "memberDeleteTitle":"選択したメンバーをリストから削除しますか?",
"photo":"写真", "photo":"写真",
"video":"動画" "video":"動画",
"contactListTitle":"コンタクト",
"contactSearch":"コンタクト検索",
"directMessageChatRoom":"DM",
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ"
} }
...@@ -52,5 +52,11 @@ $.lang.ko = { ...@@ -52,5 +52,11 @@ $.lang.ko = {
"serverErrorOccured":"서버와 통신할 수 없습니다.\n잠시 후 다시 시도해보시기 바랍니다.", "serverErrorOccured":"서버와 통신할 수 없습니다.\n잠시 후 다시 시도해보시기 바랍니다.",
"memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?", "memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?",
"photo":"사진", "photo":"사진",
"video":"동영상" "video":"동영상",
"contactListTitle":"연락처",
"contactSearch":"연락처 검색",
"directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹"
} }
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("collapsible-active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
\ 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