コードレビュー対応

public/css/chat.css

@@ -122,6 +122,12 @@ img {
   float: left;
   width: 11%;
 }
+
+.namecard_img {
+  margin: 5% 35% 5% 35%;
+  width: 30%;
+}
+
 .srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:90%; padding:4px 0 4px 6px; background:none; }
 .srch_bar .input-group-addon button {
   background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
@@ -726,3 +732,30 @@ a.article:hover {
 }
 
 
+.popup {
+  display: none;
+  position: fixed;
+  padding: 10px;
+  width: 80%;
+  left: 10%;
+  min-height: 250px;
+  top: 20%;
+  background: #F7FFF4;
+}
+
+#namecard {
+  z-index: 10051;
+}
+
+.namecard-login-id {
+  margin-top: 15%;
+  text-align: center;
+}
+
+.namedard-img-upload {
+  background: rgba(0,0,0,0.6);
+  position: relative;
+  margin-top: -25%;
+  color: white;
+  text-align: center;
+}

public/index.html

@@ -149,8 +149,8 @@
         </div>
       </div>
       <div class="text-center">
-        <button type="button"  class="btn btn-primary chat-list-type-btn" id="dmBtn">Ok</button>
-        <button type="button"  class="btn btn-primary chat-list-type-btn" id="groupBtn">Ok</button>
+        <button type="button" class="btn btn-primary chat-list-type-btn" id="dmBtn"></button>
+        <button type="button" class="btn btn-primary chat-list-type-btn" id="groupBtn"></button>
       </div>
       <div class="inbox_people">
         <div id="room_list" class="inbox_chat row">
@@ -357,6 +357,9 @@
     </li>
   </ul>
 </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">
@@ -368,6 +371,31 @@
     <img src="./icon/home_common_content_icon_on.png" style="width: 35%;" id="archiveButton">
   </div>
 </nav>
