コードレビュー対応

156a417a · Lee Munkyeong · 990c3063 · 156a417a · 156a417a · 156a417a
Commit 156a417a authored Feb 25, 2021 by Lee Munkyeong
Show whitespace changes
Inline Side-by-side

Showing with 113 additions and 17 deletions

public/css/chat.css
+33 -0

public/index.html
+30 -2

public/js/chat-ui.js
+50 -13

public/js/chat-websocket.js
+0 -2

public/js/chat.js
+0 -0

No files found.
--- a/public/css/chat.css
+++ b/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;
+}
--- a/public/index.html
+++ b/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="dmBtn"></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="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">

--- a/public/js/chat-ui.js
+++ b/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(){
+    let obj = $(jQuery.parseHTML(html)).on('click', function(){
-        //TODO need onClick Action
+        CHAT_UI.showNamecard('namecard');
-        console.log('myInfoClick');
    });
    $('#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
+//    })
+}
--- a/public/js/chat-websocket.js
+++ b/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の場合

--- a/public/js/chat.js
+++ b/public/js/chat.js