Skip to content

C
chat_webview
Commit c98d1c66 by Lee Munkyeong
Options

Merge branch 'bugFix/#467_dose_not_show_profile_on_offline' of… 

Merge branch 'bugFix/#467_dose_not_show_profile_on_offline' of gitlab.agentec.jp:abookCommunication/chat_webview into bugFix/#467_dose_not_show_profile_on_offline
parents e966ab66 71a7c5c9
Showing with 190 additions and 59 deletions
public_new/archive.html
...@@ -50,11 +50,9 @@ ...@@ -50,11 +50,9 @@
<main id="archive"> <main id="archive">
<!-- 検索 --> <!-- 検索 -->
<div class="search_form"> <div class="search_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> <a href="#" class="cancel none">キャンセル</a>
</form>
</div> </div>
<!-- アーカイブリスト --> <!-- アーカイブリスト -->
<div class="archive_list content"> <div class="archive_list content">
...@@ -161,7 +159,7 @@ ...@@ -161,7 +159,7 @@
PLATFORM = platform; PLATFORM = platform;
IS_MOBILE = isMobile; IS_MOBILE = isMobile;
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName); CHAT_UI.refreshArchiveScreen();
}; };
</script> </script>
</body> </body>
......
public_new/archive_detail.html
...@@ -16,16 +16,21 @@ ...@@ -16,16 +16,21 @@
<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">
<script> </head>
<script>
var archiveId;
window.addEventListener('DOMContentLoaded', function(){ window.addEventListener('DOMContentLoaded', function(){
var urlPrm = new Object; var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&'); var urlSearch = location.search.substring(1).split('&');
var kv = urlSearch[0].split('='); var kv = urlSearch[0].split('=');
urlPrm[kv[0]]=kv[1]; urlPrm[kv[0]]=kv[1];
CHAT_UI.refreshArchiveDetailScreen(urlPrm.archiveId); archiveId = urlPrm.archiveId
if (typeof(android) != "undefined") {
} else {
CHAT_UI.refreshArchiveDetailScreen(urlPrm.archiveId);
}
}); });
</script> </script>
</head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
...@@ -92,7 +97,7 @@ ...@@ -92,7 +97,7 @@
</div> </div>
<div class="archive_detail_room_nm item"> <div class="archive_detail_room_nm item">
<h2 class="ttl" id="archiveRoomName">ChatRoomName</h2> <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<span>{{chatRoomName}}</span> <span class="archive_chat_room">{{chatRoomName}}</span>
<button id="joinChatRoom"> <button id="joinChatRoom">
<img src="icon/icon_join_room.png" alt=""> <img src="icon/icon_join_room.png" alt="">
</button> </button>
...@@ -101,7 +106,7 @@ ...@@ -101,7 +106,7 @@
<h2 class="ttl" id="archiveSaveUser">SaveUser</h2> <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<img src="{{profileImage}}" alt="プロフィール画像"> <img src="{{profileImage}}" alt="プロフィール画像" onclick="CHAT_UI.makeNameCard({{userId}})" >
<span>{{userName}}</span> <span>{{userName}}</span>
</div> </div>
</div> </div>
...@@ -188,6 +193,21 @@ ...@@ -188,6 +193,21 @@
let PLATFORM = ''; let PLATFORM = '';
let IS_MOBILE = true; let IS_MOBILE = true;
let IS_ONLINE = false; let IS_ONLINE = false;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
} else {
}
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.refreshArchiveDetailScreen(archiveId);
};
</script> </script>
</body> </body>
......
public_new/css/archive.css
...@@ -121,6 +121,16 @@ ...@@ -121,6 +121,16 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.archive_chat_room {
display: inline-block;
vertical-align: middle;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
.archive_name{ .archive_name{
font-size: 14px; font-size: 14px;
......
public_new/css/chat.css
...@@ -742,6 +742,9 @@ input[name="tab_item"] { ...@@ -742,6 +742,9 @@ input[name="tab_item"] {
border: none; border: none;
font-size: 18px; font-size: 18px;
} }
.dow {
margin-left: 10px;
}
/**************************** modal *************************/ /**************************** modal *************************/
/* メニューモーダル */ /* メニューモーダル */
......
public_new/js/archive.js
...@@ -3,16 +3,31 @@ var ARCHIVE_UI = {}; ...@@ -3,16 +3,31 @@ var ARCHIVE_UI = {};
$(function() { $(function() {
// アーカイブ検索 // アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){ $('#archive .search_form input[type="search"]').keyup(function(e) {
$('.overlay_src_msg').empty();
var keyword = $('#archive .search_form input[type="search"]').val(); var keyword = $('#archive .search_form input[type="search"]').val();
if (keyword == '') { if (e.KeyCode == 13 || e.key == "Enter") {
return; if (keyword.length != 0 && keyword != '') {
$('#archive .search_form input[type="search"]').blur();
return;
}
} else if (keyword == '' || keyword.length < 2) {
$('.overlay_src_msg').empty();
return;
}
$('.overlay_src_msg').empty();
if (CHAT_UTIL.isIOS()) {
CHAT_DB.callGetArchiveByName(keyword);
} else if (CHAT_UTIL.isAndroid()) {
ARCHIVE_UI.refreshSearchScreen(keyword);
} }
if (e.KeyCode == 13 || e.key == "Enter") {
$('#archive .search_form input[type="search"]').blur();
return;
}
// 検索結果を表示 // 検索結果を表示
CHAT_DB.callGetArchiveByName(keyword);
}); });
}); });
......
public_new/js/chat-db.js
...@@ -178,7 +178,7 @@ CHAT_DB.getArchiveList = function() { ...@@ -178,7 +178,7 @@ CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
return JSON.parse(callNativeApp("getArchiveList", {})); return JSON.parse(callNativeApp("getArchiveList", {}));
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// TODO return JSON.parse(android.getArchiveList());
} }
}; };
...@@ -186,7 +186,7 @@ CHAT_DB.updateArchiveList = function() { ...@@ -186,7 +186,7 @@ CHAT_DB.updateArchiveList = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateArchiveList.postMessage({}); webkit.messageHandlers.updateArchiveList.postMessage({});
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// TODO android.updateArchiveList();
} }
}; };
...@@ -195,7 +195,7 @@ CHAT_DB.getArchiveByName = function(archiveName) { ...@@ -195,7 +195,7 @@ CHAT_DB.getArchiveByName = function(archiveName) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
return JSON.parse(callNativeApp("getArchiveByName", {"archiveName": archiveName})); return JSON.parse(callNativeApp("getArchiveByName", {"archiveName": archiveName}));
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// TODO return JSON.parse(android.getArchiveListByName(archiveName));
} }
}; };
...@@ -204,7 +204,7 @@ CHAT_DB.getArchiveDetail = function(archiveId) { ...@@ -204,7 +204,7 @@ CHAT_DB.getArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
return JSON.parse(callNativeApp("getArchiveDetail", {"archiveId": archiveId})); return JSON.parse(callNativeApp("getArchiveDetail", {"archiveId": archiveId}));
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// TODO return JSON.parse(android.getArchiveDetail(archiveId));
} }
}; };
...@@ -212,7 +212,7 @@ CHAT_DB.updateArchiveDetail = function(archiveId) { ...@@ -212,7 +212,7 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId}); webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// TODO android.updateArchiveDetail(archiveId);
} }
}; };
...@@ -231,4 +231,13 @@ CHAT_DB.getMyGroupUsersNotInRoom = function() { ...@@ -231,4 +231,13 @@ CHAT_DB.getMyGroupUsersNotInRoom = function() {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsersNotInRoom()); return JSON.parse(android.getMyGroupUsersNotInRoom());
} }
}; };
\ No newline at end of file
CHAT_DB.getUserInfo = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getUserInfo(shopMemberId));
}
}
\ No newline at end of file
public_new/js/chat-ui.js
...@@ -1205,7 +1205,8 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1205,7 +1205,8 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
let filterObj = jQuery.parseHTML(filterHtml); let filterObj = jQuery.parseHTML(filterHtml);
$('#filter').append(filterObj); $('#filter').append(filterObj);
var checkBeforeDate = "";
var beforeDate = "";
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) {
...@@ -1235,6 +1236,19 @@ CHAT_UI.loadMessages = function(roomId, roomName) { ...@@ -1235,6 +1236,19 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
if (messageTime.createdAt.includes(':')) { if (messageTime.createdAt.includes(':')) {
isToday = true; isToday = true;
} }
if (messageTime.createdAtDay != checkBeforeDate && checkBeforeDate != "") {
let messageDay = CHAT_UTIL.systemDay(beforeDate);
let html = Mustache.render(systemMessageTemplate, {
year: messageDay.year + getLocalizedString('year'),
month: messageDay.month + getLocalizedString('month'),
day: messageDay.day + getLocalizedString('day'),
dow: CHAT_UTIL.findDow(messageDay.dow)
});
workVal = html + workVal;
}
checkBeforeDate = messageTime.createdAtDay;
beforeDate = message.insertDate;
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.message, text: message.message,
...@@ -1612,10 +1626,8 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1612,10 +1626,8 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// 初期化 // 初期化
$('#archiveDetail').html(''); $('#archiveDetail').html('');
// アーカイブ詳細の様式を読み込む // アーカイブ詳細の様式を読み込む
const archiveDetailTemplate = $('#archive-detail-template').html(); const archiveDetailTemplate = $('#archive-detail-template').html();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveDetail(archiveId); CHAT_DB.updateArchiveDetail(archiveId);
} }
...@@ -1625,19 +1637,20 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1625,19 +1637,20 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// チャットルーム情報を取得 // チャットルーム情報を取得
var roomId = archive.roomId; var roomId = archive.roomId;
var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
//保存ユーザ情報を取得
var userInfo = CHAT_DB.getUserInfo(archive.saveUserId); var userInfo = CHAT_DB.getUserInfo(archive.saveUserId);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl); userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
// アーカイブ情報を表示 // アーカイブ情報を表示
var html = Mustache.render(archiveDetailTemplate, { var html = Mustache.render(archiveDetailTemplate, {
fileName: "ファイル名", fileName: archive.archiveName,
insertDate: "2021/04/01 18:00", insertDate: archive.archiveDate,
chatRoomName: "チャットルーム名", chatRoomName: archive.roomName,
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg", chatRoomId: archive.roomId,
userName: "ユーザ名" profileImage: userInfo.profileUrl,
userName: userInfo.shopMembername,
userId: userInfo.shopMemberId
}); });
var obj = $(jQuery.parseHTML(html)).on('click', function() { var obj = $(jQuery.parseHTML(html)).on('click', function() {
...@@ -1645,18 +1658,23 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1645,18 +1658,23 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
$('#archiveDetail').append(obj); $('#archiveDetail').append(obj);
// プレイヤーの切り替え // プレイヤーの切り替え
var archiveFilePath = CHAT.createGetDataUrl(archive.filePath, archive.roomId);
switch(archive.archiveType) { switch(archive.archiveType) {
case "0": // 画像 case "0": // 画像
$('#archive_player').prepend('<img class="archive_player" src="https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg" />'); case 0:
$('#archive_player').prepend('<img class="archive_player" src="'+archiveFilePath+'" />');
break; break;
case "1": // 動画 case "1": // 動画
$('#archive_player').prepend('<video class="archive_player" src=' + "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" + ' controls autoplay muted playsinline></video>'); case 1:
$('#archive_player').prepend('<video class="archive_player" src=' + archiveFilePath + ' controls autoplay muted playsinline></video>');
break; break;
case "2": // 音声 case "2": // 音声
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>'); case 2:
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archiveFilePath + ' controls></audio>');
$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' />'); $('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' />');
break; break;
case "3": // 文書 case "3": // 文書
case 3:
// リリースに文書とその他は含めないため今回は非表示 // リリースに文書とその他は含めないため今回は非表示
break; break;
default: default:
...@@ -1668,33 +1686,22 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { ...@@ -1668,33 +1686,22 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// 参加ユーザ情報を表示 // 参加ユーザ情報を表示
let attendUserList = archive.attendUserIds; let attendUserList = archive.attendUserIds;
if (CHAT_UTIL.isAndroid()) {
attendUserList = JSON.parse(archive.attendUserIds);
}
attendUserList.forEach(function(user) { attendUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
var userInfo = CHAT_DB.getUserInfo(user);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
var html = Mustache.render(archiveUserTemplate, { var html = Mustache.render(archiveUserTemplate, {
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg", profileImage: userInfo.profileUrl,
userName: "ユーザ名" userName: userInfo.shopMemberName
}); });
var obj = $(jQuery.parseHTML(html)).on('click', function() { var obj = $(jQuery.parseHTML(html)).on('click', function() {
// ネームカード表示 // ネームカード表示
const namecardTemplate = $('#archive-namecard-template').html(); CHAT_UI.makeNameCard(user);
let namecardHtml = Mustache.render(namecardTemplate, {
shopMemberId: 1,
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
name: "ユーザ名",
groupPathList: "",
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite"),
isFavorite: ""
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function() {
});
$('#userProfileModal').html(namecardObj);
$('#userNameCard').modal('show');
}); });
$('#attendUser').append(obj); $('#attendUser').append(obj);
......
public_new/js/chat-util.js
...@@ -55,3 +55,37 @@ CHAT_UTIL.generateUUID = function() { ...@@ -55,3 +55,37 @@ CHAT_UTIL.generateUUID = function() {
}); });
return uuid; return uuid;
}; };
CHAT_UTIL.systemDay = function(date) {
let createdAt = moment(date);
createdAt = moment(date,'YYYYMMDDhhmmss');
const createdAtDow = createdAt.format('YYYY-MM-DD');
let systemDay = new Object();
systemDay.year = createdAt.format('YYYY');
systemDay.month = createdAt.format('MM');
systemDay.day = createdAt.format('DD');
systemDay.dow = moment(createdAtDow).day();
return systemDay;
}
CHAT_UTIL.findDow = function(data) {
let dow = "";
if (data == 0) {
dow = getLocalizedString('sunday');
} else if (data == 1) {
dow = getLocalizedString('monday');
} else if (data == 2) {
dow = getLocalizedString('thusday');
} else if (data == 3) {
dow = getLocalizedString('wednesday');
} else if (data == 4) {
dow = getLocalizedString('thursday');
} else if (data == 5) {
dow = getLocalizedString('friday');
} else if (data == 6) {
dow = getLocalizedString('sunday');
}
return dow;
}
public_new/js/chat.js
...@@ -169,6 +169,11 @@ CHAT.uploadImage = function(formData) { ...@@ -169,6 +169,11 @@ CHAT.uploadImage = function(formData) {
}) })
} }
CHAT.createGetDataUrl = function(fileName, roomId) {
var filePath = CMS_SERVER_URL + '/chatapi/file/getImage?sid=' + CHAT.globalLoginParameter.sid + '&fileName=' + fileName + '&roomId=' + roomId;
return filePath;
}
// Thumbnailのファイルを生成する。 // Thumbnailのファイルを生成する。
CHAT.createThumbnailAndUpload = function(sourceImage, callback) { CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
const fileReader = new FileReader(); const fileReader = new FileReader();
......
public_new/js/language_en.js
...@@ -78,5 +78,15 @@ $.lang.en = { ...@@ -78,5 +78,15 @@ $.lang.en = {
"archiveSaveUser":"Save User", "archiveSaveUser":"Save User",
"archiveAttendUser":"Attend User", "archiveAttendUser":"Attend User",
"noResult":"there is no search result.", "noResult":"there is no search result.",
"searchUserAndGroup":"search user and group." "searchUserAndGroup":"search user and group.",
"year":"year",
"month":"month",
"day":"day",
"monday":"monday",
"thusday":"thusday",
"wednesday":"wednesday",
"thursday":"thursday",
"friday":"friday",
"saturday":"saturday",
"sunday":"sunday"
} }
public_new/js/language_ja.js
...@@ -78,5 +78,15 @@ $.lang.ja = { ...@@ -78,5 +78,15 @@ $.lang.ja = {
"archiveSaveUser":"保存ユーザー", "archiveSaveUser":"保存ユーザー",
"archiveAttendUser":"参加ユーザー", "archiveAttendUser":"参加ユーザー",
"noResult":"検索結果がありませんでした。", "noResult":"検索結果がありませんでした。",
"searchUserAndGroup":"ユーザーとグループ検索" "searchUserAndGroup":"ユーザーとグループ検索",
"year":"年",
"month":"月",
"day":"日",
"monday":"月曜日",
"thusday":"火曜日",
"wednesday":"水曜日",
"thursday":"木曜日",
"friday":"金曜日",
"saturday":"土曜日",
"sunday":"日曜日"
} }
public_new/js/language_ko.js
...@@ -78,5 +78,15 @@ $.lang.ko = { ...@@ -78,5 +78,15 @@ $.lang.ko = {
"archiveSaveUser":"저장 사용자", "archiveSaveUser":"저장 사용자",
"archiveAttendUser":"참여자", "archiveAttendUser":"참여자",
"noResult":"검색결과가 존재하지않습니다", "noResult":"검색결과가 존재하지않습니다",
"searchUserAndGroup":"유저,그룹 검색" "searchUserAndGroup":"유저,그룹 검색",
"year":"년",
"month":"월",
"day":"일",
"monday":"월요일",
"thusday":"화요일",
"wednesday":"수요일",
"thursday":"목요일",
"friday":"금요일",
"saturday":"토요일",
"sunday":"일요일"
} }
public_new/template/template_system_message.html
<div class="sys_msg text-center">2021/03/04</div> <div class="sys_msg text-center">{{year}}{{month}}{{day}}<span class="dow">{{dow}}</span></div>
\ No newline at end of file \ 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