125 lines
3.1 KiB
TypeScript
125 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import styles from "./Page.module.css";
|
|
import axios from "axios";
|
|
import Cookies from "js-cookie";
|
|
|
|
type AreaUbicacion = {
|
|
id_area_ubicacion: number;
|
|
area: string;
|
|
};
|
|
|
|
type Equipo = {
|
|
id_equipo: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
plataforma: string;
|
|
area: string;
|
|
ocupado: boolean;
|
|
};
|
|
|
|
export default function MachineTableActive() {
|
|
const [machines, setMachines] = useState<Equipo[]>([]);
|
|
const [areas, setAreas] = useState<AreaUbicacion[]>([]);
|
|
const [selectedArea, setSelectedArea] = useState("Todo");
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const fetchMachines = async () => {
|
|
try {
|
|
|
|
const res = await axios.get(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/equipo/active`,
|
|
{ headers },
|
|
);
|
|
|
|
setMachines(res.data);
|
|
} catch (error) {
|
|
console.error("Error cargando equipos:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchAreas = async () => {
|
|
try {
|
|
const res = await axios.get(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/area-ubicacion`,
|
|
{ headers },
|
|
|
|
);
|
|
|
|
setAreas(res.data);
|
|
} catch (error) {
|
|
console.error("Error cargando áreas:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchMachines();
|
|
fetchAreas();
|
|
}, []);
|
|
|
|
const filteredMachines =
|
|
selectedArea === "Todo"
|
|
? machines
|
|
: machines.filter(
|
|
(machine) => machine.area === selectedArea,
|
|
);
|
|
|
|
if (loading) return <p>Cargando equipos...</p>;
|
|
|
|
return (
|
|
<div className={styles.tableContainer}>
|
|
<table className={styles.machineTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Ubicación</th>
|
|
<th>Nombre Equipo</th>
|
|
<th>Plataforma</th>
|
|
<th>Área</th>
|
|
<th>Disponible</th>
|
|
</tr>
|
|
<tr style={{ position: "relative", zIndex: "0" }}>
|
|
<th />
|
|
<th />
|
|
<th />
|
|
<th>
|
|
<select
|
|
style={{ minWidth: "50px" }}
|
|
value={selectedArea}
|
|
onChange={(e) => setSelectedArea(e.target.value)}
|
|
>
|
|
<option value="Todo">Todo</option>
|
|
{areas.map((area) => (
|
|
<option key={area.id_area_ubicacion} value={area.area}>
|
|
{area.area}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{filteredMachines.map((machine) => (
|
|
<tr key={machine.id_equipo} className={!machine.ocupado ? '' : styles.ocupado}>
|
|
<td>{machine.ubicacion}</td>
|
|
<td>{machine.nombre_equipo}</td>
|
|
<td className={styles[machine.plataforma]}>
|
|
{machine.plataforma}
|
|
</td>
|
|
<td>{machine.area}</td>
|
|
<td>{!machine.ocupado ? "Sí" : "No"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
//IO
|