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

abvw/html/dashboard.html

@@ -43,75 +43,17 @@
             </div>
             
             <!-- sub title -->
-            <h2 class="fs-8 font-weight-bold">ピックアップ</h2>
+            <h2 class="fs-8 font-weight-bold" id="#pickupHeader">ピックアップ</h2>
 
             <!-- card -->
-            <ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2">
-                <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 class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2" id ="pickupItems" >
             </ul>
 
             <!-- sub title -->
             <h2 class="fs-8 font-weight-bold">コミュニケーション</h2>
 
             <!-- card -->
-            <ul class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2">
-                <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 class="dashboard-menu p-0 mt-3 d-grid col-gap-10 grid-col-md-4 grid-col-2" id="communicationItems">
             </ul>
         </div>
     </main>

abvw/js/dashboard/dashboard.js

 var DASHBOARD = {};
 
 DASHBOARD.pickupItems = [
-    {id: 'newReport', href: "javascript:DASHBOARD.goPickup('newReport');", count: 0, enabled: true, img: {src: 'img/icon_new.svg'}, msg: 'newRegistrationTitle'},
-    {id: 'continousWork', href: "javascript:DASHBOARD.goPickup('continousWork');", count: 0, enabled: true, img: {src: 'img/icon_proccess.svg'}, msg: 'continousWorkTitle'},
-    {id: 'reportWarning', href: "javascript:DASHBOARD.goPickup('reportWarning');", count: 0, enabled: true, img: {src: 'img/icon_alert.svg'}, msg: 'reportWarningTitle'},
+    {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: '../common/img/dahboard_icon_proccess.svg'}, msg: 'continousWorkTitle' , defaultMessage:'Continuous Work'},
+    {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 = [
-    {id: 'messageList', href: "javascript:DASHBOARD.goMessageList();", count: 0, enabled: true, img: {src: 'img/icon_message_lsit.svg'}, msg: 'messageListTitle'},
-    {id: 'sendMessage', href: "javascript:DASHBOARD.goSendMessage();", count: 0, enabled: true, img: {src: 'img/icon_send_message.svg'}, msg: 'sendMessageTitle'},
-    {id: 'distanceSupport', href: "javascript:DASHBOARD.goDistanceSupport();", count: 0, enabled: true, img: {src: 'img/icon_remote.svg'}, msg: 'distanceSupportTitle'},
-    {id: 'chat', href: "javascript:DASHBOARD.goChat();", count: 0, enabled: false, img: {src: 'img/icon_chat.svg'}, msg: 'chatTitle'},
+    {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: '../common/img/dahboard_icon_send_message.svg'}, msg: 'sendMessageTitle' , defaultMessage:'Message'},
+    {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: 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に表示する
 DASHBOARD.initPickups = function() {
     $("#pickupItems").empty();
     DASHBOARD.pickupItems.forEach(function(item) {
-        if (item.enabled == true) {
+        if (item.enabled == true  ) {
             var html = DASHBOARD.initHtmlItem(item);
             $("#pickupItems").append(html);
         }
@@ -47,58 +77,60 @@ DASHBOARD.initHtmlItem = function(item) {
         countText = '99+';
     }
     var countDClass = '';
-    if (typeof item.count == 'undefined' || item.count < 1) {
-        countDClass = ' d-none';
+    var countSpan = ''
+    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 = $('<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>'
+    var html = $('<li class="card mb-2 position-relative" id="' + item.id + '">'
+                + '<a href="' + item.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="' + item.img.src + '" alt="' +  DASHBOARD.getMsg(item.msg, item.defaultMessage) +'" class="img-fluid"> </div>'
+                + '<div class="fs-10 multi-lang" data-msg="' + item.msg + '">' + DASHBOARD.getMsg(item.msg , item.defaultMessage) + '</div>'
                 + countSpan
                 + '</a>'
-                + '</div>');
+                + '</li>');
     return html;
 }
 
 //ダッシュボード画面の初期表示
 DASHBOARD.init = function() {
-    DASHBOARD.updateDataPickups();
+    DashboardSetting.getSettingData(function (settings) {
+        DASHBOARD.getDashboardData(function (dataDashboard) {
+            DASHBOARD.updateDataPickups(settings, dataDashboard);
             DASHBOARD.initPickups();
-    DASHBOARD.updateDataCommunications();
+            DASHBOARD.updateDataCommunications(dataDashboard);
             DASHBOARD.initCommunications();
+        });
+    });  
 }
 
 //変数として設定しているガジェットに初期表示で取得したデータを設定
-DASHBOARD.updateDataPickups = function() {
+DASHBOARD.updateDataPickups = function(settings, dataDashboard) {
     DASHBOARD.pickupItems.forEach(function(item) {
-        let enabled = CHK.dashboardSetting[item.id];
+        let enabled = settings[item.id];
         if (enabled == true || enabled == false) {
             item.enabled = enabled;
         }
         item.count = 0;
-        if (CHK.dashboardBatch[item.id]) {
-            item.count = CHK.dashboardBatch[item.id];
+        if (dataDashboard[item.id]) {
+            item.count = dataDashboard[item.id];
         }
     });
 }
 
 //変数として設定しているコミュニケーションに初期表示で取得したデータを設定
-DASHBOARD.updateDataCommunications = function() {
+DASHBOARD.updateDataCommunications = function(dataDashboard) {
     DASHBOARD.communicationItems.forEach(function(item) {
         if (item.id == 'messageList') {
             item.count = 0;
-            if (typeof CHK.pushMessageList !== 'undefined') {
-                //読んでいないメッセージがあればカウントを +1
-                CHK.pushMessageList.forEach(function(message) {
-                    if (!message.readingFlg) {
-                        item.count += 1;
+            if (dataDashboard['pushMesage']) {
+                item.count = dataDashboard['pushMesage'];
             } 
-                });
-            }
-        } else if (item.id == 'chat') {
-            item.enabled = CHK.isChat;
         } 
+        // else if (item.id == 'chat') {
+        //     item.enabled = CHK.isChat;
+        // }
     });
 }
 
@@ -111,3 +143,8 @@ DASHBOARD.goPickup = function(pickupId) {
 DASHBOARD.goMessageList = function() {
     CHK.goUrlWithCurrentParams('message-list.html', {});
 }
+
+//コミュニケーション画面に移動
+DASHBOARD.getMsg = function(message, defaultMessage) {
+    return defaultMessage;
+}
\ No newline at end of file