updated Push notification settings

index.html

@@ -135,14 +135,23 @@
                 <label for="pushPassword">Password</label>
                 <input type="password" id="pushPassword" placeholder="Enter password">
             </div>
-            <div class="form-buttons">
-                <button type="button" id="pushCancelButton" class="cancel-button">Cancel</button>
-                <button type="button" id="pushSaveButton" class="save-button">Save & Subscribe</button>
-            </div>
             <div class="advanced-options">
                 <button type="button" id="pushUnsubscribeButton" class="cancel-button">Unsubscribe</button>
                 <button type="button" id="pushResubscribeButton" class="save-button">Resubscribe</button>
             </div>
+            <div class="form-buttons">
+                <button type="button" id="pushCancelButton" class="cancel-button">Cancel</button>
+                <button type="button" id="pushSaveButton" class="save-button">Save</button>
+            </div>
+            
+            <!-- Message Monitor Section - No visible title -->
+            <div class="message-monitor-section">
+                <div class="monitor-controls">
+                    <button type="button" id="simulateClickButton" class="action-button" style="margin-right: 10px;">Simulate Click</button>
+                    <button type="button" id="clearMessagesButton" class="action-button">Clear Messages</button>
+                </div>
+                <pre id="swMessagesOutput" class="message-output">Monitoring for service worker messages...</pre>
+            </div>
         </div>
     </div>
       
@@ -163,6 +172,105 @@
                     console.log('Notification permission:', permission);
                 });
             }
+            
+            // Helper function to get stored credentials
+            async function getStoredCredentials() {
+                const storedAuth = localStorage.getItem('basicAuthCredentials');
+                if (!storedAuth) return null;
+                
+                try {
+                    const credentials = JSON.parse(storedAuth);
+                    if (!credentials.username || !credentials.password) return null;
+                    return credentials;
+                } catch (error) {
+                    console.error('Failed to parse stored credentials:', error); 
+                    return null;
+                }
+            }
+            
+            // Function to simulate a button click with default values
+            async function simulateButtonClick() {
+                const action = 'SingleClick'; // Default action
+                const buttonName = 'Game-button'; // Default button name
+                const batteryLevel = 100; // Default battery level
+                
+                const output = document.getElementById('swMessagesOutput');
+                // Don't show the simulating text
+                
+                try {
+                    // Get credentials
+                    const credentials = await getStoredCredentials();
+                    if (!credentials) {
+                        output.textContent = 'No credentials found. Please set up credentials first.\n';
+                        return;
+                    }
+                    
+                    // Create basic auth header
+                    const authHeader = 'Basic ' + btoa(`${credentials.username}:${credentials.password}`);
+                    
+                    // Create timestamp (current time)
+                    const timestamp = new Date().toISOString();
+                    
+                    // Prepare request to backend webhook
+                    let backendUrl;
+                    try {
+                        const configModule = await import('/js/config.js');
+                        backendUrl = configModule.BACKEND_URL || 'https://webpush.virtonline.eu';
+                    } catch (error) {
+                        backendUrl = 'https://webpush.virtonline.eu';
+                    }
+                    
+                    const webhookUrl = `${backendUrl}/webhook/${action}`;
+                    output.textContent = `Sending request to: ${webhookUrl}\n\nHeaders:\n`;
+                    output.textContent += `Authorization: Basic ****\n`;
+                    output.textContent += `Button-Name: ${buttonName}\n`;
+                    output.textContent += `Timestamp: ${timestamp}\n`;
+                    output.textContent += `Button-Battery-Level: ${batteryLevel}\n\n`;
+                    
+                    // Headers similar to the curl command
+                    const headers = {
+                        'Authorization': authHeader,
+                        'Button-Name': buttonName,
+                        'Timestamp': timestamp,
+                        'Button-Battery-Level': batteryLevel.toString()
+                    };
+                    
+                    // Send GET request to webhook
+                    const response = await fetch(webhookUrl, {
+                        method: 'GET',
+                        headers: headers,
+                        credentials: 'include'
+                    });
+                    
+                    if (response.ok) {
+                        let result;
+                        try {
+                            result = await response.json();
+                            output.textContent += `Success! Response: ${JSON.stringify(result, null, 2)}\n`;
+                        } catch (e) {
+                            // Text response
+                            result = await response.text();
+                            output.textContent += `Success! Response: ${result}\n`;
+                        }
+                    } else {
+                        let errorText;
+                        try {
+                            errorText = await response.text();
+                        } catch (e) {
+                            errorText = `Status ${response.status}`;
+                        }
+                        output.textContent += `Error: ${errorText}\n`;
+                    }
+                } catch (error) {
+                    output.textContent += `Error: ${error.message}\n`;
+                }
+            }
+            
+            // Attach click event to the new button
+            const simulateClickButton = document.getElementById('simulateClickButton');
+            if (simulateClickButton) {
+                simulateClickButton.addEventListener('click', simulateButtonClick);
+            }
         });
     </script>
     <footer class="app-footer">