From bb995d15873f0984249f68331f7edcaf0a06661a Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Mon, 7 Apr 2025 15:30:10 -0300
Subject: [PATCH] fix: el checkbox no guardaba estado

---
 Front/src/paginas/Informes.svelte | 228 ++++++++++++++++++------------
 1 file changed, 141 insertions(+), 87 deletions(-)

diff --git a/Front/src/paginas/Informes.svelte b/Front/src/paginas/Informes.svelte
index 69dca2f..19e2e89 100644
--- a/Front/src/paginas/Informes.svelte
+++ b/Front/src/paginas/Informes.svelte
@@ -4,39 +4,52 @@
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
     import FChart from "../Componentes/Estadisticas/fChart.svelte";
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
-    import {urlG} from "../stores/urlStore";
+    import { urlG } from "../stores/urlStore";
     import type { ChartData } from "../types";
 
-    let token = sessionStorage.getItem("token")||"";
+    let token = sessionStorage.getItem("token") || "";
     let y = $state(2025);
 
-    let cdata:ChartData|any = $state();
-    let aldata:{id:number, ubicacion:string, divisa:string}[]= $state([]);
+    let cdata: ChartData | any = $state();
+    let aldata: { id: number; ubicacion: string; divisa: string }[] = $state(
+        [],
+    );
 
