Skip to content

C
chat_webview
Commit c9a4a037 by Lee Munkyeong
Options

UI適用

parent 5aeec968
Showing with 182 additions and 242 deletions
public_new/contact.html
......@@ -71,186 +71,20 @@
</ul>
</div>
<!-- タブ -->
<div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">マイグループ</label>
<input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">全グループ</label>
<input id="tabMyGroup" type="radio" name="tab_item" checked>
<label class="tab_item" for="tabMyGroup">マイグループ</label>
<input id="tabAllGroup" type="radio" name="tab_item">
<label class="tab_item" for="tabAllGroup">全グループ</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<div class="chat_list" id="myContactList">
<!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<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">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
</div>
</div>
</div>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ 本社 > 経理部</span></div></div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループマイグループマイグループマイグループマイグループマイグループ2</span></div> </div>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<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>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
<div id="favoriteList"></div>
<div id="myGroupList"></div>
</div>
</div>
<div class="tab_content" id="tab2_content">
......@@ -263,7 +97,7 @@
<!-- 全グループ -->
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<a href="#" class="w-100" id="rootGroupBtn">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
......@@ -279,14 +113,14 @@
</div>
</div>
</a>
<div class="chat_item_r">
<!--<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</div>-->
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<a href="#" class="w-100" id="parentGroupBtn">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
......@@ -302,12 +136,13 @@
</div>
</div>
</a>
<div class="chat_item_r">
<!--<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</div>-->
</li>
<div id="childGroupListArea">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
......@@ -331,6 +166,7 @@
</div>
</div>
</li>
</div>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
......
public_new/css/chat.css
......@@ -37,6 +37,11 @@ input[name="tab_item"] {
display: block;
}
#tabMyGroup:checked ~ #tab1_content,
#tabAllGroup:checked ~ #tab2_content{
display: block;
}
.tabs input:checked + .tab_item {
background-color: #0070CA;
color: #fff;
......
public_new/js/chat-db.js
......@@ -56,6 +56,7 @@ CHAT_DB.getMyGroupUsers = function() {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
console.log(JSON.parse(android.getMyGroupUsers()));
return JSON.parse(android.getMyGroupUsers());
}
};
......
public_new/js/chat-ui.js
......@@ -838,12 +838,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"))
//$("#groupPathSeperator").text(getLocalizedString("groupPath"))
//$("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
//$("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
//$("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
//$("#childGroupSeperator").text(getLocalizedString("childGroup"))
//$("#groupUserSeperator").text(getLocalizedString("groupUser"))
......@@ -883,9 +883,11 @@ $('#chatButton').on('click', function(event){
});
CHAT_UI.refreshContactScreen = function() {
$(".modal-backdrop").remove();
$('#myProfileModal').html('');
$('#userProfileModal').html('');
$('#favoriteList').html('');
$('#myGroupList').html('');
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('#title').text(contactListTitle);
......@@ -906,11 +908,18 @@ CHAT_UI.refreshContactScreen = function() {
myNamecardTemplate = text;
});
var groupUserTemplate;
$.get({ url: "./template/template_group_user_list.html", async: false }
, function(text) {
groupUserTemplate = text;
});
//const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') {
android.updateGroupInfo('0');
android.updateMyInfo();
android.updateGroupUser();
android.updateFavorite();
}
var myInfo = CHAT_DB.getMyInfo();
......@@ -928,7 +937,7 @@ CHAT_UI.refreshContactScreen = function() {
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
});
$('#myProfileModal').append(myNamecardObj);
$('#myProfileModal').html(myNamecardObj);
$('#myName').text(myInfo.shopMemberName);
$('#myImg').attr('src',myInfo.profileImagePath);
......@@ -944,23 +953,9 @@ CHAT_UI.refreshContactScreen = function() {
$('#my_info').append(obj);*/
var groupUserList = CHAT_DB.getMyGroupUsers();
groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#my_group_list').append(obj);
})
var favoriteCount = 0;
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
/*var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function(favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName
......@@ -971,32 +966,50 @@ CHAT_UI.refreshContactScreen = function() {
});
favoriteCount++
$('#favorite_list').append(obj);
})
})*/
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(groupTemplate, {
id: favoriteUser.shopMemberId,
let html = Mustache.render(userTemplate, {
shopMemberId: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName
name: favoriteUser.shopMemberName,
isFavorite: true
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
});
favoriteCount++
$('#favorite_list').append(obj);
$('#favoriteList').append(obj);
})
if (favoriteCount == 0) {
var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function(myGroup) {
myGroup.groupUserList.forEach(function (groupUser){
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
})
let html = Mustache.render(groupUserTemplate, {
groupName: myGroup.groupName,
groupUserList: myGroup.groupUserList
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
});
$('#myGroupList').append(obj);
})
/*if (favoriteCount == 0) {
$('#favorite_list').hide();
$('#favorite-seperator').hide();
} else {
$('#favorite_list').show();
$('#favorite-seperator').show();
}
CHAT_UI.dismissLoadingIndicator();
}*/
}
CHAT_UI.refreshRoomList = function(roomType) {
......@@ -1194,12 +1207,14 @@ $('#myGroupBtn').on('click', function (e){
$('#allGroupArea').hide();
});
$('#allGroupBtn').on('click', function (e){
$('#tabAllGroup').on('click', function (e){
console.log('tabAllGroup')
CHAT_UI.refesshAllGroupSearch('0')
});
CHAT_UI.refesshAllGroupSearch = function(groupId) {
const userNamecardTemplate = $('#namecard-template').html();
console.log('AllGroupSearchScreen');
//CHAT_UI.makeNameCard(id)
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
......@@ -1207,8 +1222,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
$('#parentGroupBtn').off();
var result = CHAT_DB.getGroupInfo(groupId);
$('#childGroupList').html('');
$('#childGroupListArea').html('');
$('#userInGroupList').html('');
$('#groupPathArea').html('');
......@@ -1226,7 +1240,7 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
}
const groupNaviTemplate = $('#group-navigater-template').html();
/*const groupNaviTemplate = $('#group-navigater-template').html();
var groupCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (groupCount != 0) {
......@@ -1241,9 +1255,13 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
});
groupCount++;
$('#groupPathArea').append(obj);
})
})*/
const groupTemplate = $('#group-template').html();
var groupTemplate;
$.get({ url: "./template/template_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
......@@ -1253,10 +1271,10 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
});
$('#childGroupList').append(obj);
$('#childGroupListArea').append(obj);
})
const userTemplate = $('#user-template').html();
/*const userTemplate = $('#user-template').html();
result.groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
......@@ -1273,9 +1291,11 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
})
$('#myGroupArea').hide();
$('#allGroupArea').show();
$('#allGroupArea').show();*/
}
CHAT_UI.startChat = function (userShopMemberId,userName) {
CHAT_UI.showLoadingIndicator();
var userIdList = [];
......@@ -1299,11 +1319,19 @@ CHAT_UI.changeFavorite = function () {
CHAT_UI.removeFavoriteUser = function (shopMemberId) {
//add Android Chat click
$('#userNameCard').modal('hide');
$('#myNameCard').modal('hide');
console.log('hide');
android.removeFavoriteUser(shopMemberId);
console.log("removeFU");
};
CHAT_UI.insertFavoriteUser = function (shopMemberId) {
//add Android Chat click
$('#userNameCard').modal('hide');
$('#myNameCard').modal('hide');
console.log('insert');
android.addFavoriteUser(shopMemberId);
console.log("insertFU");
};
......@@ -1317,22 +1345,28 @@ CHAT_UI.makeNameCard = function (shopMemberId) {
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
console.log(nameCardInfo);
const userNamecardTemplate = $('#namecard-template').html();
let namecardHtml = Mustache.render(userNamecardTemplate, {
loginId: nameCardInfo.shopMemberId,
var namecardTemplate;
$.get({ url: "./template/template_user_name_card.html", async: false }
, function(text) {
namecardTemplate = text;
});
let namecardHtml = Mustache.render(namecardTemplate, {
shopMemberId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
favorite: getLocalizedString("addFavorite"),
isFavorite: nameCardInfo.isFavorite
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
$('#userProfileModal').html(namecardObj);
$('#userNameCard').modal('show');
};
CHAT_UI.makeNameCardInChatRoom = function (chatRoomId) {
......@@ -1350,12 +1384,14 @@ CHAT_UI.makeNameCardInChatRoom = function (chatRoomId) {
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
});
console.log('done html render');
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
console.log(namecardHtml);
console.log(namecardObj);
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
$('#userProfileModal').html(namecardHtml);
CHAT_UI.showNamecard('userProfileModal');
};
CHAT_UI.refesshAllGroupSearchFaborite = function(groupId) {
......
public_new/js/chat.js
......@@ -29,7 +29,7 @@ CHAT.getProfileImgUrl = function(path) {
return ASSET_PATH + 'img/noImage.png';
} else {
var userInfo = path.split("/").reverse();
return CMS_SERVER_URL + '/file/getProfileImage?profileFileName=' + userInfo[0] + '&profileGetLoginId=' + userInfo[1];
return CMS_SERVER_URL + '/chatapi/user?profileFileName=' + userInfo[0] + '&profileGetLoginId=' + userInfo[1] + '&sid=' + CHAT.globalLoginParameter.sid + '&cmd=12';
}
}
......
public_new/template/template_group_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<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>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
\ No newline at end of file
public_new/template/template_group_user_list.html 0 → 100644
<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">
<a href="#" onclick="CHAT_UI.makeNameCard({{shopMemberId}})" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileImagePath}}" 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">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
{{#isFavorite}}
<span class="star active"></span>
{{/isFavorite}}
{{^isFavorite}}
<span class="star disable"></span>
{{/isFavorite}}
</div>
</div>
</li>
{{/groupUserList}}
</ul>
\ No newline at end of file
public_new/template/template_my_name_card.html
......@@ -3,8 +3,7 @@
<div class="modal-content">
<div class="modal-header border-0">
<div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" alt="プロフィール画像">
<!--<div class="namedard-img-upload" >Upload</div>-->
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
<div class="prifile_name"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
......
public_new/template/template_user_list.html
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="#" data-toggle="modal" data-target="#userNameCard" class="w-100">
<a href="#" onclick="CHAT_UI.makeNameCard({{shopMemberId}})" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileImage}}" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m px-0">
......@@ -18,7 +18,12 @@
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
{{#isFavorite}}
<span class="star active"></span>
{{/isFavorite}}
{{^isFavorite}}
<span class="star disable"></span>
{{/isFavorite}}
</div>
</div>
</li>
......
public_new/template/template_user_name_card.html
......@@ -3,7 +3,7 @@
<div class="modal-content">
<div class="modal-header border-0">
<div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" alt="プロフィール画像">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
<div class="prifile_name"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
......@@ -17,7 +17,7 @@
</div>
<div class="modal-footer border-0 justify-content-center">
{{#isFavorite}}
<button type="button" class="border-0 bg_navy">
<button type="button" class="border-0 bg_navy" onclick="CHAT_UI.removeFavoriteUser({{shopMemberId}})">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
......@@ -26,8 +26,8 @@
</div>
</button>
{{/isFavorite}}
{{^isFavotire}}
<button type="button" class="border-0 bg_navy">
{{^isFavorite}}
<button type="button" class="border-0 bg_navy" onclick="CHAT_UI.insertFavoriteUser({{shopMemberId}})">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
......@@ -36,7 +36,7 @@
</div>
</button>
{{/isFavorite}}
<button type="button" class="border-0 bg_green">
<button type="button" class="border-0 bg_green" >
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_phone.png" alt="通話">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment