ネームカード修正及びグループ検索画面実装

1ad276cf · Lee Munkyeong · 2894034f · 1ad276cf · 1ad276cf · 1ad276cf
Commit 1ad276cf authored Mar 04, 2021 by Lee Munkyeong
Show whitespace changes
Inline Side-by-side

Showing with 98 additions and 28 deletions

public/css/chat.css
+16 -3

public/index.html
+14 -8

public/js/chat-ui.js
+53 -14

public/js/language_en.js
+5 -1

public/js/language_ja.js
+5 -1

public/js/language_ko.js
+5 -1

No files found.
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -724,6 +724,10 @@ a.article:hover {
  padding-left: 5%;
 }
+#my_group_list > div > div {
+  padding-left: 5%;
+}
 .contact-seperator {
  width: 100%;
  background-color: #095395!important;
@@ -741,9 +745,6 @@ a.article:hover {
  min-height: 250px;
  top: 20%;
  background: #F7FFF4;
-}
-#namecard {
  z-index: 10051;
 }
@@ -763,3 +764,14 @@ a.article:hover {
 .border-bottom-gray {
  border-bottom: 1px solid #c4c4c4;
 }
+#childGroupList  > div > div {
+  padding-left: 5%;
+}
+#userInGroupList  > div > div {
+  padding-left: 5%;
+}
+.group-navigater {
+  margin-right: 10px;
+}
\ No newline at end of file
--- a/public/index.html
+++ b/public/index.html
@@ -248,19 +248,19 @@
        </div>
        <div id="allGroupArea">
-          <label class="contact-seperator" >GROUP PATH</label>
+          <label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
          <div id="groupPathArea" style="float:left;">
          </div>
-          <label class="contact-seperator" >MOVE BUTTON</label>
+          <label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
          <div id="groupBtnArea">
-            <div class="user_list col-12" onclick="console.log('A');">
+            <div class="user_list col-12" id="rootGroupBtn">
              <div class="user_people">
                <div class="user_ib">
                  <h5>MOVE TO ROOT GROUP</h5>
                </div>
              </div>
            </div>
-            <div class="user_list col-12" onclick="console.log('B');">
+            <div class="user_list col-12" id="parentGroupBtn">
              <div class="user_people">
                <div class="user_ib">
                  <h5>MOVE TO PARENTS GROUP</h5>
@@ -269,10 +269,10 @@
            </div>
          </div>
          <label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
-          <div id="childGroupList" class="inbox_user row">
+          <div id="childGroupList" class="inbox_user row group-search-list">
          </div>
          <label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
-          <div id="userInGroupList" class="inbox_user row">
+          <div id="userInGroupList" class="inbox_user row group-search-list">
          </div>
        </div>
@@ -392,8 +392,9 @@
  </ul>
 </div>
+<div class="popup" id="myNamecard"></div>
+<div class="popup" id="userNamecard"></div>
-<div class="popup" id="namecard"></div>
 <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
  <div class="col-4">
    <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
@@ -429,6 +430,11 @@
    <li><b>{{.}}</b></li>
    {{/groupPathList}}
  </div>
+  <div>
+    <div class="col-4">Chat</div>
+    <div class="col-4">Voice Call</div>
+    <div class="col-4">Favorite</div>
+  </div>
 </script>
 <script id="message-template" type="text/template">
  <div class="incoming_msg">
@@ -521,7 +527,7 @@
  </div>
 </script>
 <script id="group-navigater-template" type="text/template">
-  <label data-name="{{name}}" data-id="{{id}}">{{name}}</label>
+  <label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
 </script>
 <script id="favorite-user-template" type="text/template">
  <div class="user_list col-12" data-name="{{name}}">

--- a/public/js/chat-ui.js
+++ b/public/js/chat-ui.js
@@ -475,7 +475,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
            break;
        case '#pills-contact':
-            $('#namecard').html('');
+            $('#myNamecard').html('');
            $('#homeButton').show();
            $("#backButton").hide();
            $('.titleRoomName').show();
@@ -874,7 +874,12 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
    $("#myGroupBtn").text(getLocalizedString("myGroup"))
    $("#allGroupBtn").text(getLocalizedString("allGroup"))