+<script id="my-namecard-template" type="text/template">
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div class="namecard_img">
+    <img src="./images/user-profile.png" alt>
+    <div class="namedard-img-upload" >Upload</div>
+    <div class="namecard-login-id" >{{name}}</div>
+  </div>
+  <div id="myGroupNameList">
+    {{#groupPathList}}
+    <li><b>{{.}}</b></li>
+    {{/groupPathList}}
+  </div>
+</script>
+<script id="namecard-template" type="text/template">
+  <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div>
+  <div class="namecard_img">
+    <img src="./images/user-profile.png" alt>
+    <div class="namecard-login-id">{{name}}</div>
+  </div>
+  <div id="groupNameList">
+    {{#groupPathList}}
+    <li><b>{{.}}</b></li>
+    {{/groupPathList}}
+  </div>
+</script>
 <script id="message-template" type="text/template">
   <div class="incoming_msg">
     <div class="incoming_msg_img">

public/js/chat-ui.js

@@ -404,7 +404,6 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
                 CHAT_UI.refreshRoomList(chatRoomType.DM);
                 CHAT_UI.dismissLoadingIndicator();
             });
-            console.log("show #pills-chat")
             //loadingIndicatorを表示しない
             CHAT_UI.dismissLoadingIndicator();
             break;
@@ -426,7 +425,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
             break;
             
         case '#pills-contact':
-            console.log('#pills-contact');
+            $('#namecard').html('');
             $('#homeButton').show();
             $("#backButton").hide();
             $('.titleRoomName').show();
@@ -604,7 +603,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
     $('.titleRoomName').text(roomListTitle)
 
     // Rotate
-    if(CHAT_UI.isLandscapeMode()){
+    if (CHAT_UI.isLandscapeMode()) {
         $(".user_list").addClass("col-6").removeClass("col-12");
         $(".squareBoxContent span").addClass("landscape_span");
     }
@@ -871,6 +870,7 @@ CHAT_UI.refreshContactScreen = function() {
 
     // ユーザの様式を読み込む
     const userTemplate = $('#user-template').html();
+    const myNamecardTemplate = $('#my-namecard-template').html();
 
     if (IS_ONLINE == 'true') {
         android.updateGroupInfo();
@@ -882,21 +882,32 @@ CHAT_UI.refreshContactScreen = function() {
 
     myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
 
+
+
+    let myNamecardHtml = Mustache.render(myNamecardTemplate, {
+        loginId: myInfo.shopMemberId,
+        profileImage: myInfo.profileImagePath,
+        name: myInfo.shopMemberName,
+        groupPathList: myInfo.groupPathList
+    });
+    let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
+
+    });
+    $('#namecard').append(myNamecardObj);
+
     let html = Mustache.render(userTemplate, {
         id: myInfo.shopMemberId,
         profileImage: myInfo.profileImagePath,
         name: myInfo.shopMemberName
     });
 
-    let obj = $(jQuery.parseHTML(html)).on('click',function(){
-        //TODO need onClick Action
-        console.log('myInfoClick');
+    let obj = $(jQuery.parseHTML(html)).on('click', function(){
+        CHAT_UI.showNamecard('namecard');
     });
 
     $('#my_info').append(obj);
 
     var groupUserList = CHAT_DB.getMyGroupUsers();
-    console.log(groupUserList);
     groupUserList.forEach(function(groupUser) {
         groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
         let html = Mustache.render(userTemplate, {
@@ -905,8 +916,12 @@ CHAT_UI.refreshContactScreen = function() {
             name: groupUser.shopMemberName
         });
 
-        let obj = $(jQuery.parseHTML(html)).on('click',function(){
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
+            if (IS_ONLINE == 'true') {
+                android.updateUserInfo(groupUser.shopMemberId);
+            }
+
         });
 
         $('#my_group_list').append(obj);
@@ -918,7 +933,7 @@ CHAT_UI.refreshContactScreen = function() {
             name: favoriteGroup.groupName
         });
 
-        let obj = $(jQuery.parseHTML(html)).on('click',function(){
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
         });
         favoriteCount++
@@ -934,7 +949,7 @@ CHAT_UI.refreshContactScreen = function() {
             name: favoriteUser.shopMemberName
         });
 
-        let obj = $(jQuery.parseHTML(html)).on('click',function(){
+        let obj = $(jQuery.parseHTML(html)).on('click', function(){
             //TODO need onClick Action
         });
         favoriteCount++
@@ -948,7 +963,6 @@ CHAT_UI.refreshContactScreen = function() {
         $('#favorite_list').show();
         $('#favorite-seperator').show();
     }
-    console.log('LOAD DONE CONTACT SCREEN');
     CHAT_UI.dismissLoadingIndicator();
 }
 
@@ -1037,14 +1051,12 @@ CHAT_UI.refreshRoomList = function(roomType) {
 };
 
 CHAT_UI.joinRoom = function(roomId,roomName) {
-    console.log(roomId);
     if (IS_ONLINE == 'true') {
         android.updateMessages(roomId);
         socket.emit('joinRoom', roomId, roomName, function() {
         });
     }
     var messages = CHAT_DB.getMessages(roomId);
-    console.log(messages);
     CHAT_UI.loadMessages(messages, roomId, roomName)
 
 };
@@ -1122,3 +1134,28 @@ $('#dmBtn').on('click', function (e){
 $('#groupBtn').on('click', function (e){
     CHAT_UI.refreshRoomList(chatRoomType.GROUP);
 });
+
+CHAT_UI.showNamecard = function(id) {
+    $('#namecard').appendTo("body").modal({
+        backdrop: 'static',
+        keyboard: false
+    })
+}
+
+CHAT_UI.hideNamecard = function(id) {
+    $('#namecard').modal('hide');
+}
+
+$(document).click(function (e) {
+  if($(e.target).hasClass('my-name-card-close')){
+    CHAT_UI.hideNamecard('namecard');
+  }
+});
+
+CHAT_UI.showUserNamecard = function(shopMemberId) {
+
+//    $('#namecard').appendTo("body").modal({
+//        backdrop: 'static',
+//        keyboard: false
+//    })
+}

public/js/chat-websocket.js

@@ -14,7 +14,6 @@ android.getGlobalParameter();
 function connectSocket() {
     CHAT_UI.dismissLoadingIndicator();
     if (IS_ONLINE == 'true') {
-        console.log('isOnline');
         socket = io(CHAT_SERVER_URL);
         setSocketAction();
         android.updateRoomList();
@@ -22,7 +21,6 @@ function connectSocket() {
         CHAT_UI.dismissLoadingIndicator();
         $('#createChatRoom').show();
     } else {
-        console.log('isOffline');
         //オフラインの場合、DBからルーム一覧を表示。
         if (CHAT_UTIL.isIOS()) {
              //TODO IOSの場合