Skip to content

C
check
Commit 4126f0f5 by NGO THI HONG
Options

# jsで処理、論理を作成 ( Process with js, create logic Top Screen )

parent 761f1355
Showing with 77 additions and 97 deletions
abvw/html/dashboard.html
...@@ -43,75 +43,17 @@ ...@@ -43,75 +43,17 @@
</div> </div>
<!-- sub title --> <!-- sub title -->
<h2 class="fs-8 font-weight-bold">ピックアップ</h2> <h2 class="fs-8 font-weight-bold" id="#pickupHeader">ピックアップ</h2>
<!-- card --> <!-- card -->
<ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2"> <ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2" id ="pickupItems" >
<li class="card mb-2">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_new.svg" alt="新規報告" class="img-fluid">
</div>
<div class="fs-10">新規報告</div>
</a>
</li>
<li class="card mb-2 position-relative">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_proccess.svg" alt="工程管理" class="img-fluid">
</div>
<div class="fs-10">工程管理</div>
<span class="fs-8 circle-tag-danger">10</span>
</a>
</li>
<li class="card mb-2">
<a href="pickup.html" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_alert.svg" alt="警告を含む報告" class="img-fluid">
</div>
<div class="fs-10">警告を含む報告</div>
</a>
</li>
</ul> </ul>
<!-- sub title --> <!-- sub title -->
<h2 class="fs-8 font-weight-bold">コミュニケーション</h2> <h2 class="fs-8 font-weight-bold">コミュニケーション</h2>
<!-- card --> <!-- card -->
<ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2"> <ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2" id="communicationItems">
<li class="card mb-2 position-relative">
<a href="message-list.html" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_message_list.svg" alt="メッセージ一覧" class="img-fluid">
</div>
<div class="fs-10">メッセージ一覧</div>
<span class="fs-8 circle-tag-danger">999+</span>
</a>
</li>
<li class="card mb-2">
<a href="send-message.html" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_send_message.svg" alt="メッセージ送信" class="img-fluid">
</div>
<div class="fs-10">メッセージ送信</div>
</a>
</li>
<li class="card mb-2">
<a href="#" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_remote.svg" alt="遠隔支援" class="img-fluid">
</div>
<div class="fs-10">遠隔支援</div>
</a>
</li>
<li class="card mb-2">
<a href="#" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">
<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">
<img src="../common/img/dahboard_icon_chat.svg" alt="チャット" class="img-fluid">
</div>
<div class="fs-10">チャット</div>
</a>
</li>
</ul> </ul>
</div> </div>
</main> </main>
......
abvw/js/dashboard/dashboard.js
var DASHBOARD = {}; var DASHBOARD = {};
DASHBOARD.pickupItems = [ DASHBOARD.pickupItems = [
{id: 'newReport', href: "javascript:DASHBOARD.goPickup('newReport');", count: 0, enabled: true, img: {src: 'img/icon_new.svg'}, msg: 'newRegistrationTitle'}, {id: 'newReport', href: "javascript:DASHBOARD.goPickup('newReport');", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_new.svg'}, msg: 'newRegistrationTitle', defaultMessage:'New report'},
{id: 'continousWork', href: "javascript:DASHBOARD.goPickup('continousWork');", count: 0, enabled: true, img: {src: 'img/icon_proccess.svg'}, msg: 'continousWorkTitle'}, {id: 'continousWork', href: "javascript:DASHBOARD.goPickup('continousWork');", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_proccess.svg'}, msg: 'continousWorkTitle' , defaultMessage:'Continuous Work'},
{id: 'reportWarning', href: "javascript:DASHBOARD.goPickup('reportWarning');", count: 0, enabled: true, img: {src: 'img/icon_alert.svg'}, msg: 'reportWarningTitle'}, {id: 'reportWarning', href: "javascript:DASHBOARD.goPickup('reportWarning');", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_alert.svg'}, msg: 'reportWarningTitle' , defaultMessage:'Warning report'},
]; ];
DASHBOARD.communicationItems = [ DASHBOARD.communicationItems = [
{id: 'messageList', href: "javascript:DASHBOARD.goMessageList();", count: 0, enabled: true, img: {src: 'img/icon_message_lsit.svg'}, msg: 'messageListTitle'}, {id: 'messageList', href: "javascript:DASHBOARD.goMessageList();", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_message_list.svg'}, msg: 'messageListTitle' , defaultMessage:'Message list'},
{id: 'sendMessage', href: "javascript:DASHBOARD.goSendMessage();", count: 0, enabled: true, img: {src: 'img/icon_send_message.svg'}, msg: 'sendMessageTitle'}, {id: 'sendMessage', href: "javascript:DASHBOARD.goSendMessage();", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_send_message.svg'}, msg: 'sendMessageTitle' , defaultMessage:'Message'},
{id: 'distanceSupport', href: "javascript:DASHBOARD.goDistanceSupport();", count: 0, enabled: true, img: {src: 'img/icon_remote.svg'}, msg: 'distanceSupportTitle'}, {id: 'distanceSupport', href: "javascript:DASHBOARD.goDistanceSupport();", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_remote.svg'}, msg: 'distanceSupportTitle' , defaultMessage:'Distance Support'},
{id: 'chat', href: "javascript:DASHBOARD.goChat();", count: 0, enabled: false, img: {src: 'img/icon_chat.svg'}, msg: 'chatTitle'}, {id: 'chat', href: "javascript:DASHBOARD.goChat();", count: 0, enabled: true, img: {src: '../common/img/dahboard_icon_chat.svg'}, msg: 'chatTitle' , defaultMessage:'Chat'},
]; ];
DASHBOARD.defaultDashboard = {
newReport: 12,
continousWork: 100,
reportWarning: 13,
pushMesage: 7,
}
DASHBOARD.baseApiUrl = CONSTANT.URL.CMS.BASE + ClientData.userInfo_accountPath() + CONSTANT.URL.CMS.API.BASE + 'topScreen/';
DASHBOARD.getDataApiUrl = DashboardSetting.baseApiUrl + 'getAllData';
// Call api get data
DASHBOARD.getDashboardData = function (callback) {
let param = {
sid: COMMON.getSid(),
};
COMMON.cmsAjax(DASHBOARD.getDataApiUrl, param, false, function (json) {
if (callback) {
callback(json);
}
}, function() {
console.log('DASHBOARD.getData error');
if (callback) {
callback(DASHBOARD.defaultDashboard);
}
});
};
//CHK_Dashboard.pickupItemsに設定した情報をhtmlに表示する //CHK_Dashboard.pickupItemsに設定した情報をhtmlに表示する
DASHBOARD.initPickups = function() { DASHBOARD.initPickups = function() {
$("#pickupItems").empty(); $("#pickupItems").empty();
DASHBOARD.pickupItems.forEach(function(item) { DASHBOARD.pickupItems.forEach(function(item) {
if (item.enabled == true) { if (item.enabled == true ) {
var html = DASHBOARD.initHtmlItem(item); var html = DASHBOARD.initHtmlItem(item);
$("#pickupItems").append(html); $("#pickupItems").append(html);
} }
...@@ -47,58 +77,60 @@ DASHBOARD.initHtmlItem = function(item) { ...@@ -47,58 +77,60 @@ DASHBOARD.initHtmlItem = function(item) {
countText = '99+'; countText = '99+';
} }
var countDClass = ''; var countDClass = '';
if (typeof item.count == 'undefined' || item.count < 1) { var countSpan = ''
countDClass = ' d-none'; if (typeof item.count != 'undefined' && item.count > 0) {
countDClass = ' ';
countSpan = '<span class="fs-8 circle-tag-danger' + countDClass + '">' + countText + '</span>';
} }
var countSpan = '<span class="count fs-7' + countDClass + '">' + countText + '</span>'; var html = $('<li class="card mb-2 position-relative" id="' + item.id + '">'
var html = $('<div class="item" id="' + item.id + '">' + '<a href="' + item.href + '" class="d-block text-dark text-decoration-none mb-1 p-3 text-center">'
+ '<a href="' + item.href + '" class="d-block text-dark text-decoration-none mb-1 p-3">' + '<div class="bg-lightblue p-2 d-inline-block rounded-circle mb-3">'
+ '<img src="' + item.img.src + '">' + '<img src="' + item.img.src + '" alt="' + DASHBOARD.getMsg(item.msg, item.defaultMessage) +'" class="img-fluid"> </div>'
+ '<div class="fs-8 multi-lang" data-msg="' + item.msg + '">' + getMsg(item.msg) + '</div>' + '<div class="fs-10 multi-lang" data-msg="' + item.msg + '">' + DASHBOARD.getMsg(item.msg , item.defaultMessage) + '</div>'
+ countSpan + countSpan
+ '</a>' + '</a>'
+ '</div>'); + '</li>');
return html; return html;
} }
//ダッシュボード画面の初期表示 //ダッシュボード画面の初期表示
DASHBOARD.init = function() { DASHBOARD.init = function() {
DASHBOARD.updateDataPickups(); DashboardSetting.getSettingData(function (settings) {
DASHBOARD.initPickups(); DASHBOARD.getDashboardData(function (dataDashboard) {
DASHBOARD.updateDataCommunications(); DASHBOARD.updateDataPickups(settings, dataDashboard);
DASHBOARD.initCommunications(); DASHBOARD.initPickups();
DASHBOARD.updateDataCommunications(dataDashboard);
DASHBOARD.initCommunications();
});
});
} }
//変数として設定しているガジェットに初期表示で取得したデータを設定 //変数として設定しているガジェットに初期表示で取得したデータを設定
DASHBOARD.updateDataPickups = function() { DASHBOARD.updateDataPickups = function(settings, dataDashboard) {
DASHBOARD.pickupItems.forEach(function(item) { DASHBOARD.pickupItems.forEach(function(item) {
let enabled = CHK.dashboardSetting[item.id]; let enabled = settings[item.id];
if (enabled == true || enabled == false) { if (enabled == true || enabled == false) {
item.enabled = enabled; item.enabled = enabled;
} }
item.count = 0; item.count = 0;
if (CHK.dashboardBatch[item.id]) { if (dataDashboard[item.id]) {
item.count = CHK.dashboardBatch[item.id]; item.count = dataDashboard[item.id];
} }
}); });
} }
//変数として設定しているコミュニケーションに初期表示で取得したデータを設定 //変数として設定しているコミュニケーションに初期表示で取得したデータを設定
DASHBOARD.updateDataCommunications = function() { DASHBOARD.updateDataCommunications = function(dataDashboard) {
DASHBOARD.communicationItems.forEach(function(item) { DASHBOARD.communicationItems.forEach(function(item) {
if (item.id == 'messageList') { if (item.id == 'messageList') {
item.count = 0; item.count = 0;
if (typeof CHK.pushMessageList !== 'undefined') { if (dataDashboard['pushMesage']) {
//読んでいないメッセージがあればカウントを +1 item.count = dataDashboard['pushMesage'];
CHK.pushMessageList.forEach(function(message) { }
if (!message.readingFlg) { }
item.count += 1; // else if (item.id == 'chat') {
} // item.enabled = CHK.isChat;
}); // }
}
} else if (item.id == 'chat') {
item.enabled = CHK.isChat;
}
}); });
} }
...@@ -110,4 +142,9 @@ DASHBOARD.goPickup = function(pickupId) { ...@@ -110,4 +142,9 @@ DASHBOARD.goPickup = function(pickupId) {
//コミュニケーション画面に移動 //コミュニケーション画面に移動
DASHBOARD.goMessageList = function() { DASHBOARD.goMessageList = function() {
CHK.goUrlWithCurrentParams('message-list.html', {}); CHK.goUrlWithCurrentParams('message-list.html', {});
}
//コミュニケーション画面に移動
DASHBOARD.getMsg = function(message, defaultMessage) {
return defaultMessage;
} }
\ 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