Update index.html

index.html

@@ -715,82 +715,83 @@
         
             // Webhook Integration with improved reliability
             const now = Date.now();
-            const criticalThreshold = 50; // Could be loaded from settings
-            const webhookCooldown = 30000; // 30 seconds
+            const criticalThreshold = 50;
+            const webhookCooldown = 30000;
             
             if (temp > criticalThreshold && now - lastWebhookTimestamp > webhookCooldown) {
                 lastWebhookTimestamp = now;
                 logDebug(`Triggering webhook for critical temperature: ${temp}°C`);
                 
-                // Generate CSV data
+                // Generate attachments
                 const csvData = generateCSV();
-                
-                // Generate chart image
                 const chartImage = generateChartImage();
                 
                 const sendWebhook = (attempt = 1) => {
                     const webhookUrl = 'https://n8n-1r4e.onrender.com/webhook-test/2af1157d-c7d7-4e57-86c8-577c5a005f40';
                     
-                    // Create FormData to send both JSON and files
-                    const formData = new FormData();
-                    
-                    // Add JSON payload
-                    formData.append('payload', JSON.stringify({
-                        temperature: temp,
-                        timestamp: new Date().toISOString(),
-                        status: getStatus(temp),
-                        message: `⚠️ Critical temperature (${temp}°C) detected. Immediate action required.`,
-                        deviceInfo: navigator.userAgent,
-                        attempt: attempt
-                    }));
-                    
-                    // Add CSV file
-                    if (csvData) {
-                        const csvBlob = new Blob([csvData], { type: 'text/csv' });
-                        formData.append('temperature_data', csvBlob, 'temperature_data.csv');
-                    }
-                    
-                    // Add chart image
-                    if (chartImage) {
-                        const chartBlob = dataURLtoBlob(chartImage);
-                        formData.append('temperature_chart', chartBlob, 'temperature_chart.png');
-                    }
-                    
-                    logDebug(`Sending webhook attempt ${attempt} with attachments...`);
-                    
-                    fetch(webhookUrl, {
-                        method: 'POST',
-                        headers: { 
-                            'X-ThermoScan-Signature': 'your-secret-key-here'
-                        },
-                        body: formData
-                    })
-                    .then(async res => {
-                        if (!res.ok) {
-                            const errorText = await res.text();
-                            throw new Error(`HTTP ${res.status}: ${errorText}`);
+                    try {
+                        const formData = new FormData();
+                        
+                        // Add JSON payload
+                        formData.append('payload', JSON.stringify({
+                            temperature: temp,
+                            timestamp: new Date().toISOString(),
+                            status: getStatus(temp),
+                            message: `⚠️ Critical temperature (${temp}°C) detected`,
+                            deviceInfo: navigator.userAgent,
+                            attempt: attempt
+                        }));
+                        
+                        // Add CSV file if available
+                        if (csvData) {
+                            const csvBlob = new Blob([csvData], { type: 'text/csv' });
+                            formData.append('temperature_data', csvBlob, 'temperature_data.csv');
                         }
-                        return res.json();
-                    })
-                    .then(data => {
-                        logDebug(`Webhook successful. Response: ${JSON.stringify(data)}`);
-                        showAlert('Critical temperature alert sent with attachments', 'success');
-                    })
-                    .catch(err => {
-                        logDebug(`Webhook attempt ${attempt} failed: ${err.message}`);
+                        
+                        // Add chart image if available
+                        if (chartImage) {
+                            const chartBlob = dataURLtoBlob(chartImage);
+                            formData.append('temperature_chart', chartBlob, 'temperature_chart.png');
+                        }
+                        
+                        logDebug(`Sending webhook attempt ${attempt}...`);
+                        
+                        fetch(webhookUrl, {
+                            method: 'POST',
+                            body: formData
+                        })
+                        .then(async res => {
+                            if (!res.ok) {
+                                const errorText = await res.text();
+                                throw new Error(`HTTP ${res.status}: ${errorText}`);
+                            }
+                            return res.json();
+                        })
+                        .then(data => {
+                            logDebug(`Webhook successful: ${JSON.stringify(data)}`);
+                            showAlert('Critical alert sent successfully', 'success');
+                        })
+                        .catch(err => {
+                            logDebug(`Webhook attempt ${attempt} failed: ${err.message}`);
+                            if (attempt < 3) {
+                                const retryDelay = 5000 * attempt;
+                                logDebug(`Retrying in ${retryDelay/1000} seconds...`);
+                                setTimeout(() => sendWebhook(attempt + 1), retryDelay);
+                            } else {
+                                showAlert('Failed to send critical alert', 'error');
+                            }
+                        });
+                    } catch (error) {
+                        logDebug(`Webhook preparation error: ${error.message}`);
                         if (attempt < 3) {
-                            const retryDelay = 5000 * attempt;
-                            logDebug(`Retrying in ${retryDelay/1000} seconds...`);
-                            setTimeout(() => sendWebhook(attempt + 1), retryDelay);
-                        } else {
-                            logDebug('Max retry attempts reached');
-                            showAlert('Failed to send critical alert after 3 attempts', 'error');
+                            setTimeout(() => sendWebhook(attempt + 1), 5000 * attempt);
                         }
-                    });
+                    }
                 };
                 
                 sendWebhook();
-            } else if (temp > criticalThreshold) {
+            }
+            else if (temp > criticalThreshold) {
                 const timeLeft = Math.ceil((webhookCooldown - (now - lastWebhookTimestamp)) / 1000);
                 logDebug(`Webhook cooldown active. ${timeLeft}s remaining until next alert can be sent`);
             }
@@ -840,7 +841,55 @@
                 currentTempEl.classList.remove('text-warning-500', 'text-danger-500');
             }
         }
+        // Generate CSV data from temperature history
+        function generateCSV() {
+            if (temperatureHistory.length === 0) return null;
+            
+            let csvContent = "Timestamp,Temperature (°C),Status\n";
+            temperatureHistory.forEach(reading => {
+                csvContent += `${reading.timestamp},${reading.temp},${reading.status}\n`;
+            });
+            
+            return csvContent;
+        }
         
+        // Generate chart image as base64
+        function generateChartImage() {
+            if (!liveChart) return null;
+            return liveChart.toBase64Image();
+        }
+        
+        // Convert data URL to Blob for file upload
+        function dataURLtoBlob(dataURL) {
+            const arr = dataURL.split(',');
+            const mime = arr[0].match(/:(.*?);/)[1];
+            const bstr = atob(arr[1]);
+            let n = bstr.length;
+            const u8arr = new Uint8Array(n);
+            
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            
+            return new Blob([u8arr], { type: mime });
+        }
+        
+        // Show alert notification
+        function showAlert(message, type = 'info') {
+            const alertEl = document.createElement('div');
+            alertEl.className = `fixed top-4 right-4 p-4 rounded-lg z-50 ${
+                type === 'error' ? 'bg-danger-600' : 
+                type === 'success' ? 'bg-success-600' : 'bg-industrial-600'
+            } text-white shadow-lg`;
+            alertEl.textContent = message;
+            
+            document.body.appendChild(alertEl);
+            
+            setTimeout(() => {
+                alertEl.classList.add('opacity-0', 'transition-opacity', 'duration-300');
+                setTimeout(() => alertEl.remove(), 300);
+            }, 5000);
+        }
         // Get status for history
         function getStatus(temp) {
             if (temp > 35) return 'critical';