AquaChain/api-test.html at main · FoldedOdin/AquaChain · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AquaChain API Test</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .data { background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin: 10px 0; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 AquaChain API Test</h1>
        <p>This page tests the API connection that your dashboard will use.</p>

        <button onclick="testAPI()">🔄 Test API Connection</button>
        <button onclick="testContinuous()">📊 Start Continuous Updates</button>
        <button onclick="stopContinuous()">⏹️ Stop Updates</button>

        <div id="status"></div>
        <div id="data"></div>
    </div>

    <script>
        const API_BASE_URL = 'https://vtqjfznspc.execute-api.ap-south-1.amazonaws.com/dev';
        const DEVICE_ID = 'ESP32-001';
        let updateInterval = null;

        function showStatus(message, isError = false) {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${isError ? 'error' : 'success'}">${message}</div>`;
        }

        function showData(data) {
            const dataDiv = document.getElementById('data');
            if (data && data.reading) {
                const reading = data.reading;
                dataDiv.innerHTML = `
                    <div class="data">
                        <h3>📊 Device: ${data.deviceId}</h3>
                        <p><strong>Timestamp:</strong> ${reading.timestamp}</p>
                        <p><strong>pH:</strong> ${reading.pH}</p>
                        <p><strong>Temperature:</strong> ${reading.temperature}°C</p>
                        <p><strong>TDS:</strong> ${reading.tds} ppm</p>
                        <p><strong>Turbidity:</strong> ${reading.turbidity} NTU</p>
                        <p><strong>Water Quality Index:</strong> ${reading.qualityScore || reading.wqi || 'N/A'}</p>
                        <p><strong>Status:</strong> ${reading.qualityStatus || 'Unknown'}</p>
                    </div>
                `;
            }
        }

        async function testAPI() {
            showStatus('🔄 Testing API connection...', false);

            try {
                const response = await fetch(`${API_BASE_URL}/api/device-readings/${DEVICE_ID}/latest`);
                const data = await response.json();

                if (response.ok && data.success) {
                    showStatus('✅ API connection successful!', false);
                    showData(data);
                } else {
                    showStatus(`❌ API error: ${data.error || 'Unknown error'}`, true);
                }
            } catch (error) {
                showStatus(`❌ Network error: ${error.message}`, true);
            }
        }

        function testContinuous() {
            if (updateInterval) {
                clearInterval(updateInterval);
            }

            showStatus('📊 Starting continuous updates (every 30 seconds)...', false);
            testAPI(); // Initial test

            updateInterval = setInterval(() => {
                testAPI();
            }, 30000);
        }

        function stopContinuous() {
            if (updateInterval) {
                clearInterval(updateInterval);
                updateInterval = null;
                showStatus('⏹️ Continuous updates stopped', false);
            }
        }

        // Test on page load
        window.onload = () => {
            testAPI();
        };
    </script>
</body>
</html>