91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
"use client";
|
|
import { envConfig } from "@/app/lib/config";
|
|
import axios from "axios";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Equipos {
|
|
id_equipo: number;
|
|
id_plataforma: number;
|
|
id_area_ubicacion: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: boolean;
|
|
ip: string;
|
|
}
|
|
|
|
interface Programa {
|
|
id_programa: number;
|
|
programa: string;
|
|
}
|
|
|
|
export default function ProgramSelector() {
|
|
const [equipoSeleccionado, setEquipoSeleccionado] = useState<number | "">("");
|
|
const [equipos, setEquipos] = useState<Equipos[]>([]);
|
|
const [programas, setProgramas] = useState<Programa[]>([]);
|
|
const [checkboxes, setCheckboxes] = useState<Record<number, boolean>>({});
|
|
|
|
useEffect(() => {
|
|
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);
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setEquipoSeleccionado(Number(e.target.value));
|
|
};
|
|
|
|
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:", programasSeleccionados);
|
|
};
|
|
|
|
return (
|
|
<form className="form-container" onSubmit={handleSubmit}>
|
|
|
|
<div className="checkbox-grid">
|
|
{programas.map((prog) => (
|
|
<label key={prog.id_programa}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checkboxes[prog.id_programa] || false}
|
|
onChange={() => handleTogglePrograma(prog.id_programa)}
|
|
/>
|
|
{prog.programa}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
<button className="button buttonSearch" type="submit">
|
|
Guardar cambios
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|