115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
"use client";
|
|
import SearchDate from "../SearchDate/SearchDate";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import "../../(private)/AsignacionEquipo/asignacion.css"
|
|
import { envConfig } from "@/app/lib/config";
|
|
import axios from "axios";
|
|
|
|
interface equipos {
|
|
hora_entrada: string;
|
|
min_utilizados: number;
|
|
hora_salida: string;
|
|
cuenta_asociada: number;
|
|
}
|
|
|
|
function BitacoraEquipo() {
|
|
const [equipo, setEquipo] = useState<equipos[]>([]);
|
|
const [open, setOpen] = useState(false);
|
|
const [loadingEquipos, setLoadingEquipos] = useState(false);
|
|
const [equipoSeleccionado, setEquipoSeleccionado] = useState<any>(null);
|
|
const [equipos, setEquipos] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setLoadingEquipos(true);
|
|
const response = await axios.get(`${envConfig.apiUrl}/equipo`);
|
|
setEquipos(response.data);
|
|
setLoadingEquipos(false);
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<label>Seleccione un equipo</label>
|
|
|
|
<div className="groupInput">
|
|
<div
|
|
className={`customSelect ${open ? "open" : ""} ${loadingEquipos ? "disabled" : ""}`}
|
|
>
|
|
<div
|
|
className={`selectHeader ${equipoSeleccionado && equipoSeleccionado.plataforma?.nombre?.toUpperCase()}`}
|
|
onClick={() => !loadingEquipos && setOpen(!open)}
|
|
>
|
|
{equipoSeleccionado ? (
|
|
<span
|
|
>
|
|
{equipoSeleccionado.ubicacion}{" "}
|
|
{equipoSeleccionado.nombre_equipo}
|
|
</span>
|
|
) : (
|
|
<span className="placeholder">
|
|
{loadingEquipos
|
|
? "Cargando equipos..."
|
|
: "Seleccione un equipo"}
|
|
</span>
|
|
)}
|
|
|
|
<span className="arrow">{open ? "▲" : "▼"}</span>
|
|
</div>
|
|
|
|
{open && (
|
|
<div className="options" style={{ bottom: "auto"}}>
|
|
{equipos.length === 0 && (
|
|
<div className="option disabled">
|
|
No hay equipos disponibles
|
|
</div>
|
|
)}
|
|
|
|
{equipos.map((eq) => (
|
|
<div
|
|
key={eq.id_equipo}
|
|
className={`option ${eq.plataforma?.nombre?.toUpperCase()}`}
|
|
onClick={() => {
|
|
setEquipoSeleccionado(eq);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
{eq.ubicacion} {eq.nombre_equipo}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<SearchDate />
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Hora Entrada</th>
|
|
<th>Minutos utilizados</th>
|
|
<th>Hora salida</th>
|
|
<th>Cuenta asociada</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{equipo.map((equipo, index) => (
|
|
<tr key={index}>
|
|
<td>{equipo.hora_entrada}</td>
|
|
<td>{equipo.min_utilizados}</td>
|
|
<td>{equipo.hora_salida}</td>
|
|
<td>{equipo.cuenta_asociada}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default BitacoraEquipo;
|