merge

.env

@@ -1,2 +1 @@
 REACT_APP_API_URL=https://venus.acatlan.unam.mx/directorio_test
-REACT_APP_PORT=3001

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package.json

@@ -17,7 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "set PORT=3001 && react-scripts start",
+    "start": "set PORT=3226 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.css

@@ -31,7 +31,7 @@
 
 .edit-button,
 .delete-boton {
-  padding: 8px 12px;
+  padding: 4px 12px;
   margin-right: 10px;
   border: none;
   cursor: pointer;
@@ -352,7 +352,7 @@ button[type="submit"]:disabled {
 }
 
 .delete-botones {
-  background-image: url("https://cdn.icon-icons.com/icons2/1791/PNG/512/trashcan1_114647.png");
+  background-image: url("./assets/img/trashcan.png");
   filter: invert(1);
   background-color: aqua;
   position: absolute;

src/components/Card/Card.css

@@ -17,7 +17,7 @@
 .transition{
   opacity: 0;
   transform: translateY(20px);
-  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
 }
 
 .transition.show {

src/components/Card/CardUsuarios/MapeoUsuario.js

@@ -26,7 +26,6 @@ const MapeoUsuario = ({ filters }) => {
     return () => window.removeEventListener("resize", updateMaxPagesToShow);
   }, []);
 
-
   if (totalPages === 0) {
     return (
       <div className="perfil-profesor">
@@ -100,9 +99,13 @@ const MapeoUsuario = ({ filters }) => {
         </button>
       </div>
 
-      {usuarios.map((usuario) => (
+      <div className="profesores-container">
-        <CardUsuario key={usuario.id_usuario} usuario={usuario} />
+        {usuarios.map((usuario) => (
-      ))}
+          <div className="transition show">
+            <CardUsuario key={usuario.id_usuario} usuario={usuario} />
+          </div>
+        ))}
+      </div>
 
       <nav aria-label="Navegación de páginas">
         <ul className="pagination justify-content-center">

src/components/Footer.js

@@ -1,18 +1,108 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./style.css";
+import Sam from "../assets/img/Sam.png";
+import IO from "../assets/img/IO.png";
+
+const konamiCode = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+];
+
+let codePosition = 0;
 
 const Footer = () => {
+  const [showImage, setShowImage] = useState(false);
+
+  useEffect(() => {
+    const handleCodeInput = (key) => {
+      if (key === konamiCode[codePosition]) {
+        codePosition++;
+        if (codePosition === konamiCode.length) {
+          activateSecretScreen();
+          codePosition = 0;
+        }
+      } else {
+        codePosition = 0;
+      }
+    };
+
+    const handleKeyDown = (e) => handleCodeInput(e.key);
+    document.addEventListener("keydown", handleKeyDown);
+
+    let touchSequence = [];
+    let startX = 0;
+    let startY = 0;
+
+    const handleTouchStart = (e) => {
+      startX = e.touches[0].clientX;
+      startY = e.touches[0].clientY;
+    };
+
+    const handleTouchEnd = (e) => {
+      let endX = e.changedTouches[0].clientX;
+      let endY = e.changedTouches[0].clientY;
+      handleSwipe(startX, startY, endX, endY);
+    };
+
+    const handleSwipe = (startX, startY, endX, endY) => {
+      const deltaX = endX - startX;
+      const deltaY = endY - startY;
+
+      if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        if (deltaX > 30) touchSequence.push("ArrowRight");
+        else if (deltaX < -30) touchSequence.push("ArrowLeft");
+      } else {
+        if (deltaY > 30) touchSequence.push("ArrowDown");
+        else if (deltaY < -30) touchSequence.push("ArrowUp");
+      }
+
+      if (
+        touchSequence.slice(-konamiCode.length).join("") === konamiCode.join("")
+      ) {
+        activateSecretScreen();
+        touchSequence = [];
+      } else if (touchSequence.length > konamiCode.length) {
+        touchSequence.shift();
+      }
+    };
+
+    document.addEventListener("touchstart", handleTouchStart);
+    document.addEventListener("touchend", handleTouchEnd);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("touchstart", handleTouchStart);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, []);
+
+  const activateSecretScreen = () => {
+    setShowImage(true);
+  };
+
   return (
-    <footer className="footer">
+    <>
-      <div className="container">
+      {showImage && (
-        <p>
+        <div className="center">
-          Hecho en México. Todos los derechos reservados 2024. Esta página puede
+          <img className={`img S ${showImage ? 'show' : ''}`} src={Sam} alt="Sam" />
-          ser reproducida con fines no lucrativos, siempre y cuando no se
+          <img className={`img I ${showImage ? 'show' : ''}`} src={IO} alt="IO" />
-          mutile, se cite la fuente completa y su dirección electrónica. De otra
+        </div>
-          forma, requiere permiso previo por escrito de la institución.
+      )}
-        </p>
+      <footer className=" frow footer">
-      </div>
+        <div className="container">
-    </footer>
+          <p>
+            Hecho en México. Todos los derechos reservados 2024. Esta página
+            puede ser reproducida con fines no lucrativos, siempre y cuando no
+            se mutile, se cite la fuente completa y su dirección electrónica. De
+            otra forma, requiere permiso previo por escrito de la institución.
+          </p>
+        </div>
+      </footer>
+    </>
   );
 };
 

src/components/Header.js

@@ -1,17 +1,17 @@
 import React from "react";
 import "./style.css";
-import logo1 from "../assets/img/escudo-b2.png"; // Ajusta la ruta si es necesario
+import logo1 from "../assets/img/escudo-b2.png";
-import logo2 from "../assets/img/logo_unam-b.png"; // Ajusta la ruta si es necesario
+import logo2 from "../assets/img/logo_unam-b.png";
 
 const Header = () => {
   return (
     <header className="header">
       <a href="https://www.unam.mx/">
-        <img className="logo" alt="Logo 1" src={logo1} />
+        <img className="logo" alt="Logo 1" src={logo2} />
       </a>
       
       <a href="https://www.acatlan.unam.mx/">
-        <img className="logo" alt="Logo 2" src={logo2} />
+        <img className="logo" alt="Logo 2" src={logo1} />
       </a>
     </header>
   );

src/components/Teacher/CrearProfesor/FormProfesor.js

@@ -485,6 +485,7 @@ const FormProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>

src/components/Teacher/ModificarProfesor/FormEditProfesor.js

@@ -13,6 +13,8 @@ import {
   useUpdateTeacher,
 } from "../../../services/teacher.services";
 
+const API_URL = process.env.REACT_APP_API_URL;
+
 const FormEditProfesor = () => {
   const { id_profesor } = useParams();
   const [profesor, setProfesor] = useState(null);
@@ -74,7 +76,11 @@ const FormEditProfesor = () => {
       setCorreo_per(teacher.correo_per);
       setUbicacion(teacher.ubicacion);
       setGrado_maximo(teacher.datosAcademicos[0]?.grado_maximo || "");
-      setOldFoto(teacher.fotografia);
+      if(teacher.fotografia.startsWith("http")){
+        setOldFoto(teacher.fotografia);
+      }else{
+        setOldFoto(`${API_URL}/imagenes/${teacher.fotografia}`);
+      }
     }
   }, [teacher]);
 
@@ -471,6 +477,7 @@ const FormEditProfesor = () => {
                   <p>
                     Arrastra y suelta la imagen aquí, o haz clic para
                     seleccionar una imagen
+                    Peso maximo de la imagen 2MB
                   </p>
                 )}
               </div>

src/components/Teacher/PerfilProfesor/PerfilProfesor.js

@@ -123,23 +123,23 @@ const PerfilProfesor = () => {
             </div>
             <ul>
               <li>
-                <strong>Ubicación:</strong>
+                <strong>Ubicación: </strong>
                 {profesor.ubicacion ? profesor.ubicacion : "NO ubicado"}
               </li>
               <li>
-                <strong>Correo:</strong>
+                <strong>Correo: </strong>
                 {profesor.correo_pcp ? profesor.correo_pcp : "No ubicado"}
               </li>
               <li>
-                <strong>Teléfono de oficina:</strong>
+                <strong>Teléfono de oficina: </strong>
                 {profesor.tel_oficina ? profesor.tel_oficina : "No ubicado"}
               </li>
               <li>
-                <strong>Extensión:</strong>
+                <strong>Extensión: </strong>
                 {profesor.extension ? profesor.extension : "No ubicado"}
               </li>
               <li>
-                <strong>Edificio:</strong>
+                <strong>Edificio: </strong>
                 {edificioProfesor ? edificioProfesor.edificio : "No ubicado"}
               </li>
             </ul>

src/components/style.css

@@ -29,3 +29,28 @@
   max-width: 90%;
   margin: 0 auto;
 }
+
+.center{
+  display: flex;
+  justify-content: center;
+}
+
+.img {
+  max-width: 100px;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0;
+  filter: drop-shadow(0 0 8px black);
+  transition: transform 1s ease-in-out, opacity 1s ease-in;
+}
+
+.S.show {
+  transform: translateY(24px);
+  opacity: 1;
+}
+
+.I.show {
+  transform: translateY(15px);
+  opacity: 1;
+}