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 @@ ...@@ -3,31 +3,36 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>メッセージ一覧</title> <title>ダッシュボード</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- favicons --> <!-- favicons -->
<link href="img/favicon.ico" rel="icon"> <link href="../common/img/favicon.ico" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon"> <link href="../common/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- main css --> <!-- main css -->
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/app.css"> <link rel="stylesheet" type="text/css" href="../common/css/newdash/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/newdash/header.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/header.css"> <link rel="stylesheet" type="text/css" href="../common/css/newdash/style.css">
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/footer.css"> <!-- vender css -->
<link rel="stylesheet" type="text/css" href="../common/css/appCommon/style.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="/abvw/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="/abvw/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/web/i18n.js?__UPDATEID__"></script>
<script type="text/javascript" src="../common/js/newdash/app.js"></script> <script type="text/javascript" src="../common/js/newdash/app.js"></script>
<script type="text/javascript" src="../common/js/newdash/common.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> </head>
<body> <body onload="PushMessageList.init();">
<!-- header --> <!-- header -->
<?php include('common/header.html');?> <div id="includedHeader"></div>
<!-- message list --> <!-- message list -->
<main> <main>
...@@ -35,46 +40,19 @@ ...@@ -35,46 +40,19 @@
<!-- breadcrumb --> <!-- breadcrumb -->
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb px-0 mb-0"> <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"><a href="dashboard.html" class="text-decoration-none text-underline lang" lang="dashboard"></a></li>
<li class="breadcrumb-item active" aria-current="page"><span>メッセージ一覧</span></li> <li class="breadcrumb-item active lang" lang="messageListTitle" aria-current="page"><span></span></li>
</ol> </ol>
</nav> </nav>
<!-- title --> <!-- 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 --> <!-- message -->
<ul class="card-list message-list p-0"> <ul class="card-list message-list p-0" id="messageList">
<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>
<li class="card mb-2 not-found"> <li class="card mb-2 not-found">
<div class="text-dark mb-1 px-3 py-5 text-center m-auto"> <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 class="fs-9 text-secondary font-weight-bold">メッセージがありません。</div>
</div> </div>
</li> </li>
...@@ -82,12 +60,6 @@ ...@@ -82,12 +60,6 @@
</div> </div>
</main> </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> </body>
</html> </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 = {}; 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"}; * Init screen when html onload
//msgMap.messageListEmptyTitle = {ja:"メッセージがありません。", ko:"메시지가 없습니다.", en:"No Messages"}; */
PushMessageList.init = function() { PushMessageList.init = function() {
FOOTER.initFooter(); $("#includedHeader").load("../common/header.html" , function() {
PushMessageList.createMessageList(PushMessageList.dummyMessageList()); I18N.initi18n();
} });
PushMessageList.getMessageList(function(messageList) {
PushMessageList.initPushMessageListCallback = function(pushMessageList) { PushMessageList.createMessageList(messageList);
PushMessageList.createMessageList(pushMessageList); });
}
PushMessageList.goBack = function() {
FOOTER.goDashboard();
} }
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) { PushMessageList.clickMessage = function(pushMessageId) {
$("#pushMessageId_" + pushMessageId).removeClass('unread');
COMMON.goUrlWithCurrentParams('push-message-detail.html', {pushMessageId: pushMessageId}); COMMON.goUrlWithCurrentParams('push-message-detail.html', {pushMessageId: pushMessageId});
} }
/**
* generate message list html
* @param {array} messageList
* @returns
*/
PushMessageList.createMessageList = function(messageList) { PushMessageList.createMessageList = function(messageList) {
$('#messageTable').empty();
if (typeof messageList === 'undefined' || messageList.length < 1) { if (typeof messageList === 'undefined' || messageList.length < 1) {
$('#messageList .not-found').removeClass('d-none'); $('#messageList .not-found').removeClass('d-none');
return; return;
} }
//console.log("messageList.length" + messageList.length);
$('#messageList .not-found').addClass('d-none'); $('#messageList .not-found').addClass('d-none');
for (var i = 0; i < messageList.length; i++) { for (var i = 0; i < messageList.length; i++) {
let message = messageList[i]; let message = messageList[i];
...@@ -40,34 +65,37 @@ PushMessageList.createMessageList = function(messageList) { ...@@ -40,34 +65,37 @@ PushMessageList.createMessageList = function(messageList) {
var mDate = message.pushSendDate; var mDate = message.pushSendDate;
var mSubtitle = message.operationName; var mSubtitle = message.operationName;
var unread = !message.readingFlg; 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) { if (unread) {
messageLi.addClass('unread'); messageLi.addClass('unread');
} else {
messageLi.addClass('read');
} }
var messageA = $('<a class="d-block px-3 py-2 text-decoration-none text-dark"/>'); var messageA = $('<a class="d-block px-3 py-2 text-decoration-none text-dark"/>');
messageA.attr('href', "javascript:CHK_MessageList.clickMessage('" + messageId +"');"); messageA.attr('href', "javascript:PushMessageList.clickMessage('" + messageId +"');");
var titleDiv = $('<div class="title">' + mTitle + '</div>'); var titleDiv = $('<div class="fs-12 text-truncate">' + mTitle + '</div>');
var subTitleMainDiv = $('<div class="sub-title-wrap"></div>'); var subTitleMainDiv = $('<div class="d-flex justify-content-between align-items-center"></div>');
var dateDiv = $('<div class="fs-8 text-secondary mr-2"><div class="data">' + mDate + '</div></div>'); var subTitleDiv = $('<div class="fs-10 text-truncate">' + mSubtitle + '</div>');
var subTitleDiv = $('<div class="sub-title">' + mSubtitle + '</div>'); var dateDiv = $('<div class="fs-8 text-secondary text-nowrap">' + mDate + '</div>');
subTitleMainDiv.append(dateDiv);
subTitleMainDiv.append(subTitleDiv); subTitleMainDiv.append(subTitleDiv);
var infoI = $('<i class="fas fa-chevron-right fs-12"></i>'); subTitleMainDiv.append(dateDiv);
messageA.append(titleDiv); messageA.append(titleDiv);
messageA.append(subTitleMainDiv); messageA.append(subTitleMainDiv);
messageA.append(infoI);
messageLi.append(messageA); messageLi.append(messageA);
$('#messageTable').append(messageLi); $('#messageList').append(messageLi);
} }
}; };
//dummy messages /**
* dummy message list for test
* @returns message List
*/
PushMessageList.dummyMessageList = function() { PushMessageList.dummyMessageList = function() {
var messes = []; var messes = [];
messes.push({ messes.push({
pushMessageId: 1, pushMessageId: 1,
pushMessage: 'メッセージ内容が入ります。', pushMessage: 'メッセージ内容が入ります。',
startDate: '2022/07/06 14:14', pushSendDate: '2022/07/06 14:14',
operationName: '作業名が入ります。', operationName: '作業名が入ります。',
readingFlg: false, 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