68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { envConfig } from "@/app/lib/config";
|
|
import { useEffect, useState } from "react";
|
|
|
|
function Equipos() {
|
|
const [cuenta, setCuenta] = useState("");
|
|
const [equipoId, setEquipoId] = useState("");
|
|
const [equipos, setEquipos] = useState<any[]>([]);
|
|
const [mensaje, setMensaje] = useState("");
|
|
|
|
useEffect(() => {
|
|
fetch(`${envConfig.apiUrl}/equipo`)
|
|
.then((res) => res.json())
|
|
.then((data) => setEquipos(data))
|
|
.catch(() => setMensaje("Error al cargar equipos"));
|
|
}, []);
|
|
|
|
const handleBuscar = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!cuenta) {
|
|
setMensaje("Ingresa un número de cuenta");
|
|
return;
|
|
}
|
|
setMensaje(`Buscando cuenta: ${cuenta}`);
|
|
};
|
|
|
|
const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (!equipoId) {
|
|
setMensaje("Selecciona un equipo");
|
|
return;
|
|
}
|
|
setMensaje(`Equipo ${equipoId} asignado`);
|
|
};
|
|
|
|
return (
|
|
<div className="containerForm">
|
|
<form onSubmit={handleBuscar} className="groupInput">
|
|
<label>No. de cuenta:</label>
|
|
<input
|
|
type="text"
|
|
value={cuenta}
|
|
onChange={(e) => setCuenta(e.target.value)}
|
|
/>
|
|
<button type="submit">Buscar</button>
|
|
</form>
|
|
|
|
<form onSubmit={handleAsignar} className="groupInput">
|
|
<label>Equipos disponibles:</label>
|
|
<select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
|
|
<option value="">-- Selecciona un equipo --</option>
|
|
{equipos.map((eq) => (
|
|
<option key={eq.id_equipo} value={eq.id_equipo}>
|
|
{eq.nombre_equipo} - {eq.ubicacion}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<button type="submit">Asignar</button>
|
|
</form>
|
|
|
|
{mensaje && <p>{mensaje}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Equipos;
|