26/06/24

2024-06-26 20:08:49 -06:00
parent af179f03ac
commit bfbc5c2e0c
8 changed files with 145 additions and 37 deletions
@@ -14,7 +14,9 @@ import PerfilProfesor from "./components/PerfilProfesor";
 import InterAdmin from './components/InterAdmin';
 import Pagina404 from './pages/Pagina404';
 import { PrivateRoutes, PublicRoutes } from './models/routes';
-import NavUsuarioPage from './components/NavUsuario';
+import NavUsuario from './components/NavUsuario';
+import InterResp from './components/InterResp';
+
 const App = () => {
  return (
    <div className="App">
@@ -27,11 +29,11 @@ const App = () => {
            <Route path={PrivateRoutes.INTERFACE} element={<InterAdmin/>} />
            <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={PublicRoutes.NOTFOUND} element={<Pagina404/>} />
-            <Route path='/Test' element={<NavUsuarioPage/>}></Route>
+            <Route path='/Test' element={<Directorio/>}></Route>
            </Routes>
        <Footer />
      </Router>
@@ -55,8 +55,10 @@ const CardProfesor = ({ profesor, edificioNombre,permissions,jwt }) => {
    <div className="card m-3">
      <img src={profesor.fotografia} alt="Profesor img" className="imgProfe" />
      <div className="card-content">
+
        <h4>{profesor.nombre}</h4>
        <h6>{edificioNombre}</h6>
+
        <div className="button-group">
        {permissions ? (
            <>
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import '../App.css';

-const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
+const CardUsuario = ({ usuario, permissions }) => {
  const [showDialog, setShowDialog] = useState(false);
  const [confirmText, setConfirmText] = useState('');

@@ -14,7 +14,7 @@ const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
      await fetchDelete(usuario.id_usuario);
      setShowDialog(false);
      setConfirmText('');
-      window.location.reload(); // Recargar la página después de eliminar, puedes manejar esto de manera más eficiente con React Router si estás usando enrutamiento
+      // Evita recargar la página directamente en React
    }
  };

@@ -25,43 +25,44 @@ const CardUsuario = ({ usuario, id_tipo_usuario, permissions, jwt }) => {
  const fetchDelete = async (id_usuario) => {
    try {
      const token = localStorage.getItem('Token');
-  
+
      if (!token) {
        console.error('No tienes el token');
        return;
      }
-  
-      const response = await fetch(`http://localhost:3000/usuario/${id_usuario}`, {
+
+      const response = await fetch(`http://localhost:3000/auth/${id_usuario}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`
        },
      });
-  
+
      if (!response.ok) {
        console.error('Error al eliminar el usuario');
        return;
      }
-  
+
      const data = await response.json();
      console.log('Éxito:', data);
+      // Aquí podrías actualizar el estado local o realizar alguna acción adicional si es necesario
    } catch (error) {
      console.error('Error:', error);
    }
-  };  
+  };

  return (
    <div className="card m-3">
      <div className="card-content">
        <h4>{usuario.nombre}</h4>
-        <h6>Tipo de Usuario: {id_tipo_usuario}</h6>
+        <h6>Tipo de Usuario: {usuario.id_tipo_usuario === 1 ? 'Administrador' : 'Responsable'}</h6>
        <div className="button-group">
-          {permissions ? (
+          {permissions && (
            <>
              <button className="edit-button" onClick={handleEditClick} style={{ backgroundColor: 'green' }}>Editar</button>
              <button className="delete-button" onClick={handleDeleteClick} style={{ backgroundColor: 'red' }}>Borrar</button>
            </>
-          ) : null}
+          )}
        </div>
      </div>
      {showDialog && (
@@ -0,0 +1,64 @@
+.resp-interface {
+    display: flex;
+    flex-direction: column; /* Alinear elementos en columna */
+    align-items: center; /* Centrar horizontalmente */
+    justify-content: center; /* Centrar verticalmente */
+    gap: 20px; /* Espacio entre la sección y el panel de navegación */
+    max-width: 500px; /* Ancho máximo para evitar que se extiendan demasiado */
+    margin: auto; /* Margen exterior y centrado horizontal */
+}
+
+.nav-panel {
+    margin-bottom: 20px; /* Espacio entre el panel de navegación y la sección */
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    color: #333;
+}
+
+.resp-section {
+    text-align: center;
+    margin-bottom: 20px; /* Espacio entre cada sección principal y los botones */
+    padding: 20px; /* Espaciado interno de la sección */
+    border-radius: 10px; /* Bordes redondeados */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
+    background-color: lightslategray; /* Color de fondo de las secciones */
+    width: 100%; /* Ancho de la sección */
+}
+
+.section-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Centrar horizontalmente */
+    justify-content: center; /* Centrar verticalmente */
+    margin-bottom: 10px; /* Espacio entre el título y la imagen */
+}
+
+.section-icon {
+    width: 150px; /* Tamaño de la imagen */
+    height: 150px;
+    margin: 0 auto; /* Centrar la imagen dentro de su contenedor */
+    display: block; /* Para asegurar que los márgenes automáticos funcionen */
+    border-radius: 50%; /* Hacer que la imagen sea circular si es necesario */
+}
+
+.resp-section h2 {
+    margin-top: 0;
+}
+
+.button-group {
+    margin-top: 10px; /* Espacio entre el título y los botones */
+}
+
+.action-button {
+    margin: 0 5px; /* Espacio entre los botones */
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: #0056b3;
+}
@@ -0,0 +1,22 @@
+import React from 'react';
+import './InterResp.css'; // Importar el archivo CSS para los estilos
+
+const InterResp = () => {
+    return (
+        <div className="resp-interface">
+            <h1 className="nav-panel">Panel de navegación</h1>
+            <div className="resp-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" />
+                </div>
+                <div className="button-group">
+                    <button className="action-button">Crear</button>
+                    <button className="action-button">Editar</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default InterResp;
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import '../App.css'; // Importación correcta del CSS
+import { Link } from 'react-router-dom';

 const LoginForm = () => {
  const [usuario, setUsuario] = useState('');
@@ -51,6 +52,7 @@ const LoginForm = () => {

  return (
    <div className="main-content">
+      <Link to={"/profesor/perfil/36"} >Hola mundo</Link>
      <h1 className="text-warning">Bienvenido al directorio de profesores</h1>
      <h2 className='m-3'>Inicio de sesión</h2>
      <form onSubmit={handleSubmit} className="login-form" style={{ borderRadius: '1em' }}>
@@ -38,7 +38,7 @@ const MapeoUsuario = ({ filters }) => {
      ...filters
    }).toString();

-    fetch(`http://localhost:3000/usuario/page?${query}`)
+    fetch(`http://localhost:3000/auth/?${query}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('La respuesta de la red no fue correcta');
@@ -91,12 +91,9 @@ const MapeoUsuario = ({ filters }) => {

  return (
    <div className="main-content">
-      {usuarios.map(usuario => {
-        const tipoUsuario = usuario.id_tipo_usuario === 1 ? 'Administrador' : 'Responsable';
-        return (
-          <CardUsuario key={usuario.id_usuario} usuario={usuario} tipoUsuario={tipoUsuario} permissions={permissions} jwt={jwt} />
-        );
-      })}
+      {usuarios && usuarios.map(usuario => (
+        <CardUsuario key={usuario.id_usuario} usuario={usuario} permissions={permissions} />
+      ))}

      <nav aria-label="Navegación de páginas">
        <ul className="pagination justify-content-center">
@@ -1,52 +1,70 @@
 import React, { useEffect, useState } from 'react';
 import './PerfilProfesor.css';
+import { useParams } from 'react-router-dom';

 const PerfilProfesor = ({ profesorId }) => {
+  const{id}=useParams()
  const [profesor, setProfesor] = useState(null);

  useEffect(() => {
-    fetch(`http://localhost:3000/profesor/${profesorId}`)
-      .then(response => response.json())
-      .then(data => setProfesor(data))
-      .catch(error => console.error('Error fetching profesor:', error));
+    console.log(id)
+    console.log(profesorId)
+    const fetchProfesor = async () => {
+      try {
+        const response = await fetch(`http://localhost:3000/profesor/${id}`);
+        if (!response.ok) {
+          throw new Error('Error fetching professor');
+        } console.log(response)
+        const data = await response.json();
+        setProfesor(data); // Guardar los datos del profesor en el estado local
+      } catch (error) {
+        console.error('Error fetching professor:', error);
+      }
+    };
+
+    fetchProfesor();
  }, [profesorId]);

  if (!profesor) {
-    return <div>Cargando datos...</div>;
+    return <div>Cargando datos del profesor...</div>;
  }

  return (
    <div className="perfil-profesor">
      <div className="datos-profesor">
        <div className="foto-nombre">
-          <img src='https://www.cvexpres.com/wp-content/uploads/2023/01/los-objetivos-como-profesor-1.jpg' alt={profesor.nombre} className="foto" />
+          <img src={profesor.fotografia} alt={profesor.nombre} className="foto" />
          <div className="info">
-            <h2>Juana</h2>
-            <p><strong>Ubicación:</strong> Aqui no mas</p>
-            <p><strong>Correo:</strong> Yomerengues@gmail.com</p>
-            <p><strong>Edificio:</strong> Edificio A-1</p>
-            <p><strong>Teléfono de oficina:</strong> 5599662211</p>
-            <p><strong>Extensión:</strong> 777</p>
+            <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>
      </div>
      <div className="datos-academicos">
        <h3>Datos académicos</h3>
        <ul>
-            <p><strong>Categoría:</strong> Categoria YOLO</p>
-            <p><strong>Adscripción:</strong> MAC</p>
+          <li><strong>Categoría:</strong> {profesor.id_categoria}</li>
+          <li><strong>Adscripción:</strong> {profesor.id_adscripcion}</li>
        </ul>
      </div>
      <div className="lineas-investigacion">
        <h3>Líneas de investigación</h3>
        <ul>
-          <li><strong>Investigaciones:</strong> El aguacate</li>
+          {profesor.lineasInvestigacion.map((linea, index) => (
+            <li key={index}><strong>Investigaciones:</strong> {linea.lineas_inv}</li>
+          ))}
        </ul>
      </div>
      <div className="proyectos-academicos">
        <h3>Proyectos académicos</h3>
        <ul>
-          <li><strong>Proyectos:</strong> El mal del aguacate</li>
+          {profesor.proyectosAcademicos.map((proyecto, index) => (
+            <li key={index}><strong>Proyectos:</strong> {proyecto.proyecto}</li>
+          ))}
        </ul>
      </div>
    </div>