Merge branch 'origin/develop_apply_design_archive_detail' into 'origin/develop_apply_design'

Origin/develop apply design archive detail

See merge request !10

public_new/css/archive.css

@@ -46,6 +46,21 @@
 }
 
 /**************************** archive detail *************************/
+.player {
+  background-color: black;
+  text-align : center;
+}
+
+.archive_player {
+  width: auto;
+  max-width: 100%;
+  max-height: 50vh;
+}
+
+.archive_audio_player {
+  width: 100%;
+}
+
 .archive_detail .ttl{
   font-size: 18px;
   font-weight: bold;
@@ -68,6 +83,20 @@
   width: 90px;
 }
 
+#joinChatRoom {
+  -webkit-appearance: none;
+  border: none;
+  width: 24px;
+  height: auto;
+  padding: 0;
+  background: white;
+}
+
+#joinChatRoom img {
+  width: 24px;
+  height: 24px;
+}
+
 @media screen and (max-width: 768px){
   .archive_name{
     font-size: 14px;

public_new/js/archive.js

+// 名前空間
+var ARCHIVE_UI = {};
+
 $(function() {
   // アーカイブ検索
   $('#archive .search_form input[type="search"]').keyup(function(){
-    $.ajax({
-      url: 'search_message_archive_list.html',
-      type: 'POST',
-      datatype: 'html'
-    }).done(function (data) {
-      $('.overlay_src_msg').html(data);
-      })
+    $('.overlay_src_msg').empty();
+
+    var keyword = $('#archive .search_form input[type="search"]').val();
+    if (keyword == '') {
+      return;
+    }
+
+    // 検索結果を表示
+    CHAT_DB.callGetArchiveByName(keyword);
   });
 });
+
+ARCHIVE_UI.refreshSearchScreen = function(keyword) {
+  var archiveList = CHAT_DB.getArchiveByName(keyword);
+  var archiveTemplate;
+  $.get({ url: "./template/template_archive_list.html", async: false }
+      , function(text) {
+        archiveTemplate = text;
+  });
+
+  archiveList.forEach(function(archive) {
+    var typeImage = "";
+    switch(archive.archiveType) {
+      case 0: // 画像
+        typeImage = "icon/icon_collabo_picture.png";
+        break;
+      case 1: // 動画
+        typeImage = "icon/icon_collabo_videocam.png";
+        break;
+      case 2: // 音声
+        typeImage = "icon/icon_collabo_headset.png";
+        break;
+      case 3: // 文書
+        typeImage = "icon/icon_collabo_document.png";
+        break;
+      default: // その他
+        typeImage = "";
+    }
+
+    let html = Mustache.render(archiveTemplate, {
+      archiveId: archive.archiveId,
+      fileName: archive.archiveName,
+      insertDate: archive.archiveDate,
+      typeImage: typeImage
+    });
+      
+    let obj = jQuery.parseHTML(html);
+    $('.overlay_src_msg').append(obj);
+  });
+};

public_new/js/chat-db.js

@@ -5,19 +5,35 @@ var CHAT_DB = {};
 //ロカールDBからルーム一覧情報を取得
 CHAT_DB.getRoomList = function(roomType) {
     if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(iosRoomList);        
     } else if (CHAT_UTIL.isAndroid()) {
         //String形式をJsonに変更してReturn
     	return JSON.parse(android.getRoomList(roomType));
     }
 };
 
+var iosRoomList;
+CHAT_DB.getIosRoomList = function(roomList) {
+	iosRoomList = roomList;
+    CHAT_DB.getRoomList(0);
+};
+
+CHAT_DB.callGetRoomList = function(roomType) {
+    if (CHAT_UTIL.isIOS()) {
+        webkit.messageHandlers.getRoomList.postMessage({roomType});
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getRoomList(roomType));
+    }
+}
+
 //ロカールDBからログインしたユーザのデータを取得する。
 CHAT_DB.getMyInfo = function(input) {
     var result = JSON.parse(android.getMyInfo());
     CHAT.globalLoginParameter.shopMemberId = result.shopMemberId;
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
+        
     } else if (CHAT_UTIL.isAndroid()) {
         //String形式をJsonに変更してReturn
     	return result;
@@ -104,3 +120,95 @@ CHAT_DB.getGroupByName = function(groupName) {
     	return JSON.parse(android.getGroupByName(groupName));
     }
 };
