Merge branch 'origin/deverop_archiveUI' into 'release_sp3'

Origin/deverop archive ui

See merge request !4

public/css/chat.css

@@ -759,3 +759,132 @@ a.article:hover {
   color: white;
   text-align: center;
 }
+
+.inbox_archive {
+  width: 100%;
+}
+
+#archive_list {
+  margin: 0;
+  padding: 5px 5px 5px;
+  overflow-y: scroll;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  height: calc(100vh - 200px);
+}
+
+.archive_data {
+  overflow-y: scroll;
+  clear: both;
+}
+
+.archive_img {
+  float: left;
+  padding: 10px;
+  width: 20%;
+}
+
+.archive_img img {
+  height: 80px;
+}
+
+.archive_ib {
+  float: left;
+  padding: 15px;
+  width: 80%;
+  line-height: 1.8;
+}
+
+.archive_date_font {
+  font: 1rem !important;
+  color:#464646;
+}
+
+.archive_date {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.archive_file_name {
+  overflow-x: hidden;
+}
+
+.type_image {
+  text-align: center;
+  background-color: seagreen;
+  color: white;
+}
+
+.type_movie {
+  text-align: center;
+  background-color: blue;
+  color: white;
+}
+
+.type_sound {
+  text-align: center;
+  background-color: orange;
+  color: white;
+}
+
+.type_document {
+  /* 今回のリリースに文書とその他は含めないため非表示 */
+  display: none;
+}
+
+.type_other {
+  /* 今回のリリースに文書とその他は含めないため非表示 */
+  display: none;
+}
+
+.player {
+  background-color: black;
+  text-align : center;
+}
+
+.archive_player {
+  width: auto;
+  max-width: 100%;
+  max-height: 50vh;
+}
+
+.archive_audio_player {
+  width: 100%;
+}
+
+.archive_info {
+  overflow-y: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  height: calc(50vh - 50px);
+}
+
+.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
+  padding: 10px;
+  padding-left: 10px;
+  display: inline;
+}
+
+.save_user_list, .join_user_list {
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.archive_user {
+  display: inline-block;
+  width: 100px;
+  margin: 10px;
+}
+
+.archive_user img {
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+
+.archive_user p {
+  text-align: center;
+  overflow: hidden;
+}

public/index.html

@@ -246,6 +246,26 @@
       </div>
     </div>
 
+    <div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
+      <div class="inbox_archive">
+        <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="archive_list" class="inbox_archive row">
+        </div>
+      </div>
+    </div>
+
+    <div id="archive_detail" class="archive_detail" >
+    </div>
+
     <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
       <div class="inbox_people">
         <div class="heading_srch">
@@ -322,6 +342,12 @@
         <i class="fa fa-comments fa-6" aria-hidden="true"></i>
       </a>
     </li>
+    <!-- Display None (d-none) archive -->
+    <li class="nav-item d-none justify-content-center">
+      <a class="nav-link" id="pills-archive-tab" data-toggle="pill" href="#pills-archive" role="tab" aria-controls="pills-archive" aria-selected="false">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
     <!-- Display None (d-none) chatList -->
     <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">
@@ -508,6 +534,62 @@
     </div>
   </div>
 </script>
+<script id="archive-template" type="text/template">
+  <div class="archive_list col-12">
+    <div class="archive_data">
+      <div class="archive_img">
+        <img src={{thumbnailImage}} alt="">
+      </div>
+      <div class="archive_ib">
+        <div class="row">
+          <div class="archive_date_font col-10">
+            <span class="archive_date">{{insertDate}}</span>
+          </div>
+          <div class="archive_type">
+            <span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
+          </div>
+        </div>
+        <p class="archive_file_name text-truncate">{{fileName}}</p>
+      </div>
+    </div>
+  </div>
+</script>
+<script id="archive-detail-template" type="text/template">
+  <div id="archive_player" class="player">
+  </div>
+  <ul class="archive_info">
+    <li class="fileName">
+      <h5>{{fileNameTitle}}</h5>
+      <p class="text-truncate">{{fileName}}</p>
+    </li>
+    <li class="insertDate">
+      <h5>{{saveDateTitle}}</h5>
+      <p class="text-truncate">{{insertDate}}</p>
+    </li>
+    <li class="chatRoomName">
+      <h5>{{roomNameTitle}}</h5>
+      <p class="text-truncate">{{chatRoomName}}
+      <input type="button" value="＞" id="joinChatRoom">
+      </p>
+    </li>
+    <li class="saveUser">
+      <h5>{{saveUserTitle}}</h5>
+      <ul class="save_user_list" id="save_user">
+      </ul>
+    </li>
+    <li class="joinUser">
+      <h5>{{attendUserTitle}}</h5>
+      <ul class="join_user_list" id="join_user">
+      </ul>
+    </li>
+  </ul>
+</script>
+<script id="archive-user-template" type="text/template">
+  <li class="archive_user">
+    <img src="{{profileImage}}" alt="">
+    <p>{{userName}}</p>
+  </li>
+</script>
 <script src="./socket.io/dist/socket.io.js"></script>
 <script src="./js/libs/socket.io.js"></script>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>

public/js/chat-db.js

@@ -57,3 +57,70 @@ CHAT_DB.getMyGroupUsers = function() {
     	return JSON.parse(android.getMyGroupUsers());
     }
 };
+
+CHAT_DB.getArchiveList = function() {
+	if (CHAT_UTIL.isIOS()) {
+		// String形式をJsonに変更してReturn
+		webkit.messageHandlers.getArchiveList.postMessage();
+		return JSON.parse(iosArchiveList);
+	} else if (CHAT_UTIL.isAndroid()) {
+ 		//TODO Android処理追加必要
+	}
+};
+var iosArchiveList;
+CHAT_DB.getIosArchiveList = function(archiveList) {
+	iosArchiveList = archiveList;
+};
+
+CHAT_DB.updateArchiveList = function() {
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.updateArchiveList.postMessage();
+	} else if (CHAT_UTIL.isAndroid()) {
+		//TODO Android処理追加必要
+	}
+};
+
+CHAT_DB.getArchiveDetail = function(archiveId) {
+	if (CHAT_UTIL.isIOS()) {
+		// String形式をJsonに変更してReturn
+		webkit.messageHandlers.getArchiveList.postMessage({archiveId});
+		return JSON.parse(iosArchiveDetail);
+	} else if (CHAT_UTIL.isAndroid()) {
+ 		//TODO Android処理追加必要
+	}
+};
+var iosArchiveDetail;
+CHAT_DB.getIosArchiveDetail = function(archive) {
+	iosArchiveDetail = archive;
+};
+
+CHAT_DB.updateArchiveDetail = function(archiveId) {
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
+	} else if (CHAT_UTIL.isAndroid()) {
+		//TODO Android処理追加必要
+	}
+};
+
+CHAT_DB.getChatRoomInfo = function(roomId) {
+	if (CHAT_UTIL.isIOS()) {
+		// String形式をJsonに変更してReturn
+		webkit.messageHandlers.getChatRoomInfo.postMessage({roomId});
+		return JSON.parse(iosRoomInfo);
+	} else if (CHAT_UTIL.isAndroid()) {
+ 		//TODO Android処理追加必要
+	}
+}
+var iosRoomInfo;
+CHAT_DB.getIosRoomInfo = function(roomInfo) {
+	iosRoomInfo = roomInfo;
+};
+
+CHAT_DB.updateChatRoomInfo = function(roomId) {
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.updateChatRoomInfo.postMessage({roomId});
+	} else if (CHAT_UTIL.isAndroid()) {
+		//TODO Android処理追加必要
+	}
+};
+

