Major fixes and improvements: - Fixed edit event button functionality with proper event handlers and DOM ready state checking - Added status column to tickets table via Supabase migration to resolve 500 API errors - Updated stats API to correctly calculate revenue from decimal price values - Resolved authentication redirect loops by fixing cookie configuration for Docker environment - Fixed Permissions-Policy header syntax errors - Added comprehensive debugging and error handling for event management - Implemented modal-based event editing with form validation and API integration - Enhanced event data loading with proper error handling and user feedback 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
193 lines
7.0 KiB
HTML
193 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar Test - Simulating Fresh Browser</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
.test-header {
|
|
background: #333;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: 800px;
|
|
border: none;
|
|
}
|
|
.controls {
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 0 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
.info {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #e7f3ff;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<div class="test-header">
|
|
<h1>Black Canyon Tickets Calendar - Deployment Test</h1>
|
|
<p>Testing what a fresh Chrome Canary browser would see</p>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button onclick="reloadCalendar()">🔄 Fresh Load (Clear Cache)</button>
|
|
<button onclick="toggleTheme()">🌙 Test Theme Toggle</button>
|
|
<button onclick="openDevTools()">🔍 Open DevTools</button>
|
|
<button onclick="testResponsive()">📱 Test Mobile View</button>
|
|
|
|
<div class="info">
|
|
<strong>Test Status:</strong>
|
|
<span id="test-status">Ready to test</span>
|
|
</div>
|
|
</div>
|
|
|
|
<iframe id="calendar-frame" src="http://localhost:4321/calendar"
|
|
sandbox="allow-scripts allow-same-origin allow-forms allow-popups">
|
|
</iframe>
|
|
</div>
|
|
|
|
<script>
|
|
let frameDoc;
|
|
|
|
// Wait for iframe to load
|
|
document.getElementById('calendar-frame').onload = function() {
|
|
frameDoc = this.contentDocument || this.contentWindow.document;
|
|
checkPageStatus();
|
|
};
|
|
|
|
function updateStatus(message) {
|
|
document.getElementById('test-status').textContent = message;
|
|
}
|
|
|
|
function reloadCalendar() {
|
|
updateStatus('Reloading with fresh cache...');
|
|
const frame = document.getElementById('calendar-frame');
|
|
// Simulate fresh browser load by adding cache busting parameter
|
|
const url = new URL(frame.src);
|
|
url.searchParams.set('_t', Date.now());
|
|
frame.src = url.toString();
|
|
}
|
|
|
|
function toggleTheme() {
|
|
updateStatus('Testing theme toggle...');
|
|
try {
|
|
if (frameDoc) {
|
|
// Try to find and click the theme toggle button
|
|
const themeToggle = frameDoc.getElementById('theme-toggle');
|
|
if (themeToggle) {
|
|
themeToggle.click();
|
|
updateStatus('Theme toggle clicked');
|
|
} else {
|
|
updateStatus('Theme toggle button not found!');
|
|
}
|
|
}
|
|
} catch (e) {
|
|
updateStatus('Error accessing iframe: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function openDevTools() {
|
|
updateStatus('Open browser DevTools to inspect the iframe');
|
|
// Focus the iframe for easier inspection
|
|
document.getElementById('calendar-frame').focus();
|
|
}
|
|
|
|
function testResponsive() {
|
|
updateStatus('Testing mobile view...');
|
|
const frame = document.getElementById('calendar-frame');
|
|
if (frame.style.width === '375px') {
|
|
frame.style.width = '100%';
|
|
frame.style.height = '800px';
|
|
updateStatus('Desktop view restored');
|
|
} else {
|
|
frame.style.width = '375px';
|
|
frame.style.height = '667px';
|
|
updateStatus('Mobile view (iPhone SE)');
|
|
}
|
|
}
|
|
|
|
function checkPageStatus() {
|
|
updateStatus('Checking page elements...');
|
|
|
|
setTimeout(() => {
|
|
try {
|
|
if (!frameDoc) {
|
|
updateStatus('❌ Cannot access iframe content (CORS/security)');
|
|
return;
|
|
}
|
|
|
|
const results = [];
|
|
|
|
// Check for theme attribute
|
|
const html = frameDoc.documentElement;
|
|
const theme = html.getAttribute('data-theme');
|
|
results.push(`Theme: ${theme || 'NOT SET'}`);
|
|
|
|
// Check for hero section
|
|
const heroSection = frameDoc.getElementById('hero-section');
|
|
if (heroSection) {
|
|
const heroStyle = window.getComputedStyle(heroSection);
|
|
const bgValue = heroStyle.background;
|
|
results.push(`Hero BG: ${bgValue.includes('var(') ? 'CSS Variable' : 'Direct Value'}`);
|
|
} else {
|
|
results.push('❌ Hero section not found');
|
|
}
|
|
|
|
// Check for theme toggle
|
|
const themeToggle = frameDoc.getElementById('theme-toggle');
|
|
results.push(`Theme Toggle: ${themeToggle ? '✅ Found' : '❌ Missing'}`);
|
|
|
|
// Check for calendar grid
|
|
const calendarGrid = frameDoc.getElementById('calendar-grid');
|
|
results.push(`Calendar: ${calendarGrid ? '✅ Found' : '❌ Missing'}`);
|
|
|
|
// Check for loading state
|
|
const loadingState = frameDoc.getElementById('loading-state');
|
|
if (loadingState) {
|
|
const isHidden = loadingState.classList.contains('hidden');
|
|
results.push(`Loading: ${isHidden ? 'Hidden' : 'Visible'}`);
|
|
}
|
|
|
|
updateStatus(results.join(' | '));
|
|
|
|
} catch (e) {
|
|
updateStatus('❌ Error checking page: ' + e.message);
|
|
}
|
|
}, 2000); // Wait 2 seconds for page to fully load
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |