marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar test.html

Browse Source
This commit is contained in:
marsalva
2026-02-07 15:53:39 +00:00
parent c26cf6ca08
commit d42da38f61
1 changed files with 73 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
test.html
View File

@@ -15,6 +15,12 @@
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; }
.list { margin-top: 12px; display: grid; gap: 10px; }
.item { border: 1px solid #eee; border-radius: 12px; padding: 12px; }
.item h3 { margin: 0 0 6px; font-size: 16px; }
.meta { display:flex; gap: 10px; flex-wrap: wrap; color:#555; font-size: 13px; }
.pill { background:#f3f3f3; padding: 4px 8px; border-radius: 999px; }
.error { color:#b00020; font-weight:600; }
</style>
</head>
<body>
@@ -35,32 +41,35 @@
</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>
<h2 style="margin-top:0;">Crear servicio</h2>
<p class="muted">POST /services y GET /services (en memoria por ahora).</p>
<label>Título / Descripción</label>
<input id="sTitle" placeholder="Ej: Fuga en cocina / Enchufe no funciona" />
<label>Título / Descripción *</label>
<input id="sTitle" placeholder="Ej: Fuga en cocina / Enchufe no funciona" value="sin luz" />
<label>Cliente</label>
<input id="sClient" placeholder="Ej: Juan Pérez" />
<label>Cliente *</label>
<input id="sClient" placeholder="Ej: Juan Pérez" value="juan perez" />
<label>Teléfono</label>
<input id="sPhone" placeholder="Ej: 600123123" />
<input id="sPhone" placeholder="Ej: 600123123" value="666777888" />
<label>Dirección</label>
<input id="sAddress" placeholder="Ej: Calle X, 12, Algeciras" />
<input id="sAddress" placeholder="Ej: Calle X, 12, Algeciras" value="calle" />
<label>Notas</label>
<textarea id="sNotes" rows="3" placeholder="Ej: Llamar antes, perro suelto (pero majo)"></textarea>
<textarea id="sNotes" rows="3" placeholder="Ej: Llamar antes, perro suelto (pero majo)">ejemplo</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 id="list" class="list"></div>
</div>
<script>
const out = document.getElementById("out");
const listEl = document.getElementById("list");
function log(obj) {
out.textContent = (typeof obj === "string") ? obj : JSON.stringify(obj, null, 2);
@@ -85,11 +94,45 @@
try { data = JSON.parse(text); } catch { data = text; }
if (!res.ok) {
throw { status: res.status, data };
const msg = (data && data.error) ? data.error : "Request failed";
throw { status: res.status, message: msg, data };
}
return data;
}
function esc(s) {
return String(s ?? "").replace(/[&<>"']/g, m => ({
"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
}[m]));
}
function renderList(payload) {
const services = payload?.services || [];
if (!services.length) {
listEl.innerHTML = `<div class="muted">No hay servicios todavía. Crea uno y saldrá aquí.</div>`;
return;
}
listEl.innerHTML = services.map(s => `
<div class="item">
<h3>#${esc(s.id)} — ${esc(s.title)}</h3>
<div class="meta">
<span class="pill">👤 ${esc(s.client)}</span>
${s.phone ? `<span class="pill">📞 ${esc(s.phone)}</span>` : ``}
${s.address ? `<span class="pill">📍 ${esc(s.address)}</span>` : ``}
<span class="pill">🕒 ${esc(s.createdAt)}</span>
</div>
${s.notes ? `<div class="muted" style="margin-top:8px;">📝 ${esc(s.notes)}</div>` : ``}
</div>
`).join("");
}
async function refreshServices() {
const data = await req("/services");
renderList(data);
return data;
}
document.getElementById("btnRoot").onclick = async () => {
try { log(await req("/")); }
catch (e) { log({ error: true, ...e }); }
@@ -106,35 +149,38 @@
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
title: document.getElementById("sTitle").value.trim(),
client: document.getElementById("sClient").value.trim(), // <-- clave: client (no clientName)
phone: document.getElementById("sPhone").value.trim(),
address: document.getElementById("sAddress").value.trim(),
notes: document.getElementById("sNotes").value.trim()
};
try {
log(await req("/services", { method: "POST", body: JSON.stringify(payload) }));
const created = await req("/services", { method: "POST", body: JSON.stringify(payload) });
log(created);
await refreshServices();
} catch (e) {
log({
hint: "Si esto falla con 404, es normal: aún no hemos creado POST /services.",
error: true,
...e
});
log({ error: true, ...e });
listEl.innerHTML = `<div class="error">❌ Error: ${esc(e.message || "No se pudo crear")}</div>`;
}
};
document.getElementById("btnList").onclick = async () => {
try {
log(await req("/services"));
const data = await refreshServices();
log(data);
} catch (e) {
log({
hint: "Si esto falla con 404, es normal: aún no hemos creado GET /services.",
error: true,
...e
});
log({ error: true, ...e });
listEl.innerHTML = `<div class="error">❌ Error: ${esc(e.message || "No se pudo listar")}</div>`;
}
};
// Carga inicial
(async () => {
try { await refreshServices(); }
catch { /* si aún no está arriba la API, no pasa nada */ }
})();
</script>
</body>
</html>