public/js/chat-ui.js

@@ -483,6 +483,14 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
             $('#bottomNav').show();
             break;
 
+        case '#pills-archive':
+            $('#homeButton').show();
+            $("#backButton").hide();
+            $('.titleRoomName').show();
+            $('#archive_list').show();
+            $('#bottomNav').show();
+            break;
+
         case '#pills-user':
             $("#backButton").show();
             $("#userSelectionDeleteBtn").hide();
@@ -539,6 +547,8 @@ $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
             break;
         case '#pills-contact':
             break;
+		case '#pills-archive':
+			break;
         case '#pills-user':
             $('#userListKeyword').val('');
             break;
@@ -903,6 +913,10 @@ $('#chatButton').on('click', function(event){
     CHAT_UI.refreshRoomList(chatRoomType.DM);
 });
 
+$('#archiveButton').on('click', function(event){
+    CHAT_UI.refreshArchiveScreen();
+});
+
 CHAT_UI.refreshContactScreen = function() {
     //loadingIndicatorを表示
     $('#my_info').html('');
@@ -1209,3 +1223,198 @@ CHAT_UI.showUserNamecard = function(shopMemberId) {
 //        keyboard: false
 //    })
 }
+
+CHAT_UI.refreshArchiveScreen = function() {
+	// loadingIndicatorを表示
+	CHAT_UI.showLoadingIndicator();
+
+	//画面タイトル設定
+	let archiveListTitle = getLocalizedString("archiveListTitle");
+	$('.titleRoomName').text(archiveListTitle);
+
+	// 初期化
+	$('#archive_list').html('');
+	$('#pills-archive-tab').tab('show');
+
+	// アーカイブの様式を読み込む
+	const archiveTemplate = $('#archive-template').html();
+
+	if (IS_ONLINE == 'true') {
+		CHAT_DB.updateArchiveList();
+	}
+
+	// アーカイブ一覧取得＆表示
+	var archiveList = CHAT_DB.getArchiveList();
+
+	archiveList.forEach(function(archive) {
+		var archiveType = '';
+		var css = '';
+		switch(archive.archiveType) {
+			case 0:
+				archiveType = getLocalizedString("archiveTypeImage");
+				css = 'type_image';
+				break;
+			case 1:
+				archiveType = getLocalizedString("archiveTypeMovie");
+				css = 'type_movie';
+				break;
+			case 2:
+				archiveType = getLocalizedString("archiveTypeSound");
+				css = 'type_sound';
+				break;
+			case 3:
+				// 今回のリリースに文書とその他は含めないため非表示
+				archiveType = getLocalizedString("archiveTypeDocument");
+				css = 'type_document';
+				break;
+			default:
+				// 今回のリリースに文書とその他は含めないため非表示
+				archiveType = getLocalizedString("archiveTypeOther");
+				css = 'type_other';
+		}
+
+		let html = Mustache.render(archiveTemplate, {
+			id: archive.archiveId,
+			fileName: archive.archiveName,
+			thumbnailImage: archive.archiveUrl,
+			insertDate: archive.archiveDate,
+			archiveType: archiveType,
+			archiveTypeCSS: css
+		});
+
+		let obj = $(jQuery.parseHTML(html)).on('click', function() {
+			// アーカイブ詳細画面へ遷移
+			$('#homeButton').hide();
+			$('.titleRoomName').show();
+			$('#archive_list').hide();
+			$('#archive_detail').show();
+			$('#bottomNav').hide();
+			$("#backButton").show();
+			$('#backButton').off().on('click', function() {
+				// アーカイブ一覧に戻る
+				$('#homeButton').show();
+				$("#backButton").hide();
+				$('.titleRoomName').show();
+				$('#archive_detail').hide();
+				$('#archive_list').show();
+				$('#bottomNav').show();
+			});
+			// データの受け渡し
+			CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
+		});
+
+		$('#archive_list').append(obj);
+		$('.archive_list').css('border-bottom', '1px solid #c4c4c4');
+	})
+
+	// loadingIndicatorを非表示
+ 	CHAT_UI.dismissLoadingIndicator();
+}
+
+// アーカイブ詳細画面の設定
+CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
+	// loadingIndicatorを表示
+	CHAT_UI.showLoadingIndicator();
+
+	//画面タイトル設定
+	let archiveDetailTitle = getLocalizedString("archiveDetailTitle");
+	$('.titleRoomName').text(archiveDetailTitle);
+
+	// 初期化
+	$('#archive_detail').html('');
+
+   	// アーカイブ詳細の様式を読み込む
+   	const archiveDetailTemplate = $('#archive-detail-template').html();
+
+	if (IS_ONLINE == 'true') {
+		CHAT_DB.updateArchiveDetail(archiveId);
+
+	}
+	// アーカイブ詳細取得
+	var archive = CHAT_DB.getArchiveDetail(archiveId);
+
+	// チャットルーム情報を取得
+	var roomId = archive.roomId;
+	var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
+
+   	// アーカイブ情報を表示
+   	let html = Mustache.render(archiveDetailTemplate, {
+		fileNameTitle: getLocalizedString("fileNameTitle"),
+		fileName: archive.archiveName,
+		saveDateTitle: getLocalizedString("saveDateTitle"),
+ 		insertDate: archive.archiveDate,
+		roomNameTitle: getLocalizedString("roomNameTitle"),
+   		chatRoomName: roomInfo.chatRoomName,
+		saveUserTitle: getLocalizedString("saveUserTitle"),
+ 		attendUserTitle: getLocalizedString("attendUserTitle")
+  	});
+	let obj = $(jQuery.parseHTML(html));
+	$('#archive_detail').append(obj);
+
+	// プレイヤーの切り替え
+	switch(archive.archiveType) {
+		case 0: // 画像
+			$('#archive_player').prepend('<img class="archive_player" src=' + archive.archiveUrl + '" </img>');
+			break;
+		case 1: // 動画
+			$('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>');
+			break;
+		case 2: // 音声
+			$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>');
+			$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
+			break;
+		case 3: // 文書
+			// リリースに文書とその他は含めないため今回は非表示
+			break;
+		default:
+			// リリースに文書とその他は含めないため今回は非表示
+	}
+
+	// チャットルームへのリンク付け
+ 	document.getElementById('joinChatRoom').onclick = function() {
+ 		socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
+  			$('#archive_detail').html('');
+			$('#messages').html('');
+			$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
+			$('#pills-chat-tab').tab('show');
+		});
+	}
+
+	// ユーザの様式を読み込む
+	const archiveUserTemplate = $('#archive-user-template').html();
+
+	// 保存ユーザ情報を表示
+	let saveUserList = archive.saveUserId;
+	saveUserList.forEach(function(user) {
+		// TODO ユーザIDからユーザ情報を取得
+		let html = Mustache.render(archiveUserTemplate, {
+ 			profileImage: "プロフィール画像",
+ 			userName: "ユーザ名"
+ 		});
+
+ 		let obj = $(jQuery.parseHTML(html)).on('click', function() {
+			//TODO ネームカードのポップアップを出す処理
+		});
+
+		$('#save_user').append(obj);
+	})
+
+	// 参加ユーザ情報を表示
+	let attendUserList = archive.attendUserId;
+	attendUserList.forEach(function(user) {
+		// TODO ユーザIDからユーザ情報を取得
+		let html = Mustache.render(archiveUserTemplate, {
+ 			profileImage: "プロフィール画像",
+ 			userName: "ユーザ名"
+ 		});
+
+ 		let obj = $(jQuery.parseHTML(html)).on('click', function() {
+			//TODO ポップアップを出す処理
+		});
+
+		$('#save_user').append(obj);
+	})
+
+	// loadingIndicatorを非表示
+	CHAT_UI.dismissLoadingIndicator();
+}

