diff --git a/app/(private)/AsignacionEquipo/PlaticaGate.tsx b/app/(private)/AsignacionEquipo/PlaticaGate.tsx index ac93b7a..237f207 100644 --- a/app/(private)/AsignacionEquipo/PlaticaGate.tsx +++ b/app/(private)/AsignacionEquipo/PlaticaGate.tsx @@ -160,7 +160,6 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) { > {equipoSeleccionado ? ( {equipoSeleccionado.ubicacion}{" "} {equipoSeleccionado.nombre_equipo} diff --git a/app/(private)/AsignacionEquipo/asignacion.css b/app/(private)/AsignacionEquipo/asignacion.css index 997a905..65d9e2b 100644 --- a/app/(private)/AsignacionEquipo/asignacion.css +++ b/app/(private)/AsignacionEquipo/asignacion.css @@ -3,8 +3,9 @@ border-radius: 6px; position: relative; flex: 1; - width: 100%; + width: 100%; font-size: 14px; + margin-bottom: 1rem; } .customSelect.disabled { diff --git a/app/(private)/Monitor/DSC.tsx b/app/(private)/Monitor/DSC.tsx new file mode 100644 index 0000000..2443f64 --- /dev/null +++ b/app/(private)/Monitor/DSC.tsx @@ -0,0 +1,86 @@ +'use client'; + +type EstadoPC = 'libre' | 'ocupada' | 'fallo'; + +const colores: Record = { + libre: '#22c55e', // verde + ocupada: '#ef4444', // rojo + fallo: '#facc15', // amarillo +}; + +const pcs = [ + { + id: 'PC-01', + x: 120, + y: 180, + width: 40, + height: 40, + estado: 'libre' as EstadoPC, + }, + { + id: 'PC-02', + x: 170, + y: 180, + width: 40, + height: 40, + estado: 'ocupada' as EstadoPC, + }, + { + id: 'PC-03', + x: 220, + y: 180, + width: 40, + height: 40, + estado: 'fallo' as EstadoPC, + }, +]; + +export default function DSC() { + return ( + + + {/* FONDO */} + + + {/* CAPA INTERACTIVA */} + + {pcs.map(pc => ( + + {/* CUADRO */} + console.log(pc.id)} + /> + + {/* NÚMERO */} + + {pc.id.replace('PC-', '')} + + + ))} + + + + ); +} diff --git a/app/(private)/Monitor/page.tsx b/app/(private)/Monitor/page.tsx index b05be2e..2694969 100644 --- a/app/(private)/Monitor/page.tsx +++ b/app/(private)/Monitor/page.tsx @@ -1,8 +1,8 @@ import Toggle from "@/app/Components/Global/Toggle/Toggle"; import MachineTable from "./MachineTable"; import styles from "./Page.module.css"; -import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable"; import MachineTableActive from "./MachineTableActive"; +import DSC from "./DSC"; export default async function Page(props: { searchParams?: Promise<{ numAcount: string; key: string }>; diff --git a/app/Components/ActivosMantenimiento/Mesas.tsx b/app/Components/ActivosMantenimiento/Mesas.tsx index e37138c..0b32001 100644 --- a/app/Components/ActivosMantenimiento/Mesas.tsx +++ b/app/Components/ActivosMantenimiento/Mesas.tsx @@ -29,7 +29,6 @@ function Mesas() {
- {/* Select de mesas */} toggleEquipo(mesa.id_mesa)} /> diff --git a/app/Components/Equipos/tableequipos.tsx b/app/Components/Equipos/tableequipos.tsx index 7c6461a..65f00ce 100644 --- a/app/Components/Equipos/tableequipos.tsx +++ b/app/Components/Equipos/tableequipos.tsx @@ -24,7 +24,7 @@ export default function TableEquipos() { const toggleEquipo = async (id_equipo: number) => { try { - await fetch(`${envConfig.apiUrl}/equipo/${id_equipo}/activo`, { + await fetch(`${envConfig.apiUrl}/mesa/${id_equipo}/activo`, { method: "PATCH", }); diff --git a/app/Components/EviarMensaje/EnviarMensaje.tsx b/app/Components/EviarMensaje/EnviarMensaje.tsx index 5f75345..906b13a 100644 --- a/app/Components/EviarMensaje/EnviarMensaje.tsx +++ b/app/Components/EviarMensaje/EnviarMensaje.tsx @@ -4,6 +4,8 @@ import { useEffect, useState } from "react"; import axios from "axios"; import { envConfig } from "@/app/lib/config"; +import "../../(private)/AsignacionEquipo/asignacion.css"; + interface Equipo { id_equipo: number; id_plataforma: number; @@ -22,15 +24,16 @@ interface EnviarMensajeProps { const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => { const [equipos, setEquipos] = useState([]); - const [equipoSeleccionado, setEquipoSeleccionado] = useState(""); + const [equipoSeleccionado, setEquipoSeleccionado] = useState(null); + const [loadingEquipos, setLoadingEquipos] = useState(false); + const [open, setOpen] = useState(false); 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`); + const response = await axios.get(`${envConfig.apiUrl}/equipo/busy`); setEquipos(response.data); } catch (error) { console.error("Error cargando equipos:", error); @@ -50,28 +53,59 @@ const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => { console.log(payload); - // aquí puedes enviar al backend - // axios.post(...) }; return ( -
- + {open ? "▲" : "▼"} +
+ + {open && ( +
+ {equipos.length === 0 && ( +
+ No hay equipos disponibles +
+ )} + + {equipos.map((eq) => ( +
{ + setEquipoSeleccionado(eq); + setOpen(false); + }} + > + {eq.ubicacion} {eq.nombre_equipo} {eq.areaUbicacion.area} +
+ ))} +
+ )}
@@ -86,7 +120,7 @@ const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => { - +
@@ -98,7 +132,7 @@ const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => { />
- +