Skip to content

D
design
Commit 26dd334b by NGUYEN HOANG SON
Options

#49167 Implement Push Message List data, action

parent 685c5e09
Showing with 92 additions and 60 deletions
app/css/style.css
...@@ -181,6 +181,18 @@ ...@@ -181,6 +181,18 @@
width: 100px; width: 100px;
} }
.not-found {
height: calc(100vh - 230px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.not-found img {
width: 100px;
}
/* 切り替えタブ */ /* 切り替えタブ */
/* tab */ /* tab */
.tab-menu { .tab-menu {
......
app/img/icon_not_found.svg 0 → 100755
<?xml version="1.0" encoding="UTF-8"?><svg id="_イヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.64 86.86"><defs><style>.cls-1{fill:#9095a5;}</style></defs><g id="_イヤー_1-2"><g><path class="cls-1" d="M58.62,47.1c-1.58,11.5,6.49,22.15,17.98,23.73,4.99,.69,9.81-.43,13.81-2.88l14.33,18.91,3.41-2.59-14.33-18.91c3.44-3.19,5.82-7.52,6.51-12.52,1.58-11.5-6.49-22.15-17.98-23.73-11.5-1.58-22.15,6.49-23.73,17.98Zm37.54,5.17c-1.27,9.24-9.75,15.66-18.98,14.39-9.24-1.27-15.66-9.75-14.39-18.98,1.27-9.24,9.75-15.66,18.98-14.39s15.66,9.75,14.39,18.98Z"/><g><path class="cls-1" d="M53.26,54.98H12.86v8.46H57.31c-1.92-2.48-3.31-5.36-4.05-8.46Z"/><path class="cls-1" d="M24.35,36.2v8.46h28.96c.78-3.17,2.23-6.03,4.18-8.46H24.35Z"/><rect class="cls-1" x="12.86" y="17.43" width="52.11" height="8.46"/></g><path class="cls-1" d="M93.49,76.81H8.8c-2.61,0-4.74-2.12-4.74-4.74V8.8c0-2.61,2.12-4.74,4.74-4.74H101.84c2.61,0,4.74,2.12,4.74,4.74v63.27c0,1.29-.52,2.45-1.35,3.31l2.47,3.25c1.8-1.61,2.94-3.95,2.94-6.56V8.8c0-4.85-3.95-8.8-8.8-8.8H8.8C3.95,0,0,3.95,0,8.8v63.27c0,4.85,3.95,8.8,8.8,8.8H96.57l-3.09-4.06Z"/></g></g></svg>
\ No newline at end of file
app/message-list.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<script src="script/check-message-list.js"></script> <script src="script/check-message-list.js"></script>
</head> </head>
<body id="message-list" onload="CHK_MessageList.init();"> <body id="messageList" onload="CHK_MessageList.init();">
<header> <header>
<nav class="navbar navbar-dark bg-primary position-fixed fixed-top w-100"> <nav class="navbar navbar-dark bg-primary position-fixed fixed-top w-100">
<a href="javascript:CHK_MessageList.goBack();" class="navbar-brand category-btn lht-0"> <a href="javascript:CHK_MessageList.goBack();" class="navbar-brand category-btn lht-0">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
戻る 戻る
</span> </span>
</a> </a>
<h1 class="fs-10 font-weight-bold mb-0 text-white">プッシュメッセージ一覧</h1> <h1 class="fs-10 font-weight-bold mb-0 text-white multi-lang" data-msg="messageListTopTitle">プッシュメッセージ一覧</h1>
<a href="javascript:CHK_MessageList.refresh();" class="nav-link text-white lht-0 p-1"> <a href="javascript:CHK_MessageList.refresh();" class="nav-link text-white lht-0 p-1">
<img class="icon" src="img/icon_update.svg" alt="更新"> <img class="icon" src="img/icon_update.svg" alt="更新">
<span class="d-none d-md-inline fs-10 align-middle multi-lang" data-msg="buttonRefresh"> <span class="d-none d-md-inline fs-10 align-middle multi-lang" data-msg="buttonRefresh">
...@@ -42,9 +42,13 @@ ...@@ -42,9 +42,13 @@
<!-- setting --> <!-- setting -->
<section class="container-fluid main-section"> <section class="container-fluid main-section">
<main> <main>
<h2 class="fs-8 font-weight-bold mt-4 pb-2 border-bottom text-dark">メッセージ一覧</h2> <h2 class="fs-8 font-weight-bold mt-4 pb-2 border-bottom text-dark multi-lang" data-msg="messageListHeaderTitle">メッセージ一覧</h2>
<ul class="task-list p-0 mt-3" id="message-list"> <div class="not-found text-dark mb-1 p-3 d-none">
<li class="item list-unstyled rounded border mb-2"> <img src="img/icon_not_found.svg" class="mb-3" alt="該当する作業がありません。">
<div class="fs-9 text-secondary font-weight-bold multi-lang" data-msg="messageListEmptyTitle">該当する作業がありません。</div>
</div>
<ul class="task-list p-0 mt-3" id="messageTable">
<!-- <li class="item list-unstyled rounded border mb-2 unread">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark"> <a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。</div> <div class="title">メッセージ内容が入ります。</div>
<div class="sub-title-wrap"> <div class="sub-title-wrap">
...@@ -53,59 +57,7 @@ ...@@ -53,59 +57,7 @@
</div> </div>
<i class="fas fa-chevron-right fs-12"></i> <i class="fas fa-chevron-right fs-12"></i>
</a> </a>
</li> </li> -->
<li class="item list-unstyled rounded border mb-2">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。</div>
<div class="sub-title-wrap">
<div class="fs-8 text-secondary mr-2"><div class="data">xxxxxxxxxxxxxxxxxxxxxxxxxx</div></div>
<div class="sub-title">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div>
</div>
<i class="fas fa-chevron-right fs-12"></i>
</a>
</li>
<li class="item list-unstyled rounded border mb-2 unread">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。</div>
<div class="sub-title-wrap">
<div class="fs-8 text-secondary mr-2"><div class="data">2022/07/06 14:14</div></div>
<div class="sub-title">作業名が入ります。</div>
</div>
<i class="fas fa-chevron-right fs-12"></i>
</a>
</li>
<li class="item list-unstyled rounded border mb-2">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。</div>
<div class="sub-title-wrap">
<div class="fs-8 text-secondary mr-2"><div class="data">2022/07/06 14:14</div></div>
<div class="sub-title">作業名が入ります。</div>
</div>
<i class="fas fa-chevron-right fs-12"></i>
</a>
</li>
<li class="item list-unstyled rounded border mb-2 unread">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。</div>
<div class="sub-title-wrap">
<div class="fs-8 text-secondary mr-2"><div class="data">2022/07/06 14:14</div></div>
<div class="sub-title">作業名が入ります。</div>
</div>
<i class="fas fa-chevron-right fs-12"></i>
</a>
</li>
<li class="item list-unstyled rounded border mb-2">
<a href="message-detail.html" class="d-block px-3 py-2 text-decoration-none text-dark">
<div class="title">メッセージ内容が入ります。</div>
<div class="sub-title-wrap">
<div class="fs-8 text-secondary mr-2"><div class="data">2022/07/06 14:15</div></div>
<div class="sub-title">作業名が入ります。</div>
</div>
<i class="fas fa-chevron-right fs-12"></i>
</a>
</li>
</ul> </ul>
</main> </main>
</section> </section>
......
app/script/check-dashboard.js
...@@ -6,7 +6,7 @@ CHK_Dashboard.pickupItems = [ ...@@ -6,7 +6,7 @@ CHK_Dashboard.pickupItems = [
{id: 'reportWarning', href: 'pickup.html', count: 0, enabled: true, img: {src: 'img/icon_alert.svg'}, msg: 'reportWarningTitle'}, {id: 'reportWarning', href: 'pickup.html', count: 0, enabled: true, img: {src: 'img/icon_alert.svg'}, msg: 'reportWarningTitle'},
]; ];
CHK_Dashboard.communicationItems = [ CHK_Dashboard.communicationItems = [
{id: 'messageList', href: "javascript:CHK_L.sendAppCommand('goMessageList');", count: 0, enabled: true, img: {src: 'img/icon_message_lsit.svg'}, msg: 'messageListTitle'}, {id: 'messageList', href: "message-list.html", count: 0, enabled: true, img: {src: 'img/icon_message_lsit.svg'}, msg: 'messageListTitle'},
{id: 'sendMessage', href: "javascript:CHK_L.sendAppCommand('goSendMessage');", count: 0, enabled: true, img: {src: 'img/icon_send_message.svg'}, msg: 'sendMessageTitle'}, {id: 'sendMessage', href: "javascript:CHK_L.sendAppCommand('goSendMessage');", count: 0, enabled: true, img: {src: 'img/icon_send_message.svg'}, msg: 'sendMessageTitle'},
{id: 'distanceSupport', href: "javascript:CHK_L.sendAppCommand('goDistanceSupport');", count: 0, enabled: true, img: {src: 'img/icon_remote.svg'}, msg: 'distanceSupportTitle'}, {id: 'distanceSupport', href: "javascript:CHK_L.sendAppCommand('goDistanceSupport');", count: 0, enabled: true, img: {src: 'img/icon_remote.svg'}, msg: 'distanceSupportTitle'},
{id: 'chat', href: "javascript:CHK_L.sendAppCommand('goChat');", count: 0, enabled: true, img: {src: 'img/icon_chat.svg'}, msg: 'chatTitle'}, {id: 'chat', href: "javascript:CHK_L.sendAppCommand('goChat');", count: 0, enabled: true, img: {src: 'img/icon_chat.svg'}, msg: 'chatTitle'},
......
app/script/check-message-list.js
var CHK_MessageList = {}; var CHK_MessageList = {};
msgMap.messageListTopTitle = {ja:"プッシュメッセージ一覧", ko:"Push Message List", en:"Push Message List"};
msgMap.messageListHeaderTitle = {ja:"メッセージ一覧", ko:"Message List", en:"Message List"};
msgMap.messageListEmptyTitle = {ja:"該当する作業がありません。", ko:"There is no applicable work", en:"There is no applicable work"};
CHK_MessageList.init = function() { CHK_MessageList.init = function() {
$("#footer").load("main-footer.html", function() { $("#footer").load("main-footer.html", function() {
CHK_Footer.activeDashboardBottomNav(); CHK_Footer.activeDashboardBottomNav();
}); });
//CHK.pushMessageList = CHK_MessageList.dummyMessageList();
CHK_MessageList.createMessageList(CHK.pushMessageList);
} }
CHK_MessageList.goBack = function() { CHK_MessageList.goBack = function() {
...@@ -11,5 +17,64 @@ CHK_MessageList.goBack = function() { ...@@ -11,5 +17,64 @@ CHK_MessageList.goBack = function() {
} }
CHK_MessageList.refresh = function() { CHK_MessageList.refresh = function() {
CHK_MessageList.init();
}
CHK_MessageList.createMessageList = function(messageList) {
$('#messageTable').empty();
if (typeof messageList !== 'object') {
$('#messageList .not-found').removeClass('d-none');
return;
}
$('#messageList .not-found').addClass('d-none');
for (var i = 0; i < messageList.length; i++) {
let message = messageList[i];
var mTitle = message.title;
var mDate = setOperationDate(message.startDate);
var mSubtitle = message.subTitle;
var unread = message.unread;
var messageLi = $('<li class="item list-unstyled rounded border mb-2"/>');
if (unread) {
messageLi.addClass('unread');
}
var messageA = $('<a class="d-block px-3 py-2 text-decoration-none text-dark"/>');
messageA.attr('href', 'message-detail.html');
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);
subTitleMainDiv.append(subTitleDiv);
var infoI = $('<i class="fas fa-chevron-right fs-12"></i>');
messageA.append(titleDiv);
messageA.append(subTitleMainDiv);
messageA.append(infoI);
messageLi.append(messageA);
$('#messageTable').append(messageLi);
}
};
//dummy messages
CHK_MessageList.dummyMessageList = function() {
var messes = [];
messes.push({
title: 'メッセージ内容が入ります。',
startDate: '2022/07/06 14:14',
subTitle: '作業名が入ります。',
unread: false,
});
messes.push({
title: 'メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。メッセージ内容が入ります。',
startDate: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
subTitle: '作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。',
unread: true,
});
messes.push({
title: 'メッセージ内容が入ります。',
startDate: '2022/07/07 14:14',
subTitle: '作業名が入ります。',
unread: false,
});
return messes;
} }
app/script/check.js
...@@ -41,6 +41,7 @@ CHK.operation; //作業一覧データ ...@@ -41,6 +41,7 @@ CHK.operation; //作業一覧データ
CHK.operationGroupMaster; //カテゴリーデータ CHK.operationGroupMaster; //カテゴリーデータ
CHK.operationGroupMasterRelation; //作業・カテゴリー関係データ CHK.operationGroupMasterRelation; //作業・カテゴリー関係データ
CHK.pushMessage; //コミュニケーションデータ CHK.pushMessage; //コミュニケーションデータ
CHK.pushMessageList;
CHK.scanResultCode; //スキャンしたRFID,バーコード CHK.scanResultCode; //スキャンしたRFID,バーコード
CHK.scanType; //スキャン種別(0:バーコード、1:RFID) CHK.scanType; //スキャン種別(0:バーコード、1:RFID)
...@@ -530,7 +531,7 @@ CHK.initReportApp = function (callback) { ...@@ -530,7 +531,7 @@ CHK.initReportApp = function (callback) {
// コミュニケーションデータJSONデータ // コミュニケーションデータJSONデータ
CHK.loadJson(CHK.jsonPath.pushMessageList, function (json) { CHK.loadJson(CHK.jsonPath.pushMessageList, function (json) {
CHK.pushMessageList = json;
}); });
} }
......
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