@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
264 lines (225 loc) • 11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test league-admin-element</title>
<script type="importmap">
{
"imports": {
"@lovebowls/leaguejs": "/node_modules/@lovebowls/leaguejs/dist/index.js"
}
}
</script>
<style>
/* ... existing styles ... */
</style>
</head>
<body>
<h1>Test: <league-admin-element></h1>
<div>
<button id="reset-data-btn" style="margin-bottom: 1em; padding: 0.5em; background: #ff6b6b; color: white; border: none; border-radius: 4px; cursor: pointer;">Reset to Default Data</button>
<button id="test-error-btn" style="margin-bottom: 1em; margin-left: 1em; padding: 0.5em; background: #ff8c00; color: white; border: none; border-radius: 4px; cursor: pointer;">Test Save Error</button>
</div>
<!-- Removed hardcoded data attribute; we'll set it via JavaScript after checking session storage -->
<league-admin-element id="test-league-admin" current-league-id="">
<div id="event-log" style="margin-top:2em; background:#f9f9f9; padding:1em; border:1px solid #ccc; word-wrap: break-word;"><b>Event Log:</b><br></div>
<script type="module">
import '../../../dist/browser/leagueAdminElement.js';
import { generateMultipleTestLeagues, generateTestLeagueData } from '../../test-data/league-test-data.js';
const el = document.getElementById('test-league-admin');
const STORAGE_KEY = 'lovebowlsTestHarnessData';
// Set lovebowls teams data
const lovebowlsTeamsData = [
{ _id: "lb-guid-a123", name: "Lovebowls Club Alpha" },
{ _id: "lb-guid-b456", name: "Lovebowls Club Beta" },
{ _id: "lb-guid-c789", name: "Lovebowls Club Gamma" },
{ _id: "lb-guid-d012", name: "Lovebowls Club Delta" },
{ _id: "lb-guid-e345", name: "Lovebowls Club Epsilon" }
];
// Generate default league data using our test data generator with lovebowls teams
const defaultLeagues = generateMultipleTestLeagues(lovebowlsTeamsData, 3);
// Try to load league data from session storage or use default
function loadLeagueData() {
try {
const storedData = sessionStorage.getItem(STORAGE_KEY);
if (storedData) {
// The stored data is an object { leagues: [...] }
return JSON.parse(storedData).leagues;
}
} catch (e) {
console.error('Error loading data from session storage:', e);
}
// On first load, defaultLeagues is just the array.
return defaultLeagues;
}
// Save league data to session storage
function saveLeagueData(leaguesArray) {
try {
// Wrap the array in an object
const dataToStore = { leagues: leaguesArray };
sessionStorage.setItem(STORAGE_KEY, JSON.stringify(dataToStore));
logEvent('Data saved to session storage');
} catch (e) {
console.error('Error saving data to session storage:', e);
}
}
// Initialize with saved or default data
const initialData = loadLeagueData();
// The first time, we need to save the default data in the new format
if (!sessionStorage.getItem(STORAGE_KEY)) {
saveLeagueData(initialData);
}
el.setAttribute('data', JSON.stringify(initialData));
// Check for a leagueId in the URL and set it as current
const urlParams = new URLSearchParams(window.location.search);
const leagueIdFromUrl = urlParams.get('leagueId');
if (leagueIdFromUrl) {
el.setAttribute('current-league-id', leagueIdFromUrl);
logEvent(`Set current league from URL: ${leagueIdFromUrl}`);
}
// Handle Reset button
document.getElementById('reset-data-btn').addEventListener('click', () => {
try {
// Make sure lovebowlsTeamsData is defined and not empty
if (!lovebowlsTeamsData || !Array.isArray(lovebowlsTeamsData) || !lovebowlsTeamsData.length) {
logEvent('Error: lovebowlsTeamsData is not available');
return;
}
// Generate fresh test data when resetting, including lovebowls teams
const freshLeagues = generateMultipleTestLeagues(lovebowlsTeamsData, 3);
// This will overwrite the existing data
saveLeagueData(freshLeagues);
el.setAttribute('data', JSON.stringify(freshLeagues));
logEvent('Data reset to default with fresh test data and saved to session storage');
// Log the generated data for debugging
console.log('Reset league data:', freshLeagues);
} catch (error) {
console.error('Error resetting data:', error);
logEvent(`Error resetting data: ${error.message}`);
}
});
// Set is-mobile attribute based on device detection
const userAgentIsMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const windowIsNarrow = window.innerWidth <= 768;
const calculatedIsMobile = userAgentIsMobile || windowIsNarrow;
console.log('[Test Harness - league-admin-element] navigator.userAgent:', navigator.userAgent);
console.log('[Test Harness - league-admin-element] userAgentIsMobile:', userAgentIsMobile);
console.log('[Test Harness - league-admin-element] window.innerWidth:', window.innerWidth);
console.log('[Test Harness - league-admin-element] windowIsNarrow:', windowIsNarrow);
console.log('[Test Harness - league-admin-element] Calculated isMobile for attribute logic:', calculatedIsMobile);
if (calculatedIsMobile) {
el.setAttribute('is-mobile', 'true');
console.log('[Test Harness - league-admin-element] el.setAttribute("is-mobile", "true")');
} else {
el.removeAttribute('is-mobile');
console.log('[Test Harness - league-admin-element] el.removeAttribute("is-mobile")');
}
if (calculatedIsMobile) {
el.setAttribute('font-scale', '1.5');
}
// Pass lovebowls teams data to the element
el.setAttribute('lovebowls-teams', JSON.stringify(lovebowlsTeamsData));
// Helper function to log events to the UI
function logEvent(message) {
const log = document.getElementById('event-log');
log.innerHTML += `<div>${message}</div>`;
}
// Listen for requestSaveLeague event to handle all save operations
el.addEventListener('requestSaveLeague', (e) => {
const updatedLeague = e.detail.leagueData;
const currentData = loadLeagueData();
// Simulate a 3-second delay for testing visual effects
setTimeout(() => {
// Check if this is a new league (no _id) or an existing league
if (!updatedLeague._id) {
// New league - generate an ID and add to the array
updatedLeague._id = `league-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
updatedLeague.teams = updatedLeague.teams || [];
updatedLeague.matches = updatedLeague.matches || [];
updatedLeague.createdAt = new Date();
updatedLeague.updatedAt = new Date();
const updatedLeagues = [...currentData, updatedLeague];
// Save updated data
saveLeagueData(updatedLeagues);
// Update the component with new data
el.setAttribute('data', JSON.stringify(updatedLeagues));
logEvent(`New league "${updatedLeague.name}" created and saved`);
} else {
// Existing league - find and update
const updatedLeagues = currentData.map(league => {
if (league._id === updatedLeague._id || league.name === updatedLeague.name) {
return updatedLeague;
}
return league;
});
// Save updated data
saveLeagueData(updatedLeagues);
// Update the component with new data
el.setAttribute('data', JSON.stringify(updatedLeagues));
logEvent(`League "${updatedLeague.name}" updated and saved`);
}
}, 3000); // 3-second delay to test visual effects
});
// Handle league delete events
el.addEventListener('requestDeleteLeague', (e) => {
const leagueId = e.detail.leagueId;
console.log(`[TestPage] requestDeleteLeague received for ID: ${leagueId}`);
const currentData = loadLeagueData();
const updatedLeagues = currentData.filter(league =>
((league._id || league.name) !== leagueId)
);
// Save and update
saveLeagueData(updatedLeagues);
el.setAttribute('data', JSON.stringify(updatedLeagues));
logEvent(`League with ID ${leagueId} deleted`);
});
// Handle test error button
document.getElementById('test-error-btn').addEventListener('click', () => {
// Simulate a save error by calling the handleSaveError method
el.handleSaveError('This is a simulated save error for testing purposes.');
logEvent('Simulated save error triggered');
});
// Note: Individual league reset is now handled internally by the LeagueAdminElement
// The requestResetLeague event is no longer dispatched for individual league resets
// Handle league view events
el.addEventListener('requestViewLeagueTable', (e) => {
const { leagueId, leagueName } = e.detail;
console.log(`[TestPage] requestViewLeagueTable received for ID: ${leagueId}, Name: ${leagueName}`);
logEvent(`Request to view league: ${leagueName} (ID: ${leagueId})`);
// Data is already synchronized in sessionStorage. We just need to navigate.
// Pass the leagueId as a URL parameter.
window.location.href = `../leagueElement/test-league-element.html?leagueId=${encodeURIComponent(leagueId)}`;
});
// Log all events for debugging
const eventsToLog = [
'leagueSelected',
'leagueUpdated',
'leagueDeleted',
'leagueCreated',
'saveLeague',
'deleteLeague',
'lovebowlsTeamsLoaded'
];
eventsToLog.forEach(eventName => {
el.addEventListener(eventName, (e) => {
logEvent(`Event: ${eventName} - ${JSON.stringify(e.detail)}`);
});
});
// Update is-mobile on window resize
window.addEventListener('resize', () => {
const userAgentIsMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
const windowIsNarrow = window.innerWidth <= 768;
const calculatedIsMobile = userAgentIsMobile || windowIsNarrow;
if (calculatedIsMobile) {
if (el.getAttribute('is-mobile') !== 'true') {
el.setAttribute('is-mobile', 'true');
}
} else {
if (el.hasAttribute('is-mobile')) {
el.removeAttribute('is-mobile');
}
}
});
</script>
</body>
</html>