+
+// アーカイブ一覧
+var iosArchiveList;
+
+CHAT_DB.callGetArchiveList = function() {
+    if (CHAT_UTIL.isIOS()) {
+        iosArchiveList = "";
+        webkit.messageHandlers.getArchiveList.postMessage();
+    } else if (CHAT_UTIL.isAndroid()) {
+        CHAT_UI.refreshArchiveScreen();
+    }
+};
+
+CHAT_DB.getIosArchiveList = function(archiveList) {
+    iosArchiveList = archiveList;
+    CHAT_UI.refreshArchiveScreen();
+};
+
+CHAT_DB.getArchiveList = function() {
+    if (CHAT_UTIL.isIOS()) {
+        return JSON.parse(iosArchiveList);
+    } else if (CHAT_UTIL.isAndroid()) {
+        // TODO
+    }
+};
+
+CHAT_DB.updateArchiveList = function() {
+    if (CHAT_UTIL.isIOS()) {
+        webkit.messageHandlers.updateArchiveList.postMessage();
+    } else if (CHAT_UTIL.isAndroid()) {
+        // TODO
+    }
+};
+
+// アーカイブ一覧検索
+var iosSearchArchiveList;
+var searchWord;
+
+CHAT_DB.callGetArchiveByName = function(keyword) {
+    if (CHAT_UTIL.isIOS()) {
+        iosSearchArchiveList = "";
+        searchWord = keyword;
+        webkit.messageHandlers.getArchiveByName.postMessage({keyword});
+    } else if (CHAT_UTIL.isAndroid()) {
+        ARCHIVE_UI.refreshSearchScreen(keyword);
+    }
+};
+
+CHAT_DB.getIosSearchArchiveList = function(archiveList) {
+    iosSearchArchiveList = archiveList;
+    ARCHIVE_UI.refreshSearchScreen(searchWord);
+};
+
+CHAT_DB.getArchiveByName = function(archiveName) {
+    if (CHAT_UTIL.isIOS()) {
+        return JSON.parse(iosSearchArchiveList);
+    } else if (CHAT_UTIL.isAndroid()) {
+        // TODO
+    }
+};
+
+// アーカイブ詳細
+var iosArchiveDetail;
+CHAT_DB.getIosArchiveDetail = function(archiveDetail) {
+    iosArchiveDetail = archiveDetail;
+    CHAT_DB.callGetArchiveDetail(archiveDetail.archiveId);
+};
+
+CHAT_DB.callGetArchiveDetail = function(archiveId) {
+    if (CHAT_UTIL.isIOS()) {
+        iosArchiveDetail = "";
+        webkit.messageHandlers.getArchiveDetail.postMessage({archiveId});
+    } else if (CHAT_UTIL.isAndroid()) {
+        CHAT_UI.refreshArchiveDetailScreen(archiveId);
+    }
+};
+
+CHAT_DB.getArchiveDetail = function() {
+    if (CHAT_UTIL.isIOS()) {
+        return JSON.parse(iosArchiveDetail);
+    } else if (CHAT_UTIL.isAndroid()) {
+        // TODO
+    }
+};
+
+CHAT_DB.updateArchiveDetail = function(archiveId) {
+    if (CHAT_UTIL.isIOS()) {
+        webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
+    } else if (CHAT_UTIL.isAndroid()) {
+        // TODO
+    }
+};

public_new/js/chat-ui.js

@@ -850,6 +850,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 
     $("#favorite-seperator").text(getLocalizedString("favorite"))
     $("#mygroup-seperator").text(getLocalizedString("mygroup"))
+
+    $(".ttl_archive").text(getLocalizedString("archive"))
+    $(".ttl_detail").text(getLocalizedString("detail"))
+    $("#archiveFileName").text(getLocalizedString("archiveFileName"))
+    $("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"))
+    $("#archiveRoomName").text(getLocalizedString("archiveRoomName"))
+    $("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"))
+    $("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"))
 }
 
 // 画像の読み込みが全て終わったタイミングでコールバック実行
@@ -1368,3 +1376,175 @@ CHAT_UI.toggleCategory = function(category) {
   $(category).toggleClass("open");
   $(category).next().slideToggle();
 };
