654 lines
30 KiB
JavaScript
654 lines
30 KiB
JavaScript
// Swiss Football Gutenberg Blocks - Refactored User Flow
|
|
(function (blocks, element, editor, components, i18n, data) {
|
|
'use strict';
|
|
|
|
const { registerBlockType } = blocks;
|
|
const { createElement: el, useState, useEffect } = element;
|
|
const { InspectorControls } = editor;
|
|
const { PanelBody, SelectControl, TextControl, ToggleControl, Spinner, RangeControl } = components;
|
|
const { __ } = i18n;
|
|
|
|
// Helper function to make AJAX calls
|
|
function makeAjaxCall(action, data = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
jQuery.post(swiFootEditorData.ajax_url, {
|
|
action: action,
|
|
nonce: swiFootEditorData.nonce,
|
|
...data
|
|
}, function (response) {
|
|
if (response && response.success) {
|
|
resolve(response);
|
|
} else {
|
|
reject(response);
|
|
}
|
|
}).fail(reject);
|
|
});
|
|
}
|
|
|
|
// Main Swiss Football Block - Refactored Logic
|
|
registerBlockType('swi-foot/team-data', {
|
|
title: __('Swiss Football Team Data', 'swi_foot_matchdata'),
|
|
description: __('Display team standings or match data with guided selection', 'swi_foot_matchdata'),
|
|
icon: 'universal-access-alt',
|
|
category: 'widgets',
|
|
keywords: [
|
|
__('football', 'swi_foot_matchdata'),
|
|
__('soccer', 'swi_foot_matchdata'),
|
|
__('team', 'swi_foot_matchdata'),
|
|
__('swiss', 'swi_foot_matchdata'),
|
|
],
|
|
|
|
attributes: {
|
|
selectedTeam: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
dataType: {
|
|
type: 'string',
|
|
default: '' // 'match' or 'stats'
|
|
},
|
|
selectedMatch: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
shortcodeType: {
|
|
type: 'string',
|
|
default: 'match'
|
|
},
|
|
format: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
separator: {
|
|
type: 'string',
|
|
default: ':'
|
|
}
|
|
},
|
|
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { selectedTeam, dataType, selectedMatch, shortcodeType, format, separator } = attributes;
|
|
|
|
// State for dynamic data
|
|
const [teams, setTeams] = useState([]);
|
|
const [matches, setMatches] = useState([]);
|
|
const [loadingTeams, setLoadingTeams] = useState(true);
|
|
const [loadingMatches, setLoadingMatches] = useState(false);
|
|
|
|
// Load teams on component mount
|
|
useEffect(() => {
|
|
makeAjaxCall('swi_foot_get_teams_for_editor')
|
|
.then(response => {
|
|
if (response.success && response.data) {
|
|
setTeams(response.data);
|
|
}
|
|
setLoadingTeams(false);
|
|
})
|
|
.catch(() => {
|
|
setLoadingTeams(false);
|
|
});
|
|
}, []);
|
|
|
|
// Load matches when team is selected and dataType is 'match'
|
|
useEffect(() => {
|
|
if (selectedTeam && dataType === 'match') {
|
|
setLoadingMatches(true);
|
|
makeAjaxCall('swi_foot_get_matches_for_team', { team_id: selectedTeam })
|
|
.then(response => {
|
|
if (response.success && response.data) {
|
|
setMatches(response.data);
|
|
}
|
|
setLoadingMatches(false);
|
|
})
|
|
.catch(() => {
|
|
setLoadingMatches(false);
|
|
});
|
|
} else {
|
|
setMatches([]);
|
|
}
|
|
}, [selectedTeam, dataType]);
|
|
|
|
// Build shortcode/content preview
|
|
let content = '';
|
|
if (selectedTeam && dataType === 'stats') {
|
|
content = '[swi_foot_standings team_id="' + selectedTeam + '"]';
|
|
} else if (selectedTeam && dataType === 'match' && selectedMatch) {
|
|
if (selectedMatch === 'current') {
|
|
content = '[swi_foot_' + shortcodeType + ' team_id="' + selectedTeam + '" show_current="true"';
|
|
} else {
|
|
content = '[swi_foot_' + shortcodeType + ' match_id="' + selectedMatch + '"';
|
|
}
|
|
|
|
if (format && (shortcodeType === 'match_date' || shortcodeType === 'match_time')) {
|
|
content += ' format="' + format + '"';
|
|
}
|
|
if (separator !== ':' && shortcodeType === 'match_score') {
|
|
content += ' separator="' + separator + '"';
|
|
}
|
|
content += ']';
|
|
}
|
|
|
|
// Data type options
|
|
const dataTypeOptions = [
|
|
{ value: '', label: __('Choose what to display...', 'swi_foot_matchdata') },
|
|
{ value: 'stats', label: __('Team Statistics (Standings/Ranking)', 'swi_foot_matchdata') },
|
|
{ value: 'match', label: __('Match Data', 'swi_foot_matchdata') }
|
|
];
|
|
|
|
// Match data type options
|
|
const matchDataOptions = [
|
|
{ value: 'match', label: __('Complete Match Information', 'swi_foot_matchdata') },
|
|
{ value: 'match_home_team', label: __('Home Team Name Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_away_team', label: __('Away Team Name Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_date', label: __('Match Date Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_time', label: __('Match Time Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_venue', label: __('Venue/Location Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_score', label: __('Score Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_status', label: __('Match Status Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_league', label: __('League Name Only', 'swi_foot_matchdata') },
|
|
{ value: 'match_round', label: __('Round Number Only', 'swi_foot_matchdata') }
|
|
];
|
|
|
|
return el('div', { className: 'swi-foot-team-data-block' },
|
|
el(InspectorControls, {},
|
|
el(PanelBody, { title: __('Team Selection', 'swi_foot_matchdata') },
|
|
// Step 1: Team selection
|
|
loadingTeams ? el(Spinner) : el(SelectControl, {
|
|
label: __('1. Select Team', 'swi_foot_matchdata'),
|
|
value: selectedTeam,
|
|
options: [{ value: '', label: __('Choose a team...', 'swi_foot_matchdata') }].concat(
|
|
teams.map(team => ({
|
|
value: team.value,
|
|
label: team.label
|
|
}))
|
|
),
|
|
onChange: function (value) {
|
|
setAttributes({
|
|
selectedTeam: value,
|
|
dataType: '', // Reset when team changes
|
|
selectedMatch: ''
|
|
});
|
|
}
|
|
}),
|
|
|
|
// Step 2: Data type selection (only show if team is selected)
|
|
selectedTeam && el(SelectControl, {
|
|
label: __('2. What would you like to display?', 'swi_foot_matchdata'),
|
|
value: dataType,
|
|
options: dataTypeOptions,
|
|
onChange: function (value) {
|
|
setAttributes({
|
|
dataType: value,
|
|
selectedMatch: '' // Reset match when data type changes
|
|
});
|
|
}
|
|
})
|
|
),
|
|
|
|
// Match-specific settings
|
|
dataType === 'match' && el(PanelBody, { title: __('Match Settings', 'swi_foot_matchdata') },
|
|
// Match selection
|
|
loadingMatches ? el(Spinner) : el(SelectControl, {
|
|
label: __('3. Select Match', 'swi_foot_matchdata'),
|
|
value: selectedMatch,
|
|
options: [{ value: '', label: __('Choose a match...', 'swi_foot_matchdata') }].concat(
|
|
[{ value: 'current', label: __('Current Match (Next upcoming or recent)', 'swi_foot_matchdata') }],
|
|
matches.map(match => ({
|
|
value: match.value,
|
|
label: match.label
|
|
}))
|
|
),
|
|
onChange: function (value) { setAttributes({ selectedMatch: value }); }
|
|
}),
|
|
|
|
// Match data type (what part of match to show)
|
|
selectedMatch && el(SelectControl, {
|
|
label: __('4. What match information to display?', 'swi_foot_matchdata'),
|
|
value: shortcodeType,
|
|
options: matchDataOptions,
|
|
onChange: function (value) { setAttributes({ shortcodeType: value }); }
|
|
})
|
|
),
|
|
|
|
// Advanced options for match data
|
|
dataType === 'match' && selectedMatch && el(PanelBody, { title: __('Advanced Options', 'swi_foot_matchdata'), initialOpen: false },
|
|
(shortcodeType === 'match_date' || shortcodeType === 'match_time') && el(SelectControl, {
|
|
label: __('Date/Time Format', 'swi_foot_matchdata'),
|
|
value: format,
|
|
options: shortcodeType === 'match_date' ? [
|
|
{ value: '', label: __('Default (WordPress setting)', 'swi_foot_matchdata') },
|
|
{ value: 'd.m.Y', label: '31.12.2024 (European)' },
|
|
{ value: 'm/d/Y', label: '12/31/2024 (US)' },
|
|
{ value: 'F j, Y', label: 'December 31, 2024' },
|
|
{ value: 'D, M j', label: 'Tue, Dec 31' }
|
|
] : [
|
|
{ value: '', label: __('Default (WordPress setting)', 'swi_foot_matchdata') },
|
|
{ value: 'H:i', label: '14:30 (24-hour)' },
|
|
{ value: 'g:i A', label: '2:30 PM (12-hour)' },
|
|
{ value: 'g:i', label: '2:30 (12-hour no AM/PM)' }
|
|
],
|
|
onChange: function (value) { setAttributes({ format: value }); }
|
|
}),
|
|
|
|
shortcodeType === 'match_score' && el(SelectControl, {
|
|
label: __('Score Separator', 'swi_foot_matchdata'),
|
|
value: separator,
|
|
options: [
|
|
{ value: ':', label: '2 : 1 (colon with spaces)' },
|
|
{ value: '-', label: '2 - 1 (dash with spaces)' },
|
|
{ value: ' vs ', label: '2 vs 1 (versus)' },
|
|
{ value: '|', label: '2 | 1 (pipe)' }
|
|
],
|
|
onChange: function (value) { setAttributes({ separator: value }); }
|
|
})
|
|
)
|
|
),
|
|
|
|
// Main preview area
|
|
el('div', { className: 'swi-foot-preview' },
|
|
el('div', {
|
|
style: {
|
|
padding: '30px',
|
|
textAlign: 'center',
|
|
background: '#f8f9fa',
|
|
border: '2px dashed #ddd',
|
|
borderRadius: '8px'
|
|
}
|
|
},
|
|
el('h4', { style: { marginTop: 0 } }, __('Swiss Football Team Data', 'swi_foot_matchdata')),
|
|
|
|
!selectedTeam && el('p', { style: { color: '#666' } },
|
|
__('1. Please select a team to get started', 'swi_foot_matchdata')
|
|
),
|
|
|
|
selectedTeam && !dataType && el('p', { style: { color: '#666' } },
|
|
__('2. Please choose what you want to display', 'swi_foot_matchdata')
|
|
),
|
|
|
|
selectedTeam && dataType === 'stats' && el('p', { style: { color: '#28a745' } },
|
|
'✓ ' + __('Will display team standings/ranking', 'swi_foot_matchdata')
|
|
),
|
|
|
|
selectedTeam && dataType === 'match' && !selectedMatch && el('p', { style: { color: '#666' } },
|
|
__('3. Please select a match', 'swi_foot_matchdata')
|
|
),
|
|
|
|
selectedTeam && dataType === 'match' && selectedMatch && el('div', {},
|
|
el('p', { style: { color: '#28a745' } },
|
|
'✓ ' + __('Ready to display match data', 'swi_foot_matchdata')
|
|
),
|
|
el('p', { style: { fontSize: '14px', color: '#666' } },
|
|
__('Generated shortcode:', 'swi_foot_matchdata')
|
|
),
|
|
el('code', {
|
|
style: {
|
|
display: 'block',
|
|
padding: '10px',
|
|
background: '#fff',
|
|
border: '1px solid #ddd',
|
|
borderRadius: '4px',
|
|
fontFamily: 'Monaco, Menlo, monospace',
|
|
fontSize: '12px',
|
|
wordBreak: 'break-all'
|
|
}
|
|
}, content)
|
|
)
|
|
)
|
|
)
|
|
);
|
|
},
|
|
|
|
save: function (props) {
|
|
const { attributes } = props;
|
|
const { selectedTeam, dataType, selectedMatch, shortcodeType, format, separator } = attributes;
|
|
|
|
// Build shortcode for saving
|
|
let shortcode = '';
|
|
if (selectedTeam && dataType === 'stats') {
|
|
shortcode = '[swi_foot_standings team_id="' + selectedTeam + '"]';
|
|
} else if (selectedTeam && dataType === 'match' && selectedMatch) {
|
|
if (selectedMatch === 'current') {
|
|
shortcode = '[swi_foot_' + shortcodeType + ' team_id="' + selectedTeam + '" show_current="true"';
|
|
} else {
|
|
shortcode = '[swi_foot_' + shortcodeType + ' match_id="' + selectedMatch + '"';
|
|
}
|
|
|
|
if (format && (shortcodeType === 'match_date' || shortcodeType === 'match_time')) {
|
|
shortcode += ' format="' + format + '"';
|
|
}
|
|
if (separator !== ':' && shortcodeType === 'match_score') {
|
|
shortcode += ' separator="' + separator + '"';
|
|
}
|
|
shortcode += ']';
|
|
}
|
|
|
|
return shortcode;
|
|
}
|
|
});
|
|
|
|
// Match Roster Block with Side Selector and Bench Option
|
|
registerBlockType('swi-foot/match-roster', {
|
|
title: __('Swiss Football Match Roster', 'swi_foot_matchdata'),
|
|
description: __('Display match roster for home or away team, with optional bench players', 'swi_foot_matchdata'),
|
|
icon: 'groups',
|
|
category: 'widgets',
|
|
keywords: [
|
|
__('roster', 'swi_foot_matchdata'),
|
|
__('players', 'swi_foot_matchdata'),
|
|
__('lineup', 'swi_foot_matchdata'),
|
|
__('team', 'swi_foot_matchdata'),
|
|
],
|
|
|
|
attributes: {
|
|
selectedTeam: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
selectedMatch: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
side: {
|
|
type: 'string',
|
|
default: 'home' // home or away
|
|
},
|
|
withBench: {
|
|
type: 'boolean',
|
|
default: false
|
|
}
|
|
},
|
|
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { selectedTeam, selectedMatch, side, withBench } = attributes;
|
|
|
|
const [teams, setTeams] = wp.element.useState([]);
|
|
const [matches, setMatches] = wp.element.useState([]);
|
|
const [loadingTeams, setLoadingTeams] = wp.element.useState(true);
|
|
const [loadingMatches, setLoadingMatches] = wp.element.useState(false);
|
|
|
|
// Helper AJAX call
|
|
function makeAjaxCall(action, data = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
jQuery.post(swiFootEditorData.ajax_url, {
|
|
action: action,
|
|
nonce: swiFootEditorData.nonce,
|
|
...data
|
|
}, function (response) {
|
|
if (response && response.success) {
|
|
resolve(response);
|
|
} else {
|
|
reject(response);
|
|
}
|
|
}).fail(reject);
|
|
});
|
|
}
|
|
|
|
// Load teams
|
|
wp.element.useEffect(() => {
|
|
setLoadingTeams(true);
|
|
makeAjaxCall('swi_foot_get_teams_for_editor')
|
|
.then(response => {
|
|
if (Array.isArray(response.data)) {
|
|
setTeams(response.data);
|
|
}
|
|
setLoadingTeams(false);
|
|
})
|
|
.catch(() => setLoadingTeams(false));
|
|
}, []);
|
|
|
|
// Load matches when team changes
|
|
wp.element.useEffect(() => {
|
|
if (selectedTeam) {
|
|
setLoadingMatches(true);
|
|
makeAjaxCall('swi_foot_get_matches_for_team', { team_id: selectedTeam })
|
|
.then(response => {
|
|
if (Array.isArray(response.data)) {
|
|
setMatches(response.data);
|
|
}
|
|
setLoadingMatches(false);
|
|
})
|
|
.catch(() => setLoadingMatches(false));
|
|
}
|
|
}, [selectedTeam]);
|
|
|
|
return el('div', { className: 'swi-foot-roster-block' },
|
|
el(InspectorControls, {},
|
|
el(PanelBody, { title: __('Match Selection', 'swi_foot_matchdata') },
|
|
|
|
// Team selector
|
|
loadingTeams ? el(Spinner) : el(SelectControl, {
|
|
label: __('Select Team', 'swi_foot_matchdata'),
|
|
value: selectedTeam,
|
|
options: [{ value: '', label: __('Choose a team...', 'swi_foot_matchdata') }].concat(
|
|
teams.map(team => ({ value: team.value, label: team.label }))
|
|
),
|
|
onChange: function (value) {
|
|
setAttributes({ selectedTeam: value, selectedMatch: '' });
|
|
}
|
|
}),
|
|
|
|
// Match selector (shows after team is selected)
|
|
selectedTeam && (loadingMatches ? el(Spinner) : el(SelectControl, {
|
|
label: __('Select Match', 'swi_foot_matchdata'),
|
|
value: selectedMatch,
|
|
options: [{ value: '', label: __('Choose a match...', 'swi_foot_matchdata') }].concat(
|
|
[{ value: 'current', label: __('Current Match', 'swi_foot_matchdata') }],
|
|
matches.map(match => ({ value: match.value, label: match.label }))
|
|
),
|
|
onChange: function (value) { setAttributes({ selectedMatch: value }); }
|
|
})),
|
|
|
|
// Side selector (Home/Away)
|
|
selectedMatch && el(SelectControl, {
|
|
label: __('Select Side', 'swi_foot_matchdata'),
|
|
value: side,
|
|
options: [
|
|
{ value: 'home', label: __('Home Team', 'swi_foot_matchdata') },
|
|
{ value: 'away', label: __('Away Team', 'swi_foot_matchdata') }
|
|
],
|
|
onChange: function (value) { setAttributes({ side: value }); }
|
|
}),
|
|
|
|
// Include bench toggle
|
|
selectedMatch && el(ToggleControl, {
|
|
label: __('Include Bench Players', 'swi_foot_matchdata'),
|
|
help: __('When enabled, bench players will also be displayed', 'swi_foot_matchdata'),
|
|
checked: withBench,
|
|
onChange: function (value) { setAttributes({ withBench: value }); }
|
|
})
|
|
)
|
|
),
|
|
|
|
// Block preview
|
|
el('div', {
|
|
style: {
|
|
padding: '30px',
|
|
textAlign: 'center',
|
|
background: '#f8f9fa',
|
|
border: '2px dashed #ddd',
|
|
borderRadius: '8px'
|
|
}
|
|
},
|
|
el('h4', { style: { marginTop: 0 } }, __('Match Roster', 'swi_foot_matchdata')),
|
|
(!selectedTeam || !selectedMatch) ?
|
|
el('p', { style: { color: '#666' } },
|
|
__('Please select team, match, side, and bench option', 'swi_foot_matchdata')
|
|
)
|
|
:
|
|
el('p', { style: { color: '#28a745' } },
|
|
'✓ ' + __('Roster will be displayed for ' + side + ' team' + (withBench ? ' (with bench)' : ''), 'swi_foot_matchdata')
|
|
)
|
|
)
|
|
);
|
|
},
|
|
|
|
save: function (props) {
|
|
const { selectedTeam, selectedMatch, side, withBench } = props.attributes;
|
|
if (!selectedTeam || !selectedMatch || !side) return '';
|
|
|
|
let shortcode = '[swi_foot_roster ';
|
|
if (selectedMatch === 'current') {
|
|
shortcode += 'team_id="' + selectedTeam + '" show_current="true"';
|
|
} else {
|
|
shortcode += 'match_id="' + selectedMatch + '"';
|
|
}
|
|
shortcode += ' side="' + side + '"';
|
|
if (withBench) {
|
|
shortcode += ' with_bench="true"';
|
|
}
|
|
shortcode += ']';
|
|
|
|
return shortcode;
|
|
}
|
|
});
|
|
|
|
// Match Events Block
|
|
registerBlockType('swi-foot/match-events', {
|
|
title: __('Swiss Football Match Events', 'swi_foot_matchdata'),
|
|
description: __('Display live match events with auto-refresh', 'swi_foot_matchdata'),
|
|
icon: 'list-view',
|
|
category: 'widgets',
|
|
keywords: [
|
|
__('events', 'swi_foot_matchdata'),
|
|
__('live', 'swi_foot_matchdata'),
|
|
__('timeline', 'swi_foot_matchdata'),
|
|
__('match', 'swi_foot_matchdata'),
|
|
],
|
|
|
|
attributes: {
|
|
selectedTeam: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
selectedMatch: {
|
|
type: 'string',
|
|
default: ''
|
|
},
|
|
refreshInterval: {
|
|
type: 'number',
|
|
default: 30
|
|
}
|
|
},
|
|
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props;
|
|
const { selectedTeam, selectedMatch, refreshInterval } = attributes;
|
|
|
|
const [teams, setTeams] = useState([]);
|
|
const [matches, setMatches] = useState([]);
|
|
const [loadingTeams, setLoadingTeams] = useState(true);
|
|
const [loadingMatches, setLoadingMatches] = useState(false);
|
|
|
|
// Load teams
|
|
useEffect(() => {
|
|
makeAjaxCall('swi_foot_get_teams_for_editor')
|
|
.then(response => {
|
|
if (response.success && response.data) {
|
|
setTeams(response.data);
|
|
}
|
|
setLoadingTeams(false);
|
|
})
|
|
.catch(() => setLoadingTeams(false));
|
|
}, []);
|
|
|
|
// Load matches when team changes
|
|
useEffect(() => {
|
|
if (selectedTeam) {
|
|
setLoadingMatches(true);
|
|
makeAjaxCall('swi_foot_get_matches_for_team', { team_id: selectedTeam })
|
|
.then(response => {
|
|
if (response.success && response.data) {
|
|
setMatches(response.data);
|
|
}
|
|
setLoadingMatches(false);
|
|
})
|
|
.catch(() => setLoadingMatches(false));
|
|
}
|
|
}, [selectedTeam]);
|
|
|
|
return el('div', { className: 'swi-foot-events-block' },
|
|
el(InspectorControls, {},
|
|
el(PanelBody, { title: __('Match Selection', 'swi_foot_matchdata') },
|
|
loadingTeams ? el(Spinner) : el(SelectControl, {
|
|
label: __('Select Team', 'swi_foot_matchdata'),
|
|
value: selectedTeam,
|
|
options: [{ value: '', label: __('Choose a team...', 'swi_foot_matchdata') }].concat(
|
|
teams.map(team => ({ value: team.value, label: team.label }))
|
|
),
|
|
onChange: function (value) {
|
|
setAttributes({ selectedTeam: value, selectedMatch: '' });
|
|
}
|
|
}),
|
|
|
|
selectedTeam && (loadingMatches ? el(Spinner) : el(SelectControl, {
|
|
label: __('Select Match', 'swi_foot_matchdata'),
|
|
value: selectedMatch,
|
|
options: [{ value: '', label: __('Choose a match...', 'swi_foot_matchdata') }].concat(
|
|
[{ value: 'current', label: __('Current Match', 'swi_foot_matchdata') }],
|
|
matches.map(match => ({ value: match.value, label: match.label }))
|
|
),
|
|
onChange: function (value) { setAttributes({ selectedMatch: value }); }
|
|
}))
|
|
),
|
|
|
|
el(PanelBody, { title: __('Auto-Refresh Settings', 'swi_foot_matchdata') },
|
|
el(RangeControl, {
|
|
label: __('Refresh Interval (seconds)', 'swi_foot_matchdata'),
|
|
value: refreshInterval,
|
|
onChange: function (value) { setAttributes({ refreshInterval: value }); },
|
|
min: 10,
|
|
max: 300,
|
|
step: 10
|
|
})
|
|
)
|
|
),
|
|
|
|
el('div', {
|
|
style: {
|
|
padding: '30px',
|
|
textAlign: 'center',
|
|
background: '#f8f9fa',
|
|
border: '2px dashed #ddd',
|
|
borderRadius: '8px'
|
|
}
|
|
},
|
|
el('h4', { style: { marginTop: 0 } }, __('Live Match Events', 'swi_foot_matchdata')),
|
|
(!selectedTeam || !selectedMatch) ?
|
|
el('p', { style: { color: '#666' } }, __('Please select team and match', 'swi_foot_matchdata')) :
|
|
el('div', {},
|
|
el('p', { style: { color: '#28a745' } }, '✓ ' + __('Will display live match events', 'swi_foot_matchdata')),
|
|
el('p', { style: { fontSize: '12px', color: '#666' } },
|
|
__('Auto-refresh every', 'swi_foot_matchdata') + ' ' + refreshInterval + ' ' + __('seconds', 'swi_foot_matchdata'))
|
|
)
|
|
)
|
|
);
|
|
},
|
|
|
|
save: function (props) {
|
|
const { attributes } = props;
|
|
const { selectedTeam, selectedMatch, refreshInterval } = attributes;
|
|
|
|
if (!selectedTeam || !selectedMatch) return '';
|
|
|
|
let shortcode = '[swi_foot_events ';
|
|
if (selectedMatch === 'current') {
|
|
shortcode += 'team_id="' + selectedTeam + '" show_current="true"';
|
|
} else {
|
|
shortcode += 'match_id="' + selectedMatch + '"';
|
|
}
|
|
shortcode += ' refresh_interval="' + refreshInterval + '"]';
|
|
|
|
return shortcode;
|
|
}
|
|
});
|
|
|
|
})(
|
|
window.wp.blocks,
|
|
window.wp.element,
|
|
window.wp.blockEditor,
|
|
window.wp.components,
|
|
window.wp.i18n,
|
|
window.wp.data
|
|
);
|