+    $("#groupPathSeperator").text(getLocalizedString("groupPath"))
+    $("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
+    $("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
+    $("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
+    $("#childGroupSeperator").text(getLocalizedString("childGroup"))
+    $("#groupUserSeperator").text(getLocalizedString("groupUser"))
    $("#favorite-seperator").text(getLocalizedString("favorite"))
    $("#mygroup-seperator").text(getLocalizedString("mygroup"))
@@ -928,7 +933,7 @@ CHAT_UI.refreshContactScreen = function() {
    // ユーザの様式を読み込む
    const userTemplate = $('#user-template').html();
    const myNamecardTemplate = $('#my-namecard-template').html();
+    const userNamecardTemplate = $('#namecard-template').html();
    if (IS_ONLINE == 'true') {
        android.updateGroupInfo('0');
        android.updateMyInfo();
@@ -950,7 +955,7 @@ CHAT_UI.refreshContactScreen = function() {
    let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
    });
-    $('#namecard').append(myNamecardObj);
+    $('#myNamecard').append(myNamecardObj);
    let html = Mustache.render(userTemplate, {
        id: myInfo.shopMemberId,
@@ -959,7 +964,7 @@ CHAT_UI.refreshContactScreen = function() {
    });
    let obj = $(jQuery.parseHTML(html)).on('click', function(){
-        CHAT_UI.showNamecard('namecard');
+        CHAT_UI.showNamecard('myNamecard');
    });
    $('#my_info').append(obj);
@@ -974,10 +979,21 @@ CHAT_UI.refreshContactScreen = function() {
        });
        let obj = $(jQuery.parseHTML(html)).on('click', function(){
-            //TODO need onClick Action
+//            if (IS_ONLINE == 'true') {
-            if (IS_ONLINE == 'true') {
+//                android.updateUserInfo(groupUser.shopMemberId);
-                android.updateUserInfo(groupUser.shopMemberId);
+//            }
-            }
+            console.log('click');
+            let namecardHtml = Mustache.render(userNamecardTemplate, {
+                    loginId: groupUser.shopMemberId,
+                    profileImage: groupUser.profileImagePath,
+                    name: groupUser.shopMemberName,
+                    groupPathList: groupUser.groupPathList
+            });
+            console.log(namecardHtml);
+            let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
+            });
+            $('#userNamecard').html(namecardObj);
+            CHAT_UI.showNamecard('userNamecard');
        });
@@ -1193,25 +1209,28 @@ $('#groupBtn').on('click', function (e){
 });
 CHAT_UI.showNamecard = function(id) {
-    $('#namecard').appendTo("body").modal({
+    $('#'+id).appendTo("body").modal({
        backdrop: 'static',
        keyboard: false
    })
 }
 CHAT_UI.hideNamecard = function(id) {
-    $('#namecard').modal('hide');
+    $('#'+id).modal('hide');
 }
 $(document).click(function (e) {
+  console.log($(e.target));
  if($(e.target).hasClass('my-name-card-close')){
-    CHAT_UI.hideNamecard('namecard');
+    console.log('hideNameCard');
+    CHAT_UI.hideNamecard('myNamecard');
+    CHAT_UI.hideNamecard('userNamecard');
  }
 });
 CHAT_UI.showUserNamecard = function(shopMemberId) {
-//    $('#namecard').appendTo("body").modal({
+//    $('#myNamecard').appendTo("body").modal({
 //        backdrop: 'static',
 //        keyboard: false
 //    })
@@ -1232,7 +1251,8 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
    if (IS_ONLINE == 'true') {
        android.updateGroupInfo(groupId);
    }
+    $('#rootGroupBtn').off();
+    $('#parentGroupBtn').off();
    var result = CHAT_DB.getGroupInfo(groupId);
@@ -1240,8 +1260,26 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
    $('#userInGroupList').html('');
    $('#groupPathArea').html('');
+    if (typeof result.parentGroupId !== 'undefined') {
+        console.log(result.parentGroupId);
+        $('#parentGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
+        });
+    }
+    if (typeof result.rootGroupId !== 'undefined') {
+        console.log(result.rootGroupId);
+        $('#rootGroupBtn').on('click', function() {
+            CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
+        });
+    }
    const groupNaviTemplate = $('#group-navigater-template').html();
+    var groupCount = 0;
    result.groupPathList.forEach(function(groupPath) {
+        if (groupCount != 0) {
+            $('#groupPathArea').append("<label class='group-navigater'> > </label>");
+        }
        let html = Mustache.render(groupNaviTemplate, {
            name: groupPath.groupName,
            id: groupPath.groupId
@@ -1249,6 +1287,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
        let obj = $(jQuery.parseHTML(html)).on('click', function(){
            CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
        });
+        groupCount++;
        $('#groupPathArea').append(obj);
    })

--- a/public/js/language_en.js
+++ b/public/js/language_en.js
@@ -62,5 +62,9 @@ $.lang.en = {
    "myGroup":"My Group",
    "allGroup":"All Group",
    "returnToRootGroup":"Return to Root Group",
-    "returnToParentGroup":"Return to Parent Group"
+    "returnToParentGroup":"Return to Parent Group",
+    "quickBtn":"Quick Button",
+    "groupPath":"Group Path",
+    "childGroup":"Minor Group",
+    "groupUser":" Member List"
 }
--- a/public/js/language_ja.js
+++ b/public/js/language_ja.js
@@ -62,5 +62,9 @@ $.lang.ja = {
    "myGroup":"マイグループ",
    "allGroup":"全グループ",
    "returnToRootGroup":"トップグループに戻る",
-    "returnToParentGroup":"上位グループに戻る"
+    "returnToParentGroup":"上位グループに戻る",
+    "quickBtn":"クイックボタン",
+    "groupPath":"グループパンクズ",
+    "childGroup":"下位グループ",
+    "groupUser":"所属ユーザ"
 }
--- a/public/js/language_ko.js
+++ b/public/js/language_ko.js
@@ -62,5 +62,9 @@ $.lang.ko = {
    "myGroup":"내그룹",
    "allGroup":"전그룹",
    "returnToRootGroup":"최상위그룹으로 돌아가기",
-    "returnToParentGroup":"상위그룹으로 돌아가기"
+    "returnToParentGroup":"상위그룹으로 돌아가기",
+    "quickBtn":"퀵버튼",
+    "groupPath":"그룹 경로",
+    "childGroup":"하위 그룹",
+    "groupUser":"소속 사용자"
 }