Add Push Notification

templates/index.html

@@ -163,6 +163,7 @@
         <div style="display: flex; align-items: center; gap: 12px;">
             <button class="theme-switch" id="lang-btn" onclick="toggleLang()" data-i18n-title="ttLang">🇮🇹 ITA</button>
             <button class="theme-switch" id="theme-btn" onclick="toggleTheme()" data-i18n-title="ttTheme">🌙 DARK</button>
+            <button class="theme-switch" id="push-btn" onclick="subscribeToPush()">🔔 PUSH</button>
             <div id="auth-container" style="display:flex; align-items:center; gap:8px;"></div>
         </div>
     </div>
@@ -1076,7 +1077,74 @@
         });
     }
 
-initUI();
+// --- FUNZIONE PER ISCRIVERSI ALLE PUSH ---
+    async function subscribeToPush() {
+        const lang = document.documentElement.lang || 'it';
+        const msg = {
+            it: { ok: "Notifiche attivate!", err: "Errore o permesso negato", title: "PUSH" },
+            en: { ok: "Notifications enabled!", err: "Error or permission denied", title: "PUSH" }
+        };
+
+        if (!('serviceWorker' in navigator)) return;
+
+        const permission = await Notification.requestPermission();
+        if (permission !== 'granted') {
+            customAlert("Error", msg[lang].err, true);
+            return;
+        }
+
+        try {
+            const reg = await navigator.serviceWorker.ready;
+            const res = await fetch('/api/vapid_public_key');
+            const { public_key } = await res.json();
+
+            const subscription = await reg.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: urlB64ToUint8Array(public_key)
+            });
+
+            await fetch('/api/subscribe', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(subscription)
+            });
+
+            customAlert("Success", msg[lang].ok);
+            document.getElementById('push-btn').style.color = 'var(--success)';
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    // --- FUNZIONE PER CONTROLLARE IL COLORE DEL BOTTONE ---
+    async function checkPushStatus() {
+        if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
+        
+        try {
+            const reg = await navigator.serviceWorker.ready;
+            const subscription = await reg.pushManager.getSubscription();
+            
+            const btn = document.getElementById('push-btn');
+            if (subscription && btn) {
+                btn.style.color = 'var(--success)';
+            }
+        } catch(e) {
+            console.error("Errore nel controllo stato Push:", e);
+        }
+    }
+
+    // Helper per convertire la chiave VAPID
+    function urlB64ToUint8Array(base64String) {
+        const padding = '='.repeat((4 - base64String.length % 4) % 4);
+        const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
+        const rawData = window.atob(base64);
+        const outputArray = new Uint8Array(rawData.length);
+        for (let i = 0; i < rawData.length; ++i) outputArray[i] = rawData.charCodeAt(i);
+        return outputArray;
+    }
+
+    initUI();
+    checkPushStatus(); // Ora funzionerà perfettamente!
 
     // --- MOTORE WEBSOCKET REAL-TIME ---
     const socket = io();