Kalifast_Bug_Reporter/config_menu.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
            reloadFields()


            document.getElementById("submit_kft_bug_reporter_ticket_config").addEventListener("click", async function() {
                let response = await requestCore("Kalifast_Bug_Reporter", "Reporter", "set_kalifast_ticket_config", {
                    "ei_pool_id": document.getElementById("kft_bug_reporter_pool").value,
                    "ei_delivery_id": document.getElementById("kft_bug_reporter_delivery").value,
                    "ei_user_id": document.getElementById("kft_bug_reporter_user").value
                });
            });

            // Set the configuration of the Kalifast API in the form
            document.getElementById("submit_kft_bug_reporter_config").addEventListener("click", submitConfigAPIForm);
        });


        async function reloadFields() {
            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.api_config.kft_api_host;
                document.getElementById("kft_bug_reporter_api_key").value = config_data.data.api_config.kft_api_key;
                if(config_data.data.fields.deliveries && config_data.data.fields.pools && config_data.data.fields.users) {
                    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";
                }

                console.log(config_data);


                
                // Set the pools
                let poolSelect = document.getElementById("kft_bug_reporter_pool");
                poolSelect.innerHTML = "";
                config_data.data.fields.pools.forEach(pool => {
                    let option = document.createElement("option");
                    option.value = pool.ei_pool_id;
                    option.text = pool.pool_name;
                    poolSelect.appendChild(option);
                });
                if(config_data.data.ticket_config) {
                    poolSelect.value = config_data.data.ticket_config.ei_pool_id;
                }

                // Set the deliveries
                let deliverySelect = document.getElementById("kft_bug_reporter_delivery");
                deliverySelect.innerHTML = "";
                config_data.data.fields.deliveries.forEach(delivery => {
                    let option = document.createElement("option");
                    option.value = delivery.ei_delivery_id;
                    option.text = delivery.delivery_name;
                    deliverySelect.appendChild(option);
                });
                if(config_data.data.ticket_config) {
                    deliverySelect.value = config_data.data.ticket_config.ei_delivery_id;
                }

                // Set the users
                let userSelect = document.getElementById("kft_bug_reporter_user");
                userSelect.innerHTML = "";
                config_data.data.fields.users.forEach(user => {
                    let option = document.createElement("option");
                    option.value = user.ei_user_id;
                    option.text = user.username;
                    userSelect.appendChild(option);
                });
                if(config_data.data.ticket_config) {
                    userSelect.value = config_data.data.ticket_config.ei_user_id;
                }


            }
        }

            // 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,
            });
            
            if(response.success) {
                reloadFields();
            } 
        }
    </script>

    <div class="wrap">
        <h2>KFT-Bug-Reporter configuration</h2>
        <div id="kft-bug-reporter-config-api-form" class="kft-bug-reporter-config-form" >
            <h3><img class="kft_status" src="https://kalifast.com/assets/img/devices_not_connected.png" alt="Kalifast logo"> API Configuration </h3>
            <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" >
                        
                    </td>
                </tr>
            </table>
        </div>

        <div id="kft-bug-reporter-config-api-form" class="kft-bug-reporter-config-form" >
            <h3> Tickets configuration </h3>    
            <table>
                <tr>
                    <td>Pool</td>
                    <td><select id="kft_bug_reporter_pool"  value=""></select></td>
                </tr>
                <tr>
                    <td>Delivery</td>
                    <td><select id="kft_bug_reporter_delivery"  value=""></select></td>
                </tr>
                <tr>
                    <td>User</td>
                    <td><select id="kft_bug_reporter_user"  value=""></select></td>
                </tr>

                <tr>
                    <td>
                        <input type="submit" value="Save" id="submit_kft_bug_reporter_ticket_config" >
                    </td>
                </tr>
    
        </div>
        

    </div>

    <?php
}
Hyper Icon