Hello, I want help. I need to use the Grafana API on my webpage, and I don’t know how to do it. I want to visualize my dashboards, delete them, and update them, but I don’t understand the documentation.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciar sesión</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h2>Iniciar sesión</h2>
<p id="notification"></p>
<form id="loginForm">
<label for="username">Usuario:</label>
<input type="text" id="username" required>
<label for="password">Contraseña:</label>
<input type="password" id="password" required>
<input type="submit" value="Iniciar sesión">
</form>
</div>
<div id="dashboard-container">
</div>
<script src="main.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function () {
const credenciales = { username: "Usuario1", password: "Contraseña1" };
const loginForm = document.getElementById('loginForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const dashboardContainer = document.getElementById('dashboard-container');
const notification = document.getElementById('notification');
loginForm.addEventListener('submit', function (e) {
e.preventDefault();
if (username.value === credenciales.username && password.value === credenciales.password) {
dashboardContainer.style.display = "block";
notification.textContent = "";
} else {
notification.textContent = "Credenciales incorrectas. Por favor, inténtalo nuevamente.";
}
});
});