feat: Error alert improvement (#96)

* Remove anoying swal error and change to toast * refactor: code adjustment * chore: bump app version * refactor: remove unused import * refactor: remove unused comment * feat: improve display on error * feat: improve error messaging * feat: update error message * refactor: increase toast duration * refactor: remove unused keepalive ci --------- Co-authored-by: Ferdina Kusumah <[email protected]> Co-authored-by: novalagung <[email protected]>
novalagung · Jul 19, 2024 · 9dc68ba · 9dc68ba
1 parent a8f1012
commit 9dc68ba
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 46 deletions.
diff --git a/.github/workflows/keep-alive.yml b/.github/workflows/keep-alive.yml
diff --git a/extension/assets/3rd-parties/toast/toast.min.css b/extension/assets/3rd-parties/toast/toast.min.css
diff --git a/extension/assets/3rd-parties/toast/toast.min.js b/extension/assets/3rd-parties/toast/toast.min.js
diff --git a/extension/assets/internal/scripts/app.js b/extension/assets/internal/scripts/app.js
@@ -82,10 +82,12 @@
         // =========== PRAYER TIME
 
         activePrayerTimeDurationInMinute: 10,
+        isLocationAndPrayerTimeError: false,
 
         // render player time placeholder.
         // used on the screen during loading data process
         renderPrayerTimePlaceholder() {
+            this.isLocationAndPrayerTimeError = false
             $('.location .text').text('Loading ...')
             // $(`.prayer-time tbody`).css('visibility', 'hidden')
 
@@ -97,7 +99,26 @@
             })
 
             // $(`.prayer-time tbody tr.prayer-time-row:eq(0)`).css('visibility', 'visible')
-            $(`.prayer-time tbody tr.prayer-time-row:eq(0) td:eq(0)`).html('<span class="placeholder">Loading ...</span>')
+            $(`.prayer-time tbody tr.prayer-time-row:eq(0) td:eq(0)`).html('<span class="placeholder">&nbsp;Loading ...</span>')
+
+            $(`.prayer-time tbody tr.prayer-time-row.active`).removeClass('active')
+
+            $('.prayer-time tbody tr.remaining-time td').html('');
+            $('.prayer-time tbody tr.remaining-time').hide();
+        },
+
+        // render player time error.
+        renderPrayerTimeError(err) {
+            this.isLocationAndPrayerTimeError = true
+            $('.location .text').text('Error ❌')
+
+            Array(6).fill(0).forEach((each, i) => {
+                $(`.prayer-time tbody tr.prayer-time-row:eq(${i}) td:eq(0)`).html('')
+                $(`.prayer-time tbody tr.prayer-time-row:eq(${i}) td:eq(1)`).html('')
+                $(`.prayer-time tbody tr.prayer-time-row:eq(${i}) td:eq(2)`).html('')
+            })
+
+            $(`.prayer-time tbody tr.prayer-time-row:eq(0) td:eq(0)`).html(`<span class="placeholder">&nbsp;Error ❌</span>`)
         },
 
         // get automatic prayer time
@@ -238,6 +259,10 @@
             let isAlarmEverSet = false
 
             const doRenderPrayerTime = () => {
+                if (this.isLocationAndPrayerTimeError) {
+                    return
+                }
+
                 const hmFormatter = (str) => parseInt(str.slice(0, 5).replace(':', ''), 10)
                 const nowHM = parseInt(Utility.now().add(-1 * this.activePrayerTimeDurationInMinute, 'minutes').format('HHmm'), 10)
                 const fajrHM = hmFormatter(schedule.Fajr)
@@ -460,7 +485,7 @@
                     }, Constant.app.updateBackgroundDelayDuration)
                 }
                 preloader.onerror = (err) => {
-                        this.nextSelectedBackground = Utility.randomFromArray('background', data.content, this.selectedBackground)
+                    this.nextSelectedBackground = Utility.randomFromArray('background', data.content, this.selectedBackground)
                     preloader.src = doGetBackgroundURL(this.nextSelectedBackground)
                 }
             }
@@ -711,15 +736,19 @@
                     this.renderPrayerTime.call(this, schedule)
                 }
             } catch (err) {
+                if (err instanceof Error) {
+                    err = err.message
+                }
                 Utility.error(err)
-                Swal.fire({
-                    type: 'error',
-                    title: I18n.getText('promptErrorFailToGetDataTitle'),
-                    html: err.message,
-                    confirmButtonText: 'OK',
-                    showConfirmButton: true,
-                    allowOutsideClick: true
-                });
+                this.renderPrayerTimeError.call(this, err)
+                $.toast({
+                    heading: 'Error',
+                    text: err,
+                    showHideTransition: 'fade',
+                    icon: 'error',
+                    position: 'top-center',
+                    hideAfter: 10000
+                })
             }
         },
 

