@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
370 lines • 13.6 kB
TypeScript
export class LeagueElement extends HTMLElement {
static get observedAttributes(): string[];
static TEAM_COLORS: string[];
shadow: ShadowRoot;
data: any;
leftPanelFlexBasis: any;
minRightPanelPixelWidth: number | null;
activeView: string;
pointsOverTimeChartData: {
dates: never[];
teamSeries: {};
allTeamNames: never[];
} | {
dates: never[];
teamSeries: {};
allTeamNames: never[];
} | {
dates: never[];
teamSeries: {};
allTeamNames: any[];
} | {
dates: never[];
teamSeries: {};
allTeamNames: any[];
} | {
dates: any[];
teamSeries: {};
allTeamNames: any[];
} | null;
selectedTeamsForGraph: Set<any>;
teamColors: {};
activeTrendGraphType: string;
tableFilter: string;
matchModalOpen: boolean;
matchModalData: Object | null;
matchModalTeams: any[];
matchModalMode: string;
lovebowlsTeams: any[];
_handleScheduleMatchEditBound: ((e: CustomEvent) => void) | null;
selectedTeamForSchedule: string | null;
get _isMobile(): boolean;
get _canEdit(): boolean;
get _fontScale(): number;
connectedCallback(): void;
attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
_parseAndLoadData(data: any): Promise<void>;
showError(message: any): void;
_fillTemplate(template: any): any;
render(): void;
tableRows: string | undefined;
_handleAttentionMatchClickBound: ((e: any) => void) | undefined;
setupPaging(): void;
setupResizer(): void;
/**
* Renders the form icons with tooltips for matches.
* @param {Array<Object>|string} [matches=[]] - An array of match objects or a form string
* Each object should have 'result' (W/D/L)
* and 'description' (the tooltip text).
* @returns {string} HTML string for the form icons.
*/
renderForm(matches?: Array<Object> | string): string;
/**
* Basic HTML escaping function to prevent XSS issues in tooltips.
* @param {string} unsafe - The string to escape.
* @returns {string} The escaped string.
*/
escapeHtml(unsafe?: string): string;
/**
* Formats a list of matches for tooltip display.
* If resultType is provided, only matches of that type are included.
* If not, all matches are included.
* @param {Array<Object>} matches - Array of match objects
* @param {string} teamId - The ID of the team to check the result for.
* @param {string} [resultType] - Optional: 'W', 'D', or 'L'
* @param {boolean} [displayVerb=true] - Whether to show the verb (Won/Lost/Drew)
* @returns {string} Tooltip string
*/
formatMatchList(matches: Array<Object> | undefined, teamId: string, resultType?: string, displayVerb?: boolean): string;
_getConflictingMatchKeys(): Set<any>;
setupTabs(): void;
_prepareMatrixData(): {
teams: any[];
teamMatches: Map<any, any>;
} | null;
_handleMatchSave(e: any): void;
_getFilteredLeagueData(): Object | null;
/**
* Sorts teams by their form using a weighted scoring system.
* More recent matches have higher weight in the calculation.
* @param {Array<Object>} stats - Array of team statistics objects
* @returns {Array<Object>} Teams sorted by form score (best form first)
*/
_sortByForm(stats: Array<Object>): Array<Object>;
/**
* Calculates a weighted form score based on recent match results.
* Uses a standard methodology: W=3pts, D=1pt, L=0pts with heavy recency weighting.
* Most recent matches have higher impact on the score.
* @param {Array<Object>} formMatches - Array of recent match objects with result and description
* @returns {number} Form score (0-3 range, proportionally scaled for fewer matches)
*/
_calculateFormScore(formMatches: Array<Object>): number;
_getTeamsFromLeagueData(): any;
setupTrendsViewInteractivity(): void;
renderTrendsViewContent(): string;
_preparePointsOverTimeData(): void;
_prepareShotsForVsAgainstData(): void;
shotsForVsAgainstData: {
teams: never[];
averageShotsFor: number;
averageShotsAgainst: number;
maxShotsFor: number;
maxShotsAgainst: number;
} | {
teams: never[];
averageShotsFor: number;
averageShotsAgainst: number;
maxShotsFor: number;
maxShotsAgainst: number;
} | {
teams: never[];
averageShotsFor: number;
averageShotsAgainst: number;
maxShotsFor: number;
maxShotsAgainst: number;
} | {
teams: never[];
averageShotsFor: number;
averageShotsAgainst: number;
maxShotsFor: number;
maxShotsAgainst: number;
} | {
teams: any[];
averageShotsFor: number;
averageShotsAgainst: number;
maxShotsFor: number;
maxShotsAgainst: number;
} | undefined;
_prepareFormOverTimeData(): void;
formOverTimeChartData: Object | {
dates: never[];
teamSeries: {};
allTeamNames: never[];
} | {
dates: never[];
teamSeries: {};
allTeamNames: never[];
} | undefined;
ensureTeamColors(): void;
_usedColorIndices: Set<any> | undefined;
drawPointsOverTimeSVG(): void;
drawShotsForVsAgainstSVG(): void;
/**
* Apply simple moving average smoothing to a data series
* @param {Array<number>} data - Array of numeric values to smooth
* @param {number} windowSize - Size of the smoothing window (default: 3)
* @returns {Array<number>} Smoothed data array
*/
_smoothDataSeries(data: Array<number>, windowSize?: number): Array<number>;
drawFormOverTimeSVG(): void;
setupTableFilterDropdown(): void;
handleTableExport(exportType: any): void;
setupTableRowEvents(): void;
/**
* Renders the rank movement indicator to be placed next to the position.
* @param {number|undefined} movement - The change in rank. Positive for up, negative for down, 0 for no change.
* @returns {string} HTML string for the movement indicator.
*/
renderRankMovementIndicator(movement: number | undefined): string;
/**
* @param {Array<Object>} matchesSubset - Array of match objects to calculate ranks from.
* @param {Array<string>} allTeamIdsInLeague - Array of all team IDs in the league.
* @returns {Object|null} A map of { teamId: rank }, or null if calculation isn't possible.
*/
_calculateRanksFromMatches(matchesSubset: Array<Object>, allTeamIdsInLeague: Array<string>): Object | null;
/**
* Calculate rank movements by comparing current table with table excluding most recent match day
* @param {Array<Object>} matchesSubset - All matches used for current table calculation
* @param {Array<string>} allTeamIdsInLeague - Array of all team IDs in the league
* @param {Array<Object>} currentStats - Current team statistics with ranks
* @returns {Object} Map of teamId to rank movement (positive = moved up, negative = moved down)
*/
_calculateRankMovements(matchesSubset: Array<Object>, allTeamIdsInLeague: Array<string>, currentStats: Array<Object>): Object;
/**
* Calculate rank movements specifically for form view
* @param {Array<Object>} matchesSubset - All matches used for current table calculation
* @param {Array<string>} allTeamIdsInLeague - Array of all team IDs in the league
* @param {Array<Object>} currentStats - Current team statistics with ranks
* @returns {Object} Map of teamId to rank movement
*/
_calculateFormRankMovements(matchesSubset: Array<Object>, allTeamIdsInLeague: Array<string>, currentStats: Array<Object>): Object;
/**
* Calculate basic statistics from matches (helper method for rank movement calculation)
* @param {Array<Object>} matches - Array of match objects
* @param {Array<string>} allTeamIdsInLeague - Array of all team IDs in the league
* @returns {Array<Object>} Array of team statistics
*/
_calculateStatsFromMatches(matches: Array<Object>, allTeamIdsInLeague: Array<string>): Array<Object>;
/**
* Open the match modal dialog.
* @param {Object} matchData
* @param {Array<Object>} teams - Array of team objects ({_id, name}) for dropdowns.
* @param {'edit'|'new'} mode
*/
openMatchModal(matchData: Object, teams: Array<Object>, mode?: "edit" | "new"): void;
/**
* Close the match modal dialog.
*/
closeMatchModal(): void;
/**
* Renders only the match modal without affecting the rest of the component
* @private
*/
private _renderMatchModal;
_handleRecentMatchClick(e: any): void;
_handleAttentionMatchClick(e: any): void;
parseLovebowlsTeams(teamsData: any): void;
_lovebowlsTeams: any[] | undefined;
_teamNameMap: {} | undefined;
getTeamDisplayName(teamId: any): any;
/**
* Get a shortened version of team name for mobile display
* @param {string} teamName - The full team name
* @return {string} - Shortened team name for mobile display
*/
_getShortTeamName(teamName: string): string;
get _table(): any;
_updateUI(): void;
_updateLeagueTable(table: any): void;
_updateMatrixView(table: any): void;
_updateFixturesView(table: any): void;
renderMatrix(): string;
_findMatchBetweenTeams(homeTeamId: any, awayTeamId: any): any;
setupMatrixEventListeners(): void;
/**
* Sets up event listeners for the schedule view and configures the component
* @private
*/
private _setupScheduleEventListeners;
/**
* Handles match edit events from the schedule component
* @param {CustomEvent} e - The event object
* @private
*/
private _handleScheduleMatchEdit;
_createSelectAllCheckbox(allTeams: any): HTMLLabelElement | null;
_updateSelectAllCheckboxState(): void;
}
/**
* Configuration wrapper class that provides a simple API for hosting LeagueElement
* with just a league ID. This abstracts the complex attribute management and data fetching.
*/
export class LeagueElementConfig {
/**
* Creates a new LeagueElementConfig instance
* @param {Object} options - Configuration options
* @param {string} options.leagueId - The league ID to load
* @param {string} options.container - CSS selector for the container element
* @param {boolean} [options.isMobile=false] - Whether to render in mobile mode
* @param {number} [options.fontScale=1.0] - Font scale factor (0.5 to 2.0)
* @param {string} [options.apiBaseUrl='https://www.lovebowls.co.uk/_functions'] - Base URL for API calls
* @param {Function} [options.onError] - Error callback function
* @param {Function} [options.onLoad] - Success callback function
*/
constructor(options?: {
leagueId: string;
container: string;
isMobile?: boolean | undefined;
fontScale?: number | undefined;
apiBaseUrl?: string | undefined;
onError?: Function | undefined;
onLoad?: Function | undefined;
});
leagueId: string;
container: string;
isMobile: boolean;
fontScale: number;
apiBaseUrl: string;
onError: Function;
onLoad: Function;
element: HTMLElement | null;
isLoading: boolean;
error: unknown;
/**
* Loads the league data and renders the element
* @returns {Promise<void>}
*/
load(): Promise<void>;
/**
* Reloads the league data
* @returns {Promise<void>}
*/
reload(): Promise<void>;
/**
* Destroys the element and cleans up
*/
destroy(): void;
/**
* Gets the current league element instance
* @returns {LeagueElement|null}
*/
getElement(): LeagueElement | null;
/**
* Gets the current loading state
* @returns {boolean}
*/
getLoadingState(): boolean;
/**
* Gets the last error, if any
* @returns {Error|null}
*/
getError(): Error | null;
/**
* Updates the configuration and reloads if needed
* @param {Object} options - New configuration options
*/
updateConfig(options?: Object): void;
/**
* Fetches league data from the API
* @private
* @returns {Promise<Object>}
*/
private _fetchLeagueData;
/**
* Clears the container element
* @private
*/
private _clearContainer;
/**
* Shows loading state in the container
* @private
*/
private _showLoading;
/**
* Hides loading state
* @private
*/
private _hideLoading;
/**
* Shows error state in the container
* @private
* @param {string} message - Error message to display
*/
private _showError;
/**
* Sets up event listeners for the league element
* @private
*/
private _setupEventListeners;
/**
* Default error handler
* @private
* @param {Error} error - The error object
*/
private _defaultErrorHandler;
/**
* Default load handler
* @private
* @param {LeagueElement} element - The created league element
* @param {Object} data - The loaded league data
*/
private _defaultLoadHandler;
/**
* Basic HTML escaping for error messages
* @private
* @param {string} text - Text to escape
* @returns {string} Escaped text
*/
private escapeHtml;
}
//# sourceMappingURL=leagueElement.d.ts.map