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:
143
debug-theme-detailed.cjs
Normal file
143
debug-theme-detailed.cjs
Normal file
@@ -0,0 +1,143 @@
|
||||
const { test, expect } = require('@playwright/test');
|
||||
|
||||
test.describe('Detailed Theme Debug', () => {
|
||||
test('Comprehensive theme toggle debugging', async ({ page }) => {
|
||||
// Navigate to the calendar page
|
||||
await page.goto('http://localhost:3000/calendar');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
console.log('=== INITIAL STATE ===');
|
||||
|
||||
// Check if page is fully loaded
|
||||
const pageTitle = await page.title();
|
||||
console.log('Page title:', pageTitle);
|
||||
|
||||
// Get initial state
|
||||
const initialTheme = await page.locator('html').getAttribute('data-theme');
|
||||
const initialClass = await page.locator('html').getAttribute('class');
|
||||
console.log('Initial theme attribute:', initialTheme);
|
||||
console.log('Initial class:', initialClass);
|
||||
|
||||
// Check if theme toggle exists and is visible
|
||||
const themeToggle = page.locator('#theme-toggle');
|
||||
const toggleExists = await themeToggle.isVisible();
|
||||
console.log('Theme toggle exists and visible:', toggleExists);
|
||||
|
||||
if (!toggleExists) {
|
||||
console.log('ERROR: Theme toggle not found or not visible');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get theme toggle properties
|
||||
const toggleText = await themeToggle.textContent();
|
||||
const toggleHTML = await themeToggle.innerHTML();
|
||||
console.log('Toggle text content:', toggleText);
|
||||
console.log('Toggle HTML:', toggleHTML);
|
||||
|
||||
// Check if JavaScript is running
|
||||
const jsWorking = await page.evaluate(() => {
|
||||
return typeof window !== 'undefined' && typeof document !== 'undefined';
|
||||
});
|
||||
console.log('JavaScript is working:', jsWorking);
|
||||
|
||||
// Check if our theme script is loaded
|
||||
const themeScriptLoaded = await page.evaluate(() => {
|
||||
const element = document.getElementById('theme-toggle');
|
||||
return element && element.onclick !== null;
|
||||
});
|
||||
console.log('Theme script appears loaded:', themeScriptLoaded);
|
||||
|
||||
// Get initial CSS variables
|
||||
const initialCssVars = await page.evaluate(() => {
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
textPrimary: style.getPropertyValue('--glass-text-primary').trim(),
|
||||
bgGradient: style.getPropertyValue('--bg-gradient').trim(),
|
||||
glassBg: style.getPropertyValue('--glass-bg').trim()
|
||||
};
|
||||
});
|
||||
console.log('Initial CSS variables:', initialCssVars);
|
||||
|
||||
// Check localStorage before click
|
||||
const initialLocalStorage = await page.evaluate(() => {
|
||||
return {
|
||||
theme: localStorage.getItem('theme'),
|
||||
keys: Object.keys(localStorage)
|
||||
};
|
||||
});
|
||||
console.log('Initial localStorage:', initialLocalStorage);
|
||||
|
||||
console.log('=== CLICKING THEME TOGGLE ===');
|
||||
|
||||
// Add event listener to catch errors
|
||||
await page.evaluate(() => {
|
||||
window.addEventListener('error', (e) => {
|
||||
console.log('JavaScript error:', e.error);
|
||||
});
|
||||
});
|
||||
|
||||
// Click theme toggle with more detail
|
||||
await themeToggle.click();
|
||||
console.log('Theme toggle clicked');
|
||||
|
||||
// Wait for any animations/transitions
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
console.log('=== AFTER CLICK STATE ===');
|
||||
|
||||
// Get state after toggle
|
||||
const newTheme = await page.locator('html').getAttribute('data-theme');
|
||||
const newClass = await page.locator('html').getAttribute('class');
|
||||
console.log('After toggle theme attribute:', newTheme);
|
||||
console.log('After toggle class:', newClass);
|
||||
|
||||
// Get CSS variables after toggle
|
||||
const newCssVars = await page.evaluate(() => {
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
textPrimary: style.getPropertyValue('--glass-text-primary').trim(),
|
||||
bgGradient: style.getPropertyValue('--bg-gradient').trim(),
|
||||
glassBg: style.getPropertyValue('--glass-bg').trim()
|
||||
};
|
||||
});
|
||||
console.log('After toggle CSS variables:', newCssVars);
|
||||
|
||||
// Check localStorage after click
|
||||
const newLocalStorage = await page.evaluate(() => {
|
||||
return {
|
||||
theme: localStorage.getItem('theme'),
|
||||
keys: Object.keys(localStorage)
|
||||
};
|
||||
});
|
||||
console.log('After toggle localStorage:', newLocalStorage);
|
||||
|
||||
// Check if CSS variables actually changed
|
||||
const varsChanged = JSON.stringify(initialCssVars) !== JSON.stringify(newCssVars);
|
||||
console.log('CSS variables changed:', varsChanged);
|
||||
|
||||
// Take screenshots
|
||||
await page.screenshot({ path: 'debug-before-toggle.png', fullPage: true });
|
||||
|
||||
// Try clicking again to see if it works at all
|
||||
await themeToggle.click();
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const finalTheme = await page.locator('html').getAttribute('data-theme');
|
||||
console.log('After second click theme:', finalTheme);
|
||||
|
||||
await page.screenshot({ path: 'debug-after-second-toggle.png', fullPage: true });
|
||||
|
||||
// Check if event listeners are attached
|
||||
const eventListeners = await page.evaluate(() => {
|
||||
const toggle = document.getElementById('theme-toggle');
|
||||
if (!toggle) return 'No toggle element';
|
||||
|
||||
// Try to see if there are any event listeners
|
||||
return {
|
||||
hasClickHandler: typeof toggle.onclick === 'function',
|
||||
hasEventListeners: toggle.addEventListener ? 'addEventListener exists' : 'no addEventListener'
|
||||
};
|
||||
});
|
||||
console.log('Event listener info:', eventListeners);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user