Merge branch 'Carlos' of https://github.com/IO420/Nexus into Lino
This commit is contained in:
@@ -1,117 +1,107 @@
|
||||
'use client';
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import './BarNavigation.css';
|
||||
import "./BarNavigation.css";
|
||||
import Link from "next/link";
|
||||
|
||||
function BarNavigation() {
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const [openSubMenu, setOpenSubMenu] = useState<number | null>(null);
|
||||
|
||||
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||
const toggleSubMenu = (index: number) => {
|
||||
if (typeof window !== "undefined" && window.innerWidth <= 800) {
|
||||
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="barNavigation">
|
||||
<div
|
||||
className={`menuToggle ${openMenu ? '' : ''}`}
|
||||
onClick={toggleMenu}>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
const toggleMenu = () => setOpenMenu(!openMenu);
|
||||
const toggleSubMenu = (index: number) => {
|
||||
if (typeof window !== "undefined" && window.innerWidth <= 800) {
|
||||
setOpenSubMenu(openSubMenu === index ? null : index);
|
||||
}
|
||||
};
|
||||
|
||||
<ul className={openMenu ? "active" : ""}>
|
||||
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
|
||||
<ul className="containerLinks" onClick={toggleMenu}>
|
||||
<Link href="/Alta" className="links">
|
||||
<li >Alta</li>
|
||||
</Link>
|
||||
<Link href="/AgregarTiempo" className="links">
|
||||
<li >Agregar Tiempo</li>
|
||||
</Link>
|
||||
<Link href="/Inscripciones" className="links">
|
||||
<li>Inscripciones</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
return (
|
||||
<nav className="barNavigation">
|
||||
<div className={`menuToggle ${openMenu ? "" : ""}`} onClick={toggleMenu}>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/Impresiones" className="links">
|
||||
<li >
|
||||
Impresiones y Ploteo
|
||||
</li>
|
||||
</Link>
|
||||
<Link href="/AsignacionMesas" className="links">
|
||||
<li>
|
||||
Asignacion de Mesas
|
||||
</li>
|
||||
</Link>
|
||||
<Link href="/AsignacionEquipo" className="links">
|
||||
<li>
|
||||
Asignacion de Equipos
|
||||
</li>
|
||||
</Link>
|
||||
<Link href="/Monitor" className="links">
|
||||
<li>
|
||||
Monitor
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
<ul className={openMenu ? "active" : ""}>
|
||||
<li className={`subMenu ${openSubMenu === 0 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(0)}>Inscripciones</span>
|
||||
<ul className="containerLinks" onClick={toggleMenu}>
|
||||
<Link href="/Alta" className="links">
|
||||
<li>Alta</li>
|
||||
</Link>
|
||||
<Link href="/AgregarTiempo" className="links">
|
||||
<li>Agregar Tiempo</li>
|
||||
</Link>
|
||||
<Link href="/Inscripciones" className="links">
|
||||
<li>Inscripciones</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/InformacionEquipo" className="links">
|
||||
<li>Informacion de Equipos</li>
|
||||
</Link>
|
||||
<Link href="/ActivosMantenimiento" className="links">
|
||||
<li >Activos y en Mantenimiento</li>
|
||||
</Link>
|
||||
<Link href="/Mensajes" className="links">
|
||||
<li>Mensajes</li>
|
||||
</Link>
|
||||
<Link href="/Programas" className="links">
|
||||
<li>Programas</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={`subMenu ${openSubMenu === 1 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(1)}>Servicios</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/Impresiones" className="links">
|
||||
<li>Impresiones y Ploteo</li>
|
||||
</Link>
|
||||
<Link href="/AsignacionMesas" className="links">
|
||||
<li>Asignacion de Mesas</li>
|
||||
</Link>
|
||||
<Link href="/AsignacionEquipo" className="links">
|
||||
<li>Asignacion de Equipos</li>
|
||||
</Link>
|
||||
<Link href="/Monitor" className="links">
|
||||
<li>Monitor</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/Recibo" className="links">
|
||||
<li>Recibo</li>
|
||||
</Link>
|
||||
<Link href="/Inscritos" className="links">
|
||||
<li>Inscritos</li>
|
||||
</Link>
|
||||
<Link href="/BitacoraSanciones" className="links">
|
||||
<li>Bitacora y sanciones</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/QuitarSancion" className="links">
|
||||
Quitar sancion
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="CambiarPass" className="links">
|
||||
Cambiar contraseña
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
<li className={`subMenu ${openSubMenu === 2 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(2)}>Equipo</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/InformacionEquipo" className="links">
|
||||
<li>Informacion de Equipos</li>
|
||||
</Link>
|
||||
<Link href="/ActivosMantenimiento" className="links">
|
||||
<li>Activos y en Mantenimiento</li>
|
||||
</Link>
|
||||
<Link href="/Mensajes" className="links">
|
||||
<li>Mensajes</li>
|
||||
</Link>
|
||||
<Link href="/Programas" className="links">
|
||||
<li>Programas</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className={`subMenu ${openSubMenu === 3 ? "open" : ""}`}>
|
||||
<span onClick={() => toggleSubMenu(3)}>Reportes</span>
|
||||
<ul onClick={toggleMenu}>
|
||||
<Link href="/Recibo" className="links">
|
||||
<li>Recibo</li>
|
||||
</Link>
|
||||
<Link href="/Inscritos" className="links">
|
||||
<li>Inscritos</li>
|
||||
</Link>
|
||||
<Link href="/BitacoraSanciones" className="links">
|
||||
<li>Bitacora y sanciones</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="/QuitarSancion" className="links">
|
||||
Quitar sancion
|
||||
</Link>
|
||||
</li>
|
||||
<li className="subMenu" onClick={toggleMenu}>
|
||||
<Link href="CambiarPass" className="links">
|
||||
Cambiar contraseña
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default BarNavigation;
|
||||
//IO
|
||||
//IO
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
// Definimos la interfaz de props
|
||||
interface EnviarMensajeProps {
|
||||
titulo: string;
|
||||
opciones: string[];
|
||||
}
|
||||
|
||||
const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
|
||||
const [seleccion, setSeleccion] = useState("");
|
||||
const [mensaje, setMensaje] = useState("");
|
||||
const [customMsg, setCustomMsg] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
|
||||
};
|
||||
|
||||
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>
|
||||
))}
|
||||
</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>
|
||||
))}
|
||||
</select>
|
||||
</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..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Botón de enviar */}
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Mandar mensaje
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnviarMensaje;
|
||||
@@ -1,96 +1,113 @@
|
||||
|
||||
|
||||
function ProgramSelector() {
|
||||
return (
|
||||
<div>
|
||||
<form className="form-container">
|
||||
<label htmlFor="equipo">Ubicación de equipo</label>
|
||||
<select id="equipo">
|
||||
<option value="">buscar</option>
|
||||
<option value="sala1">Equipo 1</option>
|
||||
<option value="sala2">Equipo 2</option>
|
||||
<option value="sala3">Equipo 3</option>
|
||||
</select>
|
||||
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> 3D MAX STUDIO 2014
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ADOBE CREATIVE SUITE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ARCHICAD 20
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUDACITY - win - 2.0
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUTOCAD
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> CODE-BLOCKS
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> COREL DRAW
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> DEV-C++
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> EVIEWS Enterprise
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Google Earth
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> INTERNET
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MAPLE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MATHEMATICA
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MATLAB
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Maxima
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> miktex
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> NETBEANS
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> OFFICE 2016
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> PSeInt
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> R 3.0.1
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> RStudio
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> SPSS Statistics
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> STATA 13
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> STATGRAPHICS Centurion XVI
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch">Guardar cambios</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
// 1. Definimos la interfaz que describe las props del componente
|
||||
export interface DatosEquipo {
|
||||
titulo: string; // El título que aparecerá como label
|
||||
opcion: string[]; // Lista de opciones para el select
|
||||
}
|
||||
|
||||
export default ProgramSelector
|
||||
// 2. Ya no necesitas tener "DatosOpciones" dentro de este archivo
|
||||
// porque el componente debe ser reutilizable, no fijo.
|
||||
|
||||
// 3. Recibimos las props como un objeto con estructura DatosEquipo
|
||||
function ProgramSelector({ titulo, opcion }: DatosEquipo) {
|
||||
return (
|
||||
<div>
|
||||
<form className="form-container">
|
||||
{/* Label dinámico con el título que recibimos */}
|
||||
<label htmlFor="equipo">{titulo}</label>
|
||||
|
||||
{/* Renderizamos UN solo <select> con varias <option> */}
|
||||
<select id="equipo">
|
||||
{opcion.map((op, index) => (
|
||||
<option key={index} value={op}>
|
||||
{op}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Aquí puedes poner más <option> fijas si quieres */}
|
||||
<option value="">Buscar</option>
|
||||
|
||||
{/* Lista de checkboxes (esto lo podrías optimizar igual con .map) */}
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> 3D MAX STUDIO 2014
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ADOBE CREATIVE SUITE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> ARCHICAD 20
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUDACITY -win - 2.0
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> AUTOCAD
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> CODE-BLOCKS
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> COREL DRAW
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> DEV-C++
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> EVIEWS Enterprise
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> Google Earth
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> INTERNERT
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> MAPLE
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> MATHEMATICA
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> MATLAB
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> Maxima
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> miktex
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> NETBEANS
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> OFFICE 2016
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> PSeint
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> R 3.0.1
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> R Studio
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> SPPS Statiscs
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> STATA 13
|
||||
</label>{" "}
|
||||
<label>
|
||||
<input type="checkbox" /> STATGRAOHICS Centurion XVI
|
||||
</label>
|
||||
{/* ... resto de checkboxes */}
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch">Guardar cambios</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProgramSelector;
|
||||
|
||||
Reference in New Issue
Block a user