118 lines
3.0 KiB
TypeScript
118 lines
3.0 KiB
TypeScript
"use client";
|
|
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;
|
|
id_area_ubicacion: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: boolean;
|
|
ip: 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[]>();
|
|
|
|
useEffect(() => {
|
|
const getEquipos = async () => {
|
|
const equipos = await axios.get(`${envConfig.apiUrl}/equipo`);
|
|
setEquipo(equipos.data);
|
|
};
|
|
getEquipos();
|
|
}, []);
|
|
|
|
const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
const equipo = e.target.value;
|
|
setEquipoSeleccionado(equipo);
|
|
|
|
const nuevosCheckboxes: Record<string, boolean> = {};
|
|
programas.forEach((prog) => {
|
|
nuevosCheckboxes[prog] =
|
|
caracteristicasPorEquipo[equipo]?.includes(prog) || false;
|
|
});
|
|
setCheckboxes(nuevosCheckboxes);
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log("Equipo:", equipoSeleccionado);
|
|
console.log(
|
|
"Programas seleccionados:",
|
|
Object.keys(checkboxes).filter((p) => checkboxes[p])
|
|
);
|
|
};
|
|
|
|
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>
|
|
))}
|
|
</select>
|
|
|
|
<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>
|
|
);
|
|
} |