update

2025-06-30 00:17:43 +00:00
parent bff7ec6640
commit df4dd3f539
15 changed files with 1148 additions and 190 deletions
--- a/test-statsgrid.html
+++ b/test-statsgrid.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stats Grid Test</title>
+    <script type="module" src="./dist_bundle/bundle.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #fafafa;
+        }
+        @media (prefers-color-scheme: dark) {
+            body {
+                background: #09090b;
+            }
+        }
+        .test-section {
+            margin-bottom: 40px;
+        }
+        h2 {
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Stats Grid Component Test</h1>
+    
+    <div class="test-section">
+        <h2>Normal Operation</h2>
+        <upl-statuspage-statsgrid
+            id="grid1"
+            current-status="operational"
+            uptime="99.95"
+            avg-response-time="125"
+            total-incidents="0"
+            affected-services="0"
+            total-services="12"
+            time-period="90 days"
+        ></upl-statuspage-statsgrid>
+    </div>
+
+    <div class="test-section">
+        <h2>Degraded Performance</h2>
+        <upl-statuspage-statsgrid
+            id="grid2"
+            current-status="degraded"
+            uptime="98.50"
+            avg-response-time="450"
+            total-incidents="3"
+            affected-services="2"
+            total-services="12"
+            time-period="30 days"
+        ></upl-statuspage-statsgrid>
+    </div>
+
+    <div class="test-section">
+        <h2>Major Outage</h2>
+        <upl-statuspage-statsgrid
+            id="grid3"
+            current-status="major_outage"
+            uptime="95.20"
+            avg-response-time="1250"
+            total-incidents="8"
+            affected-services="7"
+            total-services="12"
+            time-period="7 days"
+        ></upl-statuspage-statsgrid>
+    </div>
+
+    <div class="test-section">
+        <h2>Loading State</h2>
+        <upl-statuspage-statsgrid
+            id="grid4"
+            loading="true"
+        ></upl-statuspage-statsgrid>
+    </div>
+
+    <script>
+        // Test dynamic updates
+        setTimeout(() => {
+            const grid1 = document.getElementById('grid1');
+            console.log('Updating grid1 to show degraded status...');
+            grid1.currentStatus = 'degraded';
+            grid1.avgResponseTime = 350;
+            grid1.totalIncidents = 1;
+            grid1.affectedServices = 1;
+        }, 3000);
+
+        // Test loading state toggle
+        setTimeout(() => {
+            const grid4 = document.getElementById('grid4');
+            console.log('Loading complete, showing data...');
+            grid4.loading = false;
+            grid4.currentStatus = 'operational';
+            grid4.uptime = 99.99;
+            grid4.avgResponseTime = 85;
+            grid4.totalIncidents = 0;
+            grid4.affectedServices = 0;
+            grid4.totalServices = 15;
+            grid4.timePeriod = '24 hours';
+        }, 5000);
+    </script>
+</body>
+</html>