add api key settings page

This commit is contained in:
Ben Harris 2023-07-19 16:25:29 -04:00
parent 2b135c3d6f
commit 62a68df686
2 changed files with 114 additions and 11 deletions

View File

@ -21,8 +21,77 @@
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
add_action( 'init', 'create_block_matchplay_block_init' );
function create_block_matchplay_block_init(): void {
register_block_type_from_metadata( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_matchplay_block_init' );
add_action( 'admin_init', 'matchplay_register_settings' );
function matchplay_register_settings() {
register_setting( 'matchplay', 'matchplay_options' );
add_settings_section(
'matchplay',
'',
'',
'matchplay'
);
add_settings_field(
'matchplay_field_api_key',
'API Key',
'matchplay_field_api_key_callback',
'matchplay',
'matchplay',
['label_for' => 'matchplay_field_api_key']
);
}
function matchplay_field_api_key_callback( $args ) {
$options = get_option( 'matchplay_options' );
?>
<input
type="text"
name="matchplay_options[matchplay_field_api_key]"
value="<?= $options["matchplay_field_api_key"] ?? "" ?>" />
<?php
}
add_action( 'admin_menu', 'matchplay_options_page' );
function matchplay_options_page() {
add_options_page(
'Matchplay Settings',
'Matchplay Settings',
'manage_options',
'matchplay',
'matchplay_settings_page_html'
);
}
function matchplay_settings_page_html() {
// check user capabilities
if ( ! current_user_can( 'manage_options' ) ) return;
if ( isset( $_GET['settings-updated'] ) ) {
add_settings_error( 'matchplay_messages', 'matchplay_message', 'Settings saved', 'updated' );
}
settings_errors( 'matchplay_messages' );
?>
<div class="wrap">
<h1><?= esc_html( get_admin_page_title() ) ?></h1>
<form action="options.php" method="post">
<?php
settings_fields( 'matchplay' );
do_settings_sections( 'matchplay' );
submit_button( 'Save' );
?>
</form>
</div>
<?php
}

View File

@ -12,16 +12,50 @@ import './editor.scss';
* @return {WPElement} Element to render.
*/
export default function Edit( { attributes, setAttributes } ) {
const [apiData, setApiData] = useState(null);
const [standings, setStandings] = useState(null);
const [players, setPlayers] = useState(null);
function fetchTournamentData() {
let url = `https://matchplay.events/data/tournaments/${attributes.tournament_id}/standings`;
fetch(url)
const headers = {
"Authorization": `Bearer ${attributes.matchplay_api_key}`,
"Content-Type": "application/json",
"Accept": "application/json",
};
const tournamentUrl = new URL(`https://next.matchplay.events/api/tournaments/${attributes.tournament_id}`);
const standingsUrl = new URL(`https://next.matchplay.events/api/tournaments/${attributes.tournament_id}/standings`);
const params = {
"includePlayers": "1",
"includeArenas": "0",
"includeBanks": "0",
"includeScorekeepers": "0",
"includeSeries": "0",
"includeLocation": "1",
"includeRsvpConfiguration": "0",
"includeParent": "1",
"includePlayoffs": "1",
"includeShortcut": "0",
};
Object.keys(params).forEach(key => tournamentUrl.searchParams.append(key, params[key]));
fetch(tournamentUrl, {method: "GET", headers})
.then(response => response.json())
.then(response => {
let players = { ...response };
setAttributes( { players: players } );
setPlayers(players);
console.log(players);
})
.catch(err => console.error( err ));
fetch(standingsUrl, {method: "GET", headers})
.then(response => response.json())
.then(response => {
let newData = { ...response };
setAttributes( { data: newData } );
setApiData(newData);
setAttributes( { standings: newData } );
setStandings(newData);
console.log(newData);
})
.catch(err => console.error( err ));
@ -42,7 +76,7 @@ export default function Edit( { attributes, setAttributes } ) {
<div { ...useBlockProps() }>
<p>Results for tournament id { attributes.tournament_id }</p>
<button onClick={() => fetchTournamentData()}>Fetch Results</button>
{apiData && (
{attributes.players && attributes.standings && (
<>
<table id="tournament-results-table">
<thead>
@ -53,12 +87,12 @@ export default function Edit( { attributes, setAttributes } ) {
</tr>
</thead>
<tbody>
{Object.keys(apiData).map((player, i) => {
{Object.keys(attributes.standings).map((player, i) => {
return (
<tr key={player}>
<td>{apiData[i].position}</td>
<td>{apiData[i].name}</td>
<td>{apiData[i].points}</td>
<td>{attributes.standings[i].position}</td>
<td>{attributes.players.find(p => p.player_id === attributes.standings[i].player_id).name}</td>
<td>{attributes.standings[i].points}</td>
</tr>
);
})}