implement alert and confirm modal

abweb/common/html/confirmModal.html

+<button type="button" id="showConfirmModalButton" class="btn btn-sm btn-tertiary d-none" data-toggle="modal" data-target="#confirm-modal"></button>
 <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">

abweb/common/js/common.js

@@ -45,6 +45,97 @@ COMMON.closeLoading = function () {
 };
 
 /**
+ * show confirm modal with yes, no buttons
+ * @param {Object} data - Object with {title, message, confirmYes, confirmNo}
+ * @param {callback} confirmCallback - The callback that handles the confirm button clicked
+ */
+COMMON.showConfirmModal = function (data, confirmCallback) {
+    if (data) {
+        let title = '';
+        if (data.title) {
+            title = data.title;
+        }
+        $('#confirm-modal .modal-title').text(title);
+        let message = '';
+        if (data.message) {
+            message = data.message;
+        }
+        $('#confirm-modal #msgModel').text(message);
+        if (data.confirmYes) {
+            $('#confirm-modal #confirmYes').text(data.confirmYes);
+            $('#confirm-modal #confirmYes').removeClass('d-none');
+            $('#confirm-modal #confirmYes').off('click');//remove all old click handlers
+            $('#confirm-modal #confirmYes').click(function() {
+                $('#confirm-modal .close').click();
+                if (confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        } else {
+            $('#confirm-modal #confirmYes').addClass('d-none');
+        }
+        if (data.confirmNo) {
+            $('#confirm-modal #confirmNo').text(data.confirmNo);
+            $('#confirm-modal #confirmNo').removeClass('d-none');
+        } else {
+            $('#confirm-modal #confirmNo').addClass('d-none');
+        }
+    }
+    $('#showConfirmModalButton').click();
+};
+
+/**
+ * Show confirm modal with defaults: title, yes, no
+ * @param {string} messageCode 
+ * @param {callback} confirmCallback - The callback that handles the confirm button clicked
+ * @param {Object} options - Object with {title, message, confirmYes, confirmNo}
+ */
+COMMON.showConfirm = function (messageCode, confirmCallback, options = {}) {
+    const defaultParams = {
+        titleCode: 'confirmation',
+        confirmYesCode: 'confirmYes',
+        confirmNoCode: 'confirmNo'
+    }
+    const params = Object.assign(options, defaultParams);
+    let message = '';
+    if (messageCode) {
+        message = I18N.i18nText(messageCode);
+    } else if (params.message) {
+        message = params.message;
+    }
+    COMMON.showConfirmModal({
+        message: message,
+        title: I18N.i18nText(params.titleCode),
+        confirmYes: I18N.i18nText(params.confirmYesCode),
+        confirmNo: I18N.i18nText(params.confirmNoCode)
+    }, confirmCallback);
+};
+
+/**
+ * show alert message by confirm modal html
+ * @param {String} messageCode 
+ * @param {Object} options - Data Options {message, titleCode, confirmNoCode}
+ */
+COMMON.showAlert = function (messageCode, options = {}) {
+    const defaultParams = {
+        titleCode: 'confirmation',
+        confirmNoCode: 'confirmNo'
+    }
+    const params = Object.assign(options, defaultParams);
+    let message = '';
+    if (messageCode) {
+        message = I18N.i18nText(messageCode);
+    } else if (params.message) {
+        message = params.message;
+    }
+    COMMON.showConfirmModal({
+        message: message,
+        title: I18N.i18nText(params.titleCode),
+        confirmNo: I18N.i18nText(params.confirmNoCode)
+    });
+};
+
+/**
  * show alert
  *
  * @param {String} msgCode

abweb/common/json/lang/lang-en.json

@@ -117,5 +117,6 @@
 "reportForm": "Report",
 "periodicInspectionPeriod": "Periodic Inspection Period",
 "msgSendPushMessageSuccess":"we sent a push message",
-"error": "Error"
+"error": "Error",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file

abweb/common/json/lang/lang-ja.json

@@ -115,5 +115,6 @@
 "reportForm": "報告",
 "periodicInspectionPeriod": "定期点検期間",
 "msgSendPushMessageSuccess":"プッシュメッセージ送信しました。",
-"error": "エラー"
+"error": "エラー",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file

abweb/common/json/lang/lang-ko.json

@@ -114,5 +114,6 @@
 "reportForm": "보고서",
 "periodicInspectionPeriod": "정기점검기간",
 "msgSendPushMessageSuccess":"푸시메시지를 보냈습니다.",
-"error": "에러"
+"error": "에러",
+"msgSendPushMessageConfirm": "Do you want to send message?"
 }
\ No newline at end of file

abweb/html/sendMessage.html

@@ -91,6 +91,7 @@
 
     <!-- select template modal -->
     <div id="includeTemplateModal"></div>
+    <div id="includeConfirmModal"></div>
     <script type="text/javascript" src="../common/js/app.js"></script>
     <script src="../common/js/event.js?__UPDATEID__"></script>
 </body>

abweb/js/sendMessage/sendMessage.js

@@ -39,21 +39,21 @@ SendMessage.getCurrentSendType = function () {
 SendMessage.checkValidation = function () {
     const message = SendMessage.getCurrentMessageContent();
     if (!ValidationUtil.CheckRequiredForText(message)) {
-        alert(I18N.i18nText('msgContentRequired'));
+        COMMON.showAlert('msgContentRequired');
         return false;
     }
     if (!ValidationUtil.CheckMaxLengthForByte(message, SendMessage.contentMaxLength)) {
-        alert(COMMON.format(I18N.i18nText('msgContentInvalidLength'), SendMessage.contentMaxLength));
+        COMMON.showAlert(null, {message: COMMON.format(I18N.i18nText('msgContentInvalidLength'), SendMessage.contentMaxLength)});
         return false;
     }
     const operationId = SendMessage.getCurrentOperationId();
     if (!ValidationUtil.IsNumber(operationId)) {
-        alert(I18N.i18nText('msgOperationRequired'));
+        COMMON.showAlert('msgOperationRequired');
         return false;
     }
     const sendType = SendMessage.getCurrentSendType();
     if (!ValidationUtil.IsNumber(sendType)) {
-        alert(I18N.i18nText('msgSendTypeRequired'));
+        COMMON.showAlert('msgSendTypeRequired');
         return false;
     }
     return true;
@@ -69,7 +69,9 @@ SendMessage.onClickSend = function () {
     const message = SendMessage.getCurrentMessageContent();
     const operationId = SendMessage.getCurrentOperationId();
     const sendType = SendMessage.getCurrentSendType();
-    SendMessage.postMessage(message, operationId, sendType);
+    COMMON.showConfirm('msgSendPushMessageConfirm', function() {
+        SendMessage.postMessage(message, operationId, sendType);
+    });
 };
 
 /**
@@ -92,7 +94,7 @@ SendMessage.postMessage = function (message, operationId, sendType) {
         false,
         function (json) {
             COMMON.closeLoading();
-            alert(I18N.i18nText('msgSendPushMessageSuccess'));
+            COMMON.showAlert('msgSendPushMessageSuccess');
         },
         function () {
             console.log('SendMessage.postMessage error');
@@ -126,13 +128,14 @@ SendMessage.init = function () {
     //Check if user is logged in
     COMMON.checkAuth(false);
     TEMPLATE.loadHeader('#includedHeader');
+    TEMPLATE.loadConfirmModal('#includeConfirmModal');
     const navs = [
         {
             titleLang: 'dashboard',
             href: 'dashboard.html',
         },
         {
-            titleLang: 'sendMessageTitle',
+            titleLang: 'sendMessage',
         },
     ];
     TEMPLATE.loadMainNavsTitle('#includedMainTitle', 'sendMessage', navs, null);