アーカイブUI作成

public/css/chat.css

@@ -759,3 +759,44 @@ a.article:hover {
   color: white;
   text-align: center;
 }
+
+.inbox_archive {
+  float: left;
+  overflow: hidden;
+  border-right: 1px solid #c4c4c4;
+  width: 100%;
+}
+
+#archive_list {
+  border-bottom: 1px solid #c4c4c4;
+  margin: 0;
+  padding: 5px 5px 5px;
+}
+
+.archive_data {
+  overflow:hidden;
+  clear:both;
+}
+
+.archive_img {
+  float: left;
+  padding: 10px;
+  width: 20%;
+}
+
+.archive_ib {
+  float: left;
+  padding: 15px;
+  width: 80%;
+}
+
+.archive_ib h5 {
+  font-size:1rem;
+  color:#464646;
+  margin:0 0 14px 0;
+}
+
+.archive_date {
+  display: inline-flex;
+  max-width: 100%;
+}

public/index.html

@@ -246,6 +246,23 @@
       </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 class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
       <div class="inbox_people">
         <div class="heading_srch">
@@ -322,6 +339,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 +531,35 @@
     </div>
   </div>
 </script>
+<script id="archive-template" type="text/template">
+  <div class="archive_list col-12" archive-name="{{fileName}}" archive-id="{{id}}">
+    <div class="archive_data">
+      <div class="archive_img">
+        <img src={{thumbnailImage}} alt="">
+      </div>
+      <div class="archive_ib">
+        <div class="row">
+          <div class="col-8">
+            <h5><span class="archive_date">{{time}}</span></h5>
+          </div>
+          <div class="col-4">
+            <span class="text-truncate room-name-font">{{archiveType}}</span>
+          </div>
+        </div>
+        <p class="text-truncate float-left">{{fileName}}</p>
+      </div>
+      <div class="squareBox deleteBox" data-id="{{id}}">
+        <div class="squareBoxContent">
+          <div>
+            <span>
+              <i class="fa fa-trash"></i>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</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,17 @@ CHAT_DB.getMyGroupUsers = function() {
     	return JSON.parse(android.getMyGroupUsers());
     }
 };
+
+CHAT_DB.getArchiveList = function(archiveId) {
+	if (CHAT_UTIL.isIOS()) {
+		// String形式をJsonに変更してReturn
+		webkit.messageHandlers.getArchiveList.postMessage(archiveId);
+		return JSON.parse(iosArchiveList);
+    } else if (CHAT_UTIL.isAndroid()) {
+        //TODO Android処理追加必要
+    }
+};
+var iosArchiveList;
+getIosArchiveList = function(archiveList) {
+	iosArchiveList = archiveList;
+};

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,43 @@ 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();
+
+    // アーカイブ情報取得＆表示
+	// TODO archiveId取得処理
+    var archiveList = CHAT_DB.getArchiveList(archiveId);
+
+    archiveList.forEach(function(archive) {
+        archive.thumbnailImagePath = CHAT.getProfileImgUrl(archive.archiveUrl)
+        let html = Mustache.render(archiveTemplate, {
+            id: archive.archiveId,
+            fileName: archive.archiveName,
+            thumbnailImage: archive.thumbnailImagePath,
+            //time: ,
+            archiveType: archive.archiveType
+        });
+
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
+            //TODO アーカイブ詳細画面へ遷移する処理
+        });
+
+        $('#archive_list').append(obj);
+    })
+
+    // loadingIndicatorを非表示
+    CHAT_UI.dismissLoadingIndicator();
+}