update

2025-06-30 00:17:43 +00:00
parent bff7ec6640
commit df4dd3f539
15 changed files with 1148 additions and 190 deletions
--- a/ts_web/elements/upl-statuspage-statsgrid.demo.ts
+++ b/ts_web/elements/upl-statuspage-statsgrid.demo.ts
@@ -0,0 +1,315 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .demo-section {
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    .demo-title {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: #333;
+    }
+    .demo-controls {
+      display: flex;
+      gap: 10px;
+      margin-top: 16px;
+      flex-wrap: wrap;
+    }
+    .demo-button {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .demo-button:hover {
+      background: #f0f0f0;
+    }
+    .demo-button.active {
+      background: #2196F3;
+      color: white;
+      border-color: #2196F3;
+    }
+  </style>
+
+  <div class="demo-container">
+    <!-- Normal Operation -->
+    <div class="demo-section">
+      <div class="demo-title">Normal Operation</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Set initial values
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.95;
+          statsGrid.avgResponseTime = 125;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '90 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Degraded Performance -->
+    <div class="demo-section">
+      <div class="demo-title">Degraded Performance</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          statsGrid.currentStatus = 'degraded';
+          statsGrid.uptime = 98.50;
+          statsGrid.avgResponseTime = 450;
+          statsGrid.totalIncidents = 3;
+          statsGrid.affectedServices = 2;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '30 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Major Outage -->
+    <div class="demo-section">
+      <div class="demo-title">Major Outage</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          statsGrid.currentStatus = 'major_outage';
+          statsGrid.uptime = 95.20;
+          statsGrid.avgResponseTime = 1250;
+          statsGrid.totalIncidents = 8;
+          statsGrid.affectedServices = 7;
+          statsGrid.totalServices = 12;
+          statsGrid.timePeriod = '7 days';
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Interactive Demo -->
+    <div class="demo-section">
+      <div class="demo-title">Interactive Demo</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Initial state
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.99;
+          statsGrid.avgResponseTime = 85;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 15;
+          statsGrid.timePeriod = '90 days';
+          
+          // Create controls
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          // Status buttons
+          const statuses = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
+          statuses.forEach((status, index) => {
+            const button = document.createElement('button');
+            button.className = 'demo-button' + (index === 0 ? ' active' : '');
+            button.textContent = status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+            button.onclick = () => {
+              controls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
+              button.classList.add('active');
+              
+              statsGrid.currentStatus = status;
+              
+              // Adjust other values based on status
+              switch (status) {
+                case 'operational':
+                  statsGrid.uptime = 99.99;
+                  statsGrid.avgResponseTime = 85;
+                  statsGrid.totalIncidents = 0;
+                  statsGrid.affectedServices = 0;
+                  break;
+                case 'degraded':
+                  statsGrid.uptime = 98.50;
+                  statsGrid.avgResponseTime = 350;
+                  statsGrid.totalIncidents = 2;
+                  statsGrid.affectedServices = 1;
+                  break;
+                case 'partial_outage':
+                  statsGrid.uptime = 97.00;
+                  statsGrid.avgResponseTime = 750;
+                  statsGrid.totalIncidents = 5;
+                  statsGrid.affectedServices = 3;
+                  break;
+                case 'major_outage':
+                  statsGrid.uptime = 94.50;
+                  statsGrid.avgResponseTime = 1500;
+                  statsGrid.totalIncidents = 10;
+                  statsGrid.affectedServices = 8;
+                  break;
+                case 'maintenance':
+                  statsGrid.uptime = 99.00;
+                  statsGrid.avgResponseTime = 150;
+                  statsGrid.totalIncidents = 1;
+                  statsGrid.affectedServices = 2;
+                  break;
+              }
+            };
+            controls.appendChild(button);
+          });
+          
+          wrapperElement.appendChild(controls);
+          
+          // Add time period selector
+          const timePeriodControls = document.createElement('div');
+          timePeriodControls.className = 'demo-controls';
+          timePeriodControls.style.marginTop = '10px';
+          
+          const periods = ['24 hours', '7 days', '30 days', '90 days'];
+          periods.forEach((period, index) => {
+            const button = document.createElement('button');
+            button.className = 'demo-button' + (index === 3 ? ' active' : '');
+            button.textContent = period;
+            button.onclick = () => {
+              timePeriodControls.querySelectorAll('.demo-button').forEach(btn => btn.classList.remove('active'));
+              button.classList.add('active');
+              statsGrid.timePeriod = period;
+            };
+            timePeriodControls.appendChild(button);
+          });
+          
+          wrapperElement.appendChild(timePeriodControls);
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Loading State -->
+    <div class="demo-section">
+      <div class="demo-title">Loading State</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          statsGrid.loading = true;
+          
+          // Create toggle button
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          const toggleButton = document.createElement('button');
+          toggleButton.className = 'demo-button';
+          toggleButton.textContent = 'Toggle Loading';
+          toggleButton.onclick = () => {
+            statsGrid.loading = !statsGrid.loading;
+            if (!statsGrid.loading) {
+              statsGrid.currentStatus = 'operational';
+              statsGrid.uptime = 99.95;
+              statsGrid.avgResponseTime = 125;
+              statsGrid.totalIncidents = 0;
+              statsGrid.affectedServices = 0;
+              statsGrid.totalServices = 12;
+            }
+          };
+          controls.appendChild(toggleButton);
+          
+          wrapperElement.appendChild(controls);
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+
+    <!-- Real-time Updates -->
+    <div class="demo-section">
+      <div class="demo-title">Real-time Updates</div>
+      <dees-demowrapper
+        .runAfterRender=${async (wrapperElement: any) => {
+          const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+          
+          // Initial values
+          statsGrid.currentStatus = 'operational';
+          statsGrid.uptime = 99.95;
+          statsGrid.avgResponseTime = 100;
+          statsGrid.totalIncidents = 0;
+          statsGrid.affectedServices = 0;
+          statsGrid.totalServices = 10;
+          statsGrid.timePeriod = '24 hours';
+          
+          // Simulate real-time updates
+          let interval = setInterval(() => {
+            // Slight variations in response time
+            statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
+            
+            // Occasionally change status
+            if (Math.random() < 0.1) {
+              const statuses = ['operational', 'degraded'];
+              statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
+              
+              if (statsGrid.currentStatus === 'degraded') {
+                statsGrid.avgResponseTime = Math.floor(300 + Math.random() * 200);
+                statsGrid.totalIncidents = Math.min(statsGrid.totalIncidents + 1, 5);
+                statsGrid.affectedServices = Math.min(Math.floor(Math.random() * 3) + 1, statsGrid.totalServices);
+                statsGrid.uptime = Math.max(99.0, statsGrid.uptime - 0.05);
+              } else {
+                statsGrid.affectedServices = 0;
+              }
+            }
+          }, 2000);
+          
+          // Add control button
+          const controls = document.createElement('div');
+          controls.className = 'demo-controls';
+          
+          const toggleButton = document.createElement('button');
+          toggleButton.className = 'demo-button active';
+          toggleButton.textContent = 'Stop Updates';
+          toggleButton.onclick = () => {
+            if (interval) {
+              clearInterval(interval);
+              interval = null;
+              toggleButton.textContent = 'Start Updates';
+              toggleButton.classList.remove('active');
+            } else {
+              interval = setInterval(() => {
+                statsGrid.avgResponseTime = Math.floor(80 + Math.random() * 40);
+                if (Math.random() < 0.1) {
+                  const statuses = ['operational', 'degraded'];
+                  statsGrid.currentStatus = statuses[Math.floor(Math.random() * statuses.length)];
+                }
+              }, 2000);
+              toggleButton.textContent = 'Stop Updates';
+              toggleButton.classList.add('active');
+            }
+          };
+          controls.appendChild(toggleButton);
+          
+          wrapperElement.appendChild(controls);
+          
+          // Cleanup on unmount
+          wrapperElement.addEventListener('remove', () => {
+            if (interval) clearInterval(interval);
+          });
+        }}
+      >
+        <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+      </dees-demowrapper>
+    </div>
+  </div>
+`;