button battery level warning

app.js

@@ -356,8 +356,8 @@ function setupServiceWorker() {
 function handleServiceWorkerMessage(event) {
     console.log('[App] Message received from Service Worker:', event.data);
     if (event.data?.type === 'flic-action') {
-        const { action, button, timestamp } = event.data;
-        pushFlic.handleFlicAction(action, button, timestamp);
+        const { action, button, timestamp, batteryLevel } = event.data;
+        pushFlic.handleFlicAction(action, button, timestamp, batteryLevel);
     }
 }
 

config.js

@@ -3,6 +3,7 @@ export const PUBLIC_VAPID_KEY = 'BKfRJXjSQmAJ452gLwlK_8scGrW6qMU1mBRp39ONtcQHkSs
 export const BACKEND_URL = 'https://webpush.virtonline.eu';
 export const FLIC_BUTTON_ID = 'game-button'; // Example ID, might need configuration
 export const LOCAL_STORAGE_KEY = 'gameTimerData';
+export const FLIC_BATTERY_THRESHOLD = 50; // Battery percentage threshold for low battery warning
 
 // Default player settings
 export const DEFAULT_PLAYER_TIME_SECONDS = 300; // 5 minutes

pushFlicIntegration.js

@@ -1,8 +1,9 @@
 // pushFlicIntegration.js
-import { PUBLIC_VAPID_KEY, BACKEND_URL, FLIC_BUTTON_ID, FLIC_ACTIONS } from './config.js';
+import { PUBLIC_VAPID_KEY, BACKEND_URL, FLIC_BUTTON_ID, FLIC_ACTIONS, FLIC_BATTERY_THRESHOLD } from './config.js';
 
 let pushSubscription = null; // Keep track locally if needed
 let actionHandlers = {}; // Store handlers for different Flic actions
+let lastBatteryWarningTimestamp = 0; // Track when last battery warning was shown
 
 // --- Helper Functions ---
 
@@ -67,6 +68,31 @@ function arrayBufferToBase64(buffer) {
     return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }
 
+// Show a popup notification to the user
+function showBatteryWarning(batteryLevel) {
+    // Only show warning once every 4 hours (to avoid annoying users)
+    const now = Date.now();
+    const fourHoursInMs = 4 * 60 * 60 * 1000;
+    
+    if (now - lastBatteryWarningTimestamp < fourHoursInMs) {
+        console.log(`[PushFlic] Battery warning suppressed (shown recently): ${batteryLevel}%`);
+        return;
+    }
+    
+    lastBatteryWarningTimestamp = now;
+    
+    // Show the notification
+    const message = `Flic button battery is low (${batteryLevel}%). Please replace the battery soon.`;
+    
+    // Show browser notification if permission granted
+    if (Notification.permission === 'granted') {
+        new Notification('Flic Button Low Battery', {
+            body: message,
+            icon: '/favicon.ico'
+        });
+    }
+}
+
 // --- Push Subscription Logic ---
 
 async function subscribeToPush() {
@@ -207,8 +233,13 @@ async function sendSubscriptionToServer(subscription, buttonId) {
 // --- Flic Action Handling ---
 
 // Called by app.js when a message is received from the service worker
-export function handleFlicAction(action, buttonId, timestamp) {
-    console.log(`[PushFlic] Received Action: ${action} from Button: ${buttonId} at ${timestamp}`);
+export function handleFlicAction(action, buttonId, timestamp, batteryLevel) {
+    console.log(`[PushFlic] Received Action: ${action} from Button: ${buttonId} battery: ${batteryLevel}% at ${timestamp}`);
+    
+    // Check if battery is below threshold and show warning if needed
+    if (batteryLevel < FLIC_BATTERY_THRESHOLD) {
+        showBatteryWarning(batteryLevel);
+    }
 
     // Ignore actions from buttons other than the configured one
     if (buttonId !== FLIC_BUTTON_ID) {

sw.js

@@ -75,7 +75,11 @@ self.addEventListener('push', event => {
   let pushData = {
     title: 'Flic Action',
     body: 'Button pressed!',
-    data: { action: 'Unknown', button: 'Unknown' } // Default data
+    data: { 
+      action: 'Unknown', 
+      button: 'Unknown',
+      batteryLevel: undefined
+    }
   };
 
   // --- Attempt to parse data payload ---
@@ -88,8 +92,7 @@ self.addEventListener('push', event => {
       pushData = {
         title: parsedData.title || pushData.title,
         body: parsedData.body || pushData.body,
-        // IMPORTANT: Extract the action details sent from your backend
-        data: parsedData.data || pushData.data // Expecting { action: 'SingleClick', button: '...' }
+        data: parsedData.data || pushData.data // Expecting { action: 'SingleClick', button: 'game-button', batteryLevel: 75 }
       };
       
     } catch (e) {
@@ -106,7 +109,8 @@ self.addEventListener('push', event => {
     type: 'flic-action', // Custom message type
     action: pushData.data.action, // e.g., 'SingleClick', 'DoubleClick', 'Hold'
     button: pushData.data.button,  // e.g., the button name
-    timestamp: pushData.data.timestamp // e.g., the timestamp of the action
+    timestamp: pushData.data.timestamp, // e.g., the timestamp of the action
+    batteryLevel: pushData.data.batteryLevel // e.g., the battery level percentage
   };
 
   // Send message to all open PWA windows controlled by this SW