82 lines
1.9 KiB
TypeScript
82 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import styles from "./Page.module.css";
|
|
|
|
type Equipo = {
|
|
id_equipo: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: {
|
|
data: number[];
|
|
};
|
|
plataforma: {
|
|
nombre: string;
|
|
};
|
|
areaUbicacion: {
|
|
area: string;
|
|
};
|
|
};
|
|
|
|
export default function MachineTableActive() {
|
|
const [machines, setMachines] = useState<Equipo[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const fetchMachines = async () => {
|
|
try {
|
|
const res = await fetch(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/equipo/active`,
|
|
{ cache: "no-store" },
|
|
);
|
|
const data = await res.json();
|
|
setMachines(data);
|
|
} catch (error) {
|
|
console.error("Error al cargar equipos", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchMachines();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <p>Cargando equipos...</p>;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.tableContainer}>
|
|
<table className={styles.machineTable}>
|
|
<thead>
|
|
<tr style={{ fontSize: "15px" }}>
|
|
<th>Ubicación</th>
|
|
<th>Nombre Equipo</th>
|
|
<th>Plataforma</th>
|
|
<th>Área</th>
|
|
<th>Disponible</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{machines.map((machine) => {
|
|
const disponible = machine.activo.data[0] === 1;
|
|
|
|
return (
|
|
<tr key={machine.id_equipo}>
|
|
<td>{machine.ubicacion}</td>
|
|
<td>{machine.nombre_equipo}</td>
|
|
<td className={styles[machine.plataforma.nombre]}>
|
|
{machine.plataforma.nombre}
|
|
</td>
|
|
<td>{machine.areaUbicacion.area}</td>
|
|
<td>{disponible ? "Sí" : "No"}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|