mostrar equipos

2026-01-21 17:01:44 -06:00
parent 4c3a84db78
commit 31eacf380f
4 changed files with 100 additions and 99 deletions
@@ -1,67 +1,66 @@
 "use client";
-import { useState } from "react";
+
+import { useEffect, useState } from "react";

 function Equipos() {
  const [cuenta, setCuenta] = useState("");
-  const [tiempo, setTiempo] = useState("");
+  const [equipoId, setEquipoId] = useState("");
+  const [equipos, setEquipos] = useState<any[]>([]);
  const [mensaje, setMensaje] = useState("");

+  useEffect(() => {
+    fetch("http://localhost:3000/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 antes de buscar");
+      setMensaje("Ingresa un número de cuenta");
      return;
    }
-    setMensaje(`Buscando información del No. de cuenta: ${cuenta}`);
+    setMensaje(`Buscando cuenta: ${cuenta}`);
  };

  const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
-    if (!tiempo) {
-      setMensaje("Selecciona un equipo antes de asignar");
+    if (!equipoId) {
+      setMensaje("Selecciona un equipo");
      return;
    }
-    setMensaje(`Equipo asignado con tiempo: ${tiempo} minutos`);
+    setMensaje(`Equipo ${equipoId} asignado`);
  };

  return (
    <div className="containerForm">
-      {/* Formulario Buscar */}
+      {/* Buscar */}
      <form onSubmit={handleBuscar} className="groupInput">
-        <label className="label">No. de cuenta:</label>
+        <label>No. de cuenta:</label>
        <input
          type="text"
          value={cuenta}
          onChange={(e) => setCuenta(e.target.value)}
-          placeholder="Ingresa el número de cuenta"
        />
-        <button className="button buttonSearch" type="submit">
-          Buscar
-        </button>
+        <button type="submit">Buscar</button>
      </form>

-      {/* Formulario Asignar */}
-      <form
-        onSubmit={handleAsignar}
-        className="groupInput"
-        style={{ marginTop: "20px" }}
-      >
-        <label className="label">Equipos disponibles:</label>
-        <select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
+      {/* Asignar */}
+      <form onSubmit={handleAsignar} className="groupInput">
+        <label>Equipos disponibles:</label>
+        <select value={equipoId} onChange={(e) => setEquipoId(e.target.value)}>
          <option value="">-- Selecciona un equipo --</option>
-          <option value="15">1</option>
-          <option value="30">2</option>
-          <option value="45">3</option>
-          <option value="60">4</option>
-          <option value="90">5</option>
-          <option value="120">6</option>
+          {equipos.map((eq) => (
+            <option key={eq.id_equipo} value={eq.id_equipo}>
+              {eq.nombre_equipo} - {eq.ubicacion}
+            </option>
+          ))}
        </select>
-        <button className="button buttonSearch" type="submit">
-          Asignar
-        </button>
+        <button type="submit">Asignar</button>
      </form>

-      {mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
+      {mensaje && <p>{mensaje}</p>}
    </div>
  );
 }
@@ -3,8 +3,13 @@
 import { useEffect, useState } from "react";
 import axios from "axios";

+interface Mesa{
+    mesas:string,
+    activo:boolean,
+}
+
 export default function MesasDisponibles() {
-  const [mesas, setMesas] = useState([]);
+  const [mesas, setMesas] = useState<Mesa[]>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
@@ -35,15 +40,19 @@ export default function MesasDisponibles() {
                <th>Activo</th>
              </tr>
            </thead>
-            <tbody>
-               {mesas.map((mesa) => (
-    <tr key={mesa.mesas}>
-      <td>Mesa {mesa.mesas}</td>
-      <td className={mesa.activo ? "activo" : "inactivo"}>
-        {mesa.activo ? "Sí" : "No"}
-      </td>
-    </tr>
-  ))}
+            <tbody>{mesas && (
+
+              
+              mesas.map((Mesa) => (
+                <tr key={Mesa.mesas}>
+                <td>Mesa {Mesa.mesas}</td>
+                <td className={Mesa.activo ? "activo" : "inactivo"}>
+                {Mesa.activo ? "Sí" : "No"}
+                </td>
+                </tr>
+              ))
+            )
+              }
            </tbody>
          </table>
        )}
@@ -1,60 +1,53 @@
-export default async function TableEquipos() {
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function TableEquipos() {
+  const [equipos, setEquipos] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    console.log("LLAMANDO API EQUIPO");
+
+    fetch("http://localhost:5000/equipo")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log("EQUIPOS:", data);
+        setEquipos(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("ERROR API:", err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <p>Cargando equipos...</p>;
+  }
+
  return (
-    <section className="containerSection">
-      <div>
-        <table>
-          <thead>
-            <tr style={{ fontSize: "15px" }}>
-              <th>Ubicación</th>
-              <th>Nombre</th>
-              <th>Plataforma</th>
-              <th>Área</th>
-              <th>Activo</th>
-            </tr>
-            <tr>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>pcnet1</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>mostrar todos</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>windows</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>mostrar Todo</option>
-                </select>
-              </th>
-              <th>
-                <select style={{ minWidth: "50px" }}>
-                  <option style={{ minWidth: "50px" }}>si</option>
-                </select>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {/* {machines.map((machine, index) => (
-              <tr key={index}>
-                <td>{machine.ubicacion}</td>
-                <td>{machine.nombre}</td>
-                <td>{machine.plataforma}</td>
-                <td>{machine.area}</td>
-                <td className={machine.disponible ? "disponible" : ""}>
-                  {machine.disponible ? "si" : "no"}
-                </td>
-              </tr>
-            ))} */}
-          </tbody>
-        </table>
-      </div>
-    </section>
+    <table style={{ width: "100%", borderCollapse: "collapse" }}>
+      <thead>
+        <tr>
+          <th>Ubicación</th>
+          <th>Nombre</th>
+          <th>Plataforma</th>
+          <th>Área</th>
+          <th>Activo</th>
+        </tr>
+      </thead>
+      <tbody>
+        {equipos.map((eq) => (
+          <tr key={eq.id_equipo}>
+            <td>{eq.ubicacion}</td>
+            <td>{eq.nombre_equipo}</td>
+            <td>{eq.plataforma?.nombre || eq.id_plataforma}</td>
+            <td>{eq.areaUbicacion?.nombre || eq.id_area_ubicacion}</td>
+            <td>{eq.activo ? "Sí" : "No"}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
  );
 }
-//IO
@@ -15,7 +15,7 @@
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {