diff --git a/css/styles.css b/css/styles.css index 80b1d25..53c4ded 100644 --- a/css/styles.css +++ b/css/styles.css @@ -394,7 +394,20 @@ input[type="file"] { } .advanced-options button { - width: 48%; + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + cursor: pointer; + flex: 1; + margin: 0 0.5rem; +} + +.advanced-options button:first-child { + margin-left: 0; +} + +.advanced-options button:last-child { + margin-right: 0; } /* Status indicators */ @@ -421,4 +434,46 @@ input[type="file"] { .status-inactive { color: #6c757d; font-weight: bold; -} \ No newline at end of file +} +/* Service Worker Message Monitor Styles */ +.message-monitor-section { + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid #eee; +} + +.message-monitor-section h3 { + margin-bottom: 0.5rem; +} + +.monitor-controls { + display: flex; + justify-content: space-between; + margin: 0.5rem 0; +} + +.action-button { + background-color: #6c757d; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; + width: 100%; +} + +.action-button:hover { + background-color: #5a6268; +} + +.message-output { + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 4px; + padding: 0.75rem; + margin-top: 0.5rem; + height: 150px; + overflow-y: auto; + font-size: 0.85rem; + white-space: pre-wrap; +} diff --git a/index.html b/index.html index 84ff5e8..bc22c89 100644 --- a/index.html +++ b/index.html @@ -135,14 +135,23 @@ -
- - -
+
+ + +
+ + +
+
+ + +
+ 
Monitoring for service worker messages...
+
@@ -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); + } });