added select area

2026-01-21 11:58:32 -06:00
parent 0f87251a5c
commit b02338815f
4 changed files with 158 additions and 109 deletions
@@ -0,0 +1,54 @@
+'use client'
+
+import Toggle from "@/app/Components/Global/Toggle/Toggle";
+import Equipos from "@/app/Components/Equipos/equipos";
+import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
+import SelectorSala from "@/app/Components/InformacionEquipos/SelectorSala";
+import { useState } from "react";
+
+import "./informacionequipo.css";
+
+export default function InformacionEquipo({
+  defaultKey,
+}: {
+  defaultKey?: string;
+}) {
+  const [id, setId] = useState<number | null>(null);
+
+  return (
+    <section className="containerSection">
+      <h2 className="title"> INFORMACION DE EQUIPOS </h2>
+
+      <Toggle
+        defaultView={defaultKey}
+        options={[
+          {
+            key: "Equipos",
+            label: "Equipos",
+            content: <Equipos />,
+          },
+          {
+            key: "Equipo",
+            label: "Programa por equipo",
+            content: <ProgramSelector />,
+          },
+          {
+            key: "Sala",
+            label: "Programa por sala",
+            content: (
+              <>
+                <SelectorSala
+                  onSearch={(sala) => {
+                    setId(sala);
+                  }}
+                />
+                <ProgramSelector />
+              </>
+            ),
+          },
+        ]}
+      />
+    </section>
+  );
+}
+//IO
@@ -1,6 +1,4 @@
-import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import Equipos from "@/app/Components/Equipos/equipos";
-import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
+import InformacionEquipo from "./InformacionEquipo";

 import "./informacionequipo.css";

@@ -11,43 +9,7 @@ export default async function Page(props: {
  }>;
 }) {
  const params = await props.searchParams;
-  const key = params?.key && params.key;
-  const machine = params?.machine ? params.machine : null;

-  return (
-    <section className="containerSection">
-
-      <h2 className="title"> INFORMACION DE EQUIPOS </h2>
-
-      <Toggle
-        defaultView={key}
-        options={[
-          {
-            key: "Equipos",
-            label: "Equipos",
-            content: <Equipos />,
-          },
-          {
-            key: "Equipo",
-            label: "Programa por equipo",
-            content: (
-              <ProgramSelector
-                key={1}
-              />
-            ),
-          },
-          {
-            key: "Sala",
-            label: "Programa por sala",
-            content: (
-              <ProgramSelector
-                key={2}
-              />
-            ),
-          },
-        ]}
-      />
-    </section>
-  );
+  return <InformacionEquipo defaultKey={params?.key} />
 }
-//IO
+//IO
@@ -3,40 +3,6 @@ import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import { useEffect, useState } from "react";

-const programas = [
-  "3D MAX STUDIO 2014",
-  "ADOBE CREATIVE SUITE",
-  "ARCHICAD 20",
-  "AUDACITY -win - 2.0",
-  "AUTOCAD",
-  "CODE-BLOCKS",
-  "COREL DRAW",
-  "DEV-C++",
-  "EVIEWS Enterprise",
-  "Google Earth",
-  "INTERNERT",
-  "MAPLE",
-  "MATHEMATICA",
-  "MATLAB",
-  "Maxima",
-  "miktex",
-  "NETBEANS",
-  "OFFICE 2016",
-  "PSeint",
-  "R 3.0.1",
-  "R Studio",
-  "SPPS Statiscs",
-  "STATA 13",
-  "STATGRAOHICS Centurion XVI",
-];
-
-const caracteristicasPorEquipo: Record<string, string[]> = {
-  "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"],
-};
-
 interface Equipos {
  id_equipo: number;
  id_plataforma: number;
@@ -47,65 +13,79 @@ interface Equipos {
  ip: string;
 }

+interface Programa {
+  id_programa: number;
+  programa: string;
+}
+
 export default function ProgramSelector() {
-  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
-  const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
-    programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
-  );
-  const [equipo, setEquipo] = useState<Equipos[]>();
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState<number | "">("");
+  const [equipos, setEquipos] = useState<Equipos[]>([]);
+  const [programas, setProgramas] = useState<Programa[]>([]);
+  const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});

  useEffect(() => {
-    const getEquipos = async () => {
-      const equipos = await axios.get(`${envConfig.apiUrl}/equipo`);
-      setEquipo(equipos.data);
+    const fetchData = async () => {
+      const [equiposRes, programasRes] = await Promise.all([
+        axios.get(`${envConfig.apiUrl}/equipo`),
+        axios.get(`${envConfig.apiUrl}/programa`),
+      ]);
+
+      setEquipos(equiposRes.data);
+      setProgramas(programasRes.data);
+
+      const initialCheckboxes: Record<number, boolean> = {};
+      programasRes.data.forEach((p: Programa) => {
+        initialCheckboxes[p.id_programa] = false;
+      });
+      setCheckboxes(initialCheckboxes);
    };
-    getEquipos();
+
+    fetchData();
  }, []);

  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const equipo = e.target.value;
-    setEquipoSeleccionado(equipo);
+    setEquipoSeleccionado(Number(e.target.value));
+  };