-    let chartMesesDuracion:ChartData|any = $state();
-    let tablaMesesDuracion:{meses:number, repes:number, semaforizacion:string}[] = $state([]);
-    
-    let modaldata:string = $state("");
-    
-    onMount(async() => {
+    let chartMesesDuracion: ChartData | any = $state();
+    let tablaMesesDuracion: {
+        meses: number;
+        repes: number;
+        semaforizacion: string;
+    }[] = $state([]);
+
+    let showModoDaltonico: boolean = $state(false);
+    let modaldata: string = $state("");
+
+    onMount(async () => {
         await dataAlquileresporAño();
     });
 
     async function dataAlquileresporAño(year = 2025) {
-        try{
-            const rep =  fetch($urlG+"/api/stats/alquileresIniciados?year="+year, {
-                method : "GET",
-                headers: {
-                    "Auth": token,
-                }
-            });
-            const pre = fetch($urlG+"/api/tabla/alquileresIniciados?year="+year, {
-                method : "GET",
-                headers: {
-                    "Auth": token,
-                }
-            });
-            let [r,p] = await Promise.all([rep, pre]);
+        try {
+            const rep = fetch(
+                $urlG + "/api/stats/alquileresIniciados?year=" + year,
+                {
+                    method: "GET",
+                    headers: {
+                        Auth: token,
+                    },
+                },
+            );
+            const pre = fetch(
+                $urlG + "/api/tabla/alquileresIniciados?year=" + year,
+                {
+                    method: "GET",
+                    headers: {
+                        Auth: token,
+                    },
+                },
+            );
+            let [r, p] = await Promise.all([rep, pre]);
 
             let data = await r.json();
             let data2 = await p.json();
@@ -44,76 +57,93 @@
             cdata = data;
             aldata = data2;
             return;
-        }catch{
-            modaldata="Fallo al intentar alcanzar el servidor";
+        } catch {
+            modaldata = "Fallo al intentar alcanzar el servidor";
         }
     }
 
-    let visibleMesesDuracion:boolean = $state(false);
+    let visibleMesesDuracion: boolean = $state(false);
     async function dataMesesDuracion() {
-         try{
-            const p1 = fetch($urlG+"/api/stats/duracionContrato", {
-                method : "GET",
+        try {
+            const p1 = fetch($urlG + "/api/stats/duracionContrato", {
+                method: "GET",
                 headers: {
-                    "Auth": token,
-                }
+                    Auth: token,
+                },
             });
-            const p2 = fetch($urlG+"/api/tabla/duracionContrato", {
-                method : "GET",
+            const p2 = fetch($urlG + "/api/tabla/duracionContrato", {
+                method: "GET",
                 headers: {
-                    "Auth": token,
-                }
+                    Auth: token,
+                },
             });
-            let [r1, r2] = await Promise.all([p1,p2]);
-            let [d1,d2] = await Promise.all([r1.json(), r2.json()])
+            let [r1, r2] = await Promise.all([p1, p2]);
+            let [d1, d2] = await Promise.all([r1.json(), r2.json()]);
             chartMesesDuracion = d1;
             tablaMesesDuracion = d2;
-        }catch {
-            modaldata="Fallo al intentar alcanzar el servidor";
+        } catch {
+            modaldata = "Fallo al intentar alcanzar el servidor";
         }
     }
-    
-    function toggleModoDaltonico() {
-        if (tablaMesesDuracion== null) return;
 
-        tablaMesesDuracion.forEach(item => {
-            if (item.semaforizacion === '🟢') {
-                item.semaforizacion = '🔵';
-            } else if (item.semaforizacion === '🔵') {
-                item.semaforizacion = '🟢';
+    function toggleModoDaltonico() {
+        if (tablaMesesDuracion == null) return;
+
+        tablaMesesDuracion.forEach((item) => {
+            if (item.semaforizacion === "🟢") {
+                item.semaforizacion = "🔵";
+            } else if (item.semaforizacion === "🔵") {
+                item.semaforizacion = "🟢";
             }
         });
     }
 </script>
 
 {#if modaldata}
-    <ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")} />
+    <ModalEstatico payload={modaldata} close={() => !!(modaldata = "")} />
 {/if}
 
-<NavBarAutocompletable/>
+<NavBarAutocompletable />
 
 <div class="container-fluid">
-    <div class="row mt-4" >
-        <BarraHorizontalConTexto text="Estadisticas"/>
+    <div class="row mt-4">
+        <BarraHorizontalConTexto text="Estadisticas" />
         <div class="accordion" id="accordionExample">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="hea1">
-                    <button class="accordion-button"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#c1"
-                    aria-expanded="true"
-                    aria-controls="c1">
-
+                    <button
+                        class="accordion-button"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#c1"
+                        aria-expanded="true"
+                        aria-controls="c1"
+                    >
                         Alquileres en el ultimo año
                     </button>
                 </h2>
-                <div class="accordion-collapse collapse show" id="c1" data-bs-parent="#accordionExample">
+                <div
+                    class="accordion-collapse collapse show"
+                    id="c1"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body row">
                         <div class="col">
                             <div class="d-flex input-group">
-                                <input class="form-control" type="number" bind:value={y}>
-                                <button class="btn btn-primary" onclick={()=>dataAlquileresporAño(y)}><img src="/zoom.svg" alt="lupa" aria-label="Lupa">Buscar</button>
+                                <input
+                                    class="form-control"
+                                    type="number"
+                                    bind:value={y}
+                                />
+                                <button
+                                    class="btn btn-primary"
+                                    onclick={() => dataAlquileresporAño(y)}
+                                    ><img
+                                        src="/zoom.svg"
+                                        alt="lupa"
+                                        aria-label="Lupa"
+                                    />Buscar</button
+                                >
                             </div>
                             <table class="table table-hover">
                                 <thead>
@@ -125,18 +155,18 @@
                                 </thead>
                                 <tbody>
                                     {#each aldata as al}
-                                    <tr>
-                                        <td>{al.id}</td>
-                                        <td>{al.ubicacion}</td>
-                                        <td>{al.divisa}</td>
-                                    </tr>
+                                        <tr>
+                                            <td>{al.id}</td>
+                                            <td>{al.ubicacion}</td>
+                                            <td>{al.divisa}</td>
+                                        </tr>
                                     {/each}
                                 </tbody>
                             </table>
                         </div>
                         <div class="col">
                             {#if cdata}
-                            <FChart chartData={cdata}/>
+                                <FChart chartData={cdata} />
                             {/if}
                         </div>
                     </div>
@@ -144,30 +174,51 @@
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="hea2">
-                    <button class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#c2"
-                    aria-expanded="false"
-                    aria-controls="c2"
-                    onclick={()=>{
-                        if(visibleMesesDuracion === true){
-                            visibleMesesDuracion=false;
-                            return;
-                        } else if (visibleMesesDuracion== false){
-                            dataMesesDuracion();
-
-                        }
-                    }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#c2"
+                        aria-expanded="false"
+                        aria-controls="c2"
+                        onclick={() => {
+                            if (visibleMesesDuracion === true) {
+                                visibleMesesDuracion = false;
+                                return;
+                            } else if (visibleMesesDuracion === false) {
+                                visibleMesesDuracion = true;
+                                showModoDaltonico = false;
+                                dataMesesDuracion();
+                            }
+                        }}
                     >
                         Meses De Duracion
                     </button>
                 </h2>
-                <div class="accordion-collapse collapse" id="c2" data-bs-parent="#accordionExample">
+                <div
+                    class="accordion-collapse collapse"
+                    id="c2"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body row">
                         <div class="col">
-                            <p class="text-muted">Objetivo: <i>Mide la longitud de los contratos en meses y cuantos hay por cada longitud. por lo menos 2.</i></p>
-                            <input class="form-check-input"  type="checkbox" onclick={toggleModoDaltonico}> Activar Modo Daltónico
+                            <p class="text-muted">
+                                Objetivo: <i
+                                    >Mide la longitud de los contratos en meses
+                                    y cuantos hay por cada longitud. por lo
+                                    menos 2.</i
+                                >
+                            </p>
+                            <input
+                                class="form-check-input"
+                                type="checkbox"
+                                onclick={() => {
+                                    showModoDaltonico = !showModoDaltonico;
+                                    toggleModoDaltonico();
+                                }}
+                                checked={showModoDaltonico}
+                            />
+                            Activar Modo Daltónico
                             <table class="table table-hover">
                                 <thead>
                                     <tr>
@@ -189,7 +240,10 @@
                         </div>
                         <div class="col-md-4">
                             {#if chartMesesDuracion}
-                            <FChart chartData={chartMesesDuracion} typec="pie"/>
+                                <FChart
+                                    chartData={chartMesesDuracion}
+                                    typec="pie"
+                                />
                             {/if}
                         </div>
                     </div>