Skip to content

D
design
Commit 6e4fc5ac by NGUYEN HOANG SON
Options

implement dashboard items data, action

parent 25d81d19
Showing with 69 additions and 50 deletions
app/index.html
...@@ -180,56 +180,11 @@ ...@@ -180,56 +180,11 @@
<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 multi-lang" data-msg="pickupHeaderTitle">ピックアップ</h2> <h2 class="fs-8 font-weight-bold mt-4 pb-2 border-bottom text-dark multi-lang" data-msg="pickupHeaderTitle">ピックアップ</h2>
<div class="item-wrap"> <div class="item-wrap" id="pickupItems">
<div class="item">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_new.svg" alt="新規報告">
<div class="fs-8 multi-lang" data-msg="newRegistrationTitle">新規報告</div>
</a>
</div>
<div class="item">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_proccess.svg" alt="工程管理">
<div class="fs-8 multi-lang" data-msg="continousWorkTitle">工程管理</div>
<span class="count fs-7">30</span>
</a>
</div>
<div class="item">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_alert.svg" alt="警告を含む報告">
<div class="fs-8 multi-lang" data-msg="reportWarningTitle">警告を含む報告</div>
<span class="count fs-7">99+</span>
</a>
</div>
</div> </div>
<h2 class="fs-8 font-weight-bold mt-4 pb-2 border-bottom text-dark multi-lang" data-msg="communicationHeaderTitle">コミュニケーション</h2> <h2 class="fs-8 font-weight-bold mt-4 pb-2 border-bottom text-dark multi-lang" data-msg="communicationHeaderTitle">コミュニケーション</h2>
<div class="item-wrap"> <div class="item-wrap" id="communicationItems">
<div class="item">
<a href="message-list.html" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_message_lsit.svg" alt="メッセージ一覧">
<div class="fs-8 multi-lang" data-msg="messageListTitle">メッセージ一覧</div>
<span class="count fs-7">2</span>
</a>
</div>
<div class="item">
<a href="#" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_send_message.svg" alt="メッセージ送信">
<div class="fs-8 multi-lang" data-msg="sendMessageTitle">メッセージ送信</div>
</a>
</div>
<div class="item">
<a href="#" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_remote.svg" alt="遠隔支援">
<div class="fs-8 multi-lang" data-msg="distanceSupportTitle">遠隔支援</div>
</a>
</div>
<div class="item">
<a href="#" class="d-block text-dark text-decoration-none mb-1 p-3">
<img src="img/icon_chat.svg" alt="チャット">
<div class="fs-8 multi-lang" data-msg="chatTitle">チャット</div>
</a>
</div>
</div> </div>
</main> </main>
</section> </section>
...@@ -238,11 +193,11 @@ ...@@ -238,11 +193,11 @@
<footer class="fixed-bottom bg-light"> <footer class="fixed-bottom bg-light">
<nav class="d-flex justify-content-around"> <nav class="d-flex justify-content-around">
<a class="d-block w-100 text-center py-2 text-decoration-none text-secondary bottom-nav" onclick="clickBottomNav('dashboard', this);"> <a class="d-block w-100 text-center py-2 text-decoration-none text-secondary bottom-nav" onclick="CHK_Dashboard.clickBottomNav('dashboard', this);">
<img src="img/icon_dashboard_inactive.svg" data-inactive-src="img/icon_dashboard_inactive.svg" data-src="img/icon_dashboard.svg" alt="ダッシュボード" class="p-1"> <img src="img/icon_dashboard_inactive.svg" data-inactive-src="img/icon_dashboard_inactive.svg" data-src="img/icon_dashboard.svg" alt="ダッシュボード" class="p-1">
<div class="fs-7 multi-lang" data-msg="buttonDashboard">ダッシュボード</div> <div class="fs-7 multi-lang" data-msg="buttonDashboard">ダッシュボード</div>
</a> </a>
<a class="d-block w-100 text-center py-2 text-decoration-none text-primary bottom-nav" onclick="clickBottomNav('operationList', this);"> <a class="d-block w-100 text-center py-2 text-decoration-none text-primary bottom-nav" onclick="CHK_Dashboard.clickBottomNav('operationList', this);">
<i class="fas fa-tasks fs-14 p-1"></i> <i class="fas fa-tasks fs-14 p-1"></i>
<div class="fs-7 multi-lang" data-msg="buttonOperationList">作業一覧</div> <div class="fs-7 multi-lang" data-msg="buttonOperationList">作業一覧</div>
</a> </a>
...@@ -280,7 +235,67 @@ ...@@ -280,7 +235,67 @@
</body> </body>
<script> <script>
function clickBottomNav(pageId, elm) {
var CHK_Dashboard = {};
CHK_Dashboard.pickupItems = [
{id: 'newReport', href: 'pickup.html', count: 0, enabled: true, img: {src: 'img/icon_message_lsit.svg'}, msg: 'newRegistrationTitle'},
{id: 'continousWork', href: 'pickup.html', count: 88, enabled: true, img: {src: 'img/icon_proccess.svg'}, msg: 'continousWorkTitle'},
{id: 'reportWarning', href: 'pickup.html', count: 0, enabled: true, img: {src: 'img/icon_alert.svg'}, msg: 'reportWarningTitle'},
];
CHK_Dashboard.communicationItems = [
{id: 'messageList', href: 'message-list.html', count: 77, enabled: true, img: {src: 'img/icon_new.svg'}, msg: 'messageListTitle'},
{id: 'sendMessage', href: '', count: 0, enabled: true, img: {src: 'img/icon_send_message.svg'}, msg: 'sendMessageTitle'},
{id: 'distanceSupport', href: '', count: 0, enabled: true, img: {src: 'img/icon_remote.svg'}, msg: 'distanceSupportTitle'},
{id: 'chat', href: '', count: 0, enabled: true, img: {src: 'img/icon_chat.svg'}, msg: 'chatTitle'},
];
CHK_Dashboard.initPickups = function() {
$("#pickupItems").empty();
CHK_Dashboard.pickupItems.forEach(function(item) {
if (item.enabled == true) {
var html = CHK_Dashboard.initHtmlItem(item);
$("#pickupItems").append(html);
}
});
}
CHK_Dashboard.initCommunications = function() {
$("#communicationItems").empty();
CHK_Dashboard.communicationItems.forEach(function(item) {
if (item.enabled == true) {
var html = CHK_Dashboard.initHtmlItem(item);
$("#communicationItems").append(html);
}
});
}
CHK_Dashboard.initHtmlItem = function(item) {
var countText = '' + item.count;
if (item.count >= 100) {
countText = '99+';
}
var countDClass = '';
if (typeof item.count == 'undefined' || item.count < 1) {
countDClass = ' d-none';
}
var countSpan = '<span class="count fs-7' + countDClass + '">' + countText + '</span>';
var html = $('<div class="item" id="' + item.id + '">'
+ '<a href="' + item.href + '" class="d-block text-dark text-decoration-none mb-1 p-3">'
+ '<img src="' + item.img.src + '">'
+ '<div class="fs-8 multi-lang" data-msg="' + item.msg + '">' + getMsg(item.msg) + '</div>'
+ countSpan
+ '</a>'
+ '</div>');
return html;
}
CHK_Dashboard.init = function() {
console.log("CHK_Dashboard.init");
CHK_Dashboard.initPickups();
CHK_Dashboard.initCommunications();
}
CHK_Dashboard.clickBottomNav = function(pageId, elm) {
var i, pages, navs; var i, pages, navs;
pages = document.getElementsByClassName("page-content"); pages = document.getElementsByClassName("page-content");
for (i = 0; i < pages.length; i++) { for (i = 0; i < pages.length; i++) {
...@@ -305,6 +320,9 @@ ...@@ -305,6 +320,9 @@
if (img && img.getAttribute("data-src")) { if (img && img.getAttribute("data-src")) {
img.src = img.getAttribute("data-src"); img.src = img.getAttribute("data-src");
} }
if (pageId == 'dashboard') {
CHK_Dashboard.init();
}
} }
</script> </script>
</html> </html>
\ No newline at end of file
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