Spaces:
Paused
Paused
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>API Connection Test - Legal Dashboard</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background: #f5f5f5; | |
| } | |
| .test-section { | |
| background: white; | |
| padding: 20px; | |
| margin: 20px 0; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .success { color: #10b981; } | |
| .error { color: #ef4444; } | |
| .info { color: #3b82f6; } | |
| .warning { color: #f59e0b; } | |
| button { | |
| background: #007bff; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin: 5px; | |
| } | |
| button:hover { | |
| background: #0056b3; | |
| } | |
| pre { | |
| background: #f8f9fa; | |
| padding: 10px; | |
| border-radius: 4px; | |
| overflow-x: auto; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .endpoint-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .endpoint-card { | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| padding: 15px; | |
| background: white; | |
| } | |
| .endpoint-card.success { | |
| border-color: #10b981; | |
| background: #f0fdf4; | |
| } | |
| .endpoint-card.error { | |
| border-color: #ef4444; | |
| background: #fef2f2; | |
| } | |
| .endpoint-card.warning { | |
| border-color: #f59e0b; | |
| background: #fffbeb; | |
| } | |
| .status-indicator { | |
| display: inline-block; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .status-indicator.success { background: #10b981; } | |
| .status-indicator.error { background: #ef4444; } | |
| .status-indicator.warning { background: #f59e0b; } | |
| .summary-stats { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: white; | |
| padding: 15px; | |
| border-radius: 8px; | |
| text-align: center; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>🔧 API Connection Test - Legal Dashboard</h1> | |
| <div class="test-section"> | |
| <h2>📊 Test Summary</h2> | |
| <div class="summary-stats" id="summaryStats"> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="totalTests">0</div> | |
| <div class="stat-label">Total Tests</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number success" id="passedTests">0</div> | |
| <div class="stat-label">Passed</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number error" id="failedTests">0</div> | |
| <div class="stat-label">Failed</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number info" id="successRate">0%</div> | |
| <div class="stat-label">Success Rate</div> | |
| </div> | |
| </div> | |
| <button type="button" onclick="runAllTests()">Run All API Tests</button> | |
| <button type="button" onclick="testEndpointPatterns()">Test Endpoint Patterns</button> | |
| <button type="button" onclick="clearResults()">Clear Results</button> | |
| </div> | |
| <div class="test-section"> | |
| <h2>🔍 Endpoint Test Results</h2> | |
| <div class="endpoint-grid" id="endpointResults"> | |
| <!-- Results will be populated here --> | |
| </div> | |
| </div> | |
| <div class="test-section"> | |
| <h2>📋 Detailed Results</h2> | |
| <div id="detailedResults"> | |
| <p class="info">Click "Run All API Tests" to start testing...</p> | |
| </div> | |
| </div> | |
| <script src="js/api-connection-test.js"></script> | |
| <script> | |
| let testResults = []; | |
| async function runAllTests() { | |
| console.log('Starting comprehensive API tests...'); | |
| // Clear previous results | |
| document.getElementById('endpointResults').innerHTML = ''; | |
| document.getElementById('detailedResults').innerHTML = '<p class="info">Running tests...</p>'; | |
| // Run the API tests | |
| const results = await window.apiTester.runAllTests(); | |
| testResults = results; | |
| // Update summary | |
| updateSummary(results); | |
| // Display detailed results | |
| displayDetailedResults(results); | |
| console.log('API tests completed'); | |
| } | |
| async function testEndpointPatterns() { | |
| console.log('Testing endpoint patterns...'); | |
| await window.apiTester.testEndpointPatterns(); | |
| } | |
| function clearResults() { | |
| document.getElementById('endpointResults').innerHTML = ''; | |
| document.getElementById('detailedResults').innerHTML = '<p class="info">Results cleared</p>'; | |
| updateSummary([]); | |
| } | |
| function updateSummary(results) { | |
| const total = results.length; | |
| const passed = results.filter(r => r.success).length; | |
| const failed = total - passed; | |
| const successRate = total > 0 ? ((passed / total) * 100).toFixed(1) : 0; | |
| document.getElementById('totalTests').textContent = total; | |
| document.getElementById('passedTests').textContent = passed; | |
| document.getElementById('failedTests').textContent = failed; | |
| document.getElementById('successRate').textContent = successRate + '%'; | |
| } | |
| function displayDetailedResults(results) { | |
| const container = document.getElementById('endpointResults'); | |
| const detailedContainer = document.getElementById('detailedResults'); | |
| // Clear containers | |
| container.innerHTML = ''; | |
| detailedContainer.innerHTML = ''; | |
| // Group results by category | |
| const categories = {}; | |
| results.forEach(result => { | |
| if (!categories[result.category]) { | |
| categories[result.category] = []; | |
| } | |
| categories[result.category].push(result); | |
| }); | |
| // Create endpoint cards | |
| results.forEach(result => { | |
| const card = document.createElement('div'); | |
| card.className = `endpoint-card ${result.success ? 'success' : 'error'}`; | |
| const statusClass = result.success ? 'success' : 'error'; | |
| const statusText = result.success ? 'PASS' : 'FAIL'; | |
| card.innerHTML = ` | |
| <div style="display: flex; align-items: center; margin-bottom: 10px;"> | |
| <span class="status-indicator ${statusClass}"></span> | |
| <strong>${result.name}</strong> | |
| <span style="margin-left: auto; font-size: 0.8rem; color: #666;"> | |
| ${result.responseTime}ms | |
| </span> | |
| </div> | |
| <div style="font-size: 0.9rem; color: #666;"> | |
| <div>URL: ${result.url}</div> | |
| <div>Method: ${result.method}</div> | |
| <div>Status: ${result.status}</div> | |
| ${result.error ? `<div style="color: #ef4444;">Error: ${result.error}</div>` : ''} | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| // Create detailed results | |
| let detailedHTML = '<h3>Test Results by Category</h3>'; | |
| Object.entries(categories).forEach(([category, categoryResults]) => { | |
| const passed = categoryResults.filter(r => r.success).length; | |
| const total = categoryResults.length; | |
| const rate = ((passed / total) * 100).toFixed(1); | |
| detailedHTML += ` | |
| <div style="margin-bottom: 20px;"> | |
| <h4>${category} (${passed}/${total} - ${rate}%)</h4> | |
| <ul> | |
| ${categoryResults.map(result => ` | |
| <li class="${result.success ? 'success' : 'error'}"> | |
| ${result.name}: ${result.success ? 'PASS' : 'FAIL'} | |
| (${result.responseTime}ms) | |
| ${result.error ? ` - ${result.error}` : ''} | |
| </li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| `; | |
| }); | |
| detailedContainer.innerHTML = detailedHTML; | |
| } | |
| // Auto-run tests when page loads | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| console.log('Auto-running API tests...'); | |
| runAllTests(); | |
| }, 1000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |