101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
"use client";
|
|
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
|
|
}
|
|
|
|
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",
|
|
];
|
|
|
|
export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
|
|
const [seleccion, setSeleccion] = useState("");
|
|
const [programas, setPrograma] = useState("");
|
|
const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
|
|
programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
|
|
);
|
|
|
|
useEffect(() => {
|
|
const response = axios.get(
|
|
"https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo"
|
|
);
|
|
setPrograma(response)
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setSeleccion(e.target.value);
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log(
|
|
tipo === "sala" ? "Sala:" : "Equipo:",
|
|
seleccion,
|
|
"\nProgramas seleccionados:",
|
|
Object.keys(checkboxes).filter((p) => checkboxes[p])
|
|
);
|
|
};
|
|
|
|
return (
|
|
<form className="form-container" onSubmit={handleSubmit}>
|
|
<label>{titulo}</label>
|
|
|
|
{/* 👇 Mostrar Select diferente según el tipo */}
|
|
{tipo === "sala" ? (
|
|
<SelectAreas url="https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion" />
|
|
) : (
|
|
<SelectEquipo url="https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo" />
|
|
)}
|
|
|
|
<div className="checkbox-grid">
|
|
{programas.map((prog) => (
|
|
<label key={prog}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checkboxes[prog]}
|
|
onChange={() =>
|
|
setCheckboxes({ ...checkboxes, [prog]: !checkboxes[prog] })
|
|
}
|
|
/>
|
|
{prog}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<button className="button buttonSearch" type="submit">
|
|
Guardar cambios
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|