nuevo componente EnviarMensajeSala

2026-02-09 14:36:11 -06:00
parent eb730d6f7b
commit 298663b36e
3 changed files with 174 additions and 35 deletions
@@ -1,4 +1,5 @@
 import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
+import EnviarMensajeSala from "@/app/Components/EviarMensaje/EnviarMensajeSala";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";

 export default async function Page(props: {
@@ -24,7 +25,7 @@ export default async function Page(props: {
              <EnviarMensaje
              key={1}
                titulo="Seleccione un equipo"
-                opciones={["1", "2", "3", "4", "5", "6"]}
+                
              />
            ),
          },
@@ -32,10 +33,10 @@ export default async function Page(props: {
            key: "Sala",
            label: "Sala",
            content: (
-              <EnviarMensaje
+              <EnviarMensajeSala
              key={2}
                titulo="Seleccione una sala"
-                opciones={["PECERA", "PCNET1", "PCNET2", "PCNET3"]}
+               
              />
            ),
          },
@@ -1,60 +1,92 @@
 "use client";
-import { useState } from "react";

-// Definimos la interfaz de props
-interface EnviarMensajeProps {
-  titulo: string;
-  opciones: string[];
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
+interface Equipo {
+  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, opciones }: EnviarMensajeProps) => {
-  const [seleccion, setSeleccion] = useState("");
+interface EnviarMensajeProps {
+  titulo: string;
+}
+
+const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => {
+  const [equipos, setEquipos] = useState<Equipo[]>([]);
+  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
  const [mensaje, setMensaje] = useState("");
  const [customMsg, setCustomMsg] = useState("");

+  // 🔹 Traer equipos desde API
+  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();
-    // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
+
+    const payload = {
+      equipo: equipoSeleccionado,
+      mensaje: customMsg || mensaje,
+    };
+
+    console.log(payload);
+
+    // aquí puedes enviar al backend
+    // axios.post(...)
  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
-      {/* Selección principal */}
+
      <label className="label">{titulo}</label>
      <div className="groupInput">
        <select
-          value={seleccion}
-          onChange={(e) => setSeleccion(e.target.value)}
+          value={equipoSeleccionado}
+          onChange={(e) => setEquipoSeleccionado(e.target.value)}
        >
-          <option value="">-- {titulo} --</option>
-          {opciones.map((opt, idx) => (
-            <option key={idx} value={opt}>
-              {opt}
+          <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>
-          {[
-            { value: "cerrar", label: "No olvides cerrar sesión" },
-            { value: "alerta1", label: "⚠️ Atención" },
-            { value: "alerta2", label: "🔔 Aviso importante" },
-            { value: "alerta3", label: "✅ Confirmación" },
-          ].map((msg, idx) => (
-            <option key={idx} value={msg.value}>
-              {msg.label}
-            </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:"20px", width:"20px",maxWidth:"30px"}}/>
      </div>

-      {/* Mensaje personalizado */}
+ 
      <label className="label">Mensaje personalizado</label>
      <div className="groupInput">
        <input
@@ -63,12 +95,14 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
          onChange={(e) => setCustomMsg(e.target.value)}
          placeholder="Escribe tu mensaje..."
        />
-        <input type="checkbox" style={{minWidth:"20px", width:"20px",maxWidth:"30px"}}/>
      </div>

-
-      {/* Botón de enviar */}
-      <button className="button buttonSearch" type="submit" style={{marginTop:"1rem"}}>
+  
+      <button
+        className="button buttonSearch"
+        type="submit"
+        style={{ marginTop: "1rem" }}
+      >
        Mandar mensaje
      </button>
    </form>
@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
+interface Area {
+  id_area_ubicacion: number;
+  area: string;
+  extra: string;
+}
+
+interface EnviarMensajeSalaProps {
+  titulo: string;
+}
+
+const EnviarMensajeSala = ({ titulo }: EnviarMensajeSalaProps) => {
+  const [salas, setSalas] = useState<Area[]>([]);
+  const [salaSeleccionada, setSalaSeleccionada] = useState<number>(0);
+  const [mensaje, setMensaje] = useState("");
+  const [customMsg, setCustomMsg] = useState("");
+
+  // 🔹 Traer salas desde API
+  useEffect(() => {
+    const fetchSalas = async () => {
+      try {
+        const response = await axios.get(`${envConfig.apiUrl}/area-ubicacion`);
+        setSalas(response.data);
+      } catch (error) {
+        console.error("Error cargando salas:", error);
+      }
+    };
+
+    fetchSalas();
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const payload = {
+      sala: salaSeleccionada,
+      mensaje: customMsg || mensaje,
+    };
+
+    console.log(payload);
+
+    
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+  
+      <label className="label">{titulo}</label>
+      <div className="groupInput">
+        <select
+          value={salaSeleccionada}
+          onChange={(e) => setSalaSeleccionada(Number(e.target.value))}
+        >
+          <option value={0}>-- Selecciona una sala --</option>
+
+          {salas.map((s) => (
+            <option key={s.id_area_ubicacion} value={s.id_area_ubicacion}>
+              {s.area}
+            </option>
+          ))}
+        </select>
+      </div>
+
+ 
+      <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>
+      </div>
+
+
+      <label className="label">Mensaje personalizado</label>
+      <div className="groupInput">
+        <input
+          type="text"
+          value={customMsg}
+          onChange={(e) => setCustomMsg(e.target.value)}
+          placeholder="Escribe tu mensaje..."
+        />
+      </div>
+
+      <button
+        className="button buttonSearch"
+        type="submit"
+        style={{ marginTop: "1rem" }}
+      >
+        Mandar mensaje
+      </button>
+    </form>
+  );
+};
+
+export default EnviarMensajeSala;