-    const nuevosCheckboxes: Record<string, boolean> = {};
-    programas.forEach((prog) => {
-      nuevosCheckboxes[prog] =
-        caracteristicasPorEquipo[equipo]?.includes(prog) || false;
-    });
-    setCheckboxes(nuevosCheckboxes);
+  const handleTogglePrograma = (id: number) => {
+    setCheckboxes((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
+
+    const programasSeleccionados = Object.keys(checkboxes)
+      .filter((id) => checkboxes[Number(id)])
+      .map(Number);
+
    console.log("Equipo:", equipoSeleccionado);
-    console.log(
-      "Programas seleccionados:",
-      Object.keys(checkboxes).filter((p) => checkboxes[p])
-    );
+    console.log("Programas seleccionados:", programasSeleccionados);
  };

  return (
    <form className="form-container" onSubmit={handleSubmit}>
      <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
        <option value="">-- Selecciona un equipo --</option>
-        {equipo &&
-          equipo.map((eq, i) => (
-            <option key={i} value={eq.id_equipo}>
-              {eq.nombre_equipo}
-            </option>
-          ))}
+        {equipos.map((eq) => (
+          <option key={eq.id_equipo} value={eq.id_equipo}>
+            {eq.nombre_equipo}
+          </option>
+        ))}
      </select>

      <div className="checkbox-grid">
        {programas.map((prog) => (
-          <label key={prog}>
+          <label key={prog.id_programa}>
            <input
              type="checkbox"
-              checked={checkboxes[prog]}
-              onChange={() =>
-                setCheckboxes({ ...checkboxes, [prog]: !checkboxes[prog] })
-              }
+              checked={checkboxes[prog.id_programa] || false}
+              onChange={() => handleTogglePrograma(prog.id_programa)}
            />
-            {prog}
+            {prog.programa}
          </label>
        ))}
      </div>
@@ -115,4 +95,4 @@ export default function ProgramSelector() {
      </button>
    </form>
  );
-}
+}
@@ -0,0 +1,53 @@
+"use client";
+import { envConfig } from "@/app/lib/config";
+import axios from "axios";
+import { use, useEffect, useState } from "react";
+
+interface Area {
+  id_area_ubicacion: number;
+  area: string;
+  extra: string;
+}
+
+interface Props {
+  onSearch: (id: number) => void;
+}
+
+export default function SelectorSala({ onSearch }: Props) {
+  const [sala, setSala] = useState<Area[]>();
+  const [selected, setSelected] = useState<number>();
+
+  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelected(Number(e.target.value));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!selected) return;
+    onSearch(selected);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await axios.get(`${envConfig.apiUrl}/area-ubicacion`);
+
+      setSala(response.data);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <form className="form-container" onSubmit={handleSubmit}>
+      <select value={selected} onChange={handleChangeEquipo}>
+        <option value="">-- Selecciona una sala --</option>
+        {sala &&
+          sala.map((sala) => (
+            <option key={sala.id_area_ubicacion} value={sala.id_area_ubicacion}>
+              {sala.area}
+            </option>
+          ))}
+      </select>
+    </form>
+  );
+}