85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
|
|
export default function Areas() {
|
|
const [area, setArea] = useState(""); // Área seleccionada
|
|
const [activo, setActivo] = useState(false); // Checkbox Activo
|
|
const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
|
|
const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
|
|
|
|
const handleActualizar = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!area) {
|
|
setMensaje("Selecciona un área antes de actualizar");
|
|
return;
|
|
}
|
|
|
|
// Crear mensaje dinámico
|
|
const estado = [];
|
|
if (activo) estado.push("Activo");
|
|
if (mantenimiento) estado.push("Mantenimiento");
|
|
const estadosSeleccionados = estado.length
|
|
? estado.join(" y ")
|
|
: "Sin estado";
|
|
|
|
setMensaje(`Área ${area} actualizada con estado: ${estadosSeleccionados}`);
|
|
|
|
// Aquí puedes enviar los datos al backend si quieres
|
|
console.log({
|
|
area,
|
|
activo,
|
|
mantenimiento,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<form className="containerForm" onSubmit={handleActualizar}>
|
|
<label className="label">Áreas disponibles:</label>
|
|
<div className="groupInput">
|
|
{/* Select de áreas */}
|
|
<select value={area} onChange={(e) => setArea(e.target.value)}>
|
|
<option value="">-- Áreas disponibles --</option>
|
|
<option value="PECERA">PECERA</option>
|
|
<option value="JAULA">JAULA</option>
|
|
<option value="HUACAL">HUACAL</option>
|
|
<option value="PCNET1">PCNET1</option>
|
|
<option value="PCNET2">PCNET2</option>
|
|
</select>
|
|
|
|
{/* Checkboxes */}
|
|
<div className="checkbox" style={{ marginTop: "10px" }}>
|
|
<label style={{ marginRight: "10px" }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={activo}
|
|
onChange={(e) => setActivo(e.target.checked)}
|
|
/>
|
|
Activo
|
|
</label>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={mantenimiento}
|
|
onChange={(e) => setMantenimiento(e.target.checked)}
|
|
/>
|
|
Mantenimiento
|
|
</label>
|
|
</div>
|
|
|
|
{/* Botón Actualizar */}
|
|
<button
|
|
className="button buttonSearch"
|
|
type="submit"
|
|
style={{ marginTop: "15px" }}
|
|
>
|
|
Actualizar
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mensaje dinámico */}
|
|
{mensaje && <p style={{ marginTop: "20px" }}>{mensaje}</p>}
|
|
</form>
|
|
);
|
|
}
|