devlab/schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add "Ayuda" page and update navigation to support new view

Browse Source 
Introduced the `HelpPage` component to provide user guidance, troubleshooting tips, and quick-start instructions. Updated navigation and dynamic header title logic to include the new "help" view. Adjusted `App.js` to handle the new view state and display `HelpPage`.
This commit is contained in:
rafael
2025-11-22 22:22:20 -04:00
parent 48505fe3b5
commit c346e1ad53
2 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/Help/HelpPage.js Normal file
View File

@@ -0,0 +1,95 @@
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">
<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;