Skip to content

C
check
Commit ad275626 by Ha Jonguk
Options

プッシュメッセージ実装済み

parent 9aef5a8f
Showing with 321 additions and 44 deletions
.project 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>web-viewer</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
abvw/css/layout/list_project.css
......@@ -185,3 +185,25 @@ header button.addition {
.headerBar .headerBtn a {
margin-right: 5px;
}
/* for pushmessage */
.notification-pushmessage {
position:fixed;
height:40px;
line-height:40px;
text-align:center;
top:0;
left:0;
right:0;
z-index:10000;
background-color:#bde;
opacity:0.8;
color:#000;
border:solid 1px #000;
font-weight:bold;
font-size:13px;
}
.selected_send_type {
background: #b0e0e6;
}
abvw/home_check.html
......@@ -55,20 +55,23 @@
<div id="ws-body" >
<div id="inc_backup"></div>
<div id="projectBar" class="headerBar">
<div class="headerBtn">
<a href="#" id="dspLogout" ><img src="img/check/ic_exit_to_app_white_48dp.png" width="40" height="40"></a>
</div>
<div class="titleInfo" >
プロジェクト一覧
</div>
<div class="headerBtn">
<a href="#" id="dspCommunication" ><img src="img/check/communication_menu_icon@3x.png" width="40" height="40"></a>
<a href="#" id="dspCommonContent" ><img src="img/check/ic_common_content_on.png" width="40" height="40"></a>
<a href="#" id="dspSettingCheck" ><img src="img/check/icon_setup.png" width="40" height="40"></a>
<a href="#" id="dspRefreshCheck" ><img src="img/check/menu_refresh.png" width="40" height="40"></a>
</div>
</div>
<div id="projectBar" class="headerBar">
<div class="headerBtn">
<a href="#" id="dspLogout" ><img src="img/check/ic_exit_to_app_white_48dp.png" width="40" height="40"></a>
</div>
<div class="titleInfo" >
プロジェクト一覧
</div>
<div class="headerBtn">
<a href="#" id="dspCommunication" ><img id="communication_menu_img" src="img/check/communication_menu_icon@3x.png" width="40" height="40"></a>
<a href="#" id="dspCommonContent" ><img src="img/check/ic_common_content_on.png" width="40" height="40"></a>
<a href="#" id="dspSettingCheck" ><img src="img/check/icon_setup.png" width="40" height="40"></a>
<a href="#" id="dspRefreshCheck" ><img src="img/check/menu_refresh.png" width="40" height="40"></a>
</div>
</div>
<div class="notification-pushmessage" onclick="$(this).slideUp();" style="display:none;">
<!--新着メッセージがあります！！！-->
</div>
<div id="contentBar" class="headerBar" style="display: none;">
<div class="headerBtn">
......@@ -262,20 +265,20 @@
<div style="width:100%;height:auto;background:#ccc;font-size:24px;font-weight:bold;padding:5px 0;text-align: center;">
<span>コミュニケーション</span>
<a href="#" style="position:absolute;top:0;right:0;" onclick="HOME_CHECK.closeDialog();">
<img src="img/login/close.png" width="40" height="40" style="margin:3px 0;">
<img src="img/login/close.png" width="40" height="40" style="margin:2px 0;">
</a>
</div>
<ul style="width:100%;height:80%;display:inline;">
<li style="width:100%;cursor:pointer;" onclick="HOME_CHECK.closeDialog();">
<li style="width:100%;cursor:pointer;" onclick="HOME_CHECK.showSelectProjectForPushMessage();">
<div style="display:flex;margin:3px 10px;border-bottom:0.5px solid black;">
<img src="img/check/communication_pushmsg_icon@3x.png" width="40" height="40" style="margin: 10px 0;">
<span style="width: 100%;margin: 0 40px;font-size: 16px;line-height: 60px;">プッシュメッセージ送信</span>
<img src="img/main_next.png" width="20" height="40" style="margin: 10px 0;">
</div>
</li>
<li style="width:100%;cursor:pointer;" onclick="HOME_CHECK.closeDialog();">
<li style="width:100%;cursor:pointer;" onclick="HOME_CHECK.showPushMessageList();">
<div style="display:flex;margin:3px 10px;border-bottom:0.5px solid black;">
<img src="img/check/ic_communication_push_message_list.png" width="40" height="40" style="margin: 10px 0;">
<img id="message_list_img" src="img/check/ic_communication_push_message_list.png" width="40" height="40" style="margin: 10px 0;">
<span style="width: 100%;margin: 0 40px;font-size: 16px;line-height: 60px;">プッシュメッセージ一覧</span>
<img src="img/main_next.png" width="20" height="40" style="margin: 10px 0;">
</div>
......@@ -283,23 +286,80 @@
</ul>
</div>
<div id="recept_push_message">
<ul id="recept_push_message_list"></ul>
<div id="recept_push_message" style="display:none;z-index:10001;position:fixed;background:white;width:600px;height:450px;">
<div style="width:100%;height:auto;background:#ccc;font-size:24px;font-weight:bold;padding:5px 0;text-align: center;">
<span>プッシュメッセージ一覧</span>
<a href="#" style="position:absolute;top:0;right:0;" onclick="HOME_CHECK.closeDialog();">
<img src="img/login/close.png" width="40" height="40" style="margin:2px 0;">
</a>
</div>
<ul id="recept_push_message_list" style="overflow:auto;height:calc(100% - 47px);"></ul>
</div>
<div id="select_project_for_send">
<ul id="selectable_project_list"></ul>
<div id="select_project_for_send" style="display:none;z-index:10001;position:fixed;background:white;width:400px;height:550px;">
<div style="width:100%;height:auto;background:#ccc;font-size:24px;font-weight:bold;padding:5px 0;text-align: center;">
<span>プロジェクト選択</span>
<a href="#" style="position:absolute;top:0;right:0;" onclick="HOME_CHECK.closeDialog();">
<img src="img/login/close.png" width="40" height="40" style="margin:2px 0;">
</a>
</div>
<ul id="selectable_project_list" style="overflow:auto;overflow-x:hidden;height:calc(100% - 47px);"></ul>
</div>
<div id="send_push_message">
<div>
header
<div id="send_push_message" style="display:none;z-index:10001;position:fixed;background:white;width:600px;height:550px;">
<div style="width:100%;height:auto;background:#ccc;font-size:24px;font-weight:bold;padding:5px 0;text-align: center;">
<a href="#" style="position:absolute;top:0;left:0;" onclick="HOME_CHECK.showSelectProjectForPushMessage();">
<img src="img/main_previous.png" width="40" height="40" style="margin:3px 0;">
</a>
<span>プッシュメッセージ送信</span>
<a href="#" style="position:absolute;top:0;right:0;" onclick="HOME_CHECK.closeDialog();">
<img src="img/login/close.png" width="40" height="40" style="margin:2px 0;">
</a>
</div>
<div>
<ul id="send_push_message_input" style="margin:30px 20px 0;width:560px;height:400px;">
<li style="display: flex;line-height: 40px;border-bottom: 1px solid;">
<div style="text-align:left;width:150px;font-weight:bold;">プロジェクト名</div>
<div id="send_project_name" style="text-align:right;width:100%;font-size:24px;"></div>
</li>
<li style="display: flex;line-height: 60px;border-bottom: 1px solid;">
<div style="text-align:left;width:100px;font-weight:bold;">送信先</div>
<div style="text-align:right;width:100%;display:flex;">
<div id="sender_group" style="width:50%;height:40px;border:1px solid #778899;margin:10px 1px;text-align:center;line-height:40px;cursor:pointer;" onclick="HOME_CHECK.changeSendType($(this))">
グループ内
</div>
<div id="all_group" style="width:50%;height:40px;border:1px solid #778899;margin:10px 1px;text-align:center;line-height:40px;cursor:pointer;" onclick="HOME_CHECK.changeSendType($(this))">
プロジェクト全体
</div>
</div>
<li style="line-height: 40px;border-bottom: 1px solid;text-align: right;height: 40px;">
<div style="position: absolute;text-align:left;width:150px;font-weight:bold;">メッセージ</div>
<div style="float: right;width: auto;margin-right:10px;display: flex;cursor:pointer;" onclick="HOME_CHECK.showMessageFormList();">
<div id="message_form_name" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:auto;max-width:350px;">自由入力</div>
<img src="img/main_next.png" width="20" height="20" style="margin: 10px 0;">
</div>
</li>
<li style="display: flex;border-bottom: 1px solid;">
<textarea id="send_message" type="text" style="margin:20px;height:180px;width:100%;resize:none;font-size: 20px;"></textarea>
</li>
</ul>
<input type="hidden" id="selectedProjectIdForSendPushMessage">
<div style="text-align:center;">
<input value="送信" style="color:#fff;background-color:#0068CB;border:1px solid #0068CB;border-radius:5px;box-shadow:2px 2px 1px #D9D9D9;cursor:pointer;font-size:1.1em;font-weight:bold;text-align:center;height:50px;"
onclick="HOME_CHECK.sendPushMessage();">
</div>
<div>
btn
</div>
<div id="message_form" style="display:none;z-index:10001;position:fixed;background:white;width:400px;height:550px;">
<div style="width:100%;height:auto;background:#ccc;font-size:24px;font-weight:bold;padding:5px 0;text-align: center;">
<a href="#" style="position:absolute;top:0;left:0;" onclick="HOME_CHECK.backToSendPushMessage();">
<img src="img/main_previous.png" width="40" height="40" style="margin:3px 0;">
</a>
<span>プッシュメッセージ送信</span>
<a href="#" style="position:absolute;top:0;right:0;" onclick="HOME_CHECK.closeDialog();">
<img src="img/login/close.png" width="40" height="40" style="margin:2px 0;">
</a>
</div>
<ul id="message_form_list" style="overflow:auto;overflow-x:hidden;height:calc(100% - 47px);"></ul>
</div>
<iframe style="height:0px;width:0px;visibility:hidden;display:none;" src="about:blank">
......
abvw/js/home_check.js
......@@ -17,9 +17,10 @@ HOME_CHECK.totalPage;
HOME_CHECK.scrollTop = 0;
HOME_CHECK.projectTypeArr = []; //ProjectType array.
HOME_CHECK.pushMessageJsonList;
HOME_CHECK.projectInfoArr = []; //ProjectInfo array.
//プッシュメッセージ一覧
HOME_CHECK.newMessageCnt = 0;
// ==========================================================
$(document).ready(function() {
......@@ -42,6 +43,7 @@ $(document).ready(function() {
// プロジェクト一覧　初期表示
HOME_CHECK.initProjectView();
HOME_CHECK.getPushMessageNew();
// Go To Details Page
//$('.button-report-details').live('click', HOME_CHECK.reportClickFunction);
......@@ -522,9 +524,10 @@ HOME_CHECK.renderProject = function(sid) {
HOME_CHECK.renderAddProject(post);
// assign content type to array
HOME_CHECK.projectTypeArr.push({
HOME_CHECK.projectInfoArr.push({
projectId : post.projectId,
projectType : post.projectType
projectType : post.projectType,
projectName : post.projectName
});
});
});
......@@ -600,9 +603,6 @@ HOME_CHECK.renderAddProject = function(post) {
$(actionBtnDiv.children()[2]).prop("disabled", true);
}
// プッシュメッセージを取得
HOME_CHECK.pushMessageJsonList = post.pushMessageList;
listLi.append(actionBtnDiv);
$(".addition_list").append(listLi);
......@@ -675,12 +675,12 @@ HOME_CHECK.createSession = function(projectId, projectType, projectReportType) {
// Get project type base on projectId
HOME_CHECK.returnProjectType = function(projectId) {
// Array Length
var iArrCnt = HOME_CHECK.projectTypeArr.length;
var iArrCnt = HOME_CHECK.projectInfoArr.length;
// Get contentType in array by contentId
for ( var i = 0; i < iArrCnt; i++) {
if (HOME_CHECK.projectTypeArr[i].projectId == projectId) {
return HOME_CHECK.projectTypeArr[i].projectType;
if (HOME_CHECK.projectInfoArr[i].projectId == projectId) {
return HOME_CHECK.projectInfoArr[i].projectType;
}
}
return -1;
......@@ -728,14 +728,14 @@ HOME_CHECK.refreshProject = function() {
HOME_CHECK.checkApi('webProjectList', params, 'POST', function(data) {
var countCnt = 0;
$(".addition_list").html("");
HOME_CHECK.projectTypeArr.clear();
HOME_CHECK.projectInfoArr.clear();
$.each(data.projectList, function(i, post) {
HOME_CHECK.renderAddProject(post);
// assign content type to array
HOME_CHECK.projectTypeArr.push({
// assign content info to array
HOME_CHECK.projectInfoArr.push({
projectId : post.projectId,
projectType : post.projectType
projectType : post.projectType,
projectName : post.projectName
});
});
......@@ -774,13 +774,197 @@ HOME_CHECK.showCommunicationDialog = function() {
HOME_CHECK.closeDialog = function() {
HOME_CHECK.unlockLayout();
$("#communication").hide();
$("#recept_push_message").hide();
$("#select_project_for_send").hide();
$("#send_push_message").hide();
$("#message_form").hide();
}
HOME_CHECK.showPushMessageList = function() {
$("#communication").hide();
$("#recept_push_message").css("top", ($(window).height()-$("#recept_push_message").height())/2);
$("#recept_push_message").css("left", ($(window).width()-$("#recept_push_message").width())/2);
$("#recept_push_message").show();
var params = {
sid : ClientData.userInfo_sid()
};
HOME_CHECK.checkApi('webPushMessageList', params, 'POST', function(data) {
$("#recept_push_message_list").empty();
$.each(data.pushMessageList, function(i, json) {
var li = $("<li/>", { style: "height:auto;border-bottom:1px solid black;width:560px;display:inline-block;position:relative;" });
var leftDiv = $("<div/>", { style: "text-align:left;margin: 20px 5px 20px 20px;width:290px;" });
leftDiv.append($("<div/>", { style: "font-size:20px;overflow:hidden;width:100%;margin:10px 0;", title: json.pushMessage }).text(json.pushMessage));
leftDiv.append($("<div/>", { style: "font-size:16px;overflow:hidden;width:100%;" }).text(json.pushSendDate));
var rightDiv = $("<div/>", { style: "text-align:right;width:200px;position:absolute;bottom:0;right:20px;" });
rightDiv.append($("<div/>", { style: "font-size:16px;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;" }).text("プロジェクト名"));
rightDiv.append($("<div/>", { style: "font-size:16px;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;font-weight:bold;", title: json.projectName }).text(json.projectName));
rightDiv.append($("<div/>", { style: "font-size:16px;text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;margin:10px 0;", title: json.pushSendLoginId }).text("送信者： " + json.pushSendLoginId));
li.append(leftDiv);
li.append(rightDiv);
if (i < HOME_CHECK.newMessageCnt) {
li.append($("<p/>", { style: "background-color:red;width:10px;height:10px;border-radius:10px;position:absolute;top:0;left:5px;" }));
}
$("#recept_push_message_list").append(li);
});
HOME_CHECK.newMessageCnt = 0;
HOME_CHECK.changeImageForReceptPushMessage();
});
}
// プッシュメッセージの新着状況
HOME_CHECK.changeImageForReceptPushMessage = function(isNew) {
var menuImgSrc = "img/check/communication_menu_icon@3x.png";
var listImgSrc = "img/check/ic_communication_push_message_list.png";
if (isNew) {
menuImgSrc = "img/check/ic_communication_menu_with_badge.png";
listImgSrc = "img/check/ic_communication_push_message_list_with_badge.png";
}
$("#communication_menu_img").attr("src", menuImgSrc);
$("#message_list_img").attr("src", listImgSrc);
}
HOME_CHECK.showSelectProjectForPushMessage = function() {
$("#communication").hide();
$("#send_push_message").hide();
$("#select_project_for_send").css("top", ($(window).height()-$("#select_project_for_send").height())/2);
$("#select_project_for_send").css("left", ($(window).width()-$("#select_project_for_send").width())/2);
$("#select_project_for_send").show();
$("#selectable_project_list").empty();
$.each(HOME_CHECK.projectInfoArr, function(i, json) {
var li = $("<li/>", { style: "height:auto;border-bottom:1px solid black;width:400px;display:flex;position:relative;line-height:40px;cursor:pointer;"
, onclick: "HOME_CHECK.showSendPushMessage(" + json.projectId + ", '" + json.projectName + "');" });
li.append($("<div/>", { style: "font-size:20px;overflow:hidden;width:340px;margin:10px 10px;", title: json.projectName }).text(json.projectName));
li.append($("<img>", { style: "float:right;margin:10px 0;height:40px;width:20px;position:absolute;right:20px;", src: "img/main_next.png" }));
$("#selectable_project_list").append(li);
});
}
HOME_CHECK.showSendPushMessage = function(projectId, projectName) {
$("#select_project_for_send").hide();
$("#send_push_message").css("top", ($(window).height()-$("#send_push_message").height())/2);
$("#send_push_message").css("left", ($(window).width()-$("#send_push_message").width())/2);
$("#send_push_message").show();
$("#send_project_name").text(projectName);
$("#sender_group").addClass("selected_send_type");
$("#messageFormName").text("自由入力");
$("#send_message").val("");
$("#selectedProjectIdForSendPushMessage").val(projectId);
}
HOME_CHECK.changeSendType = function(clickedElem) {
if (!clickedElem.hasClass("selected_send_type")) {
$("#sender_group").toggleClass("selected_send_type");
$("#all_group").toggleClass("selected_send_type");
}
}
HOME_CHECK.showMessageFormList = function() {
$("#send_push_message").hide();
$("#message_form").css("top", ($(window).height()-$("#message_form").height())/2);
$("#message_form").css("left", ($(window).width()-$("#message_form").width())/2);
$("#message_form").show();
var params = {
sid : ClientData.userInfo_sid()
};
HOME_CHECK.checkApi('getPushMessage', params, 'POST', function(data) {
$("#message_form_list").empty();
// 自由入力
var freeLi = $("<li/>", { style: "height:auto;border-bottom:1px solid black;width:400px;display:inline-block;position:relative;cursor:pointer;"
, onclick:"HOME_CHECK.backToSendPushMessage('" + "自由入力" + "', '" + "" + "');" });
var freeDiv = $("<div/>", { style: "text-align:left;margin: 20px 5px 20px 20px;width:360px;" });
freeDiv.append($("<div/>", { style: "font-size:20px;overflow:hidden;width:100%;margin:10px 0;font-weight:bold;width:100%;" }).text("自由入力"));
freeLi.append(freeDiv);
$("#message_form_list").append(freeLi);
$.each(data.pushMessage, function(i, json) {
var li = $("<li/>", { style: "height:auto;border-bottom:1px solid black;width:400px;display:inline-block;position:relative;cursor:pointer;"
, onclick:"HOME_CHECK.backToSendPushMessage('" + json.name + "', '" + json.value + "');" });
var div = $("<div/>", { style: "text-align:left;margin: 20px 5px 20px 20px;width:360px;" });
div.append($("<div/>", { style: "font-size:20px;overflow:hidden;width:100%;margin:10px 0;font-weight:bold;width:100%;" }).text(json.name));
div.append($("<div/>", { style: "font-size:16px;overflow:hidden;width:100%;text-indent:10px;width:100%;" }).text(json.value));
li.append(div);
$("#message_form_list").append(li);
});
});
}
HOME_CHECK.backToSendPushMessage = function(formName, formValue) {
$("#message_form").hide();
$("#send_push_message").show();
if (formName) {
$("#message_form_name").text(formName);
$("#send_message").val(formValue);
}
}
HOME_CHECK.sendPushMessage = function() {
var messageSendType = $("#sender_group").hasClass("selected_send_type")? 0 : 1;
var params = {
sid : ClientData.userInfo_sid(),
sendType : messageSendType,
projectId : $("#selectedProjectIdForSendPushMessage").val(),
message : $("#send_message").val()
};
HOME_CHECK.checkApi('sendPushMessage', params, 'POST', function(data) {
HOME_CHECK.closeDialog();
$('.notification-pushmessage').html("プッシュメッセージを送信しました。").slideDown();
// auto off notification push message after timeWaitCloseNewInfoPushMessage
setTimeout(function () {
$('.notification-pushmessage').slideUp();
}, 5000);
});
}
//get message new
HOME_CHECK.getPushMessageNew = function()
{
//ロック中かビューア画面ならチェックしない
if ($("#viewer").length) {
//表示状態か
if( $('#viewer').is(':visible')){
return;
}
}
//$('.notification-pushmessage').hide();
var params = {
"sid": ClientData.userInfo_sid()
};
AVWEB.avwCmsApi(
ClientData.userInfo_accountPath(),
"webPushMessageNew",
"post",
params,
HOME_CHECK.callbackGetPushMessageNewSuccess,
function (xhr, b, c) { }
);
};
//callback get number new message success
HOME_CHECK.callbackGetPushMessageNewSuccess = function(data) {
if (data) {
// show notification for new message
if (data.count > 0) {
$('.notification-pushmessage').html(I18N.i18nText("msgPushAlert")).slideDown();
HOME_CHECK.changeImageForReceptPushMessage(1);
HOME_CHECK.newMessageCnt += data.count;
// auto off notification push message after timeWaitCloseNewInfoPushMessage
setTimeout(function () {
$('.notification-pushmessage').slideUp();
}, 5000);
}
}
// continue check new push message
setTimeout(HOME_CHECK.getPushMessageNew, 10000);
};
//Hide the locking layout
HOME_CHECK.unlockLayout = function() {
$('#avw-sys-modal').hide();
......
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