neutral/public/javascripts/metric.js

metrics.createWindow(() => {
    
    const View = new ViewWindow({
        title: `<i class="fa-solid fa-square-poll-vertical"></i> Web Metrik`,
        width: "600px",
        height: "600px",
    })

    loadMetrics()

    function loadMetrics() {

        View.setContent(`
        <div class="metrics">
        <div class='mt-bar'>
            <p> <strong>WebMetrik</strong> : <span id='${View.getViewTitle()}_number'><i>Calcul en cours</i></span></p>
            <div>
            <button id='${View.getViewTitle()}_refresh' class='btn green'><span><i class='fa fa-rotate-left'></i> Rafraîchir</span></button>
            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un WebMetrik</span></button>
        </div>   
        </div>
        <div class='mt-metrics' id='${View.getViewTitle()}_metrics'>

            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
            </div>

        </div>`)

        const metricsList = new Array()
        const metricsComponent = new Array()
        const metricsReq = get("MT_ALL")

        const metricsDiv = document.getElementById(`${View.getViewTitle()}_metrics`)
        const metricsNumber = document.getElementById(`${View.getViewTitle()}_number`)
        const addButton = document.getElementById(`${View.getViewTitle()}_add`)
        const refreshButton = document.getElementById(`${View.getViewTitle()}_refresh`)
        const metricsView = document.getElementById(`${View.getViewTitle()}_metrics`)
        
        refreshButton.addEventListener("click", () => {
            loadMetrics()
        })

        metricsReq.then((ANS_metrics) => {
            console.log(ANS_metrics)
            if(ANS_metrics != "UNAVAILABLE") {
                metricsList.length = 0 
                if(ANS_metrics.length == 0) {
                    metricsList.push(`<div style='font-size: 24px; margin-top: 180px;'  class='yellow t-center'>
                    <p><i class="fa-solid fa-warning"></i> Aucune WebMetrik n'a été ajoutée</p>
                    </div>`)
                }
                ANS_metrics.forEach((metric) => {
                    const metricComponent = new Metric({
                        properties: metric,
                        Component: metrics,
                        View: View
                    })
                    metricsList.push(metricComponent.generateHTML())
                  
                    metricsComponent.push(metricComponent)
                })
                metricsDiv.innerHTML = metricsList.join("")
                metricsNumber.innerHTML = ANS_metrics.length

                for(const metric of metricsComponent) {
                    metric.loadScript()
                }
            } else {
                metricsDiv.innerHTML = `<div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
                <p><i class="fa-solid fa-warning"></i> Une erreur est survenue lors du chargement des WebMetrik</p>
                </div>`
            }
        })

        // Generate a pop to add metrics with 3 settings, the adress, the port, the name of the metrics and the key to authentificate

        addButton.addEventListener("click", () => {

            View.createPopup({
                title: "Ajouter un WebMetrik",
                content: `
                <div class='mt-add'>
                    <p>Adresse</p>
                    <input class='field' type="text" id="mt-add-address" placeholder="Adresse">
                    <p>Port</p>
                    <input class='field' type="number" id="mt-add-port" placeholder="Port">
                    <p>Nom</p>
                    <input class='field' type="text" id="mt-add-name" placeholder="Nom">
                    <p>Clé d'authentification</p>
                    <input class='field' type="password" id="mt-add-key" placeholder="Clé d'authentification">
                    <span id='mtaddinfo'></span>
                    <button id='mt-add-btn' class='btn blue'><span><i class='fa fa-add'></i> Ajouter</span></button>
                </div>
                `
            })

            const addBtn = document.getElementById("mt-add-btn")
            const address = document.getElementById("mt-add-address")
            const port = document.getElementById("mt-add-port")
            const name = document.getElementById("mt-add-name")
            const key = document.getElementById("mt-add-key")
            const infoMTAdd = new TextResponse("mtaddinfo")

        
            addBtn.addEventListener("click", () => {

                // Check if all fields are filled

                if(address.value == "" || port.value == "" || name.value == "" || key.value == "") {
                    infoMTAdd.err("Veuillez remplir tous les champs")
                    return
                }

                post("MT_ADD", {
                    address: address.value,
                    port: port.value,
                    name: name.value,
                    key: key.value
                }).then((res) => {
                    if(res != "ERROR") {
                        View.destroyPopup()
                        loadMetrics()
                    } else {
                        View.createPopup({
                            title: "Erreur",
                            content: `<p class='yellow'><i class='fa fa-warning'></i> Une erreur est survenue lors de l'ajout de la WebMetrik</p>`
                        })
                    }
                })
            })

         })


    }
})



        /*
        <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
        </div>*/