diff --git a/extension/assets/internal/scripts/i18n.js b/extension/assets/internal/scripts/i18n.js
@@ -248,15 +248,15 @@ const I18n = {
             'zh-cn': `almost|距离 $1 祈祷还有 10 分钟|在 $2`
         },
 
-        promptErrorFailToGetDataTitle: {
-            ar: 'مشكلة في جلب البيانات',
-            en: 'Error fetching data',
-            ru: 'Ошибка при получении данных',
-            bn: 'ডেটা আনতে সমস্যা হচ্ছে', 
-            hi: 'डेटा लाने में परेशानी हो रही है',
-            id: 'Error koneksi pengambilan data',
-            'zh-tw': '取得資料錯誤',
-            'zh-cn': '获取数据错误'
+        promptErrorFailToGetLocationInfo: {
+            ar: 'تم حظر الاكتشاف التلقائي لخطأ الموقع بسبب "إذن الموقع". يرجى التأكد من تمكينه على المتصفح الخاص بك',
+            en: 'Auto-detect location error due to "location permission" is blocked. Please ensure to enable it on your browser',
+            ru: 'Ошибка автоматического определения местоположения из-за «разрешения на определение местоположения» заблокирована. Обязательно включите его в вашем браузере',
+            bn: '"অবস্থান অনুমতি" এর কারণে স্বয়ংক্রিয়ভাবে সনাক্তকরণের অবস্থানের ত্রুটি ব্লক করা হয়েছে। আপনার ব্রাউজারে এটি সক্ষম করা নিশ্চিত করুন', 
+            hi: '"स्थान अनुमति" के कारण स्थान का स्वतः पता लगाने वाली त्रुटि अवरुद्ध है। कृपया अपने ब्राउज़र पर इसे सक्षम करना सुनिश्चित करें',
+            id: 'Terjadi error saat pengambilan informasi lokasi. Pastikan untuk membolehkan akses "location" di browser anda',
+            'zh-tw': '由於“位置權限”被阻止而導致自動檢測位置錯誤。請確保在您的瀏覽器上啟用它',
+            'zh-cn': '由于“位置权限”被阻止而导致自动检测位置错误。请确保在您的浏览器上启用它'
         },
         promptErrorFailToGetPrayerTimesMessage: {
             ar: 'تعذر الحصول على مواقيت الصلاة بسبب خطأ. يرجى التأكد من توفر اتصال بالإنترنت ثم قم بتحديث الصفحة',

diff --git a/extension/assets/internal/scripts/utility.js b/extension/assets/internal/scripts/utility.js
@@ -44,14 +44,7 @@ const Utility = {
                 resolve(coordinateCache)
             } else {
                 localStorage.removeItem('data-coordinate-cache')
-                reject(new Error(`
-                    <br />Gagal mendeteksi lokasi user secara otomatis.
-                    <br />
-                    <br />Pastikan "location permission" untuk ekstensi
-                    <br />Muslim Board adalah "allowed" dan ada akses internet.
-                    <br />
-                    <br />Atau silakan gunakan fitur atur manual pilihan lokasi.
-                `))
+                reject(new Error(I18n.getText('promptErrorFailToGetLocationInfo')))
             }
         }
 

diff --git a/extension/index.html b/extension/index.html
@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="assets/3rd-parties/normalize/normalize.min.css" />
     <link rel="stylesheet" href="assets/3rd-parties/sweetalert2/sweetalert2.min.css">
+    <link rel="stylesheet" href="assets/3rd-parties/toast/toast.min.css">
     <link rel="stylesheet" href="assets/3rd-parties/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="assets/3rd-parties/tooltipster/tooltipster.main.min.css" />
     <link rel="stylesheet" href="assets/3rd-parties/tooltipster/tooltipster.custom-theme.css" />
@@ -107,7 +108,7 @@
                         </tr>
                         <tr class="prayer-time-row">
                             <!-- Isya -->
-                            <td>'</td>
+                            <td></td>
                             <td data-when='isya'>18:58</td>
                             <td>WIB</td>
                         </tr>
@@ -188,6 +189,7 @@
     <script src="assets/3rd-parties/moment/moment-hijri.min.js"></script>
     <script src="assets/3rd-parties/moment/moment-timezone-with-data-1970-2030.min.js"></script>
     <script src="assets/3rd-parties/sweetalert2/sweetalert2.all.min.js"></script>
+    <script src="assets/3rd-parties/toast/toast.min.js"></script>
     <script src="assets/3rd-parties/tooltipster/tooltipster.bundle.min.js"></script>
     <script src="assets/3rd-parties/draggable/draggable.bundle.min.js"></script>
     <script src="assets/internal/scripts/utility.js"></script>

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Muslim Board",
   "short_name": "muslimboard",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "description": "Personal Dashboard for Muslim",
   "chrome_url_overrides": {
     "newtab": "index.html"