Skip to content

C
check
Commit 2ce6ad94 by NGUYEN HOANG SON
Options

implement push message list js

parent c7eda674
Showing with 82 additions and 83 deletions
abvw/html/push-message-list.html
......@@ -3,31 +3,36 @@
<head>
<meta charset="utf-8">
<title>メッセージ一覧</title>
<title>ダッシュボード</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- favicons -->
<link href="img/favicon.ico" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<link href="../common/img/favicon.ico" rel="icon">
<link href="../common/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- main css -->
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/app.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/fontawesome_relative_path.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/header.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/footer.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/style.css">
<link rel="stylesheet" type="text/css" href="../common/css/newdash/app.css">
<link rel="stylesheet" type="text/css" href="../common/css/newdash/header.css">
<link rel="stylesheet" type="text/css" href="../common/css/newdash/style.css">
<!-- vender css -->
<link rel="stylesheet" type="text/css" href="../common/css/newdash/fontawesome_relative_path.css">
<script type="text/javascript" src="../common/js/jquery/jquery-3.6.0.min.js?__UPDATEID__"></script>
<script type="text/javascript" src="../common/js/jquery/jquery-ui.min.js?__UPDATEID__"></script>
<script type="text/javascript" src="../common/js/web/i18n.js?__UPDATEID__"></script>
<script type="text/javascript" src="/abvw/common/js/jquery/jquery-3.6.0.min.js?__UPDATEID__"></script>
<script type="text/javascript" src="/abvw/common/js/jquery/jquery-ui.min.js?__UPDATEID__"></script>
<script type="text/javascript" src="/abvw/common/js/web/i18n.js?__UPDATEID__"></script>
<script type="text/javascript" src="../common/js/newdash/app.js"></script>
<script type="text/javascript" src="../common/js/newdash/common.js"></script>
<script src="../common/js/constant.js?__UPDATEID__"></script>
<script src="../common/js/common.js?__UPDATEID__"></script>
<script type="text/javascript" src="../js/pushMessageList/push-message-list.js"></script>
</head>
<body>
<body onload="PushMessageList.init();">
<!-- header -->
<?php include('common/header.html');?>
<div id="includedHeader"></div>
<!-- message list -->
<main>
......@@ -35,46 +40,19 @@
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb px-0 mb-0">
<li class="breadcrumb-item"><a href="dashboard.html" class="text-decoration-none text-underline">ダッシュボード</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>メッセージ一覧</span></li>
<li class="breadcrumb-item"><a href="dashboard.html" class="text-decoration-none text-underline lang" lang="dashboard"></a></li>
<li class="breadcrumb-item active lang" lang="messageListTitle" aria-current="page"><span></span></li>
</ol>
</nav>
<!-- title -->
<h1 class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0">メッセージ一覧</h1>
<h1 class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0 lang" lang="messageListTitle"></h1>
<!-- message -->
<ul class="card-list message-list p-0">
<li class="card mb-2 unread">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="fs-12 text-truncate">メッセージ内容が入ります。</div>
<div class="d-flex justify-content-between align-items-center">
<div class="fs-10 text-truncate">作業名が入ります。</div>
<div class="fs-8 text-secondary text-nowrap">2022/07/06 14:14</div>
</div>
</a>
</li>
<li class="card mb-2 unread">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="fs-12 text-truncate">メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。</div>
<div class="d-flex justify-content-between align-items-center">
<div class="fs-10 text-truncate">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div>
<div class="fs-8 text-secondary text-nowrap">2022/07/06 14:14</div>
</div>
</a>
</li>
<li class="card mb-2 read">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="fs-12 text-truncate">メッセージ内容が入ります。</div>
<div class="d-flex justify-content-between align-items-center">
<div class="fs-10 text-truncate">作業名が入ります。</div>
<div class="fs-8 text-secondary text-nowrap">2022/07/06 14:14</div>
</div>
</a>
</li>
<ul class="card-list message-list p-0" id="messageList">
<li class="card mb-2 not-found">
<div class="text-dark mb-1 px-3 py-5 text-center m-auto">
<img src="img/icon_not_found.svg" alt="メッセージがありません。" class="not-found-img mb-2">
<img src="../common/img/icon_not_found.svg" alt="メッセージがありません。" class="not-found-img mb-2">
<div class="fs-9 text-secondary font-weight-bold">メッセージがありません。</div>
</div>
</li>
......@@ -82,12 +60,6 @@
</div>
</main>
<!-- confirm -->
<?php include('common/confirm-modal.html');?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
\ No newline at end of file
abvw/js/pushMessageList/push-message-list.js
/**
* Push Message List JS in push-message-list.html
* @since cms:1.4.3.2&1.4.3.3 web:1.0
*/
var PushMessageList = {};
PushMessageList.baseApiUrl = CONSTANT.URL.CMS.BASE + ClientData.userInfo_accountPath() + CONSTANT.URL.CMS.API.BASE + 'pushMessageList/';
//msgMap.messageListTopTitle = {ja:"プッシュメッセージ一覧", ko:"푸시 메시지 일람", en:"Push Message List"};
//msgMap.messageListHeaderTitle = {ja:"メッセージ一覧", ko:"메시지 일람", en:"Message List"};
//msgMap.messageListEmptyTitle = {ja:"メッセージがありません。", ko:"메시지가 없습니다.", en:"No Messages"};
/**
* Init screen when html onload
*/
PushMessageList.init = function() {
FOOTER.initFooter();
PushMessageList.createMessageList(PushMessageList.dummyMessageList());
}
PushMessageList.initPushMessageListCallback = function(pushMessageList) {
PushMessageList.createMessageList(pushMessageList);
}
PushMessageList.goBack = function() {
FOOTER.goDashboard();
$("#includedHeader").load("../common/header.html" , function() {
I18N.initi18n();
});
PushMessageList.getMessageList(function(messageList) {
PushMessageList.createMessageList(messageList);
});
}
PushMessageList.refresh = function() {
}
/**
* get Message List from CMS
* @param {function} callback
*/
PushMessageList.getMessageList = function (callback) {
let param = {
sid: COMMON.getSid(),
};
const url = PushMessageList.baseApiUrl;
COMMON.cmsAjax(url, param, false, function (json) {
if (callback) {
callback(json);
}
}, function() {
console.log('PushMessageList.getMessageList');
if (callback) {
callback(PushMessageList.dummyMessageList());
}
});
};
/**
* handle click message event
* @param {string} pushMessageId
*/
PushMessageList.clickMessage = function(pushMessageId) {
$("#pushMessageId_" + pushMessageId).removeClass('unread');
COMMON.goUrlWithCurrentParams('push-message-detail.html', {pushMessageId: pushMessageId});
}
/**
* generate message list html
* @param {array} messageList
* @returns
*/
PushMessageList.createMessageList = function(messageList) {
$('#messageTable').empty();
if (typeof messageList === 'undefined' || messageList.length < 1) {
$('#messageList .not-found').removeClass('d-none');
return;
}
//console.log("messageList.length" + messageList.length);
$('#messageList .not-found').addClass('d-none');
for (var i = 0; i < messageList.length; i++) {
let message = messageList[i];
......@@ -40,34 +65,37 @@ PushMessageList.createMessageList = function(messageList) {
var mDate = message.pushSendDate;
var mSubtitle = message.operationName;
var unread = !message.readingFlg;
var messageLi = $('<li class="item list-unstyled rounded border mb-2" id="pushMessageId_' + messageId + '"/>');
var messageLi = $('<li class="card mb-2" id="pushMessageId_' + messageId + '"/>');
if (unread) {
messageLi.addClass('unread');
} else {
messageLi.addClass('read');
}
var messageA = $('<a class="d-block px-3 py-2 text-decoration-none text-dark"/>');
messageA.attr('href', "javascript:CHK_MessageList.clickMessage('" + messageId +"');");
var titleDiv = $('<div class="title">' + mTitle + '</div>');
var subTitleMainDiv = $('<div class="sub-title-wrap"></div>');
var dateDiv = $('<div class="fs-8 text-secondary mr-2"><div class="data">' + mDate + '</div></div>');
var subTitleDiv = $('<div class="sub-title">' + mSubtitle + '</div>');
subTitleMainDiv.append(dateDiv);
messageA.attr('href', "javascript:PushMessageList.clickMessage('" + messageId +"');");
var titleDiv = $('<div class="fs-12 text-truncate">' + mTitle + '</div>');
var subTitleMainDiv = $('<div class="d-flex justify-content-between align-items-center"></div>');
var subTitleDiv = $('<div class="fs-10 text-truncate">' + mSubtitle + '</div>');
var dateDiv = $('<div class="fs-8 text-secondary text-nowrap">' + mDate + '</div>');
subTitleMainDiv.append(subTitleDiv);
var infoI = $('<i class="fas fa-chevron-right fs-12"></i>');
subTitleMainDiv.append(dateDiv);
messageA.append(titleDiv);
messageA.append(subTitleMainDiv);
messageA.append(infoI);
messageLi.append(messageA);
$('#messageTable').append(messageLi);
$('#messageList').append(messageLi);
}
};
//dummy messages
/**
* dummy message list for test
* @returns message List
*/
PushMessageList.dummyMessageList = function() {
var messes = [];
messes.push({
pushMessageId: 1,
pushMessage: 'メッセージ内容が入ります。',
startDate: '2022/07/06 14:14',
pushSendDate: '2022/07/06 14:14',
operationName: '作業名が入ります。',
readingFlg: false,
});
......
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