Merge branch 'Carlos' of https://github.com/IO420/Nexus into Lino
This commit is contained in:
@@ -1,71 +1,82 @@
|
||||
.tableContainer {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.machineTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.machineTable th,
|
||||
.machineTable td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.machineTable th {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.machineTable tr {
|
||||
min-width: 400px;
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.disponible {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ocupado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.resetButton:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
background-color: #cc0000;
|
||||
}
|
||||
.checkbox-grid label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-grid input[type="checkbox"] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transform: scale(1); /* mantiene el tamaño */
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { useState } from "react";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import Toggle from "../Components/Toggle/Toggle";
|
||||
// Assuming you will create this new component
|
||||
|
||||
export default function Page() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
@@ -10,10 +9,9 @@ export default function Page() {
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||
<h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||
|
||||
<div className="mainContainer">
|
||||
{/* Toggle component for 'Asignar' and 'Liberar' tabs */}
|
||||
<Toggle
|
||||
defaultView="Equipos"
|
||||
options={[
|
||||
@@ -32,12 +30,12 @@ export default function Page() {
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Equipos disponibles --</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>
|
||||
<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>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
@@ -53,27 +51,32 @@ export default function Page() {
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Areas Disponibles</label>
|
||||
<label className="label">Áreas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Areas disponibles --</option>
|
||||
<option value="15">PECERA </option>
|
||||
<option value="30">JAULA </option>
|
||||
<option value="45">HUACAL </option>
|
||||
<option value="60">PCNET1 </option>
|
||||
<option value="90">PCNET2 </option>
|
||||
<option value="">-- Áreas disponibles --</option>
|
||||
<option value="15">PECERA</option>
|
||||
<option value="30">JAULA</option>
|
||||
<option value="45">HUACAL</option>
|
||||
<option value="60">PCNET1</option>
|
||||
<option value="90">PCNET2</option>
|
||||
</select>
|
||||
<div>
|
||||
|
||||
{/* Checkboxes */}
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Activo
|
||||
<input type="checkbox" />
|
||||
Activo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" /> Mantenimiento
|
||||
<input type="checkbox" />
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Actualizar
|
||||
</button>
|
||||
@@ -88,25 +91,27 @@ export default function Page() {
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mesas Disponibles</label>
|
||||
<label className="label">Mesas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Mesas disponibles --</option>
|
||||
<option value="15">1 </option>
|
||||
<option value="30">4 </option>
|
||||
<option value="45">7 </option>
|
||||
<option value="60"> </option>
|
||||
<option value="90">15 </option>
|
||||
<option value="15">1</option>
|
||||
<option value="30">4</option>
|
||||
<option value="45">7</option>
|
||||
<option value="60">10</option>
|
||||
<option value="90">15</option>
|
||||
</select>
|
||||
<div>
|
||||
<label></label>
|
||||
|
||||
<div className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" /> Mantenimiento
|
||||
<input type="checkbox" />
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Confirmar
|
||||
</button>
|
||||
@@ -117,10 +122,7 @@ export default function Page() {
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* This is the new component to display available tables */}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
@@ -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;
|
||||
|
||||
@@ -46,6 +46,7 @@
|
||||
gap: 6px 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.checkbox-grid label {
|
||||
|
||||
+15
-118
@@ -17,45 +17,22 @@ export default function Page() {
|
||||
<form className="containerForm">
|
||||
<div className="groupInput">
|
||||
<input type="text" />
|
||||
<button className="button buttonSearch">
|
||||
Buscar
|
||||
</button>
|
||||
<button className="button buttonSearch">Buscar</button>
|
||||
</div>
|
||||
<label className="label">Ubicacion</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca"
|
||||
/>
|
||||
<input type="text" placeholder="Coloca" />
|
||||
|
||||
<label className="label">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<input type="text" placeholder="Coloca " />
|
||||
|
||||
<label className="label">Plataforma</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<input type="text" placeholder="Coloca " />
|
||||
|
||||
<label className="label">Area Ubicacion</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<input type="text" placeholder="Coloca " />
|
||||
|
||||
<div className="containerButton">
|
||||
<button className="button buttonSearch">Nuevo</button>
|
||||
|
||||
<button className="button buttonSearch">Editar</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -64,102 +41,23 @@ export default function Page() {
|
||||
{
|
||||
key: "2",
|
||||
label: "Programa por equipo",
|
||||
// ✅ Ahora pasamos titulo y opcion como props al componente
|
||||
content: (
|
||||
<ProgramSelector/>
|
||||
<ProgramSelector
|
||||
titulo="Programas de Equipo"
|
||||
opcion={["Equipo 1", "Equipo 2", "Equipo 3"]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
label: "Programa por sala",
|
||||
// ✅ Aquí también pasamos un array válido de strings
|
||||
content: (
|
||||
<div>
|
||||
<form className="form-container">
|
||||
<label htmlFor="salas ">Salas </label>
|
||||
<select id="salas">
|
||||
<option value="">Seleccione una sala</option>
|
||||
<option value="sala1">Sala 1</option>
|
||||
<option value="sala2">Sala 2</option>
|
||||
<option value="sala3">Sala 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>
|
||||
<ProgramSelector
|
||||
titulo="Programas por Sala"
|
||||
opcion={["Sala A", "Sala B", "Sala C"]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -167,4 +65,3 @@ export default function Page() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
|
||||
+18
-21
@@ -1,32 +1,29 @@
|
||||
'use client';
|
||||
"use client";
|
||||
import Information from "../Components/Information/information";
|
||||
import Receipt from "../Components/Receipt/Receipt";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import Selection from "../Components/Selection/Selection";
|
||||
import StepNavigator from "../Components/StepNavigator/StepNavigator";
|
||||
import "./inscriptions.css"
|
||||
import "./inscriptions.css";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<section className='containerSection'>
|
||||
<h2 className='title'> INSCRIPCION </h2>
|
||||
|
||||
<SearchUser />
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> INSCRIPCION </h2>
|
||||
|
||||
<Information
|
||||
NoCuenta="idcuanta"
|
||||
Nombre="juan"
|
||||
Carrera="carrera"
|
||||
Credito="credito"
|
||||
/>
|
||||
<SearchUser />
|
||||
|
||||
<StepNavigator totalSteps={2} onFinish={() => console.log()}>
|
||||
<Selection />
|
||||
<Receipt />
|
||||
</StepNavigator>
|
||||
<Information
|
||||
NoCuenta="idcuanta"
|
||||
Nombre="juan"
|
||||
Carrera="carrera"
|
||||
Credito="credito"
|
||||
/>
|
||||
|
||||
</section>
|
||||
|
||||
);
|
||||
<StepNavigator totalSteps={2} onFinish={() => console.log()}>
|
||||
<Selection />
|
||||
<Receipt />
|
||||
</StepNavigator>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
+13
-99
@@ -1,118 +1,33 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import Toggle from "../Components/Toggle/Toggle";
|
||||
import EnviarMensaje from "../Components/EviarMensaje/EnviarMensaje"; // 👈 importa bien
|
||||
|
||||
export default function Page() {
|
||||
const [tiempo, setTiempo] = useState(""); // <-- AQUÍ defines el estado
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> Enviar mensaje </h2>
|
||||
<h2 className="title">Enviar mensaje</h2>
|
||||
|
||||
<Toggle
|
||||
defaultView="AsigTime"
|
||||
defaultView="Equipo"
|
||||
options={[
|
||||
{
|
||||
key: "AsigTime",
|
||||
key: "Equipo",
|
||||
label: "Equipo",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Seleccione un equipo</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccione 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>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<form className="containerForm">
|
||||
<label className="label">Seleccione el mensaje</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccione el mensaje--</option>
|
||||
<option value="15">No olvides cerrar sesión </option>
|
||||
<option value="30">???????????????????????? </option>
|
||||
<option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
|
||||
<option value="60">???????????????????????? </option>
|
||||
<option value="90">???????????????????????? </option>
|
||||
<option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mensaje perzonalizado</label>
|
||||
<div className="groupInput">
|
||||
<input type="text" />
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Mandar mensaje
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
<EnviarMensaje
|
||||
titulo="Seleccione un equipo"
|
||||
opciones={["1", "2", "3", "4", "5", "6"]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
key: "CancelTime",
|
||||
key: "Sala",
|
||||
label: "Sala",
|
||||
content: (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Seleccione un equipo</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccione una Sala--</option>
|
||||
<option value="15">PECERA </option>
|
||||
<option value="30">PCNET1 </option>
|
||||
<option value="45">PCNET2 </option>
|
||||
<option value="60">PCNET3</option>
|
||||
<option value="90">______ </option>
|
||||
<option value="120">______</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<form className="containerForm">
|
||||
<label className="label">Seleccione el mensaje</label>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={tiempo}
|
||||
onChange={(e) => setTiempo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Seleccione el mensaje--</option>
|
||||
<option value="15">No olvides cerrar sesión </option>
|
||||
<option value="30">???????????????????????? </option>
|
||||
<option value="45">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡</option>
|
||||
<option value="60">???????????????????????? </option>
|
||||
<option value="90">???????????????????????? </option>
|
||||
<option value="120">¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ </option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<form className="containerForm">
|
||||
<label className="label">Mensaje perzonalizado</label>
|
||||
<div className="groupInput">
|
||||
<input type="text" />
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Mandar mensaje
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
<EnviarMensaje
|
||||
titulo="Seleccione una sala"
|
||||
opciones={["PECERA", "PCNET1", "PCNET2", "PCNET3"]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -120,4 +35,3 @@ export default function Page() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
|
||||
+50
-17
@@ -1,23 +1,56 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import "./programas.css";
|
||||
import styleprograms from "./programas.module.css";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<section className="containersection">
|
||||
<h2 className="title"> PROGRAMAS </h2>
|
||||
<label className="label">Programas</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<div className="margin">
|
||||
<button className="button buttonSearch">Insertar</button>
|
||||
const [Editar, setEditar] = useState(true);
|
||||
|
||||
<button className="button buttonSearch">Cancelar</button>
|
||||
</div>
|
||||
</section>
|
||||
const handleEditar = () => {
|
||||
setEditar(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Editar ? (
|
||||
<section className="containersection">
|
||||
<h3 className="title"> ID </h3>
|
||||
<label className="label">Programas</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<div className="margin">
|
||||
<button className="button buttonSearch" onClick={handleEditar}>
|
||||
Editar
|
||||
</button>
|
||||
<button className={`button buttonSearch ${styleprograms.button}`}>
|
||||
Nuevo
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
<section className="containersection">
|
||||
<div>ID</div>
|
||||
<h2 className="title"> PROGRAMAS </h2>
|
||||
<label className="label">Programas</label>
|
||||
<input
|
||||
type="text"
|
||||
//value={user}
|
||||
//onChange={(e) => setUser(e.target.value)}
|
||||
placeholder="Coloca "
|
||||
/>
|
||||
<div className="margin">
|
||||
<button className="button buttonSearch">Insertar</button>
|
||||
|
||||
<button className={`button buttonSearch ${styleprograms.button}`}>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
|
||||
@@ -7,3 +7,7 @@
|
||||
.margin {
|
||||
margin: 10px 10px;
|
||||
}
|
||||
.button {
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user