Skip to content

C
chat_webview
Commit c7b44b83 by Kang Donghun
Options

CreateRoomUI適用

parent 9887029f
Showing with 658 additions and 502 deletions
public_new/chat_make_room.html
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<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/chat.css"> <link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/contact.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">
</head> </head>
...@@ -26,7 +27,7 @@ ...@@ -26,7 +27,7 @@
</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" id="title" style="font-size: 13px;">ルーム開設</h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -37,385 +38,144 @@ ...@@ -37,385 +38,144 @@
</nav><!-- nav --> </nav><!-- nav -->
<!-- コンテンツ --> <!-- コンテンツ -->
<main> <main id="chatMakeRoom">
<form class="" action="chat_make_room_confirm.html" method="post"> <form id="makeRoomForm" action="chat_make_room_confirm.html" method="post">
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<div class="search_form my-2"> <div class="search_form my-2">
<form> <form>
<input type="search" name="search" placeholder="ユーザー検索"> <input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span> <span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form> </form>
</div> </div>
<!-- タブ --> <!-- タブ -->
<div class="tabs"> <div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked> <input id="tabMyGroupOnMakeRoom" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">マイグループ</label> <label class="tab_item" for="tabMyGroupOnMakeRoom">マイグループ</label>
<input id="tab2" type="radio" name="tab_item"> <input id="tabAllGroupOnMakeRoom" type="radio" name="tab_item">
<label class="tab_item" for="tab2">全グループ</label> <label class="tab_item" for="tabAllGroupOnMakeRoom">全グループ</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
<ul class="p-0 chat_make_room_list"> <div id="favoriteListForMakeRoom"></div>
<li class="d-flex align-items-center"> <div id="myGroupListForMakeRoom"></div>
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail4 thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star active"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star active"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ1</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ2</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
</div> </div>
</div> </div>
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="breadcrumb" id="groupPathAreaForMakeRoom"></div>
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
<div class="category"><div class="category_name"><span>グループ1</span></div></div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <a href="#" class="w-100" id="rootGroupBtnForMakeRoom">
<div class="chat_item_l_chk"> <div class="chat_item d-flex flex-row align-items-center">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thubnail"> <div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <img src="icon/icon_prev_top.png" alt="トップグループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span> <span class="chat_item_ttl">トップグループに戻る</span>
</div>
</div> </div>
</div> </div>
<div class="chat_item_r">
<span class="star disable"></span>
</div> </div>
</div> </div>
</a>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <a href="#" class="w-100" id="parentGroupBtnForMakeRoom">
<div class="chat_item_l_chk"> <div class="chat_item d-flex flex-row align-items-center">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thubnail"> <div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div> <img src="icon/icon_prev.png" alt="上位グループに戻る" />
</div> </div>
</div> </div>
<div class="chat_item_m"> <div class="chat_item_m px-0">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="chat_item_t"> <div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span> <span class="chat_item_ttl">上位グループに戻る</span>
</div> </div>
</div> </div>
</div> </div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div> </div>
</a>
</li> </li>
<div id="childGroupListAreaForMakeRoom"></div>
<div id="userInGroupListForMakeRoom"></div>
</ul> </ul>
<div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div> </div>
</div> </div>
<div class="chat_item_r">
<span class="star disable"></span>
</div> </div>
</div> <div class="chat_make_room">
</li> <ul class="overlay_src_msg">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="chat_item_r">
<span class="star disable"></span>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div>
</div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="make_room_confirm_btn"> <div class="make_room_confirm_btn content" id="makeRoomConfirmBtn">
<button type="button" name="button"> <button type="button" name="button">
ルーム開設<br> ルーム開設<br>
<span class="select_member_num"></span><span class="select_member">名 選択中</span></button> <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
</div> </div>
</form> </form>
</main> </main>
<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/common.js"></script>
<script src="./js/loading.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/chatMakeRoom.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>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
if (CHAT_DB.loadSelectedUsers() != "") {
let selectedUsers = CHAT_DB.loadSelectedUsers();
selectedUsers.forEach(function(user) {
CHAT.globalSelectedUserList.push(user.shopMemberId);
})
};
<script src="./js/libs/jquery-3.3.1.min.js"></script> if (CHAT.globalSelectedUserList.length > 0) {
<script src="./js/libs/moment.js"></script> $('.select_member_num').text(CHAT.globalSelectedUserList.length);
<script src="./js/libs/bootstrap.min.js"></script> } else {
<script src="./js/libs/jquery.mark.min.js"></script> $('.select_member_num').text('0');
<script src="./js/chat.js"></script> }
<script src="./js/common.js"></script> CHAT_UI.refreshMyGroupForMakeRoom();
};
</script>
</body> </body>
</html> </html>
public_new/chat_make_room_confirm.html
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<div class="row h-100 align-items-center"> <div class="row h-100 align-items-center">
<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" id="prevBtn">
<a href="chat_make_room.html"><span>ルーム開設</span></a> <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,163 +41,20 @@ ...@@ -41,163 +41,20 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label><h2>ルーム名</h2></label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
</div> </div>
<!-- 参加者一覧 --> <!-- 参加者一覧 -->
<div class="chat_list"> <div class="chat_list">
<h2>参加者</h2> <h2>参加者</h2>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <div id="selectedUserList"></div>
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="make_room_btn"> <div class="make_room_btn" id="makeRoomBtn">
<button type="button" name="button"> <button type="button" name="button">
チャット開始</button> チャット開始</button>
</div> </div>
...@@ -205,10 +62,46 @@ ...@@ -205,10 +62,46 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<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/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/chat.js"></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/common.js"></script>
<script src="./js/loading.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>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
android.getLoginParameter();
android.getGlobalParameter();
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.showMakeRoomConfirmView();
};
</script>
</body> </body>
</html> </html>
public_new/css/chat.css
...@@ -35,8 +35,8 @@ input[name="tab_item"] { ...@@ -35,8 +35,8 @@ input[name="tab_item"] {
clear: both; clear: both;
overflow: hidden; overflow: hidden;
} }
#tab1:checked ~ #tab1_content, #tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{ #tabAllGroupOnMakeRoom:checked ~ #tab2_content{
display: block; display: block;
} }
......
public_new/js/chat-db.js
...@@ -70,6 +70,16 @@ CHAT_DB.getGroupInfo = function(groupId) { ...@@ -70,6 +70,16 @@ CHAT_DB.getGroupInfo = function(groupId) {
} }
}; };
CHAT_DB.loadSelectedUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
console.log(JSON.parse(android.getSelectedUserList()));
return JSON.parse(android.getSelectedUserList());
}
}
CHAT_DB.getNameCardData = function(shopMemberId) { CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
......
public_new/js/chat-ui.js
...@@ -1009,6 +1009,7 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1009,6 +1009,7 @@ CHAT_UI.refreshContactScreen = function() {
} }
CHAT_UI.refreshRoomList = function(roomType) { CHAT_UI.refreshRoomList = function(roomType) {
android.saveSelectedUserList("");
if (roomType == chatRoomType.DM) { if (roomType == chatRoomType.DM) {
$('#tabDM').prop('checked', true); $('#tabDM').prop('checked', true);
} else { } else {
...@@ -1240,6 +1241,19 @@ $('#tabMyGroup').on('click', function(e) { ...@@ -1240,6 +1241,19 @@ $('#tabMyGroup').on('click', function(e) {
CHAT_UI.refreshContactScreen(); CHAT_UI.refreshContactScreen();
}); });
$('#tabMyGroupOnMakeRoom').on('click', function(e) {
CHAT_UI.refreshMyGroupForMakeRoom();
});
$('#tabAllGroupOnMakeRoom').on('click', function(e) {
CHAT_UI.refreshAllGroupForMakeRoom('0');
});
$('#makeRoomConfirmBtn').on('click', function(e) {
android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
$('#makeRoomForm').submit();
});
CHAT_UI.favoriteUserChange = function(shopMemberId, star) { CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
if ($(star).hasClass('active')) { if ($(star).hasClass('active')) {
CHAT_UI.removeFavoriteUser(shopMemberId); CHAT_UI.removeFavoriteUser(shopMemberId);
...@@ -1428,3 +1442,322 @@ CHAT_UI.toggleCategory = function(category) { ...@@ -1428,3 +1442,322 @@ CHAT_UI.toggleCategory = function(category) {
$(category).toggleClass("open"); $(category).toggleClass("open");
$(category).next().slideToggle(); $(category).next().slideToggle();
}; };
CHAT_UI.refreshMyGroupForMakeRoom = function() {
$(".modal-backdrop").remove();
$('#favoriteListForMakeRoom').html('');
$('#myGroupListForMakeRoom').html('');
//画面タイトル設定
let contactListTitle = getLocalizedString("userSearch");
$('#title').text(contactListTitle);
// グループの様式を読み込む
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
// ユーザの様式を読み込む
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var groupUserTemplate;
$.get({ url: "./template/template_make_room_group_user_list.html", async: false }
, function(text) {
groupUserTemplate = text;
});
if (IS_ONLINE == 'true') {
android.updateGroupInfo('0');
android.updateMyInfo();
android.updateGroupUser();
android.updateFavorite();
}
//お気に入りグループ取得。
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function(favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName,
id: favoriteGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#favoriteListForMakeRoom').append(obj);
})
//お気に入りユーザ取得。
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == favoriteUser.shopMemberId;
})
if (findObj) {
favoriteUser.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: favoriteUserList
});
let obj = jQuery.parseHTML(html);
$('#favoriteListForMakeRoom').append(obj);
/*favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(userTemplate, {
shopMemberId: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName,
isFavorite: true
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#favoriteList').append(obj);
})*/
var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function(myGroup) {
myGroup.groupUserList.forEach(function(groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
})
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#myGroupListForMakeRoom').append(obj);
})
}
CHAT_UI.refreshAllGroupForMakeRoom = function(groupId) {
$('.cancel').addClass('none');
$('.search_form input').removeClass('focus');
$('.search_form input').val('');
$('.search_form form').removeClass();
$('.content').removeClass('none');
$('.overlay_src_msg').empty();
$('#tabAllGroupOnMakeRoom').prop('checked', true);
//オンライン状態であればサーバから情報更新。
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
//画面エリアを初期化。
$('#parentGroupBtnForMakeRoom').off();
$('#rootGroupBtnForMakeRoom').off();
$('#childGroupListAreaForMakeRoom').html('');
$('#userInGroupListForMakeRoom').html('');
$('#groupPathAreaForMakeRoom').html('');
//DBからグループ情報を取得。
var result = CHAT_DB.getGroupInfo(groupId);
//上位グループ、トップグループ遷移ボタンのイベント追加。
if (typeof result.parentGroupId !== 'undefined') {
$('#parentGroupBtnForMakeRoom').on('click', function() {
CHAT_UI.refreshAllGroupForMakeRoom(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
$('#rootGroupBtnForMakeRoom').on('click', function() {
CHAT_UI.refreshAllGroupForMakeRoom(result.rootGroupId);
});
}
//該当グループのパースを表示。
var groupPathTemplate;
$.get({ url: "./template/template_make_room_group_path.html", async: false }
, function(text) {
groupPathTemplate = text;
});
var groupPathCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (!(groupPathCount < (result.groupPathList.length - 3))) {
let html = Mustache.render(groupPathTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = jQuery.parseHTML(html);
$('#groupPathAreaForMakeRoom').append(obj);
}
groupPathCount++;
})
//該当グループの下位グループ表示。
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId,
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#childGroupListAreaForMakeRoom').append(obj);
})
//該当グループの所属ユーザを表示。
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
result.groupUserList.forEach(function(groupUser) {
groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl)
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
})
let html = Mustache.render(userTemplate, {
userList: result.groupUserList
});
let obj = jQuery.parseHTML(html);
$('#userInGroupListForMakeRoom').append(obj);
};
CHAT_UI.checkForMakeChat = function(checkMemberId) {
var nameInfo = CHAT_DB.getNameCardData(checkMemberId);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == checkMemberId;
})
if (findObj) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(shopMemberId) {
return checkMemberId != shopMemberId;
});
} else {
// add
CHAT.globalSelectedUserList.push(nameInfo.shopMemberId);
}
if($('#checkbox' + checkMemberId).prop('checked')){
$('#checkbox' + checkMemberId).attr('checked', true);
}else{
$('#checkbox' + checkMemberId).removeAttr('checked');
}
let cnt = CHAT.globalSelectedUserList.length;
if (CHAT.globalSelectedUserList.length > 0) {
$('.select_member_num').text(cnt);
} else {
$('.select_member_num').text('0');
}
};
CHAT_UI.showMakeRoomConfirmView = function() {
$('#selectedUserList').html('');
var userTemplate;
$.get({ url: "./template/template_make_room_confirm_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var selectedUserList = CHAT_DB.loadSelectedUsers();
console.log("check = " + selectedUserList);
selectedUserList.forEach(function(user){
let html = Mustache.render(userTemplate, {
id: user.shopMemberId,
profileImage: CHAT.getProfileImgUrl(user.profileUrl),
name: user.shopMemberName
});
let obj = jQuery.parseHTML(html);
$('#selectedUserList').append(obj);
})
$("#makeRoomBtn").off().on('click', function() {
// #36130に対応
const trimmedRoomName = $('#newRoomName').val().trim();
if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
let userNameList = new Array();
selectedUserList.forEach(function(user){
userIdList.push(user.shopMemberId);
userNameList.push(user.shopMemberName);
})
//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
//todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName);
} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
|| trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
|| trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
|| trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
// #36147
// #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
} else if (trimmedRoomName.length > 20) {
// #36142
var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
$('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
});
} else {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = new Array();
selectedUserList.forEach(function(user){
userIdList.push(user.shopMemberId);
})
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
android.createChatRoom("1",userIdList.join(','),encodedRoomName);
}
});
}
\ No newline at end of file
public_new/js/chat.js
...@@ -289,29 +289,6 @@ CHAT.requestMyinfo = function() { ...@@ -289,29 +289,6 @@ CHAT.requestMyinfo = function() {
} }
$(function() { $(function() {
// ルーム開設メンバー数カウント
$('input:checkbox').change(function() {
if($(this).prop('checked')){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
}).trigger('change');
// チェックした人数カウント
$('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt);
}).trigger('change');
// ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){
$('form').submit();
});
// ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){
$('form').submit();
});
// ユーザー追加確認イベント // ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){ $('.add_user_confirm_btn button').click(function(){
$('form').submit(); $('form').submit();
......
public_new/js/chatMakeRoom.js 0 → 100644
$(function() {
// メンバー検索
$('#chatMakeRoom .search_form input[type="search"]').keyup(function(){
var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
$('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
//グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, {
name: group.groupName,
id: group.groupId,
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
})
//ユーザデータ検索
var userList = CHAT_DB.getAllGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
　　//連絡先画面
} else {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
var userList = CHAT_DB.getMyGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == groupUser.shopMemberId;
})
if (findObj) {
groupUser.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').html(obj);
}
});
});
public_new/js/loading.js
$(window).load(function () { //読み込み完了したら実行する $(window).on('load',function () { //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す $('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
$('#loader').delay(600).fadeOut(300); $('#loader').delay(600).fadeOut(300);
}); });
......
public_new/template/template_make_room_confirm_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{name}}</span>
</div>
</div>
</div>
</div>
</li>
</ul>
\ No newline at end of file
public_new/template/template_make_room_group_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<img src="icon/icon_folder.png" alt="フォルダ" />
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{name}}</span>
</div>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/template/template_make_room_group_path.html 0 → 100644
<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
public_new/template/template_make_room_group_user_list.html 0 → 100644
<div class="category"><div class="category_name"><span>{{groupName}}</span></div></div>
<ul class="p-0 chat_make_room_list">
{{#groupUserList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/groupUserList}}
</ul>
\ No newline at end of file
public_new/template/template_make_room_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
{{#userList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/userList}}
</ul>
\ No newline at end of file
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