public/js/language_en.js

@@ -58,5 +58,17 @@ $.lang.en = {
     "directMessageChatRoom":"DM",
     "favorite":"Favorite List",
     "mygroup":"My Group",
-    "groupChatRoom":"Group"
+    "groupChatRoom":"Group",
+    "archiveListTitle":"Archive",
+    "archiveTypeImage":"Image",
+    "archiveTypeMovie":"Movie",
+    "archiveTypeSound":"Sound",
+    "archiveTypeDocument":"Document",
+    "archiveTypeOther":"Other",
+    "archiveDetailTitle":"Detail",
+    "fileNameTitle":"File Name",
+    "saveDateTitle":"Save Date",
+    "roomNameTitle":"ChatRoom Name",
+    "saveUserTitle":"Save User",
+    "attendUserTitle":"Attend User"
 }

public/js/language_ja.js

@@ -58,5 +58,17 @@ $.lang.ja = {
     "directMessageChatRoom":"DM",
     "favorite":"お気に入りリスト",
     "mygroup":"マイグループ",
-    "groupChatRoom":"グループ"
+    "groupChatRoom":"グループ",
+    "archiveListTitle":"アーカイブ",
+    "archiveTypeImage":"画像",
+    "archiveTypeMovie":"動画",
+    "archiveTypeSound":"音声",
+    "archiveTypeDocument":"文書",
+    "archiveTypeOther":"その他",
+    "archiveDetailTitle":"詳細",
+    "fileNameTitle":"ファイル名",
+    "saveDateTitle":"保存日",
+    "roomNameTitle":"チャットルーム名",
+    "saveUserTitle":"保存ユーザー",
+    "attendUserTitle":"参加ユーザー"
 }

public/js/language_ko.js

@@ -58,5 +58,17 @@ $.lang.ko = {
     "directMessageChatRoom":"DM",
     "favorite":"즐겨찾기리스트",
     "mygroup":"마이그룹",
-    "groupChatRoom":"그룹"
+    "groupChatRoom":"그룹",
+    "archiveListTitle":"아카이브",
+    "archiveTypeImage":"이미지",
+    "archiveTypeMovie":"동영상",
+    "archiveTypeSound":"음성",
+    "archiveTypeDocument":"문서",
+    "archiveTypeOther":"기타",
+    "archiveDetailTitle":"세부 묘사",
+    "fileNameTitle":"파일 이름",
+    "saveDateTitle":"저장 일",
+    "roomNameTitle":"대화방 이름",
+    "saveUserTitle":"저장 사용자",
+    "attendUserTitle":"참여 사용자"
 }