fix: Implement comprehensive edit event button functionality and resolve authentication issues
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>
This commit is contained in:
193
test-calendar-deployment.html
Normal file
193
test-calendar-deployment.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user