119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import { envConfig } from "@/app/lib/config";
|
|
|
|
interface EnviarMensajeProps {
|
|
titulo: string;
|
|
opciones: string[]; // se deja por compatibilidad, pero ya no se usa
|
|
}
|
|
|
|
/* MISMA interfaz que tu SelectorEquipo */
|
|
interface Equipos {
|
|
id_equipo: number;
|
|
id_plataforma: number;
|
|
id_area_ubicacion: number;
|
|
nombre_equipo: string;
|
|
ubicacion: string;
|
|
activo: boolean;
|
|
ip: string;
|
|
areaUbicacion: { area: string };
|
|
plataforma: { nombre: string };
|
|
}
|
|
|
|
const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => {
|
|
|
|
const [equipos, setEquipos] = useState<Equipos[]>([]);
|
|
const [seleccion, setSeleccion] = useState("");
|
|
const [mensaje, setMensaje] = useState("");
|
|
const [customMsg, setCustomMsg] = useState("");
|
|
|
|
|
|
useEffect(() => {
|
|
const fetchEquipos = async () => {
|
|
try {
|
|
const response = await axios.get(`${envConfig.apiUrl}/equipo`);
|
|
setEquipos(response.data);
|
|
} catch (error) {
|
|
console.error("Error cargando equipos:", error);
|
|
}
|
|
};
|
|
|
|
fetchEquipos();
|
|
}, []);
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
console.log({
|
|
equipo: seleccion,
|
|
mensaje,
|
|
customMsg,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form className="containerForm" onSubmit={handleSubmit}>
|
|
|
|
<label className="label">{titulo}</label>
|
|
|
|
<div className="groupInput">
|
|
<select
|
|
value={seleccion}
|
|
onChange={(e) => setSeleccion(e.target.value)}
|
|
>
|
|
<option value="">-- Selecciona un equipo --</option>
|
|
|
|
{equipos.map((eq) => (
|
|
<option key={eq.id_equipo} value={eq.id_equipo}>
|
|
{eq.ubicacion} {eq.nombre_equipo} {eq.plataforma.nombre}{" "}
|
|
{eq.areaUbicacion.area}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Selección de mensaje */}
|
|
<label className="label">Seleccione el mensaje</label>
|
|
|
|
<div className="groupInput">
|
|
<select value={mensaje} onChange={(e) => setMensaje(e.target.value)}>
|
|
<option value="">-- Seleccione el mensaje --</option>
|
|
<option value="cerrar">No olvides cerrar sesión</option>
|
|
<option value="alerta1">⚠️ Atención</option>
|
|
<option value="alerta2">🔔 Aviso importante</option>
|
|
<option value="alerta3">✅ Confirmación</option>
|
|
</select>
|
|
|
|
<input type="checkbox" style={{ minWidth: 20, width: 20 }} />
|
|
</div>
|
|
|
|
{/* Mensaje personalizado */}
|
|
<label className="label">Mensaje personalizado</label>
|
|
|
|
<div className="groupInput">
|
|
<input
|
|
type="text"
|
|
value={customMsg}
|
|
onChange={(e) => setCustomMsg(e.target.value)}
|
|
placeholder="Escribe tu mensaje..."
|
|
/>
|
|
|
|
<input type="checkbox" style={{ minWidth: 20, width: 20 }} />
|
|
</div>
|
|
|
|
{/* Botón */}
|
|
<button
|
|
className="button buttonSearch"
|
|
type="submit"
|
|
style={{ marginTop: "1rem" }}
|
|
>
|
|
Mandar mensaje
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default EnviarMensaje;
|