Foto Base 64
This commit is contained in:
TioSam77
+5
-4
@@ -17,6 +17,7 @@ import { PrivateRoutes, PublicRoutes } from './models/routes';
|
||||
import NavUsuario from './components/CardUsuarios/NavUsuarios';
|
||||
import InterAdmin from './pages/PanelNavegacion/InterAdmin';
|
||||
import InterResp from './components/InterResp'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div className="App">
|
||||
@@ -24,14 +25,14 @@ const App = () => {
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path={PublicRoutes.FILTER} element={<Directorio/>}></Route>
|
||||
<Route path="/profesor/perfil/:id" element={<PerfilProfesor />} />
|
||||
<Route path = {`${PublicRoutes.DATAPROFESOR}:id_profesor`} element={<PerfilProfesor/>} />
|
||||
<Route path={PublicRoutes.LOGIN} element={<Login/>}></Route>
|
||||
<Route path={PrivateRoutes.INTERFACE} element={<PanelNavegacion/>} />
|
||||
<Route path={PrivateRoutes.CREARPROFESOR} element={<Directorio2/>}></Route>
|
||||
<Route path={PrivateRoutes.CREARUSUARIO} element={<CrearUsuario/>}></Route>
|
||||
<Route path='/EditarUsuario' element={<NavUsuario/>} />
|
||||
<Route path='/Usuario/editar/:id' element={<MDUser/>}></Route>
|
||||
<Route path={PrivateRoutes.EDITARPROFESOR} element={<FormEditProfesorPage/>} />
|
||||
<Route path={PrivateRoutes.FILTERUSUARIO} element={<NavUsuario/>} />
|
||||
<Route path = {`${PrivateRoutes.EDITARUSUARIO}:id_usuario`} element={<MDUser/>}></Route>
|
||||
<Route path = {`${PrivateRoutes.EDITARPROFESOR}:id_profesor`} element={<FormEditProfesorPage/>} />
|
||||
<Route path={PublicRoutes.NOTFOUND} element={<Pagina404/>} />
|
||||
<Route path='/Test' element={<Login/>}></Route>
|
||||
</Routes>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
.card {
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
margin: auto;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em !important;
|
||||
background: #f9f9f9 !important;
|
||||
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: left;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
margin: auto;
|
||||
padding: 0.5em;
|
||||
border-radius: 1em !important;
|
||||
background: #f9f9f9 !important;
|
||||
box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: left;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 8px 16px 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import './CardProfesor.css';
|
||||
import { PrivateRoutes } from '../../models/routes';
|
||||
import { PrivateRoutes, PublicRoutes } from '../../models/routes';
|
||||
|
||||
const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
@@ -15,16 +15,18 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
|
||||
await fetchDelete(profesor.id_profesor);
|
||||
setShowDialog(false);
|
||||
setConfirmText('');
|
||||
// Opcional: Puedes recargar la página después de eliminar
|
||||
// window.location.reload();
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
// Redirige a la página de edición del profesor
|
||||
window.location.href = `${PrivateRoutes.EDITARPROFESOR}${profesor.id_profesor}`;
|
||||
};
|
||||
|
||||
const handleViewProfesor = () =>{
|
||||
window.location.href = `${PublicRoutes.DATAPROFESOR}${profesor.id_profesor}`;
|
||||
}
|
||||
|
||||
const fetchDelete = async (id_profesor) => {
|
||||
try {
|
||||
const token = localStorage.getItem('Token');
|
||||
@@ -55,11 +57,11 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
|
||||
|
||||
return (
|
||||
<div className="card m-1">
|
||||
<img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
|
||||
<img src={profesor.fotografia} alt="Profesor img" className="imgProfe" onClick={handleViewProfesor}/>
|
||||
<div className="card-content">
|
||||
|
||||
<h4>{profesor.nombre}</h4>
|
||||
<h6>{edificioNombre}</h6>
|
||||
<h4 onClick={handleViewProfesor} >{profesor.nombre}</h4>
|
||||
<h6 onClick={handleViewProfesor} >{edificioNombre}</h6>
|
||||
|
||||
<div className="button-group">
|
||||
{permissions ? (
|
||||
@@ -73,7 +75,7 @@ const CardProfesor = ({ profesor, edificioNombre, permissions }) => {
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
{showDialog && (
|
||||
<div className="dialog-overlay">
|
||||
<div className="dialog">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import '../../App.css';
|
||||
import { PrivateRoutes } from '../../models/routes';
|
||||
|
||||
const CardUsuario = ({ usuario}) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
@@ -14,12 +15,12 @@ const CardUsuario = ({ usuario}) => {
|
||||
await fetchDelete(usuario.id_usuario);
|
||||
setShowDialog(false);
|
||||
setConfirmText('');
|
||||
// Evita recargar la página directamente en React
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
window.location.href = `/Usuario/editar/${usuario.id_usuario}`;
|
||||
window.location.href = `${PrivateRoutes.EDITARPROFESOR}${usuario.id_usuario}`;
|
||||
};
|
||||
|
||||
const fetchDelete = async (id_usuario) => {
|
||||
@@ -75,7 +76,5 @@ const CardUsuario = ({ usuario}) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
)}
|
||||
export default CardUsuario;
|
||||
|
||||
@@ -6,6 +6,7 @@ const MapeoUsuario = ({ filters }) => {
|
||||
const [usuarios, setUsuarios] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [jwt,setJwt] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
jwtPermissions();
|
||||
@@ -33,7 +34,11 @@ const MapeoUsuario = ({ filters }) => {
|
||||
limit: 10,
|
||||
}).toString();
|
||||
|
||||
fetch(`http://localhost:3000/auth/?${query}`)
|
||||
fetch(`http://localhost:3000/auth?${query}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${jwt}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('La respuesta de la red no fue correcta');
|
||||
@@ -93,13 +98,9 @@ const MapeoUsuario = ({ filters }) => {
|
||||
|
||||
return (
|
||||
<div className="main-content">
|
||||
{usuarios.length > 0 ? (
|
||||
usuarios.map(usuario => (
|
||||
<CardUsuario key={usuario.id_usuario} usuario={usuario} />
|
||||
))
|
||||
) : (
|
||||
<p>No se encontraron usuarios.</p>
|
||||
)}
|
||||
{usuarios.map(usuario => (
|
||||
<CardUsuario key={usuario.id_usuario} usuario={usuario} />
|
||||
))}
|
||||
|
||||
<nav aria-label="Navegación de páginas">
|
||||
<ul className="pagination justify-content-center">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './FilterProfesor.css';
|
||||
import Mapeo from './Mapeo';
|
||||
import Mapeo from '../Mapeo';
|
||||
|
||||
function FilterProfesor() {
|
||||
const [nombre, setNombre] = useState('');
|
||||
@@ -13,6 +13,10 @@
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.boton{
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 40px;
|
||||
@@ -67,4 +71,4 @@
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
+263
-132
@@ -1,153 +1,284 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import { useParams } from 'react-router-dom';
|
||||
import './FormEditProfesor.css';
|
||||
|
||||
const FormEditProfesor = () => {
|
||||
const [page, setPage] = useState(1);
|
||||
const { id_profesor } = useParams();
|
||||
const [profesor, setProfesor] = useState(null);
|
||||
const [adscripciones, setAdscripciones] = useState([]);
|
||||
const [categorias, setCategorias] = useState([]);
|
||||
const [edificios, setEdificios] = useState([]);
|
||||
const [edificio, setEdificio] = useState('');
|
||||
const [adscripcion, setAdscripcion] = useState('');
|
||||
const [categoria, setCategoria] = useState('');
|
||||
const [activo, setActivo] = useState();
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:3000/adscripcion')
|
||||
.then(response => response.json())
|
||||
.then(data => setAdscripciones(data))
|
||||
.catch(error => console.error('Error fetching adscripciones:', error));
|
||||
|
||||
fetch('http://localhost:3000/categoria')
|
||||
.then(response => response.json())
|
||||
.then(data => setCategorias(data))
|
||||
.catch(error => console.error('Error fetching categorias:', error));
|
||||
|
||||
fetch('http://localhost:3000/edificio')
|
||||
.then(response => response.json())
|
||||
.then(data => setEdificios(data))
|
||||
.catch(error => console.error('Error fetching edificios:', error));
|
||||
|
||||
fetch(`http://localhost:3000/profesor/${id_profesor}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
data.proyectosAcademicos = data.proyectosAcademicos.map(proyecto => ({
|
||||
...proyecto,
|
||||
proyecto: proyecto.proyecto || proyecto.proyecto_html
|
||||
}));
|
||||
data.lineasInvestigacion = data.lineasInvestigacion.map(linea => ({
|
||||
...linea,
|
||||
lineas_inv: linea.lineas_inv || linea.lineas_inv_html
|
||||
}));
|
||||
setProfesor(data);
|
||||
setEdificio(data.id_edificio);
|
||||
setAdscripcion(data.id_adscripcion);
|
||||
setCategoria(data.id_categoria);
|
||||
setActivo(data.activo ? true : false);
|
||||
})
|
||||
.catch(error => console.error('Error fetching profesor:', error));
|
||||
console.log(profesor)
|
||||
}, [id_profesor]);
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
setProfesor({ ...profesor, [name]: value });
|
||||
};
|
||||
|
||||
const handleSelectChange = (event, setState) => {
|
||||
setState(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
{page === 1 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Personales</h2>
|
||||
<div className="form-group">
|
||||
<label>Nombre <span className="required">*</span></label>
|
||||
<input type="text" name="nombre" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>RFC <span className="required">*</span></label>
|
||||
<input type="text" name="rfc" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo personal</label>
|
||||
<input type="email" name="correoPersonal" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono personal</label>
|
||||
<input type="tel" name="telefonoPersonal" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Homoclave <span className="required">*</span></label>
|
||||
<input type="text" name="homoclave" required />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
{profesor ? (
|
||||
<>
|
||||
{page === 1 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Personales</h2>
|
||||
<div className="form-group">
|
||||
<label>Nombre <span className="required">*</span></label>
|
||||
<input type="text" name="nombre" required defaultValue={profesor.nombre} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>RFC <span className="required">*</span></label>
|
||||
<input type="text" name="rfc" required defaultValue={profesor.rfc} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo personal</label>
|
||||
<input type="email" name="correo_per" defaultValue={profesor.correo_per} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono personal</label>
|
||||
<input type="tel" name="tel_personal" defaultValue={profesor.tel_personal} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Homoclave <span className="required">*</span></label>
|
||||
<input type="text" name="homoclave" required defaultValue={profesor.homoclave} onChange={handleInputChange} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{page === 2 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Académicos</h2>
|
||||
<div className="form-group">
|
||||
<label>Correo principal <span className="required">*</span></label>
|
||||
<input type="email" name="correoPrincipal" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono de oficina <span className="required">*</span></label>
|
||||
<input type="tel" name="telefonoOficina" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Extensión</label>
|
||||
<input type="text" name="extension" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ubicación <span className="required">*</span></label>
|
||||
<input type="text" name="ubicacion" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Edificio <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Edificio
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Edificio 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Edificio 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Edificio 3</a></li>
|
||||
</ul>
|
||||
{page === 2 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Académicos</h2>
|
||||
<div className="form-group">
|
||||
<label>Grado Maximo <span className="required">*</span></label>
|
||||
<input type="email" name="grado_maximo" required
|
||||
defaultValue={profesor.datosAcademicos.map((datos, index) => (
|
||||
datos.grado_maximo
|
||||
))}
|
||||
onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Grados Obtenidos <span className="required">*</span></label>
|
||||
<input type="email" name="grados_obtenidos" required
|
||||
defaultValue={profesor.datosAcademicos.map((datos, index) => (
|
||||
datos.grados_obtenidos
|
||||
))}
|
||||
onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo Pcpuma <span className="required">*</span></label>
|
||||
<input type="email" name="correo_pcp" required defaultValue={profesor.correo_pcp} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono de oficina <span className="required">*</span></label>
|
||||
<input type="tel" name="tel_oficina" required defaultValue={profesor.tel_oficina} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Extensión</label>
|
||||
<input type="text" name="extension" defaultValue={profesor.extension} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ubicación <span className="required">*</span></label>
|
||||
<input type="text" name="ubicacion" required defaultValue={profesor.ubicacion} onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Edificio <span className="required">*</span></label>
|
||||
<select
|
||||
id="edificio"
|
||||
value={edificio}
|
||||
onChange={(e) => handleSelectChange(e, setEdificio)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Edificio</option>
|
||||
{edificios.map((edificio) => (
|
||||
<option key={edificio.id_edificio} value={edificio.id_edificio}>
|
||||
{edificio.edificio}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
|
||||
{page === 3 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos de Investigación</h2>
|
||||
<div className="form-group">
|
||||
<label>Categoría <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Categoría
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Categoría 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Categoría 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Categoría 3</a></li>
|
||||
</ul>
|
||||
{page === 3 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos de Investigación</h2>
|
||||
<div className="form-group">
|
||||
<label>Categoría <span className="required">*</span></label>
|
||||
<select
|
||||
id="categoria"
|
||||
value={categoria}
|
||||
onChange={(e) => handleSelectChange(e, setCategoria)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Categoría</option>
|
||||
{categorias.map((categoria) => (
|
||||
<option key={categoria.id_categoria} value={categoria.id_categoria}>
|
||||
{categoria.categoria}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adscripción <span className="required">*</span></label>
|
||||
<select
|
||||
id="adscripcion"
|
||||
value={adscripcion}
|
||||
onChange={(e) => handleSelectChange(e, setAdscripcion)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Adscripción</option>
|
||||
{adscripciones.map((adscripcion) => (
|
||||
<option key={adscripcion.id_adscripcion} value={adscripcion.id_adscripcion}>
|
||||
{adscripcion.adscripcion}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Activo <span className="required">*</span></label>
|
||||
<select
|
||||
id="activo"
|
||||
value={activo}
|
||||
onChange={(e) => handleSelectChange(e, setActivo)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value = {true} >Sí</option>
|
||||
<option value= {false} >No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Foto</label>
|
||||
<input type="file" name="fotografia" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adscripción <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Adscripción
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Adscripción 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Adscripción 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Adscripción 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Activo <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Activo
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Sí</a></li>
|
||||
<li><a className="dropdown-item" href="#">No</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Foto</label>
|
||||
<input type="file" name="foto" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Registrar</button>
|
||||
</form>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul className="pagination justify-content-center">
|
||||
<li className={`page-item ${page === 1 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page - 1)}>Previous</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 1 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(1)}>1</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 2 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(2)}>2</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(3)}>3</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page + 1)}>Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{page === 4 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Lineas de Investigacion</h2>
|
||||
{profesor.lineasInvestigacion.map((linea,index)=>(
|
||||
<div className="form-group" key={index}>
|
||||
<label>Lineas de Investigacion {index + 1}<span className="required">*</span></label>
|
||||
<input type="text" name={`proyecto_${index}`} required defaultValue={linea.lineas_inv} onChange={handleInputChange} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{page === 5 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Proyectos Académicos</h2>
|
||||
{profesor.proyectosAcademicos.map((proyecto, index) => (
|
||||
<div className="form-group" key={index}>
|
||||
<label>Proyecto {index + 1}<span className="required">*</span></label>
|
||||
<textarea
|
||||
name={`lineas_inv_${index}`}
|
||||
required
|
||||
defaultValue={proyecto.proyecto}
|
||||
onChange={handleInputChange}
|
||||
style={{ width: "560px", minHeight: "50px", maxHeight: "100px", resize: "vertical" }}
|
||||
className="static-width-textarea"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<button type="submit" className="btn btn-primary boton">Registrar</button>
|
||||
|
||||
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul className="pagination justify-content-center">
|
||||
<li className={`page-item ${page === 1 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page - 1)}>Previous</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 1 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(1)}>1</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 2 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(2)}>2</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(3)}>3</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 4 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(4)}>4</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 5 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(5)}>5</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 5 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page + 1)}>Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
) : (
|
||||
<p>Cargando...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormEditProfesor ;
|
||||
export default FormEditProfesor;
|
||||
|
||||
|
||||
@@ -13,6 +13,11 @@
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.boton{
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 40px;
|
||||
|
||||
+261
-131
@@ -1,152 +1,282 @@
|
||||
import React, { useState } from 'react';
|
||||
import './FormProfesor.css';
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import './FormEditProfesor.css';
|
||||
|
||||
const FormProfesor = () => {
|
||||
const FormEditProfesor = () => {
|
||||
const [page, setPage] = useState(1);
|
||||
const [profesor, setProfesor] = useState(null);
|
||||
const [adscripciones, setAdscripciones] = useState([]);
|
||||
const [categorias, setCategorias] = useState([]);
|
||||
const [edificios, setEdificios] = useState([]);
|
||||
const [edificio, setEdificio] = useState('');
|
||||
const [adscripcion, setAdscripcion] = useState('');
|
||||
const [categoria, setCategoria] = useState('');
|
||||
const [activo, setActivo] = useState();
|
||||
const [foto, setFoto] = useState(null);
|
||||
const [fotoBase64, setFotoBase64] = useState('');
|
||||
|
||||
const handlePageChange = (newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetch('http://localhost:3000/adscripcion')
|
||||
.then(response => response.json())
|
||||
.then(data => setAdscripciones(data))
|
||||
.catch(error => console.error('Error fetching adscripciones:', error));
|
||||
|
||||
fetch('http://localhost:3000/categoria')
|
||||
.then(response => response.json())
|
||||
.then(data => setCategorias(data))
|
||||
.catch(error => console.error('Error fetching categorias:', error));
|
||||
|
||||
fetch('http://localhost:3000/edificio')
|
||||
.then(response => response.json())
|
||||
.then(data => setEdificios(data))
|
||||
.catch(error => console.error('Error fetching edificios:', error));
|
||||
|
||||
}, []);
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
setProfesor({ ...profesor, [name]: value });
|
||||
};
|
||||
|
||||
const handleSelectChange = (event, setState) => {
|
||||
setState(event.target.value);
|
||||
};
|
||||
|
||||
const onDrop = useCallback(acceptedFiles => {
|
||||
const file = acceptedFiles[0];
|
||||
setFoto(file);
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
const base64String = reader.result;
|
||||
console.log('Base64 String:', base64String); // Agrega este console.log para verificar el cambio
|
||||
setFotoBase64(base64String);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}, []);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept: 'image/jpeg, image/png'
|
||||
});
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
// Process form data here, including the fotoBase64
|
||||
console.log("Form submitted");
|
||||
console.log(fotoBase64); // This is the base64 string of the image
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
{page === 1 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Personales</h2>
|
||||
<div className="form-group">
|
||||
<label>Nombre <span className="required">*</span></label>
|
||||
<input type="text" name="nombre" required />
|
||||
<form onSubmit={handleSubmit}>
|
||||
<>
|
||||
{page === 1 && (
|
||||
<div className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Personales</h2>
|
||||
<div className="form-group">
|
||||
<label>Nombre <span className="required">*</span></label>
|
||||
<input type="text" name="nombre" required onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>RFC <span className="required">*</span></label>
|
||||
<input type="text" name="rfc" required onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo personal</label>
|
||||
<input type="email" name="correo_per" onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono personal</label>
|
||||
<input type="tel" name="tel_personal" onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Homoclave <span className="required">*</span></label>
|
||||
<input type="text" name="homoclave" required onChange={handleInputChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>RFC <span className="required">*</span></label>
|
||||
<input type="text" name="rfc" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo personal</label>
|
||||
<input type="email" name="correoPersonal" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono personal</label>
|
||||
<input type="tel" name="telefonoPersonal" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Homoclave <span className="required">*</span></label>
|
||||
<input type="text" name="homoclave" required />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
)}
|
||||
|
||||
{page === 2 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Académicos</h2>
|
||||
<div className="form-group">
|
||||
<label>Correo principal <span className="required">*</span></label>
|
||||
<input type="email" name="correoPrincipal" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono de oficina <span className="required">*</span></label>
|
||||
<input type="tel" name="telefonoOficina" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Extensión</label>
|
||||
<input type="text" name="extension" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ubicación <span className="required">*</span></label>
|
||||
<input type="text" name="ubicacion" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Edificio <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Edificio
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Edificio 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Edificio 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Edificio 3</a></li>
|
||||
</ul>
|
||||
{page === 2 && (
|
||||
<div className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos Académicos</h2>
|
||||
<div className="form-group">
|
||||
<label>Grado Maximo <span className="required">*</span></label>
|
||||
<input type="email" name="grado_maximo" required
|
||||
onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Grados Obtenidos <span className="required">*</span></label>
|
||||
<input type="email" name="grados_obtenidos" required
|
||||
onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Correo Pcpuma <span className="required">*</span></label>
|
||||
<input type="email" name="correo_pcp" required onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Teléfono de oficina <span className="required">*</span></label>
|
||||
<input type="tel" name="tel_oficina" required onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Extensión</label>
|
||||
<input type="text" name="extension" onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ubicación <span className="required">*</span></label>
|
||||
<input type="text" name="ubicacion" required onChange={handleInputChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Edificio <span className="required">*</span></label>
|
||||
<select
|
||||
id="edificio"
|
||||
value={edificio}
|
||||
onChange={(e) => handleSelectChange(e, setEdificio)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Edificio</option>
|
||||
{edificios.map((edificio) => (
|
||||
<option key={edificio.id_edificio} value={edificio.id_edificio}>
|
||||
{edificio.edificio}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
)}
|
||||
|
||||
{page === 3 && (
|
||||
<form className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos de Investigación</h2>
|
||||
<div className="form-group">
|
||||
<label>Categoría <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Categoría
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Categoría 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Categoría 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Categoría 3</a></li>
|
||||
</ul>
|
||||
{page === 3 && (
|
||||
<div className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Datos de Investigación</h2>
|
||||
<div className="form-group">
|
||||
<label>Categoría <span className="required">*</span></label>
|
||||
<select
|
||||
id="categoria"
|
||||
value={categoria}
|
||||
onChange={(e) => handleSelectChange(e, setCategoria)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Categoría</option>
|
||||
{categorias.map((categoria) => (
|
||||
<option key={categoria.id_categoria} value={categoria.id_categoria}>
|
||||
{categoria.categoria}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adscripción <span className="required">*</span></label>
|
||||
<select
|
||||
id="adscripcion"
|
||||
value={adscripcion}
|
||||
onChange={(e) => handleSelectChange(e, setAdscripcion)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value="">Adscripción</option>
|
||||
{adscripciones.map((adscripcion) => (
|
||||
<option key={adscripcion.id_adscripcion} value={adscripcion.id_adscripcion}>
|
||||
{adscripcion.adscripcion}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Activo <span className="required">*</span></label>
|
||||
<select
|
||||
id="activo"
|
||||
value={activo}
|
||||
onChange={(e) => handleSelectChange(e, setActivo)}
|
||||
className="form-control m-2"
|
||||
>
|
||||
<option value = {true} >Sí</option>
|
||||
<option value= {false} >No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Foto</label>
|
||||
<div {...getRootProps()} className="dropzone">
|
||||
<input {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Suelta los archivos aquí...</p>
|
||||
) : (
|
||||
<p>Arrastra y suelta algunos archivos aquí, o haz clic para seleccionar archivos</p>
|
||||
)}
|
||||
</div>
|
||||
{foto && <p>Archivo seleccionado: {foto.name}</p>}
|
||||
{fotoBase64 && <img src={fotoBase64} alt="Foto seleccionada" style={{ maxWidth: '200px', marginTop: '10px' }} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Adscripción <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Adscripción
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Adscripción 1</a></li>
|
||||
<li><a className="dropdown-item" href="#">Adscripción 2</a></li>
|
||||
<li><a className="dropdown-item" href="#">Adscripción 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Activo <span className="required">*</span></label>
|
||||
<div className="dropdown">
|
||||
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Seleccionar Activo
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a className="dropdown-item" href="#">Sí</a></li>
|
||||
<li><a className="dropdown-item" href="#">No</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Foto</label>
|
||||
<input type="file" name="foto" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">Registrar</button>
|
||||
</form>
|
||||
)}
|
||||
)}
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul className="pagination justify-content-center">
|
||||
<li className={`page-item ${page === 1 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page - 1)}>Previous</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 1 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(1)}>1</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 2 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(2)}>2</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(3)}>3</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page + 1)}>Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{page === 4 && (
|
||||
<div className="profesor-form">
|
||||
<div className="form-section">
|
||||
<h2>Proyectos</h2>
|
||||
<div className="form-group">
|
||||
<label>Proyectos de investigación actuales <span className="required">*</span></label>
|
||||
<textarea
|
||||
name="proyectos_inv"
|
||||
required
|
||||
onChange={handleInputChange}
|
||||
style={{ width: "560px", minHeight: "50px", maxHeight: "100px", resize: "vertical" }}
|
||||
className="static-width-textarea"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Lineas de investigación <span className="required">*</span></label>
|
||||
<textarea
|
||||
name="lineas_inv"
|
||||
required
|
||||
onChange={handleInputChange}
|
||||
style={{ width: "560px", minHeight: "50px", maxHeight: "100px", resize: "vertical" }}
|
||||
className="static-width-textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button type="submit" className="btn btn-primary boton">Registrar</button>
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul className="pagination justify-content-center">
|
||||
<li className={`page-item ${page === 1 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page - 1)}>Previous</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 1 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(1)}>1</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 2 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(2)}>2</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 3 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(3)}>3</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 4 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(4)}>4</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 5 ? 'active' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(5)}>5</a>
|
||||
</li>
|
||||
<li className={`page-item ${page === 5 ? 'disabled' : ''}`}>
|
||||
<a className="page-link" href="#" onClick={() => handlePageChange(page + 1)}>Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormProfesor;
|
||||
export default FormEditProfesor;
|
||||
|
||||
@@ -1,67 +1,59 @@
|
||||
*{
|
||||
padding: 0;
|
||||
.perfil-profesor {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
margin: 20px auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.perfil-profesor {
|
||||
padding: 20px;
|
||||
.foto-nombre {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.foto {
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.datos-profesor, .datos-academicos, .lineas-investigacion, .proyectos-academicos {
|
||||
padding: auto;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.datos-profesor .foto-nombre {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap:0;
|
||||
}
|
||||
|
||||
.datos-profesor .foto {
|
||||
width: 333px; /* Incrementa el tamaño de la imagen */
|
||||
height: 333px; /* Incrementa el tamaño de la imagen */
|
||||
border-radius:10px ;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.datos-profesor .info {
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.datos-profesor .info h2 {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius:10px ;
|
||||
background-color: #D59F0F;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.datos-academicos, .lineas-investigacion, .proyectos-academicos {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.datos-profesor .info p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin: auto; /* Ajusta los márgenes para que el encabezado esté pegado arriba */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
.datos-academicos h3, .lineas-investigacion h3, .proyectos-academicos h3 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.datos-academicos ul, .lineas-investigacion ul, .proyectos-academicos ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.datos-academicos li, .lineas-investigacion li, .proyectos-academicos li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.datos-academicos li strong, .lineas-investigacion li strong, .proyectos-academicos li strong {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.info p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@@ -2,62 +2,104 @@ import React, { useEffect, useState } from 'react';
|
||||
import './PerfilProfesor.css';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
const defaultImage = 'https://static.vecteezy.com/system/resources/thumbnails/020/765/399/small_2x/default-profile-account-unknown-icon-black-silhouette-free-vector.jpg';
|
||||
|
||||
const PerfilProfesor = () => {
|
||||
const{id}=useParams()
|
||||
const { id_profesor } = useParams();
|
||||
const [profesor, setProfesor] = useState(null);
|
||||
const [adscripciones, setAdscripciones] = useState([]);
|
||||
const [categorias, setCategorias] = useState([]);
|
||||
const [edificios, setEdificios] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(id)
|
||||
const fetchProfesor = async () => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const adscripcionesResponse = await fetch('http://localhost:3000/adscripcion');
|
||||
const adscripcionesData = await adscripcionesResponse.json();
|
||||
setAdscripciones(adscripcionesData);
|
||||
|
||||
const response = await fetch(`http://localhost:3000/profesor/36`)
|
||||
.then(response=>response.json())
|
||||
.then(data=>setProfesor(data))
|
||||
const categoriasResponse = await fetch('http://localhost:3000/categoria');
|
||||
const categoriasData = await categoriasResponse.json();
|
||||
setCategorias(categoriasData);
|
||||
|
||||
const edificiosResponse = await fetch('http://localhost:3000/edificio');
|
||||
const edificiosData = await edificiosResponse.json();
|
||||
setEdificios(edificiosData);
|
||||
|
||||
const profesorResponse = await fetch(`http://localhost:3000/profesor/${id_profesor}`);
|
||||
const profesorData = await profesorResponse.json();
|
||||
profesorData.proyectosAcademicos = profesorData.proyectosAcademicos.map(proyecto => ({
|
||||
...proyecto,
|
||||
proyecto: proyecto.proyecto || proyecto.proyecto_html
|
||||
}));
|
||||
profesorData.lineasInvestigacion = profesorData.lineasInvestigacion.map(linea => ({
|
||||
...linea,
|
||||
lineas_inv: linea.lineas_inv || linea.lineas_inv_html
|
||||
}));
|
||||
setProfesor(profesorData);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchProfesor();
|
||||
}, []);
|
||||
fetchData();
|
||||
}, [id_profesor]);
|
||||
|
||||
if (!profesor) {
|
||||
return <div>Cargando datos del profesor...</div>;
|
||||
return <div className="perfil-profesor">Cargando datos del profesor...</div>;
|
||||
}
|
||||
|
||||
const edificioProfesor = edificios.find(edificio => edificio.id_edificio === profesor.id_edificio);
|
||||
const adscripcionProfesor = adscripciones.find(adscripcion => adscripcion.id_adscripcion === profesor.id_adscripcion);
|
||||
const categoriaProfesor = categorias.find(categoria => categoria.id_categoria === profesor.id_categoria);
|
||||
|
||||
const fotoProfesor = profesor.fotografia || defaultImage;
|
||||
|
||||
return (
|
||||
<div className="perfil-profesor">
|
||||
<div className="datos-profesor">
|
||||
<div className="foto-nombre">
|
||||
<img src={profesor.fotografia} alt={profesor.nombre} className="foto" />
|
||||
<div className="info">
|
||||
<h2>{profesor.nombre}</h2>
|
||||
<p><strong>Ubicación:</strong> {profesor.ubicacion}</p>
|
||||
<p><strong>Correo:</strong> {profesor.correo_pcp}</p>
|
||||
<p><strong>Edificio:</strong> {profesor.id_edificio}</p>
|
||||
<p><strong>Teléfono de oficina:</strong> {profesor.tel_oficina}</p>
|
||||
<p><strong>Extensión:</strong> {profesor.extension}</p>
|
||||
</div>
|
||||
<div className="foto-nombre">
|
||||
<img src={fotoProfesor} alt={profesor.nombre} className="foto" />
|
||||
<div className="info">
|
||||
<h2>{profesor.nombre}</h2>
|
||||
<p><strong>Ubicación:</strong> {profesor.ubicacion ? profesor.ubicacion: "NO ubicado"}</p>
|
||||
<p><strong>Correo:</strong> {profesor.correo_pcp ? profesor.correo_pcp:"No ubicado"}</p>
|
||||
<p><strong>Teléfono de oficina:</strong> {profesor.tel_oficina ? profesor.tel_oficina:"No ubicado"}</p>
|
||||
<p><strong>Extensión:</strong> {profesor.extension ? profesor.extension:"No ubicado"}</p>
|
||||
<p><strong>Edificio:</strong> {edificioProfesor ? edificioProfesor.edificio : 'No ubicado'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="datos-academicos">
|
||||
<h3>Datos académicos</h3>
|
||||
<h4>Datos académicos</h4>
|
||||
<ul>
|
||||
<li><strong>Categoría:</strong> {profesor.id_categoria}</li>
|
||||
<li><strong>Adscripción:</strong> {profesor.id_adscripcion}</li>
|
||||
<li><strong>Categoría:</strong> {categoriaProfesor ? categoriaProfesor.categoria : 'No ubicado'}</li>
|
||||
<li><strong>Adscripción:</strong> {adscripcionProfesor ? adscripcionProfesor.adscripcion : 'No ubicado'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lineas-investigacion">
|
||||
<h3>Líneas de investigación</h3>
|
||||
<h4>Líneas de investigación</h4>
|
||||
<ul>
|
||||
{profesor.lineasInvestigacion.map((linea, index) => (
|
||||
<li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv}</li>
|
||||
))}
|
||||
{profesor.lineasInvestigacion.length > 0 ? (
|
||||
profesor.lineasInvestigacion.map((linea, index) => (
|
||||
<li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv ? linea.lineas_inv:"NO encontrado"}</li>
|
||||
))
|
||||
) : (
|
||||
<li>No hay líneas de investigación registradas.</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="proyectos-academicos">
|
||||
<h3>Proyectos académicos</h3>
|
||||
<h4>Proyectos académicos</h4>
|
||||
<ul>
|
||||
{profesor.proyectosAcademicos.map((proyecto, index) => (
|
||||
<li key={index}><strong>Proyectos:</strong> {proyecto.proyecto}</li>
|
||||
))}
|
||||
{profesor.proyectosAcademicos.length > 0 ? (
|
||||
profesor.proyectosAcademicos.map((proyecto, index) => (
|
||||
<li key={index}><strong>Proyectos:</strong> {proyecto.proyecto ? proyecto.proyecto : "NO encontrado"}</li>
|
||||
))
|
||||
) : (
|
||||
<li>No hay proyectos académicos registrados.</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,12 +2,15 @@ export const PublicRoutes={
|
||||
NOTFOUND:'*',
|
||||
LOGIN:'/login',
|
||||
FILTER:'/',
|
||||
DATA:'/profesor/perfil/'
|
||||
DATAPROFESOR:'/perfil/Profesor/'
|
||||
}
|
||||
|
||||
export const PrivateRoutes={
|
||||
CREARPROFESOR:'/Crear/Profesor',
|
||||
EDITARPROFESOR:'/Profesor/editar/',
|
||||
EDITARPROFESOR:'/Editar/Profesor/',
|
||||
CREARUSUARIO:'/Creacion/Usuario',
|
||||
EDITARUSUARIO:'/Editar/Usuario/',
|
||||
DATAUSUARIO:'/perfil/Usuario',
|
||||
INTERFACE:'/Interface',
|
||||
FILTERUSUARIO:'/Filter/Usuario'
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import '../App.css';
|
||||
import FilterProfesor from '../components/FilterProfesor'
|
||||
import FilterProfesor from '../components/Filter/FilterProfesor'
|
||||
|
||||
const Directorio = () => {
|
||||
return (
|
||||
|
||||
@@ -1,26 +1,12 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import '../App.css';
|
||||
import FormEditProfesor from '../components/FormEditProfesor';
|
||||
|
||||
const FormEditProfesorPage = () => {
|
||||
const { id } = useParams();
|
||||
const [profesor, setProfesor] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`http://localhost:3000/profesor/${id}`)
|
||||
.then(response => response.json())
|
||||
.then(data => setProfesor(data))
|
||||
.catch(error => console.error('Error fetching profesor:', error));
|
||||
}, [id]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{profesor ? (
|
||||
<FormEditProfesor profesor={profesor} />
|
||||
) : (
|
||||
<p>Cargando datos...</p>
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
<FormEditProfesor/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -8,17 +8,17 @@ const InterAdmin = () => {
|
||||
<div className="admin-section">
|
||||
<div className="section-header">
|
||||
<h2>Usuarios</h2>
|
||||
<img src='https://w7.pngwing.com/pngs/1022/170/png-transparent-users-group-computer-icons-user-s-computer-website-internet-forum-thumbnail.png' alt="Usuarios" className="section-icon" />
|
||||
<img src='https://static.vecteezy.com/system/resources/previews/017/066/794/non_2x/user-icon-line-isolated-on-white-background-black-flat-thin-icon-on-modern-outline-style-linear-symbol-and-editable-stroke-simple-and-pixel-perfect-stroke-illustration-vector.jpg' alt="Usuarios" className="section-icon" />
|
||||
</div>
|
||||
<div className="button-group">
|
||||
<button className="action-button" onClick={() => window.location.href= PrivateRoutes.CREARUSUARIO}>Crear</button>
|
||||
<button className="action-button" onClick={() => window.location.href=PrivateRoutes.INTERFACE}>Editar</button>
|
||||
<button className="action-button" onClick={() => window.location.href=PrivateRoutes.FILTERUSUARIO}>Editar</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-section">
|
||||
<div className="section-header">
|
||||
<h2>Profesores</h2>
|
||||
<img src='https://png.pngtree.com/png-clipart/20190516/original/pngtree-users-vector-icon-png-image_3725294.jpg' alt="Profesores" className="section-icon" />
|
||||
<img src='https://static.vecteezy.com/system/resources/previews/007/165/333/non_2x/book-icon-book-icon-simple-sign-book-icon-isolated-on-with-background-illustration-of-book-icon-free-free-vector.jpg' alt="Profesores" className="section-icon" />
|
||||
</div>
|
||||
<div className="button-group">
|
||||
<button className="action-button" onClick={() => window.location.href= PrivateRoutes.CREARPROFESOR}>Crear</button>
|
||||
|
||||
Reference in New Issue
Block a user