InviteUser

public_new/chat_add_user_confirm.html

@@ -43,158 +43,58 @@
       <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="thumbnail">
-                  <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="thumbnail">
-                  <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="thumbnail"><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="thumbnail"><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="thumbnail"><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="thumbnail"><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="thumbnail"><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="thumbnail"><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="thumbnail"><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="add_user_btn">
-        <button type="button" name="button">招待</button>
+        <button type="button" name="button" id="addUserBtn">招待</button>
       </div>
     </form>
   </main>
 
+  <script src="./js/libs/jquery-3.3.1.min.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/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/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);
+    }
 
-<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>
+    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();
+      CHAT_UI.showAddUserConfirmView();
+    };
+  </script>
 </body>
 </html>

public_new/js/chat-db.js

@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) {
     }
 };
 
+CHAT_DB.getFavoriteUsersNotInRoom = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getFavoriteUsersNotInRoom());
+    }
+};
+
 CHAT_DB.getFavoriteUsers = function() {
     if (CHAT_UTIL.isIOS()) {
         //TODO IOS処理追加必要
@@ -235,3 +244,12 @@ CHAT_DB.searchMessages = function(keyword, userList) {
         return JSON.parse(android.searchMessages(keyword, userList));
     }
 };
+
+CHAT_DB.getMyGroupUsersNotInRoom = function() {
+    if (CHAT_UTIL.isIOS()) {
+        //TODO IOS処理追加必要
+    } else if (CHAT_UTIL.isAndroid()) {
+        //String形式をJsonに変更してReturn
+    	return JSON.parse(android.getMyGroupUsersNotInRoom());
+    }
+};
\ No newline at end of file

public_new/js/chat-ui.js

@@ -1256,6 +1256,11 @@ $('#makeRoomConfirmBtn').on('click', function(e) {
     $('#makeRoomForm').submit();
 });
 
+$('#addUserConfirmBtn').on('click', function(e) {
+    android.saveSelectedUserList(CHAT.globalSelectedUserList.join(","));
+    $('#addUserForm').submit();
+});
+
 CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
     if ($(star).hasClass('active')) {
         CHAT_UI.removeFavoriteUser(shopMemberId);
@@ -1942,4 +1947,139 @@ CHAT_UI.showMakeRoomConfirmView = function() {
 
          }
      });
+}
+
+CHAT_UI.showAddUserConfirmView = function() {
+    $('#selectedUserList').html('');
+
+    var userTemplate;
+    $.get({ url: "./template/template_add_user_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);
+    })
+
+    $("#addUserBtn").off().on('click', function() {
+        CHAT_UI.showLoadingIndicator();
+        let userIdList = new Array();
+        selectedUserList.forEach(function(user){
+            userIdList.push(user.shopMemberId);
+        })
+        android.inviteUsers(userIdList.join(','));
+     });
+}
+
+CHAT_UI.refreshMyGroupForAddUser = 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.getFavoriteUsersNotInRoom();
+    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.getMyGroupUsersNotInRoom();
+    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);
+    })
 }
\ No newline at end of file

public_new/template/template_add_user_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="thumbnail">
+                    <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_add_user_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 checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
+                        <span class="checkbox-parts"></span>
+                    </label>
+                </div>
+            </div>
+            <div class="chat_item_l">
+                <div class="thumbnail">
+                    <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