Додан моніторінг застосунку

Додани веб компоненти карточок територій та повідомлень

web/lib/app.js

@@ -1,6 +1,10 @@
 let USER = {};
+let page = "Home";
 let swRegistration = null;
 
+// Реєструємо CustomElements
+const Notifier = document.getElementById('notif-manager');
+
 // Определение ID главного блока
 let app = document.getElementById('app');
 
@@ -59,7 +63,7 @@ window.addEventListener('load', async function () {
             return response.json();
         });
 
-        console.log("USER Info: ", USER);
+        console.log("[APP] USER Info: ", USER);
 
 
         if (USER.possibilities.can_view_sheeps) document.getElementById("li-sheeps").style.display = "";
@@ -72,13 +76,39 @@ window.addEventListener('load', async function () {
 
         if (Cloud.socket) Cloud.socket.close(1000, "Перезапуск з'єднання");
         Cloud.start();
-        
+
         editFontStyle();
 
         Router.check().listen().delegateLinks();
+
+        setupFrontendMetrics();
     }
 });
 
+let offlineNode = null;
+window.addEventListener("offline", () => {
+    console.log("[APP] Інтернет зник");
+    offlineNode = Notifier.error({
+        title: 'Оффлайн',
+        text: 'Втрачено з\'єднання з інтернетом'
+    }, { timeout: 0, lock: true });
+});
+
+window.addEventListener("online", () => {
+    console.log("[APP] Інтернет з'явився");
+    if (offlineNode) {
+        Notifier._removeNode(offlineNode);
+        offlineNode = null;
+    }
+    Notifier.success({
+        title: 'Онлайн',
+        text: 'Інтернет знову працює'
+    }, { timeout: 3000 });
+
+    if (Cloud.socket) Cloud.socket.close(1000, "Перезапуск з'єднання");
+    Cloud.start();
+});
+
 function editFontStyle() {
     let fontSize = localStorage.getItem("fontSize")
         ? localStorage.getItem("fontSize")
@@ -153,7 +183,7 @@ document.getElementById("pwa-install-button").addEventListener("click", async ()
 
     deferredPrompt.prompt();
     const { outcome } = await deferredPrompt.userChoice;
-    console.log(`Результат встановлення PWA: ${outcome}`);
+    console.log(`[APP] Результат встановлення PWA: ${outcome}`);
 
     closePopup();
 });
@@ -172,28 +202,26 @@ function closePopup() {
 
 if ('serviceWorker' in navigator) {
     let refreshing = false;
+    let updateNode = null;
 
-    const showUpdateBanner = sw => {
-        const banner = document.getElementById('update_banner');
-        if (!banner) return;
+    const updateCache = sw => {
+        if (updateNode) {
+            Notifier._removeNode(updateNode);
+            updateNode = null;
+        }
 
-        banner.dataset.state = 'updateavailable';
-        banner.querySelector('.headline').textContent = 'Доступне оновлення';
-        banner.querySelector('.subhead').textContent = 'Натисніть, щоб оновити додаток до останньої версії!';
+        Notifier.warn({ title: `Завантаження оновлення`, text: `Додаток буде перезавантажено!` }, { timeout: 3000 });
 
-        banner.addEventListener('click', () => {
-            banner.querySelector('.headline').textContent = '';
-            banner.querySelector('.subhead').textContent = '';
-            banner.querySelector('#update_banner_icon').style.display = 'block';
-
-            sw.postMessage('skipWaiting'); // активує новий SW
-            sw.postMessage('updateCache'); // оновлює кеш
-        });
+        sw.postMessage('skipWaiting'); // активує новий SW
+        sw.postMessage('updateCache'); // оновлює кеш
     };
 
+
     navigator.serviceWorker.register('/sw.js').then(reg => {
         // якщо є waiting SW, показуємо банер
-        if (reg.waiting) showUpdateBanner(reg.waiting);
+        if (reg.waiting) {
+            updateNode = Notifier.click({ title: `Доступне оновлення`, text: `Натисніть, щоб оновити додаток до останньої версії!` }, { type: 'info', f: () => updateCache(reg.waiting), timeout: 0 });
+        }
 
         // слідкуємо за новим воркером
         reg.addEventListener('updatefound', () => {
@@ -202,7 +230,7 @@ if ('serviceWorker' in navigator) {
 
             newWorker.addEventListener('statechange', () => {
                 if (newWorker.state === 'installed' && reg.waiting) {
-                    showUpdateBanner(reg.waiting); // лише показ банера
+                    updateNode = Notifier.click({ title: `Доступне оновлення`, text: `Натисніть, щоб оновити додаток до останньої версії!` }, { type: 'info', f: () => updateCache(reg.waiting), timeout: 0 });
                 }
             });
         });
@@ -213,5 +241,5 @@ if ('serviceWorker' in navigator) {
             window.location.reload(); // відбувається ТІЛЬКИ після skipWaiting
         });
 
-    }).catch(err => console.error('Помилка реєстрації SW:', err));
+    }).catch(err => console.error('[ServiceWorker] Помилка реєстрації SW:', err));
 }