mensaje por equipo y por sala

2026-02-06 15:01:35 -05:00
parent afc895c85d
commit 9cd68bcd3e
4 changed files with 177 additions and 27 deletions
@@ -9,7 +9,7 @@ import SelectorEquipo from "@/app/Components/InformacionEquipos/SelectorEquipo";
 import { useState } from "react";

 import "./informacionequipo.css";
-
+    
 export default function InformacionEquipo({
  defaultKey,
 }: {
@@ -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: {
@@ -32,7 +33,7 @@ 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,35 +1,74 @@
 "use client";
-import { useState } from "react";

-// Definimos la interfaz de props
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
 interface EnviarMensajeProps {
  titulo: string;
-  opciones: string[];
+  opciones: string[]; // se deja por compatibilidad, pero ya no se usa
 }

-const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
+/* 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();
-    // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
+
+    console.log({
+      equipo: seleccion,
+      mensaje,
+      customMsg,
+    });
  };

  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)}
        >
-          <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>
@@ -37,25 +76,22 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {

      {/* 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"}}/>
+
+        <input type="checkbox" style={{ minWidth: 20, width: 20 }} />
      </div>

      {/* Mensaje personalizado */}
      <label className="label">Mensaje personalizado</label>
+
      <div className="groupInput">
        <input
          type="text"
@@ -63,12 +99,16 @@ 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"}}/>
+
+        <input type="checkbox" style={{ minWidth: 20, width: 20 }} />
      </div>

-
-      {/* Botón de enviar */}
-      <button className="button buttonSearch" type="submit" style={{marginTop:"1rem"}}>
+      {/* Botón */}
+      <button
+        className="button buttonSearch"
+        type="submit"
+        style={{ marginTop: "1rem" }}
+      >
        Mandar mensaje
      </button>
    </form>
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
+
+interface EnviarMensajeProps {
+  titulo: string;
+  opciones: string[];
+}
+
+/* 🔵 INTERFAZ SALAS */
+interface AreaUbicacion {
+  id_area_ubicacion: number;
+  area: string;
+}
+
+const EnviarMensajeSala = ({ titulo }: EnviarMensajeProps) => {
+  const [salas, setSalas] = useState<AreaUbicacion[]>([]);
+  const [seleccion, setSeleccion] = useState("");
+  const [mensaje, setMensaje] = useState("");
+  const [customMsg, setCustomMsg] = useState("");
+
+  /* 🔵 FETCH SOLO SALAS */
+  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();
+
+    console.log({
+      sala: seleccion,
+      mensaje,
+      customMsg,
+    });
+  };
+
+  return (
+    <form className="containerForm" onSubmit={handleSubmit}>
+      {/* 🔵 SELECT SALAS */}
+      <label className="label">{titulo}</label>
+
+      <div className="groupInput">
+        <select
+          value={seleccion}
+          onChange={(e) => setSeleccion(e.target.value)}
+        >
+          <option value="">-- Selecciona una sala --</option>
+
+          {salas.map((sala) => (
+            <option key={sala.id_area_ubicacion} value={sala.id_area_ubicacion}>
+              {sala.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 EnviarMensajeSala;