neutral/public/javascripts/metric.js

144 lines
5.7 KiB
JavaScript
Raw Normal View History

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>*/