implement apply dashboard settings json

abvw/html/dashboard.html

@@ -134,19 +134,19 @@
                     <tbody>
                         <tr>
                             <th class="fs-9 p-2 text-secondary multi-lang" data-msg="dashboardSettingNewReportTitle">新規報告</th>
-                            <td class="p-2"><div id="newReport" class="toggle ml-auto"><input type="checkbox" name="chk-new"></div></td>
+                            <td class="p-2"><div id="settingNewReport" data-key="newReport" class="toggle ml-auto"><input type="checkbox" name="chk-new"></div></td>
                         </tr>
                         <tr>
                             <th class="fs-9 p-2 text-secondary multi-lang" data-msg="dashboardSettingContinousWorkTitle">工程作業</th>
-                            <td class="p-2"><div id="continousWork" class="toggle ml-auto"><input type="checkbox" name="chk-proccess"></div></td>
+                            <td class="p-2"><div id="settingContinousWork" data-key="continousWork" class="toggle ml-auto"><input type="checkbox" name="chk-proccess"></div></td>
                         </tr>
                         <tr>
                             <th class="fs-9 p-2 text-secondary multi-lang" data-msg="dashboardSettingReportWarningTitle">警告を含む作業</th>
-                            <td class="p-2"><div id="reportWarning" class="toggle ml-auto"><input type="checkbox" name="chk-alert"></div></td>
+                            <td class="p-2"><div id="settingReportWarning" data-key="reportWarning" class="toggle ml-auto"><input type="checkbox" name="chk-alert"></div></td>
                         </tr>
                         <tr>
                             <th class="fs-9 p-2 text-secondary multi-lang" data-msg="dashboardSettingDashboardHomeTitle">ダッシュボードをホーム画面にする</th>
-                            <td class="p-2"><div id="dashboardHome" class="toggle ml-auto"><input type="checkbox" name="chk-home"></div></td>
+                            <td class="p-2"><div id="settingDashboardHome" data-key="dashboardHome" class="toggle ml-auto"><input type="checkbox" name="chk-home"></div></td>
                         </tr>
                     </tbody>
                 </table>

abvw/js/dashboardSetting/dashboard-setting.js

 var DashboardSetting = {};
-DashboardSetting.elementItems = [
-    { id: 'newReport', name: 'chk-new', enabled: true },
-    { id: 'continousWork', name: 'chk-proccess', enabled: true },
-    { id: 'reportWarning', name: 'chk-alert', enabled: true },
-    { id: 'dashboardHome', name: 'chk-home', enabled: false },
-];
+DashboardSetting.elementItems = {
+    newReport: { id: 'settingNewReport', name: 'chk-new', enabled: true },
+    continousWork: { id: 'settingContinousWork', name: 'chk-proccess', enabled: true },
+    reportWarning: { id: 'settingReportWarning', name: 'chk-alert', enabled: true },
+    dashboardHome: { id: 'settingDashboardHome', name: 'chk-home', enabled: false },
+};
 
 DashboardSetting.baseApiUrl = CONSTANT.URL.CMS.BASE + ClientData.userInfo_accountPath() + CONSTANT.URL.CMS.API.BASE + 'dashboardSetting/';
 DashboardSetting.saveSettingApiUrl = DashboardSetting.baseApiUrl + 'saveSetting';
 DashboardSetting.getSettingApiUrl = DashboardSetting.baseApiUrl + 'getAllSettingData';
 
-DashboardSetting.dummySettingJson = {
+DashboardSetting.defaultSettingJson = {
     newReport: 1,
     continousWork: 1,
     reportWarning: 1,
@@ -27,31 +27,35 @@ DashboardSetting.getSettingData = function (callback) {
         }
     }, function() {
         console.log('DashboardSetting.getSettingData error');
+        if (callback) {
+            callback(DashboardSetting.defaultSettingJson);
+        }
     });
 };
 
 DashboardSetting.applySettings = function (settings) {
-    DashboardSetting.elementItems.forEach(function (item) {
-        let enabled = settings[item.id];
-        if (typeof enabled !== 'undefined') {
-            item.enabled = enabled;
-            let itemElement = $('#' + item.id);
-            if (item.enabled) {
-                itemElement.addClass('checked');
-            } else {
-                itemElement.removeClass('checked');
+    for (const key in settings) {
+        const enabled = settings[key];
+        if (DashboardSetting.elementItems.hasOwnProperty(key)) {
+            const elementItem = DashboardSetting.elementItems[key];
+            elementItem.enabled = enabled;
+            let element = $('#' + elementItem.id);
+            if (element) {
+                if (enabled) {
+                    element.addClass('checked');
+                } else {
+                    element.removeClass('checked');
+                }
             }
         }
-    });
+    }
 };
 
-//CHK_DashboardSetting.displayItemsに設定を書き込む
 DashboardSetting.saveSetting = function (key, enabled) {
-    DashboardSetting.elementItems.forEach(function (item) {
-        if (item.id == key) {
-            item.enabled = enabled;
-        }
-    });
+    if (DashboardSetting.elementItems.hasOwnProperty(key)) {
+        const elementItem = DashboardSetting.elementItems[key];
+        elementItem.enabled = enabled;
+    }
     let param = {};
     param.sid = COMMON.getSid();
     param[key] = enabled;
@@ -61,16 +65,15 @@ DashboardSetting.saveSetting = function (key, enabled) {
 };
 
 //設定画面でクリックされてた時の処理
-//
 DashboardSetting.bindToggleClick = function () {
     $('.toggle').on('click', function () {
         $(this).toggleClass('checked');
-        // var id = $(this).attr('id');
-        // var enabled = false;
-        // if ($(this).hasClass('checked')) {
-        //     enabled = true;
-        // }
-        // DashboardSetting.saveSetting(id, enabled);
+        const key = $(this).attr('data-key');
+        var enabled = false;
+        if ($(this).hasClass('checked')) {
+            enabled = true;
+        }
+        DashboardSetting.saveSetting(key, enabled);
     });
 };