Replace CRA boilerplate with custom dashboard setup, remove unused files, and add new styles and components.
Some checks failed
continuous-integration/drone Build was killed
Some checks failed
continuous-integration/drone Build was killed
This commit is contained in:
127
src/components/Requests/RequestForm.js
Normal file
127
src/components/Requests/RequestForm.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import '../../styles/components.css';
|
||||
|
||||
const RequestForm = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
headers: '',
|
||||
body: '',
|
||||
executeDate: '',
|
||||
executeTime: ''
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Aquí podrías enviar los datos al backend
|
||||
// console.log('Form data', formData);
|
||||
|
||||
// Mostrar notificación de éxito
|
||||
const notification = document.createElement('div');
|
||||
notification.textContent = 'Solicitud guardada correctamente';
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: var(--success);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 2000;
|
||||
`;
|
||||
document.body.appendChild(notification);
|
||||
setTimeout(() => notification.remove(), 2500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
<div className="form-header">
|
||||
<h3><i className="fas fa-paper-plane"></i> Nueva Solicitud</h3>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label>URL del Endpoint</label>
|
||||
<input
|
||||
type="url"
|
||||
name="url"
|
||||
value={formData.url}
|
||||
onChange={handleChange}
|
||||
placeholder="https://api.ejemplo.com/endpoint"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label>Método</label>
|
||||
<select name="method" value={formData.method} onChange={handleChange}>
|
||||
<option>GET</option>
|
||||
<option>POST</option>
|
||||
<option>PUT</option>
|
||||
<option>DELETE</option>
|
||||
<option>PATCH</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Fecha de Ejecución</label>
|
||||
<input
|
||||
type="date"
|
||||
name="executeDate"
|
||||
value={formData.executeDate}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Hora de Ejecución</label>
|
||||
<input
|
||||
type="time"
|
||||
name="executeTime"
|
||||
value={formData.executeTime}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Headers (JSON)</label>
|
||||
<textarea
|
||||
name="headers"
|
||||
rows="3"
|
||||
value={formData.headers}
|
||||
onChange={handleChange}
|
||||
placeholder='{"Authorization": "Bearer ..."}'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Cuerpo (JSON)</label>
|
||||
<textarea
|
||||
name="body"
|
||||
rows="4"
|
||||
value={formData.body}
|
||||
onChange={handleChange}
|
||||
placeholder='{"campo": "valor"}'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
<i className="fas fa-save"></i> Guardar
|
||||
</button>
|
||||
<button type="reset" className="btn btn-outline" onClick={() => setFormData({ url: '', method: 'POST', headers: '', body: '', executeDate: '', executeTime: '' })}>
|
||||
<i className="fas fa-eraser"></i> Limpiar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestForm;
|
||||
100
src/components/Requests/RequestTable.js
Normal file
100
src/components/Requests/RequestTable.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import '../../styles/components.css';
|
||||
|
||||
const RequestTable = () => {
|
||||
const requests = [
|
||||
{
|
||||
id: '#00125',
|
||||
url: 'https://api.ejemplo.com/users',
|
||||
method: 'POST',
|
||||
date: '15/10/2023 14:30',
|
||||
status: 'pending',
|
||||
statusText: 'Pendiente'
|
||||
},
|
||||
{
|
||||
id: '#00124',
|
||||
url: 'https://api.ejemplo.com/products/update',
|
||||
method: 'PUT',
|
||||
date: '15/10/2023 12:15',
|
||||
status: 'completed',
|
||||
statusText: 'Completada'
|
||||
},
|
||||
{
|
||||
id: '#00123',
|
||||
url: 'https://api.ejemplo.com/orders',
|
||||
method: 'GET',
|
||||
date: '15/10/2023 10:45',
|
||||
status: 'failed',
|
||||
statusText: 'Fallida'
|
||||
}
|
||||
];
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
switch (status) {
|
||||
case 'pending': return 'fas fa-clock';
|
||||
case 'completed': return 'fas fa-check';
|
||||
case 'failed': return 'fas fa-exclamation-triangle';
|
||||
default: return 'fas fa-circle';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="table-container">
|
||||
<div className="table-header">
|
||||
<h3>Solicitudes Recientes</h3>
|
||||
<div className="table-actions">
|
||||
<button className="btn btn-outline btn-sm">
|
||||
<i className="fas fa-filter"></i> Filtrar
|
||||
</button>
|
||||
<button className="btn btn-outline btn-sm">
|
||||
<i className="fas fa-download"></i> Exportar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>URL</th>
|
||||
<th>Método</th>
|
||||
<th>Fecha de Ejecución</th>
|
||||
<th>Estado</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{requests.map((request, index) => (
|
||||
<tr key={index}>
|
||||
<td>{request.id}</td>
|
||||
<td>{request.url}</td>
|
||||
<td>{request.method}</td>
|
||||
<td>{request.date}</td>
|
||||
<td>
|
||||
<span className={`status ${request.status}`}>
|
||||
<i className={getStatusIcon(request.status)}></i> {request.statusText}
|
||||
</span>
|
||||
</td>
|
||||
<td className="actions">
|
||||
<button className="view" title="Ver detalles">
|
||||
<i className="fas fa-eye"></i>
|
||||
</button>
|
||||
<button
|
||||
className="execute"
|
||||
title={request.status === 'completed' ? 'Ejecutar ahora' : 'Reintentar'}
|
||||
disabled={request.status === 'completed'}
|
||||
>
|
||||
<i className={request.status === 'failed' ? 'fas fa-redo' : 'fas fa-play'}></i>
|
||||
</button>
|
||||
<button className="cancel" title="Cancelar">
|
||||
<i className="fas fa-times"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestTable;
|
||||
Reference in New Issue
Block a user