Añadir test.html
This commit is contained in:
140
test.html
Normal file
140
test.html
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>IntegraRepara — Test API</title>
|
||||||
|
<style>
|
||||||
|
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 24px; }
|
||||||
|
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||||
|
button { padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer; }
|
||||||
|
button.primary { background: #111; color: #fff; }
|
||||||
|
button.gray { background: #eee; }
|
||||||
|
input, textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #ddd; }
|
||||||
|
.card { border: 1px solid #eee; border-radius: 14px; padding: 14px; margin-top: 14px; }
|
||||||
|
pre { background: #0b0b0b; color: #eaeaea; padding: 12px; border-radius: 12px; overflow: auto; }
|
||||||
|
.muted { color: #666; font-size: 14px; }
|
||||||
|
label { display: block; font-size: 13px; margin: 8px 0 6px; color: #444; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>IntegraRepara — Test API</h1>
|
||||||
|
<p class="muted">Esto es para probar tu API desde el navegador, sin Postman.</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<label>Base URL de tu API</label>
|
||||||
|
<input id="baseUrl" value="https://integrarepara-api.integrarepara.es" />
|
||||||
|
|
||||||
|
<div class="row" style="margin-top:12px;">
|
||||||
|
<button class="primary" id="btnRoot">GET /</button>
|
||||||
|
<button class="primary" id="btnHealth">GET /health</button>
|
||||||
|
<button class="gray" id="btnClear">Limpiar consola</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre id="out">{ "ready": true }</pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2 style="margin-top:0;">Crear servicio (cuando exista POST /services)</h2>
|
||||||
|
<p class="muted">Ahora mismo tu API no tiene este endpoint, pero el formulario ya queda listo.</p>
|
||||||
|
|
||||||
|
<label>Título / Descripción</label>
|
||||||
|
<input id="sTitle" placeholder="Ej: Fuga en cocina / Enchufe no funciona" />
|
||||||
|
|
||||||
|
<label>Cliente</label>
|
||||||
|
<input id="sClient" placeholder="Ej: Juan Pérez" />
|
||||||
|
|
||||||
|
<label>Teléfono</label>
|
||||||
|
<input id="sPhone" placeholder="Ej: 600123123" />
|
||||||
|
|
||||||
|
<label>Dirección</label>
|
||||||
|
<input id="sAddress" placeholder="Ej: Calle X, 12, Algeciras" />
|
||||||
|
|
||||||
|
<label>Notas</label>
|
||||||
|
<textarea id="sNotes" rows="3" placeholder="Ej: Llamar antes, perro suelto (pero majo)"></textarea>
|
||||||
|
|
||||||
|
<div class="row" style="margin-top:12px;">
|
||||||
|
<button class="primary" id="btnCreate">POST /services</button>
|
||||||
|
<button class="primary" id="btnList">GET /services</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const out = document.getElementById("out");
|
||||||
|
|
||||||
|
function log(obj) {
|
||||||
|
out.textContent = (typeof obj === "string") ? obj : JSON.stringify(obj, null, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function base() {
|
||||||
|
return document.getElementById("baseUrl").value.replace(/\/$/, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function req(path, options = {}) {
|
||||||
|
const url = base() + path;
|
||||||
|
const res = await fetch(url, {
|
||||||
|
...options,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(options.headers || {})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text();
|
||||||
|
let data;
|
||||||
|
try { data = JSON.parse(text); } catch { data = text; }
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
throw { status: res.status, data };
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("btnRoot").onclick = async () => {
|
||||||
|
try { log(await req("/")); }
|
||||||
|
catch (e) { log({ error: true, ...e }); }
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("btnHealth").onclick = async () => {
|
||||||
|
try { log(await req("/health")); }
|
||||||
|
catch (e) { log({ error: true, ...e }); }
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("btnClear").onclick = () => {
|
||||||
|
log({ cleared: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("btnCreate").onclick = async () => {
|
||||||
|
const payload = {
|
||||||
|
title: document.getElementById("sTitle").value,
|
||||||
|
clientName: document.getElementById("sClient").value,
|
||||||
|
phone: document.getElementById("sPhone").value,
|
||||||
|
address: document.getElementById("sAddress").value,
|
||||||
|
notes: document.getElementById("sNotes").value
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
log(await req("/services", { method: "POST", body: JSON.stringify(payload) }));
|
||||||
|
} catch (e) {
|
||||||
|
log({
|
||||||
|
hint: "Si esto falla con 404, es normal: aún no hemos creado POST /services.",
|
||||||
|
error: true,
|
||||||
|
...e
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("btnList").onclick = async () => {
|
||||||
|
try {
|
||||||
|
log(await req("/services"));
|
||||||
|
} catch (e) {
|
||||||
|
log({
|
||||||
|
hint: "Si esto falla con 404, es normal: aún no hemos creado GET /services.",
|
||||||
|
error: true,
|
||||||
|
...e
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user