From 66dcb4ee98a0c4b2756223773815bf59738fe00e Mon Sep 17 00:00:00 2001
From: dewanakl <dewanakretarta29@gmail.com>
Date: Sat, 19 Oct 2024 12:52:04 +0700
Subject: [PATCH] feat: add offline alert

---
 dashboard.html  |  12 ++-
 index.html      |   9 +++
 js/app.js       |   2 +
 js/comment.js   |  13 ++--
 js/dashboard.js |   2 +
 js/guest.js     |   7 +-
 js/offline.js   |  70 +++++++++++++++++
 js/progress.js  |   2 +-
 js/request.js   |   6 +-
 js/theme.js     | 200 ++++++++++++++++++++++++++++--------------------
 10 files changed, 223 insertions(+), 100 deletions(-)
 create mode 100644 js/offline.js

diff --git a/dashboard.html b/dashboard.html
index 916e40b9..01862bb7 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -344,9 +344,6 @@ <h6 class="fw-bold m-0 p-0" id="count-like">
 
                         <div class="p-3 bg-theme-light mb-4 rounded-4 shadow">
                             <p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-heart me-1"></i>Project</p>
-                            <p class="mx-0 mt-0 mb-1 p-0">
-                                This project is built with <i class="fa-solid fa-heart text-danger"></i> by <a target="_blank" href="https://github.com/dewanakl/undangan">dewanakl</a>
-                            </p>
                             <p class="m-0 p-0">
                                 If you want to support me, consider <a target="_blank" href="https://saweria.co/dewanakl">buying me a coffee</a><i class="fa-solid fa-mug-hot ms-1"></i>
                             </p>
@@ -357,6 +354,15 @@ <h6 class="fw-bold m-0 p-0" id="count-like">
         </div>
     </main>
 
+    <!-- Offline -->
+    <div class="fixed-top" id="offline-mode" style="opacity: 0; z-index: 1057;">
+        <div class="d-flex justify-content-center mx-auto">
+            <div class="d-flex justify-content-center align-items-center rounded-pill my-2 bg-danger shadow">
+                <small class="text-center py-1 px-2 mx-1 text-white" style="font-size: 0.8rem;"></small>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal login -->
     <div class="modal fade" id="loginModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
diff --git a/index.html b/index.html
index 129f374b..a6c6594b 100644
--- a/index.html
+++ b/index.html
@@ -591,6 +591,15 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
         </div>
     </div>
 
+    <!-- Offline -->
+    <div class="fixed-top" id="offline-mode" style="opacity: 0; z-index: 1057;">
+        <div class="d-flex justify-content-center mx-auto">
+            <div class="d-flex justify-content-center align-items-center rounded-pill my-2 bg-danger shadow">
+                <small class="text-center py-1 px-2 mx-1 text-white" style="font-size: 0.8rem;"></small>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal Image -->
     <div class="modal fade" id="modal-image" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered modal-xl">
diff --git a/js/app.js b/js/app.js
index b85c7a38..c4bb1c89 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,6 +3,7 @@ import { like } from './like.js';
 import { guest } from './guest.js';
 import { theme } from './theme.js';
 import { audio } from './audio.js';
+import { offline } from './offline.js';
 import { comment } from './comment.js';
 import { progress } from './progress.js';
 import { pagination } from './pagination.js';
@@ -13,6 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
     pagination.init();
 
     guest.init();
+    offline.init();
     progress.init();
     window.AOS.init();
 
