CreateRoomUI適用

public_new/chat_make_room_confirm.html

@@ -19,8 +19,8 @@
     <div class="row h-100 align-items-center">
       <div class="col-4 pr-0">
         <div class="nav-item">
-          <div class="nav_prev">
-            <a href="chat_make_room.html"><span>ルーム開設</span></a>
+          <div class="nav_prev" id="prevBtn">
+            <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
           </div>
         </div>
       </div>
@@ -41,163 +41,20 @@
     <form action="chat_room.html" method="post">
       <!-- ルーム名入力 -->
       <div class="room_name">
-        <label for="room_name"><h2>ルーム名</h2></label>
-        <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
+        <label><h2>ルーム名</h2></label>
+        <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
       </div>
 
       <!-- 参加者一覧 -->
       <div class="chat_list">
         <h2>参加者</h2>
         <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="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>
+          <div id="selectedUserList"></div>
         </ul>
       </div>
 
       <!-- ルーム解説ボタン -->
-      <div class="make_room_btn">
+      <div class="make_room_btn" id="makeRoomBtn">
         <button type="button" name="button">
           チャット開始</button>
       </div>
@@ -205,10 +62,46 @@
   </main>
 
 
-<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/chat.js"></script>
+  <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/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>
 </html>

public_new/css/chat.css

@@ -35,8 +35,8 @@ input[name="tab_item"] {
   clear: both;
   overflow: hidden;
 }
-#tab1:checked ~ #tab1_content,
-#tab2:checked ~ #tab2_content{
+#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
+#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
   display: block;
 }
 

public_new/js/chat-db.js

@@ -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) {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要

public_new/js/chat.js

@@ -289,29 +289,6 @@ CHAT.requestMyinfo = 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(){
     $('form').submit();

public_new/js/chatMakeRoom.js

+$(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').delay(600).fadeOut(300);
 });

public_new/template/template_make_room_confirm_user_list.html

+<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

+<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

+<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

+<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

+<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