+
+
+// アーカイブ一覧
+CHAT_UI.refreshArchiveScreen = function() {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+
+    // 初期化
+    $('#archiveList').html('');
+
+    // アーカイブの様式を読み込む
+    const archiveTemplate = $('#archive-template').html();
+
+    // アーカイブ一覧取得
+    if (IS_ONLINE == 'true') {
+        CHAT_DB.updateArchiveList();
+    }
+
+    // ローカルDBのデータを表示
+    var archiveList = CHAT_DB.getArchiveList();
+	archiveList.forEach(function(archive) {
+        var typeImage = "";
+        switch(archive.archiveType) {
+            case 0: // 画像
+                typeImage = "icon/icon_collabo_picture.png";
+                break;
+            case 1: // 動画
+                typeImage = "icon/icon_collabo_videocam.png";
+                break;
+            case 2: // 音声
+                typeImage = "icon/icon_collabo_headset.png";
+                break;
+            case 3: // 文書
+                typeImage = "icon/icon_collabo_document.png";
+                break;
+            default: // その他
+                typeImage = "";
+        }
+        let html = Mustache.render(archiveTemplate, {
+            archiveId: archive.archiveId,
+            fileName: archive.archiveName,
+            insertDate: archive.archiveDate,
+            typeImage: typeImage
+        });
+        let obj = $(jQuery.parseHTML(html)).on('click', function() {
+        });
+        $('#archiveList').append(obj);
+    });
+    
+    // loadingIndicatorを非表示
+    CHAT_UI.dismissLoadingIndicator();
+};
+
+
+// アーカイブ詳細
+CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
+    // loadingIndicatorを表示
+    CHAT_UI.showLoadingIndicator();
+
+    // 初期化
+    $('#archiveDetail').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, {
+	// 	fileName: archive.archiveName,
+ 	// 	insertDate: archive.archiveDate,
+   	// 	chatRoomName: roomInfo.chatRoomName,
+    //     profileImage: "",
+    //     userName: userName
+  	// });
+
+    // アーカイブ情報を表示
+    var html = Mustache.render(archiveDetailTemplate, {
+        fileName: "ファイル名",
+        insertDate: "2021/04/01 18:00",
+        chatRoomName: "チャットルーム名",
+        profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
+        userName: "ユーザ名"
+    });
+
+    var obj = $(jQuery.parseHTML(html)).on('click', function() {
+    });
+    $('#archiveDetail').append(obj);
+
+    // プレイヤーの切り替え
+    switch(archive.archiveType) {
+        case "0": // 画像
+            $('#archive_player').prepend('<img class="archive_player" src="https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg" />');
+            break;
+        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>');
+            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" + ' />');
+            break;
+        case "3": // 文書
+            // リリースに文書とその他は含めないため今回は非表示
+            break;
+        default:
+            // リリースに文書とその他は含めないため今回は非表示
+    }
+
+    // ユーザの様式を読み込む
+    const archiveUserTemplate = $('#archive-user-template').html();
+
+    // 参加ユーザ情報を表示
+    let attendUserList = archive.attendUserIds;
+    attendUserList.forEach(function(user) {
+        // TODO ユーザIDからユーザ情報を取得
+        var html = Mustache.render(archiveUserTemplate, {
+            profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
+            userName: "ユーザ名"
+        });
+
+        var obj = $(jQuery.parseHTML(html)).on('click', function() {
+            // ネームカード表示
+            const namecardTemplate = $('#archive-namecard-template').html();
+
+            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);
+    })
+
+    CHAT_UI.htmlElementTextInitialize(navigator.language);
+
+    // チャットルームへのリンク付け
+    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');
+        // 		});
+        console.log("遷移");
+    }
+        
+    // loadingIndicatorを非表示
+    CHAT_UI.dismissLoadingIndicator();
+};
+
+

public_new/js/language_en.js

@@ -69,5 +69,12 @@ $.lang.en = {
     "groupUser":" Member List",
     "chat":"Chat",
     "voice":"Call",
-    "addFavorite":"Add Favorite"
+    "addFavorite":"Add Favorite",
+    "archive":"Archive",
+    "detail":"Detail",
+    "archiveFileName":"File Name",
+    "archiveInsertDate":"Save Date",
+    "archiveRoomName":"ChatRoom Name",
+    "archiveSaveUser":"Save User",
+    "archiveAttendUser":"Attend User"
 }

public_new/js/language_ja.js

@@ -69,5 +69,12 @@ $.lang.ja = {
     "groupUser":"所属ユーザ",
     "chat":"チャット",
     "voice":"通話",
-    "addFavorite":"お気に入り追加"
+    "addFavorite":"お気に入り追加",
+    "archive":"アーカイブ",
+    "detail":"詳細",
+    "archiveFileName":"ファイル名",
+    "archiveInsertDate":"保存日",
+    "archiveRoomName":"チャットルーム名",
+    "archiveSaveUser":"保存ユーザー",
+    "archiveAttendUser":"参加ユーザー"
 }

public_new/js/language_ko.js

@@ -69,5 +69,12 @@ $.lang.ko = {
     "groupUser":"소속 사용자",
     "chat":"채팅",
     "voice":"통화",
-    "addFavorite":"즐겨찾기추가"
+    "addFavorite":"즐겨찾기추가",
+    "archive":"아카이브",
+    "detail":"자세한",
+    "archiveFileName":"파일 이름",
+    "archiveInsertDate":"저장 일",
+    "archiveRoomName":"대화방 이름",
+    "archiveSaveUser":"저장 사용자",
+    "archiveAttendUser":"참여자"
 }

public_new/template/template_archive_list.html

+<li class="d-flex align-items-center">
+    <a href="archive_detail.html?archiveId={{archiveId}}" class="w-100">
+        <div class="archive_item d-flex flex-row align-items-center w-100">
+            <div class="arhive_img">
+              <div class="img_wrap bg_blue">
+                <img src="{{typeImage}}" alt="動画" />
+              </div>
+            </div>
+            <div class="archive_desc">
+              <div class="archive_name">
+                <span>{{fileName}}</span>
+              </div>
+              <div class="archive_date">
+                <span>{{insertDate}}</span>
+              </div>
+            </div>
+        </div>
+    </a>
+</li>
\ No newline at end of file