restructuring layout
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Areas() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Equipo asignado con tiempo:", tiempo);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="containerForm" onSubmit={handleSubmit}>
|
||||
<label className="label">Áreas disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select value={tiempo} onChange={(e) => setTiempo(e.target.value)}>
|
||||
<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 className="checkbox-grid">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Activo
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Mantenimiento
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
function Equipos() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Equipo asignado con tiempo:", tiempo);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="containerForm" onSubmit={handleSubmit}>
|
||||
<label className="label">Equipos disponibles</label>
|
||||
<div className="groupInput">
|
||||
<select value={tiempo} 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>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default Equipos;
|
||||
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
function Mesas() {
|
||||
const [tiempo, setTiempo] = useState("");
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log("Equipo asignado con tiempo:", tiempo);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="containerForm" onSubmit={handleSubmit}>
|
||||
<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">10</option>
|
||||
<option value="90">15</option>
|
||||
</select>
|
||||
|
||||
<div className="checkbox">
|
||||
<input type="checkbox" />
|
||||
<label>Mantenimiento</label>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Confirmar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
export default Mesas;
|
||||
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
import axios from "axios";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
import { useState } from "react";
|
||||
|
||||
interface Data {
|
||||
nombre_equipo: string;
|
||||
id_equipo: number;
|
||||
id_plataforma: number;
|
||||
id_area_ubicacion: number;
|
||||
}
|
||||
|
||||
export default function Equipos() {
|
||||
const [Equipo, setEquipo] = useState("");
|
||||
const [Data, setData] = useState<Data | any>();
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const response = await axios.get(
|
||||
`${envConfig.apiUrl}/InformacionEquipo/${Equipo}`
|
||||
);
|
||||
|
||||
if (!response) {
|
||||
return;
|
||||
}
|
||||
|
||||
setData(response);
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="containerForm">
|
||||
<div className="groupInput">
|
||||
<input
|
||||
placeholder="text"
|
||||
value={Equipo}
|
||||
onChange={(e) => {
|
||||
setEquipo(e.target.value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<button className="button buttonSearch" onClick={handleSubmit}>
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{Data && (
|
||||
<div>
|
||||
<label className="label">Ubicacion</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Coloca"
|
||||
value={Data.id_area_ubicacion}
|
||||
/>
|
||||
|
||||
<label className="label">Nombre</label>
|
||||
<input type="text" placeholder="Coloca " value={Data.nombre_equipo} />
|
||||
|
||||
<label className="label">Plataforma</label>
|
||||
<select>
|
||||
<option value="0">Elige</option>
|
||||
<option value="1">2</option>
|
||||
<option value="2">3</option>
|
||||
<option value="3">4</option>
|
||||
<option value="4">5</option>
|
||||
<option value="5">6</option>
|
||||
</select>
|
||||
|
||||
<label className="label">Area Ubicacion</label>
|
||||
<select>
|
||||
<option value="0">Elige</option>
|
||||
<option value="1">mmmmm</option>
|
||||
<option value="2">mmmmm</option>
|
||||
<option value="3">mmmmm</option>
|
||||
<option value="4">mmmmm</option>
|
||||
<option value="5">mmmmm</option>
|
||||
</select>
|
||||
<div className="containerButton">
|
||||
<button className="button buttonSearch">Nuevo</button>
|
||||
<button className="button buttonSearch">Editar</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -0,0 +1,109 @@
|
||||
// 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
|
||||
}
|
||||
|
||||
// 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>{titulo}</label>
|
||||
|
||||
{/* Renderizamos UN solo <select> con varias <option> */}
|
||||
<select>
|
||||
{opcion.map((op, index) => (
|
||||
<option key={index} value={op}>
|
||||
{op}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
<button className="button buttonSearch">Guardar cambios</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProgramSelector;
|
||||
Reference in New Issue
Block a user