diff --git a/js/comment.js b/js/comment.js
index ba2ac558..c3df0967 100644
--- a/js/comment.js
+++ b/js/comment.js
@@ -77,7 +77,7 @@ export const comment = (() => {
         const presence = document.getElementById(`form-inner-presence-${id}`);
         if (presence) {
             presence.disabled = true;
-            isPresent = presence.value === "1";
+            isPresent = presence.value === '1';
         }
 
         const form = document.getElementById(`form-${id ? `inner-${id}` : 'comment'}`);
@@ -125,9 +125,8 @@ export const comment = (() => {
             document.getElementById(`inner-${id}`).remove();
             document.getElementById(`content-${id}`).innerHTML = card.convertMarkdownToHTML(util.escapeHtml(form.value));
 
-            const formPresence = document.getElementById('form-presence');
             if (presence) {
-                formPresence.value = isPresent ? "1" : "2";
+                document.getElementById('form-presence').value = isPresent ? '1' : '2';
                 storage('information').set('presence', isPresent);
             }
 
@@ -162,7 +161,7 @@ export const comment = (() => {
         }
 
         const presence = document.getElementById('form-presence');
-        if (!id && presence && presence.value == "0") {
+        if (!id && presence && presence.value == '0') {
             alert('Silakan pilih status kehadiran Anda.');
             return;
         }
@@ -171,7 +170,7 @@ export const comment = (() => {
             name.disabled = true;
         }
 
-        if (presence && presence.value != "0") {
+        if (presence && presence.value != '0') {
             presence.disabled = true;
         }
 
@@ -184,7 +183,7 @@ export const comment = (() => {
         }
 
         const btn = util.disableButton(button);
-        const isPresence = presence ? presence.value === "1" : true;
+        const isPresence = presence ? presence.value === '1' : true;
 
         if (!session.isAdmin()) {
             storage('information').set('name', nameValue);
@@ -274,7 +273,7 @@ export const comment = (() => {
         let isPresent = false;
         const presence = document.getElementById(`form-inner-presence-${id}`);
         if (presence) {
-            isPresent = presence.value === "1";
+            isPresent = presence.value === '1';
         }
 
         let isChecklist = false;
diff --git a/js/dashboard.js b/js/dashboard.js
index 82fc3681..d1106d6d 100644
--- a/js/dashboard.js
+++ b/js/dashboard.js
@@ -3,6 +3,7 @@ import { util } from './util.js';
 import { admin } from './admin.js';
 import { theme } from './theme.js';
 import { navbar } from './navbar.js';
+import { offline } from './offline.js';
 import { session } from './session.js';
 import { comment } from './comment.js';
 import { pagination } from './pagination.js';
@@ -10,6 +11,7 @@ import { pagination } from './pagination.js';
 document.addEventListener('DOMContentLoaded', () => {
     admin.init();
     theme.init();
+    offline.init();
     pagination.init();
 
     window.like = like;
diff --git a/js/guest.js b/js/guest.js
index a728597b..80fda362 100644
--- a/js/guest.js
+++ b/js/guest.js
@@ -30,7 +30,7 @@ export const guest = (() => {
     const animation = () => {
         const duration = 15 * 1000;
         const animationEnd = Date.now() + duration;
-        const colors = ["#FFC0CB", "#FF1493", "#C71585"];
+        const colors = ['#FFC0CB', '#FF1493', '#C71585'];
 
         const randomInRange = (min, max) => {
             return Math.random() * (max - min) + min;
@@ -120,9 +120,8 @@ export const guest = (() => {
             storage('tracker').clear();
         }
 
-        const presence = document.getElementById('form-presence');
-        if (presence && information.get('presence') !== undefined) {
-            presence.value = information.get('presence') ? "1" : "2";
+        if (information.get('presence')) {
+            document.getElementById('form-presence').value = information.get('presence') ? '1' : '2';
         }
 
         const info = document.getElementById('information');
diff --git a/js/offline.js b/js/offline.js
new file mode 100644
index 00000000..64d52bd9
--- /dev/null
+++ b/js/offline.js
@@ -0,0 +1,70 @@
+export const offline = (() => {
+
+    const alert = document.getElementById('offline-mode');
+
+    const show = (isUp) => {
+        return new Promise((res) => {
+            let op = parseFloat(alert.style.opacity);
+            let clear = null;
+
+            const callback = () => {
+                if (!isUp && op > 0) {
+                    op -= 0.05;
+                    alert.style.opacity = op.toFixed(2);
+                } else if (isUp && op < 1) {
+                    op += 0.05;
+                    alert.style.opacity = op.toFixed(2);
+                } else {
+                    if (op <= 0) {
+                        alert.style.opacity = '0';
+                    } else if (op >= 1) {
+                        alert.style.opacity = '1';
+                    }
+                    res();
+                    clearInterval(clear);
+                    clear = null;
+                }
+            };
+
+            clear = setInterval(callback, 10);
+        });
+    };
+
+    const setOffline = () => {
+        alert.firstElementChild.firstElementChild.classList.remove('bg-success');
+        alert.firstElementChild.firstElementChild.classList.add('bg-danger');
+        alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tidak tersedia';
+    };
+
+    const setOnline = () => {
+        alert.firstElementChild.firstElementChild.classList.remove('bg-danger');
+        alert.firstElementChild.firstElementChild.classList.add('bg-success');
+        alert.firstElementChild.firstElementChild.firstElementChild.innerText = 'Koneksi tersedia kembali';
+    };
+
+    const onOffline = () => {
+        setOffline();
+        show(true);
+    };
+
+    const onOnline = () => {
+        setOnline();
+
+        let timeout = null;
+        timeout = setTimeout(async () => {
+            clearTimeout(timeout);
+            timeout = null;
+            await show(false);
+            setOffline();
+        }, 3000);
+    };
+
+    const init = () => {
+        window.addEventListener('online', onOnline);
+        window.addEventListener('offline', onOffline);
+    };
+
+    return {
+        init
+    };
+})();
\ No newline at end of file
diff --git a/js/progress.js b/js/progress.js
index 5c190ebf..fdafdd3f 100644
--- a/js/progress.js
+++ b/js/progress.js
@@ -28,7 +28,7 @@ export const progress = (() => {
         }
 
         loaded += 1;
-        bar.style.width = Math.min((loaded / total) * 100, 100).toString() + "%";
+        bar.style.width = Math.min((loaded / total) * 100, 100).toString() + '%';
         info.innerText = `Loading ${type} complete (${loaded}/${total}) [${parseInt((loaded / total) * 100).toFixed(0)}%]`;
 
         if (loaded === total) {
diff --git a/js/request.js b/js/request.js
index cbd6829a..b4606e39 100644
--- a/js/request.js
+++ b/js/request.js
@@ -32,8 +32,8 @@ export const request = (method, path) => {
             return fetch(url + path, req)
                 .then((res) => {
                     return res.json().then((json) => {
-                        if (res.status >= 500 && (json.message || json[0])) {
-                            throw json.message || json[0];
+                        if (res.status >= 500 && (json.message ?? json[0])) {
+                            throw json.message ?? json[0];
                         }
 
                         if (json.error) {
@@ -67,7 +67,7 @@ export const request = (method, path) => {
                         document.body.removeChild(existingLink);
                     }
 
-                    const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] || 'download.csv';
+                    const filename = res.headers.get('content-disposition')?.match(/filename="(.+)"/)?.[1] ?? 'download.csv';
                     return res.blob().then((blob) => ({ blob, filename }));
                 })
                 .then((res) => {
diff --git a/js/theme.js b/js/theme.js
index 9cd20acd..485febe3 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -8,53 +8,129 @@ export const theme = (() => {
     let isAuto = false;
     const theme = storage('theme');
 
+    const toLight = (element) => {
+        if (element.classList.contains('text-light')) {
+            element.classList.remove('text-light');
+            element.classList.add('text-dark');
+        }
+
+        if (element.classList.contains('btn-theme-light')) {
+            element.classList.remove('btn-theme-light');
+            element.classList.add('btn-theme-dark');
+        }
+
+        if (element.classList.contains('bg-dark')) {
+            element.classList.remove('bg-dark');
+            element.classList.add('bg-light');
+        }
+
+        if (element.classList.contains('bg-black')) {
+            element.classList.remove('bg-black');
+            element.classList.add('bg-white');
+        }
+
+        if (element.classList.contains('bg-theme-dark')) {
+            element.classList.remove('bg-theme-dark');
+            element.classList.add('bg-theme-light');
+        }
+
+        if (element.classList.contains('color-theme-black')) {
+            element.classList.remove('color-theme-black');
+            element.classList.add('color-theme-white');
+        }
+
+        if (element.classList.contains('btn-outline-light')) {
+            element.classList.remove('btn-outline-light');
+            element.classList.add('btn-outline-dark');
+        }
+
+        if (element.classList.contains('bg-cover-black')) {
+            element.classList.remove('bg-cover-black');
+            element.classList.add('bg-cover-white');
+        }
+    };
+
+    const toDark = (element) => {
+        if (element.classList.contains('text-dark')) {
+            element.classList.remove('text-dark');
+            element.classList.add('text-light');
+        }
+
+        if (element.classList.contains('btn-theme-dark')) {
+            element.classList.remove('btn-theme-dark');
+            element.classList.add('btn-theme-light');
+        }
+
+        if (element.classList.contains('bg-light')) {
+            element.classList.remove('bg-light');
+            element.classList.add('bg-dark');
+        }
+
+        if (element.classList.contains('bg-white')) {
+            element.classList.remove('bg-white');
+            element.classList.add('bg-black');
+        }
+
+        if (element.classList.contains('bg-theme-light')) {
+            element.classList.remove('bg-theme-light');
+            element.classList.add('bg-theme-dark');
+        }
+
+        if (element.classList.contains('color-theme-white')) {
+            element.classList.remove('color-theme-white');
+            element.classList.add('color-theme-black');
+        }
+
+        if (element.classList.contains('btn-outline-dark')) {
+            element.classList.remove('btn-outline-dark');
+            element.classList.add('btn-outline-light');
+        }
+
+        if (element.classList.contains('bg-cover-white')) {
+            element.classList.remove('bg-cover-white');
+            element.classList.add('bg-cover-black');
+        }
+    };
+
+    const observerLight = new IntersectionObserver((es, o) => {
+        es.forEach((e) => {
+            if (e.isIntersecting) {
+                toLight(e.target);
+            }
+        });
+
+        es.forEach((e) => {
+            if (!e.isIntersecting) {
+                toLight(e.target);
+            }
+        });
+
+        o.disconnect();
+    });
+
+    const observerDark = new IntersectionObserver((es, o) => {
+        es.forEach((e) => {
+            if (e.isIntersecting) {
+                toDark(e.target);
+            }
+        });
+
+        es.forEach((e) => {
+            if (!e.isIntersecting) {
+                toDark(e.target);
+            }
+        });
+
+        o.disconnect();
+    });
+
     const onLight = () => {
         theme.set('active', THEME_LIGHT);
         document.documentElement.setAttribute('data-bs-theme', THEME_LIGHT);
 
         const elements = document.querySelectorAll('.text-light, .btn-theme-light, .bg-dark, .bg-black, .bg-theme-dark, .color-theme-black, .btn-outline-light, .bg-cover-black');
         elements.forEach((el) => {
-            (async (element) => {
-                if (element.classList.contains('text-light')) {
-                    element.classList.remove('text-light');
-                    element.classList.add('text-dark');
-                }
-
-                if (element.classList.contains('btn-theme-light')) {
-                    element.classList.remove('btn-theme-light');
-                    element.classList.add('btn-theme-dark');
-                }
-
-                if (element.classList.contains('bg-dark')) {
-                    element.classList.remove('bg-dark');
-                    element.classList.add('bg-light');
-                }
-
-                if (element.classList.contains('bg-black')) {
-                    element.classList.remove('bg-black');
-                    element.classList.add('bg-white');
-                }
-
-                if (element.classList.contains('bg-theme-dark')) {
-                    element.classList.remove('bg-theme-dark');
-                    element.classList.add('bg-theme-light');
-                }
-
-                if (element.classList.contains('color-theme-black')) {
-                    element.classList.remove('color-theme-black');
-                    element.classList.add('color-theme-white');
-                }
-
-                if (element.classList.contains('btn-outline-light')) {
-                    element.classList.remove('btn-outline-light');
-                    element.classList.add('btn-outline-dark');
-                }
-
-                if (element.classList.contains('bg-cover-black')) {
-                    element.classList.remove('bg-cover-black');
-                    element.classList.add('bg-cover-white');
-                }
-            })(el);
+            observerLight.observe(el);
         });
 
         // --bs-body-bg
@@ -67,47 +143,7 @@ export const theme = (() => {
 
         const elements = document.querySelectorAll('.text-dark, .btn-theme-dark, .bg-light, .bg-white, .bg-theme-light, .color-theme-white, .btn-outline-dark, .bg-cover-white');
         elements.forEach((el) => {
-            (async (element) => {
-                if (element.classList.contains('text-dark')) {
-                    element.classList.remove('text-dark');
-                    element.classList.add('text-light');
-                }
-
-                if (element.classList.contains('btn-theme-dark')) {
-                    element.classList.remove('btn-theme-dark');
-                    element.classList.add('btn-theme-light');
-                }
-
-                if (element.classList.contains('bg-light')) {
-                    element.classList.remove('bg-light');
-                    element.classList.add('bg-dark');
-                }
-
-                if (element.classList.contains('bg-white')) {
-                    element.classList.remove('bg-white');
-                    element.classList.add('bg-black');
-                }
-
-                if (element.classList.contains('bg-theme-light')) {
-                    element.classList.remove('bg-theme-light');
-                    element.classList.add('bg-theme-dark');
-                }
-
-                if (element.classList.contains('color-theme-white')) {
-                    element.classList.remove('color-theme-white');
-                    element.classList.add('color-theme-black');
-                }
-
-                if (element.classList.contains('btn-outline-dark')) {
-                    element.classList.remove('btn-outline-dark');
-                    element.classList.add('btn-outline-light');
-                }
-
-                if (element.classList.contains('bg-cover-white')) {
-                    element.classList.remove('bg-cover-white');
-                    element.classList.add('bg-cover-black');
-                }
-            })(el);
+            observerDark.observe(el);
         });
 
         // --bs-body-bg