added funtionality to bottonToggle

This commit is contained in:
2025-11-28 19:28:07 -06:00
parent 947734815c
commit b8e6776bf4
14 changed files with 246 additions and 124 deletions
+13 -3
View File
@@ -48,7 +48,7 @@ export default function Pregunta1() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
if (!token) {
console.error("Token no encontrado");
@@ -56,10 +56,12 @@ export default function Pregunta1() {
return;
}
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
axios
.post<RawEntry[]>(
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_tipoUso`,
["EN DESUSO", "EN USO"],
body,
{ headers: { Authorization: `Bearer ${token}` } }
)
.then((res) => {
@@ -87,6 +89,10 @@ export default function Pregunta1() {
})
.catch((err) => console.error("Error al cargar datos", err))
.finally(() => setLoading(false));
};
useEffect(() => {
cargarDatos(false);
}, []);
const renderTabla = (tablaIndex: number) => {
@@ -168,7 +174,11 @@ export default function Pregunta1() {
<div className={style["pregunta-cuadro"]}>
Número de equipos de cómputo por cada categoría y perfil de usuario.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={style["contenedor-tablas"]}>
+26 -9
View File
@@ -57,14 +57,15 @@ export default function Pregunta2() {
const [data, setData] = useState<PlatformData | null>(null);
const [loading, setLoading] = useState(true);
// ✔ GET AXIOS PROFESIONAL
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
const headers = { Authorization: `Bearer ${token}` };
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
axios
.post(
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_sistemasOperativos`,
["EN DESUSO", "EN USO"],
body,
{ headers }
)
.then((res) => {
@@ -84,6 +85,10 @@ export default function Pregunta2() {
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
cargarDatos(false);
}, []);
if (loading)
@@ -94,8 +99,12 @@ export default function Pregunta2() {
</div>
<div className={styles["pregunta-cuadro_p1"]}>
Número de equipos de cómputo por cada categoría y perfil de usuario.
<ToggleButton />
Número de sistemas Operativos por cada categoría y perfil de usuario.
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div>Cargando datos...</div>
</div>
@@ -109,8 +118,12 @@ export default function Pregunta2() {
</div>
<div className={styles["pregunta-cuadro_p1"]}>
Número de equipos de cómputo por cada categoría y perfil de usuario.
<ToggleButton />
Número de sistemas Operativos por cada categoría y perfil de usuario.
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P3}>Error al cargar los datos.</div>
</div>
@@ -125,8 +138,12 @@ export default function Pregunta2() {
</div>
<div className={styles["pregunta-cuadro_p1"]}>
Número de equipos de cómputo por cada categoría y perfil de usuario.
<ToggleButton />
Número de sistemas Operativos por cada categoría y perfil de usuario.
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P1}>
<div className={styles["main-content_P1"]}>
+23 -5
View File
@@ -119,7 +119,7 @@ export default function Pregunta3_2() {
const [data, setData] = useState<PlatformData | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
if (!token) {
console.error("Token no encontrado");
@@ -127,11 +127,13 @@ export default function Pregunta3_2() {
return;
}
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
const headers = { Authorization: `Bearer ${token}` };
axios
.post(
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_procesador`,
["EN DESUSO", "EN USO"],
body,
{ headers }
)
.then((res) => {
@@ -153,6 +155,10 @@ export default function Pregunta3_2() {
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
cargarDatos(false);
}, []);
if (loading)
@@ -163,7 +169,11 @@ export default function Pregunta3_2() {
</div>
<div className={styles["pregunta-cuadro_P3"]}>
Cantidad de población beneficiada por plataforma y tipo de procesador.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P3}>Cargando datos...</div>
</div>
@@ -177,7 +187,11 @@ export default function Pregunta3_2() {
</div>
<div className={styles["pregunta-cuadro_P3"]}>
Cantidad de población beneficiada por plataforma y tipo de procesador.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P3}>Error al cargar los datos.</div>
</div>
@@ -193,7 +207,11 @@ export default function Pregunta3_2() {
<div className={styles["pregunta-cuadro_P3"]}>
Cantidad de población beneficiada por plataforma y tipo de procesador.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className={styles.scanView_P3}>
<div className={styles.mainContent_P3}>
+13 -6
View File
@@ -72,16 +72,15 @@ export default function Pregunta7() {
return [pct(menores2), pct(entre2_3), pct(entre4_5), pct(mayores6)];
};
// ------------------------------
// CARGA DE DATOS
// ------------------------------
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
axios
.post<RespuestaAntiguedad>(
`${api_url}/equipos/reporte/contar_perifericos_antiguedad`,
["EN DESUSO", "EN USO"],
body,
{
headers: { Authorization: `Bearer ${token}` },
}
@@ -99,6 +98,10 @@ export default function Pregunta7() {
})
.catch((err) => console.error("Error cargando datos:", err))
.finally(() => setLoading(false));
};
useEffect(() => {
cargarDatos(false);
}, []);
const calcularTotalFila = (valores: string[]) =>
@@ -112,7 +115,11 @@ export default function Pregunta7() {
<div className="pregunta-cuadro">
Antigüedad que tienen los equipos periféricos del área universitaria.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className="tabla-contenedor">
+13 -3
View File
@@ -86,7 +86,7 @@ export default function Pregunta9() {
];
};
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
if (!token) {
console.error("Token no encontrado");
@@ -94,10 +94,12 @@ export default function Pregunta9() {
return;
}
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
axios
.post<ApiResponse>(
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/tipoEquipos_antiguedad`,
["EN DESUSO", "EN USO"],
body,
{
headers: { Authorization: `Bearer ${token}` },
}
@@ -126,6 +128,10 @@ export default function Pregunta9() {
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
cargarDatos(false);
}, []);
const calcularTotalFila = (valores: string[]) =>
@@ -150,7 +156,11 @@ export default function Pregunta9() {
{/* Pregunta 9: Antigüedad */}
<div className="pregunta-cuadro">
Antigüedad que tienen los equipos de cómputo del área universitaria.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className="tabla-contenedor">
@@ -5,6 +5,7 @@
padding: 15px;
border-radius: 8px;
font-size: 16px;
text-align: start;
}
/* === Contenedor de tabla === */
+13 -3
View File
@@ -15,7 +15,7 @@ export default function Pregunta10() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const cargarDatos = async (baja: boolean) => {
const token = Cookies.get("token");
if (!token) {
console.error("Token no encontrado");
@@ -23,10 +23,12 @@ export default function Pregunta10() {
return;
}
const body = baja ? ["BAJA"] : ["EN DESUSO", "EN USO"];
axios
.post<number[]>(
`${process.env.NEXT_PUBLIC_API_URL}/equipos/reporte/garantia`,
["EN DESUSO", "EN USO"],
body,
{
headers: { Authorization: `Bearer ${token}` },
}
@@ -47,6 +49,10 @@ export default function Pregunta10() {
.finally(() => {
setLoading(false);
});
};
useEffect(() => {
cargarDatos(false);
}, []);
if (loading) {
@@ -57,7 +63,11 @@ export default function Pregunta10() {
<>
<div className="pregunta-cuadro">
Equipos de cómputo que tienen garantía de proveedoro.
<ToggleButton />
<ToggleButton
onChange={(estado) => {
cargarDatos(estado);
}}
/>
</div>
<div className="tabla-contenedor">
@@ -61,6 +61,7 @@
.main-content_P1 {
display: flex;
width: 100%;
}
.tabs_P1 {