96 lines
4.0 KiB
JavaScript
96 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import '../../styles/components.css';
|
|
|
|
const HelpSection = ({ icon, title, children }) => (
|
|
<div className="card">
|
|
<div className="form-header">
|
|
<h3>
|
|
<i className={icon} style={{ marginRight: 8 }}></i>
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const HelpPage = () => {
|
|
return (
|
|
<section className="content-wrapper">
|
|
<div className="card" style={{ marginBottom: 24 }}>
|
|
<div className="form-header">
|
|
<h3>
|
|
<i className="fas fa-question-circle" style={{ marginRight: 8 }}></i>
|
|
Centro de ayuda
|
|
</h3>
|
|
</div>
|
|
<p style={{ color: 'var(--gray)' }}>
|
|
Aquí encontrarás una guía rápida para usar Request Scheduler, ejemplos y respuestas a preguntas frecuentes.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="content-grid" style={{ display: 'grid', gap: 24 }}>
|
|
<HelpSection icon="fas fa-play-circle" title="Primeros pasos">
|
|
<ol style={{ paddingLeft: 18 }}>
|
|
<li>Ve a <b>Crear Solicitud</b> e ingresa la URL del servicio que deseas invocar.</li>
|
|
<li>Selecciona el <b>método HTTP</b> y, si aplica, agrega <b>cuerpo</b> y <b>headers (JSON)</b>.</li>
|
|
<li>Haz clic en <b>Enviar ahora</b> para probar o usa <b>Programar</b> para ejecutar más tarde.</li>
|
|
<li>Consulta el resultado en <b>Historial</b> o edita tus tareas en <b>Solicitudes Programadas</b>.</li>
|
|
</ol>
|
|
</HelpSection>
|
|
|
|
<HelpSection icon="fas fa-clock" title="Programación de solicitudes">
|
|
<p>
|
|
Puedes programar ejecuciones únicas o periódicas. El sistema admite intervalos simples (por ejemplo,
|
|
cada 15 minutos) y fechas específicas. En la tabla de programadas usa el botón <b>Editar</b> para modificar
|
|
frecuencia, payload y headers.
|
|
</p>
|
|
<ul style={{ paddingLeft: 18 }}>
|
|
<li>Zona horaria: configurable en <b>Configuración</b>.</li>
|
|
<li>Headers: usa JSON válido, por ejemplo: <code>{'{"Authorization":"Bearer <token>"}'}</code>.</li>
|
|
<li>Prueba antes de programar para verificar que el endpoint responda como esperas.</li>
|
|
</ul>
|
|
</HelpSection>
|
|
|
|
<HelpSection icon="fas fa-coins" title="Créditos">
|
|
<p>
|
|
Los <b>créditos</b> representan tu cuota disponible de ejecuciones. Desde el encabezado puedes
|
|
recargarlos manualmente para fines de prueba (<i className="fas fa-sync" aria-hidden="true"></i> Recargar créditos).
|
|
El valor se guarda en este navegador.
|
|
</p>
|
|
</HelpSection>
|
|
|
|
<HelpSection icon="fas fa-tools" title="Solución de problemas">
|
|
<ul style={{ paddingLeft: 18 }}>
|
|
<li>
|
|
<b>Error 4xx/5xx:</b> revisa la URL, método y autenticación. Verifica los headers y el cuerpo enviado.
|
|
</li>
|
|
<li>
|
|
<b>JSON inválido:</b> en headers/cuerpo debes usar JSON válido. Puedes validar con
|
|
<a href="https://jsonlint.com/" target="_blank" rel="noreferrer" style={{ marginLeft: 6 }}>JSONLint</a>.
|
|
</li>
|
|
<li>
|
|
<b>No veo mis cambios:</b> intenta refrescar la página o limpiar el almacenamiento local del navegador.
|
|
</li>
|
|
</ul>
|
|
</HelpSection>
|
|
|
|
<HelpSection icon="fas fa-keyboard" title="Atajos útiles">
|
|
<ul style={{ paddingLeft: 18 }}>
|
|
<li><b>Ctrl/Cmd + Enter:</b> enviar formulario (cuando un formulario está enfocado).</li>
|
|
<li><b>Ctrl/Cmd + K:</b> abrir búsqueda del navegador para filtrar (temporal).</li>
|
|
</ul>
|
|
</HelpSection>
|
|
|
|
<HelpSection icon="fas fa-life-ring" title="Soporte y contacto">
|
|
<p>
|
|
¿Necesitas ayuda adicional? Envía los detalles de tu solicitud (URL, método, headers y respuesta) al
|
|
administrador del sistema o a tu equipo de soporte interno.
|
|
</p>
|
|
</HelpSection>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HelpPage;
|