Michael Schiemer
fc3d7e6357
- Add comprehensive health check system with multiple endpoints - Add Prometheus metrics endpoint - Add production logging configurations (5 strategies) - Add complete deployment documentation suite: * QUICKSTART.md - 30-minute deployment guide * DEPLOYMENT_CHECKLIST.md - Printable verification checklist * DEPLOYMENT_WORKFLOW.md - Complete deployment lifecycle * PRODUCTION_DEPLOYMENT.md - Comprehensive technical reference * production-logging.md - Logging configuration guide * ANSIBLE_DEPLOYMENT.md - Infrastructure as Code automation * README.md - Navigation hub * DEPLOYMENT_SUMMARY.md - Executive summary - Add deployment scripts and automation - Add DEPLOYMENT_PLAN.md - Concrete plan for immediate deployment - Update README with production-ready features All production infrastructure is now complete and ready for deployment.
209 lines
6.1 KiB
PHP
209 lines
6.1 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LiveComponents Test</title>
|
||
<style>
|
||
body {
|
||
font-family: system-ui, -apple-system, sans-serif;
|
||
background: #f5f5f5;
|
||
margin: 0;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0 0 0.5rem 0;
|
||
color: #333;
|
||
}
|
||
|
||
.header p {
|
||
margin: 0;
|
||
color: #666;
|
||
}
|
||
|
||
.test-section {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 2rem;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.test-section h2 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
border-bottom: 2px solid #007bff;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.feature-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.feature-list li {
|
||
padding: 0.5rem 0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.feature-list li:before {
|
||
content: "";
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.code-example {
|
||
background: #f8f9fa;
|
||
padding: 1rem;
|
||
border-radius: 4px;
|
||
border-left: 4px solid #007bff;
|
||
margin: 1rem 0;
|
||
font-family: monospace;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.instructions {
|
||
background: #e3f2fd;
|
||
border: 1px solid #2196f3;
|
||
border-radius: 4px;
|
||
padding: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.instructions h3 {
|
||
margin-top: 0;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.status {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 4px;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>><EFBFBD> LiveComponents Test Suite</h1>
|
||
<p>Zero-Dependency Interactive Components</p>
|
||
<span class="status status-success">System Active</span>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>=<EFBFBD> Test Component: Counter</h2>
|
||
|
||
<div class="instructions">
|
||
<h3>Test Instructions:</h3>
|
||
<ul>
|
||
<li>Click <strong>+ Increment</strong> to increase counter</li>
|
||
<li>Click <strong>- Decrement</strong> to decrease counter</li>
|
||
<li>Click <strong>Reset</strong> to set counter to 0</li>
|
||
<li>Enter a number and click <strong>Add Amount</strong> to add custom value</li>
|
||
<li>Watch for auto-polling updates every 10 seconds</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{!! counter.toHtml() !!}
|
||
|
||
<div style="margin-top: 2rem;">
|
||
<h3>Features Demonstrated:</h3>
|
||
<ul class="feature-list">
|
||
<li>Action Handling (increment, decrement, reset)</li>
|
||
<li>Form Submission (addAmount with parameter)</li>
|
||
<li>State Management (count, last_update)</li>
|
||
<li>Polling (auto-updates every 10 seconds)</li>
|
||
<li>DOM Updates (live HTML replacement)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="code-example">
|
||
<strong>Component ID:</strong> {!! counter.getId() !!}<br>
|
||
<strong>Template:</strong> Framework/LiveComponents/Templates/counter.view.php<br>
|
||
<strong>Class:</strong> App\Application\Components\CounterComponent
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>=<EFBFBD> Technical Details</h2>
|
||
|
||
<h3>Architecture:</h3>
|
||
<div class="code-example">
|
||
final readonly class CounterComponent implements LiveComponentContract, Pollable
|
||
{
|
||
use LiveComponentTrait;
|
||
|
||
public function render(): string { /* ... */ }
|
||
public function increment(): array { /* ... */ }
|
||
public function poll(): array { /* ... */ }
|
||
}
|
||
</div>
|
||
|
||
<h3>Routes:</h3>
|
||
<ul class="feature-list">
|
||
<li>POST /live-component/{id} - Action Handler</li>
|
||
<li>POST /live-component/{id}/upload - Upload Handler</li>
|
||
<li>GET /test/livecomponents - This page</li>
|
||
</ul>
|
||
|
||
<h3>JavaScript:</h3>
|
||
<ul class="feature-list">
|
||
<li>/public/js/live-components.js (~3KB)</li>
|
||
<li>/public/js/sse-client.js (~2KB)</li>
|
||
<li>Zero external dependencies</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>=<EFBFBD> Browser Console</h2>
|
||
<p>Open your browser's Developer Console (F12) to see:</p>
|
||
<ul class="feature-list">
|
||
<li>Component initialization logs</li>
|
||
<li>Action execution traces</li>
|
||
<li>Polling activity</li>
|
||
<li>State updates</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LiveComponents JavaScript -->
|
||
<script src="/js/live-components.js"></script>
|
||
<script src="/js/sse-client.js"></script>
|
||
|
||
<script>
|
||
// Log component initialization
|
||
console.log('LiveComponents Test Suite Loaded');
|
||
console.log('Available:', {
|
||
liveComponents: window.liveComponents,
|
||
sseManager: window.sseManager
|
||
});
|
||
|
||
// Custom event listener example
|
||
document.addEventListener('component:updated', (e) => {
|
||
console.log('Component updated:', e.detail);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|