<!DOCTYPE html>
<html>
<head>
<title>Configuración de Servidores</title>
<!--Css-->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!--Html-->
<h1>Configuración de Servidores</h1>
<label for="version">Versión:</label>
<input type="text" id="version"><br>
<label for="release-notes">Notas de lanzamiento:</label><br>
<textarea id="release-notes" rows="4" cols="50"></textarea><br>
<h2>Servidores:</h2>
<div id="server-container"></div>
<button class="add-server" onclick="addServer()">Añadir Servidor</button>
<button onclick="generarJSON()">Generar JSON</button>
<h2>JSON generado:</h2>
<pre id="json-output"></pre>
<!--Javascript-->
<script>
function generarJSON() {
const version = document.getElementById("version").value;
const releaseNotes = document.getElementById("release-notes").value;
const config = {
Version: version,
ReleaseNotes: releaseNotes,
Servers: []
};
const serverContainer = document.getElementById("server-container");
// Agrega los servidores al objeto config
const servers = Array.from(serverContainer.getElementsByClassName("server"));
servers.forEach((server) => {
const name = server.getElementsByClassName("name-input")[0].value;
const flag = server.getElementsByClassName("flag-input")[0].value;
config.Servers.push({
Name: name,
FLAG: flag
});
});
// Convierte el objeto en una cadena JSON legible
const jsonString = JSON.stringify(config, null, 4);
// Muestra el JSON generado en el área de texto
document.getElementById("json-output").textContent = jsonString;
}
function addServer() {
const serverContainer = document.getElementById("server-container");
const serverElement = document.createElement("div");
serverElement.className = "server";
serverElement.innerHTML = `
<input type="text" class="name-input" placeholder="Nombre del servidor">
<input type="text" class="flag-input" placeholder="FLAG">
<button onclick="removeServer(this)">Eliminar</button>
`;
serverContainer.appendChild(serverElement);
}
function removeServer(button) {
const serverContainer = document.getElementById("server-container");
const serverElement = button.parentNode;
serverContainer.removeChild(serverElement);
}
</script>
</body>
</html>
