From 82dc1575495dc554382cbc5accb637c0414744f8 Mon Sep 17 00:00:00 2001 From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx> Date: Tue, 14 Oct 2025 11:48:43 -0600 Subject: [PATCH] components --- app/(private)/InformacionEquipo/page.tsx | 13 ++-- .../InformacionEquipos/ProgramSelector.tsx | 59 ++++++++----------- app/Components/ProgramList.tsx | 0 app/Components/SelectAreas.tsx | 16 ++--- app/Components/SelectEquipo.tsx | 37 ++++++++++++ 5 files changed, 74 insertions(+), 51 deletions(-) create mode 100644 app/Components/ProgramList.tsx create mode 100644 app/Components/SelectEquipo.tsx diff --git a/app/(private)/InformacionEquipo/page.tsx b/app/(private)/InformacionEquipo/page.tsx index 9645f0e..a6da985 100644 --- a/app/(private)/InformacionEquipo/page.tsx +++ b/app/(private)/InformacionEquipo/page.tsx @@ -1,7 +1,6 @@ import Toggle from "@/app/Components/Global/Toggle/Toggle"; import Equipos from "@/app/Components/Equipos/equipos"; import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector"; - import "./informacionequipo.css"; export default async function Page(props: { @@ -16,7 +15,6 @@ export default async function Page(props: { return (
-

INFORMACION DE EQUIPOS

, + content: , // ✅ Aquí solo se muestran los equipos }, { key: "Equipo", @@ -33,7 +31,8 @@ export default async function Page(props: { content: ( ), @@ -44,8 +43,9 @@ export default async function Page(props: { content: ( ), }, @@ -54,4 +54,3 @@ export default async function Page(props: {
); } -//IO diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx index 3629fd8..0c7f563 100644 --- a/app/Components/InformacionEquipos/ProgramSelector.tsx +++ b/app/Components/InformacionEquipos/ProgramSelector.tsx @@ -1,13 +1,16 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import SelectAreas from "../SelectAreas"; +import { url } from "inspector"; +import SelectEquipo from "../SelectEquipo"; +import axios from "axios"; interface DatosEquipo { titulo: string; opcion: string[]; + tipo: "equipo" | "sala"; // Nuevo prop para diferenciar } -// Lista de programas disponibles const programas = [ "3D MAX STUDIO 2014", "ADOBE CREATIVE SUITE", @@ -35,42 +38,28 @@ const programas = [ "STATGRAOHICS Centurion XVI", ]; -// Mapear cada equipo a sus programas (checkboxes que deberían seleccionarse) -const caracteristicasPorEquipo: Record = { - "Equipo 1": ["3D MAX STUDIO 2014", "AUTOCAD", "MATLAB"], - "Equipo 2": ["ADOBE CREATIVE SUITE", "COREL DRAW", "R Studio"], - "Equipo 3": ["ARCHICAD 20", "EVIEWS Enterprise", "SPPS Statiscs"], - "Equipo 4": ["MATHEMATICA", "MAPLE", "Maxima"], - // Agrega más equipos según necesites -}; - -export default function ProgramSelector({ titulo, opcion }: DatosEquipo) { - // Estado del equipo seleccionado - const [equipoSeleccionado, setEquipoSeleccionado] = useState(""); - // Estado de los checkboxes (programas) +export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) { + const [seleccion, setSeleccion] = useState(""); const [checkboxes, setCheckboxes] = useState>( programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {}) ); - const handleChangeEquipo = (e: React.ChangeEvent) => { - const equipo = e.target.value; - setEquipoSeleccionado(equipo); + useEffect(() => { + const response = axios.get( + "https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo" + ); + }); - // Actualizar checkboxes según características del equipo - const nuevosCheckboxes: Record = {}; - programas.forEach((prog) => { - nuevosCheckboxes[prog] = - caracteristicasPorEquipo[equipo]?.includes(prog) || false; - }); - setCheckboxes(nuevosCheckboxes); + const handleChange = (e: React.ChangeEvent) => { + setSeleccion(e.target.value); }; - // Guardar cambios (ejemplo) const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - console.log("Equipo:", equipoSeleccionado); console.log( - "Programas seleccionados:", + tipo === "sala" ? "Sala:" : "Equipo:", + seleccion, + "\nProgramas seleccionados:", Object.keys(checkboxes).filter((p) => checkboxes[p]) ); }; @@ -79,14 +68,12 @@ export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
- + {/* 👇 Mostrar Select diferente según el tipo */} + {tipo === "sala" ? ( + + ) : ( + + )}
{programas.map((prog) => ( diff --git a/app/Components/ProgramList.tsx b/app/Components/ProgramList.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/Components/SelectAreas.tsx b/app/Components/SelectAreas.tsx index 0dc8ea8..144fd5c 100644 --- a/app/Components/SelectAreas.tsx +++ b/app/Components/SelectAreas.tsx @@ -2,19 +2,19 @@ import axios from "axios"; import { useEffect, useState } from "react"; -export default function SelectAreas() { +interface proms { + url: string; +} + +export default function SelectAreas(props: proms) { const [areas, setAreas] = useState([]); const [selectedArea, setSelectedArea] = useState(""); useEffect(() => { axios - .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion") - .then((data) => { - setAreas(data.data); - }) - .catch((error) => { - console.error("Error al traer las áreas:", error); - }); + .get(props.url) + .then((data) => setAreas(data.data)) + .catch((error) => console.error("Error al traer las áreas:", error)); }, []); return ( diff --git a/app/Components/SelectEquipo.tsx b/app/Components/SelectEquipo.tsx new file mode 100644 index 0000000..f47fc83 --- /dev/null +++ b/app/Components/SelectEquipo.tsx @@ -0,0 +1,37 @@ +"use client"; +import axios from "axios"; +import { useEffect, useState } from "react"; + +interface proms { + url: string; +} + +export default function SelectEquipo(props: proms) { + const [areas, setAreas] = useState([]); + const [selectedArea, setSelectedArea] = useState(""); + + useEffect(() => { + axios + .get(props.url) + .then((data) => setAreas(data.data)) + .catch((error) => console.error("Error al traer las áreas:", error)); + }, []); + + return ( +
+ + +
+ ); +}