アーカイブ一覧、詳細実装

b32f3df0 · Lee Munkyeong · c3f6ebf7 · b32f3df0 · b32f3df0 · b32f3df0
Commit b32f3df0 authored Apr 12, 2021 by Lee Munkyeong
7 changed files
--- a/public_new/archive.html
+++ b/public_new/archive.html
@@ -50,11 +50,9 @@
  <main id="archive">
    <!-- 検索 -->
    <div class="search_form">
-      <form>
        <input type="search" name="search" placeholder="検索">
        <span class="src_icon"></span>
        <a href="#" class="cancel none">キャンセル</a>
-      </form>
    </div>
    <!-- アーカイブリスト -->
    <div class="archive_list content">

--- a/public_new/archive_detail.html
+++ b/public_new/archive_detail.html
@@ -16,16 +16,21 @@
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
-  <script>
+</head>
+<script>
+    var archiveId;
    window.addEventListener('DOMContentLoaded', function(){
      var urlPrm = new Object;
      var urlSearch = location.search.substring(1).split('&');
      var kv = urlSearch[0].split('=');
      urlPrm[kv[0]]=kv[1];
+      archiveId = urlPrm.archiveId
+      if (typeof(android) != "undefined") {
+      } else {
        CHAT_DB.getArchiveDetail(urlPrm.archiveId);
+      }
    });
  </script>
-</head>
 <body>
  <!-- ナビメニュー -->
@@ -92,7 +97,7 @@
      </div>
      <div class="archive_detail_room_nm item">
        <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
-        <span>{{chatRoomName}}</span>
+        <span class="archive_chat_room">{{chatRoomName}}</span>
        <button id="joinChatRoom">
          <img src="icon/icon_join_room.png" alt="">
        </button>
@@ -101,7 +106,7 @@
        <h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
        <div class="d-flex flex-row">
          <div class="d-flex flex-column">
-            <img src="{{profileImage}}" alt="プロフィール画像">
+            <img src="{{profileImage}}" alt="プロフィール画像"   onclick="CHAT_UI.makeNameCard({{userId}})" >
            <span>{{userName}}</span>
          </div>
        </div>
@@ -188,6 +193,21 @@
    let PLATFORM = '';
    let IS_MOBILE = true;
    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>
 </body>

--- a/public_new/css/archive.css
+++ b/public_new/css/archive.css
@@ -121,6 +121,16 @@
  width: 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){
  .archive_name{
    font-size: 14px;

--- a/public_new/js/archive.js
+++ b/public_new/js/archive.js
@@ -3,16 +3,31 @@ var ARCHIVE_UI = {};
 $(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();
-    if (keyword == '') {
+    if (e.KeyCode == 13 || e.key == "Enter") {
+        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);
  });
 });

--- a/public_new/js/chat-db.js
+++ b/public_new/js/chat-db.js
@@ -195,7 +195,7 @@ CHAT_DB.getArchiveByName = function(archiveName) {
    if (CHAT_UTIL.isIOS()) {
        return JSON.parse(callNativeApp("getArchiveByName", {"archiveName": archiveName}));
    } else if (CHAT_UTIL.isAndroid()) {
-        // TODO
+        return JSON.parse(android.getArchiveListByName(archiveName));
    }
 };
@@ -204,7 +204,7 @@ CHAT_DB.getArchiveDetail = function(archiveId) {
    if (CHAT_UTIL.isIOS()) {
        return JSON.parse(callNativeApp("getArchiveDetail", {"archiveId": archiveId}));
    } else if (CHAT_UTIL.isAndroid()) {
-        // TODO
+        return JSON.parse(android.getArchiveDetail(archiveId));
    }
 };
@@ -212,7 +212,7 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
    if (CHAT_UTIL.isIOS()) {
        webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
    } else if (CHAT_UTIL.isAndroid()) {
-        // TODO
+        android.updateArchiveDetail(archiveId);
    }
 };
@@ -232,3 +232,12 @@ CHAT_DB.getMyGroupUsersNotInRoom = function() {
    	return JSON.parse(android.getMyGroupUsersNotInRoom());
    }
 };
+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
--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
@@ -1588,10 +1588,8 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
    // 初期化
    $('#archiveDetail').html('');
    // アーカイブ詳細の様式を読み込む
    const archiveDetailTemplate = $('#archive-detail-template').html();
    if (IS_ONLINE == 'true') {
        CHAT_DB.updateArchiveDetail(archiveId);
    }
@@ -1601,24 +1599,20 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
    // チャットルーム情報を取得
    var roomId = archive.roomId;
-    var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
-   	// アーカイブ情報を表示
+    //保存ユーザ情報を取得
-   	// let html = Mustache.render(archiveDetailTemplate, {
+    var userInfo = CHAT_DB.getUserInfo(archive.saveUserId);
-	// 	fileName: archive.archiveName,
+    userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
- 	// 	insertDate: archive.archiveDate,
-   	// 	chatRoomName: roomInfo.chatRoomName,
-    //     profileImage: "",
-    //     userName: userName
-  	// });
    // アーカイブ情報を表示
    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() {
@@ -1626,18 +1620,23 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
    $('#archiveDetail').append(obj);
    // プレイヤーの切り替え
+    var archiveFilePath = CHAT.createGetDataUrl(archive.filePath, archive.roomId);
    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" />');
+        case 0:
+            $('#archive_player').prepend('<img class="archive_player" src="'+archiveFilePath+'" />');
            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>');
+        case 1:
+            $('#archive_player').prepend('<video class="archive_player" src=' + archiveFilePath + ' controls autoplay muted playsinline></video>');
            break;
        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" + ' />');
            break;
        case "3": // 文書
+        case 3:
            // リリースに文書とその他は含めないため今回は非表示
            break;
        default:
@@ -1649,33 +1648,22 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
    // 参加ユーザ情報を表示
    let attendUserList = archive.attendUserIds;
+    if (CHAT_UTIL.isAndroid()) {
+        attendUserList = JSON.parse(archive.attendUserIds);
+    }
    attendUserList.forEach(function(user) {
-        // TODO ユーザIDからユーザ情報を取得
+        var userInfo = CHAT_DB.getUserInfo(user);
+        userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
        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() {
            // ネームカード表示
-            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);
@@ -1685,13 +1673,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
    // チャットルームへのリンク付け
    document.getElementById('joinChatRoom').onclick = function() {
-        //  		socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
+        CHAT_UI.joinRoom(archive.roomId, archive.roomName);
-        //   			$('#archive_detail').html('');
-        // 			$('#messages').html('');
-        // 			$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
-        // 			$('#pills-chat-tab').tab('show');
-        // 		});
-        console.log("遷移");
    }
    // loadingIndicatorを非表示

--- a/public_new/js/chat.js
+++ b/public_new/js/chat.js
@@ -165,6 +165,10 @@ 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のファイルを生成する。
 CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
    const fileReader = new FileReader();