Skip to content

C
chat_webview
Commit c751d446 by Takatoshi Miura
Options

アーカイブUI適用

parent 643b084a
Showing with 427 additions and 343 deletions
public_new/archive.html
...@@ -13,6 +13,12 @@ ...@@ -13,6 +13,12 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/loading.css"> <link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
<script>
window.addEventListener('DOMContentLoaded', function() {
CHAT_UI.refreshArchiveScreen();
});
</script>
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
...@@ -49,273 +55,7 @@ ...@@ -49,273 +55,7 @@
</div> </div>
<!-- アーカイブリスト --> <!-- アーカイブリスト -->
<div class="archive_list content"> <div class="archive_list content">
<ul> <ul id="archiveList">
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_picture.png" alt="写真" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名.jpg</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_headset.png" alt="音声" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名ファイル名.mp3</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_document.png" alt="資料" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名ファイル名.jpg</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="archive_detail.html" 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="icon/icon_collabo_videocam.png" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>ファイル名.mp4</span>
</div>
<div class="archive_date">
<span>2021/02/24 16:14</span>
</div>
</div>
</div>
</a>
</li>
</ul> </ul>
</div> </div>
<!-- オーバーレイ --> <!-- オーバーレイ -->
...@@ -324,6 +64,7 @@ ...@@ -324,6 +64,7 @@
</ul> </ul>
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer>
<div class="footer-wrap"> <div class="footer-wrap">
...@@ -358,7 +99,39 @@ ...@@ -358,7 +99,39 @@
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/archive.js"></script> <script src="./js/archive.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script id="archive-template" type="text/template">
<li class="d-flex align-items-center">
<a href="archive_detail.html?archiveId=1" 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>
</script>
</body> </body>
</html> </html>
public_new/archive_detail.html
...@@ -10,8 +10,19 @@ ...@@ -10,8 +10,19 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/archive.css"> <link rel="stylesheet" href="./css/archive.css">
<link rel="stylesheet" href="./css/loading.css">
<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>
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];
CHAT_UI.refreshArchiveDetailScreen(urlPrm.archiveId);
});
</script>
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
...@@ -20,13 +31,13 @@ ...@@ -20,13 +31,13 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="archive.html"><span>アーカイブ</span></a> <a href="archive.html"><span class="ttl_archive">アーカイブ</span></a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item p-0"> <div class="nav-item p-0">
<h1 class="nav-ttl">詳細</h1> <h1 class="nav-ttl ttl_detail">詳細</h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -39,111 +50,135 @@ ...@@ -39,111 +50,135 @@
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="archive"> <main id="archive">
<!-- アーカイブ詳細 --> <!-- アーカイブ詳細 -->
<div class="archive_detail"> <div class="archive_detail" id="archiveDetail">
<div class="archive_detail_hero text-center">
<div class="img_wrap">
<img src="img/capture.png" alt="サンプル画像">
</div>
<div class="img_wrap">
<img src="img/controller.png" alt="サンプル画像">
</div> </div>
</main>
<!-- ローディング -->
<div id="userProfileModal"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script id="archive-detail-template" type="text/template">
<div id="archive_player" class="player">
</div> </div>
<div class="archive_detail_desc"> <div class="archive_detail_desc">
<div class="archive_detail_fl_nm item"> <div class="archive_detail_fl_nm item">
<h2 class="ttl">ファイル名</h2> <h2 class="ttl" id="archiveFileName">FileName</h2>
<span>filename.mp4</span> <span>{{fileName}}</span>
</div> </div>
<div class="archive_detail_sv_date item"> <div class="archive_detail_sv_date item">
<h2 class="ttl">保存日</h2> <h2 class="ttl" id="archiveInsertDate">InsertDate</h2>
<span>2021/02/24 16:14</span> <span>{{insertDate}}</span>
</div> </div>
<div class="archive_detail_room_nm item"> <div class="archive_detail_room_nm item">
<h2 class="ttl">チャットルーム名</h2> <h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<span>チャットルーム名チャットルーム名チャットルーム名チャットルーム名</span> <span>{{chatRoomName}}</span>
<button id="joinChatRoom">
<img src="icon/icon_join_room.png" alt="">
</button>
</div> </div>
<div class="archive_detail_sv_user item"> <div class="archive_detail_sv_user item">
<h2 class="ttl">保存ユーザー</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="img/noImage.png" alt="プロフィール画像"> <img src="{{profileImage}}" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span> <span>{{userName}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="archive_detail_user_list item"> <div class="archive_detail_user_list item">
<h2 class="ttl">参加ユーザー</h2> <h2 class="ttl" id="archiveAttendUser">AttendUser</h2>
<ul class="d-flex flex-row"> <ul class="d-flex flex-row" id="attendUser">
<li> </ul>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div> </div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div> </div>
</script>
<script id="archive-user-template" type="text/template">
<li class="archive_user">
<img src="{{profileImage}}" alt="">
<p>{{userName}}</p>
</li> </li>
<li> </script>
<script id="archive-namecard-template" type="text/template">
<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0">
<div class="profile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{#groupPathList}}
<li style="display: block;">・{{.}}</li>
{{/groupPathList}}
</div>
<div class="modal-footer border-0 justify-content-center">
{{#isFavorite}}
<button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUser({{shopMemberId}})">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像"> <div class="img_wrap">
<span>名前名前</span> <img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div> </div>
</li> <span>お気に入り解除</span>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div> </div>
</li> </button>
<li> {{/isFavorite}}
{{^isFavorite}}
<button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUser({{shopMemberId}})">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像"> <div class="img_wrap">
<span>名前名前名前名前名前名前</span> <img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
</div> </div>
</li> <span>お気に入り登録</span>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div> </div>
</li> </button>
<li> {{/isFavorite}}
<button type="button" class="border-0 bg_green" >
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像"> <div class="img_wrap">
<span>名前名前</span> <img src="icon/icon_profile_phone.png" alt="通話">
</div> </div>
</li> <span>通話</span>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div> </div>
</li> </button>
<li> <button type="button" class="border-0 bg_blue">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像"> <div class="img_wrap">
<span>名前名前</span> <img src="icon/icon_profile_chat.png" alt="チャット">
</div> </div>
</li> <span>チャット</span>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div> </div>
</li> </button>
</ul>
</div> </div>
</div> </div>
</div> </div>
</main> </div>
</script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
</body> </body>
</html> </html>
public_new/css/archive.css
...@@ -46,6 +46,21 @@ ...@@ -46,6 +46,21 @@
} }
/**************************** archive detail *************************/ /**************************** 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{ .archive_detail .ttl{
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -68,6 +83,20 @@ ...@@ -68,6 +83,20 @@
width: 90px; 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){ @media screen and (max-width: 768px){
.archive_name{ .archive_name{
font-size: 14px; font-size: 14px;
......
public_new/js/chat-ui.js
...@@ -850,6 +850,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -850,6 +850,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#favorite-seperator").text(getLocalizedString("favorite")) $("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup")) $("#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,221 @@ CHAT_UI.toggleCategory = function(category) { ...@@ -1368,3 +1376,221 @@ CHAT_UI.toggleCategory = function(category) {
$(category).toggleClass("open"); $(category).toggleClass("open");
$(category).next().slideToggle(); $(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();
// }
// // アーカイブ一覧取得＆表示
// 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, {
// fileName: archive.archiveName,
// insertDate: archive.archiveDate,
// typeImage: typeImage
// });
// let obj = $(jQuery.parseHTML(html)).on('click', function() {
// // データの受け渡し
// CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
// });
// $('#archiveList').append(obj);
// });
/*** デバック用 ****************************************************************************/
var archiveList = [1,1,1,1,1,1,1,1];
archiveList.forEach(function() {
var typeImage = "";
// データ1個目
switch(0) {
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, {
fileName: "ファイル名",
insertDate: "2021/03/03 16:14",
typeImage: typeImage
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// データの受け渡し
CHAT_UI.refreshArchiveDetailScreen(1);
});
$('#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: archive.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) {
switch(archiveId) {
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.attendUserId;
let attendUserList = [1,1,1,1,1,1,1,1,1];
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 = { ...@@ -69,5 +69,12 @@ $.lang.en = {
"groupUser":" Member List", "groupUser":" Member List",
"chat":"Chat", "chat":"Chat",
"voice":"Call", "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 = { ...@@ -69,5 +69,12 @@ $.lang.ja = {
"groupUser":"所属ユーザ", "groupUser":"所属ユーザ",
"chat":"チャット", "chat":"チャット",
"voice":"通話", "voice":"通話",
"addFavorite":"お気に入り追加" "addFavorite":"お気に入り追加",
"archive":"アーカイブ",
"detail":"詳細",
"archiveFileName":"ファイル名",
"archiveInsertDate":"保存日",
"archiveRoomName":"チャットルーム名",
"archiveSaveUser":"保存ユーザー",
"archiveAttendUser":"参加ユーザー"
} }
public_new/js/language_ko.js
...@@ -69,5 +69,12 @@ $.lang.ko = { ...@@ -69,5 +69,12 @@ $.lang.ko = {
"groupUser":"소속 사용자", "groupUser":"소속 사용자",
"chat":"채팅", "chat":"채팅",
"voice":"통화", "voice":"통화",
"addFavorite":"즐겨찾기추가" "addFavorite":"즐겨찾기추가",
"archive":"아카이브",
"detail":"자세한",
"archiveFileName":"파일 이름",
"archiveInsertDate":"저장 일",
"archiveRoomName":"대화방 이름",
"archiveSaveUser":"저장 사용자",
"archiveAttendUser":"참여자"
} }
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