Kalifast_Bug_Reporter/config_menu.php
2024-08-08 11:55:21 +02:00

99 lines
4.1 KiB
PHP

<?php
add_action('admin_menu', 'add_kft_bug_reporter_config_menu');
function add_kft_bug_reporter_config_menu()
{
add_menu_page('KFT-Bug-Reporter configuration', 'KFT-Bug-Reporter configuration', 'administrator', 'kft-bug-reporter-config', 'kft_bug_reporter_config_page');
}
function kft_bug_reporter_config_page() {
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.wrap {
margin: 20px;
}
.kft-bug-reporter-config-form {
margin-top: 20px;
}
.kft_status {
width: 25px;
height: 25px;
vertical-align: middle;
}
</style>
<script>
/* Function to request the EISGE-API-Core */
async function requestCore(module, library, action, parameters = false) {
let form = new FormData();
form.append("JSON", JSON.stringify(parameters));
let nounce_token = "<?php echo (wp_create_nonce('wp_rest')); ?>";
let settings = {
"url": `${location.origin}/index.php/wp-json/api/eisge/eisge_api/${module}/${library}/${action}?_wpnonce=${nounce_token}`,
"method": "POST",
"timeout": 0,
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
};
return JSON.parse(await $.ajax(settings));
}
document.addEventListener("DOMContentLoaded", async function(event) {
// Get the configuration of the Kalifast API
let config_data = await requestCore("Kalifast_Bug_Reporter", "Reporter", "get_kalifast_api_configuration");
if(config_data.success) {
document.getElementById("kft_bug_reporter_url").value = config_data.data.kft_api_host;
document.getElementById("kft_bug_reporter_api_key").value = config_data.data.kft_api_key;
document.querySelector(".kft_status").src = "https://kalifast.com/assets/img/devices_enable.png";
}
// Set the configuration of the Kalifast API in the form
document.getElementById("submit_kft_bug_reporter_config").addEventListener("click", submitConfigAPIForm);
});
// Config API form behavior
async function submitConfigAPIForm() {
console.log("Form submitted");
let response = await requestCore("Kalifast_Bug_Reporter", "Reporter", "configure_kalifast_api", {
"kft_api_host": document.getElementById("kft_bug_reporter_url").value,
"kft_api_key": document.getElementById("kft_bug_reporter_api_key").value,
});
console.log(response);
if(response.success) {
document.querySelector(".kft_status").src = "https://kalifast.com/assets/img/devices_enable.png";
} else {
document.querySelector(".kft_status").src = "https://kalifast.com/assets/img/devices_not_connected.png";
}
}
</script>
<div class="wrap">
<h2>KFT-Bug-Reporter configuration</h2>
<div id="kft-bug-reporter-config-api-form" class="kft-bug-reporter-config-form" >
<table>
<tr>
<!-- URL of the Kalifast APP -->
<td>Host of the Kalifast App</td>
<td><input type="text" id="kft_bug_reporter_url" value=""></td>
</tr>
<tr>
<!-- API Key of the Kalifast APP -->
<td>API Key</td>
<td><input type="text" id="kft_bug_reporter_api_key" value=""></td>
</tr>
<tr>
<td>
<input type="submit" value="Save" id="submit_kft_bug_reporter_config" >
<img class="kft_status" src="https://kalifast.com/assets/img/devices_not_connected.png" alt="Kalifast logo">
</td>
</tr>
</table>
</div>
</div>
<?php
}