fix: el checkbox no guardaba estado
This commit is contained in:
@@ -11,11 +11,18 @@
|
|||||||
let y = $state(2025);
|
let y = $state(2025);
|
||||||
|
|
||||||
let cdata: ChartData | any = $state();
|
let cdata: ChartData | any = $state();
|
||||||
let aldata:{id:number, ubicacion:string, divisa:string}[]= $state([]);
|
let aldata: { id: number; ubicacion: string; divisa: string }[] = $state(
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
let chartMesesDuracion: ChartData | any = $state();
|
let chartMesesDuracion: ChartData | any = $state();
|
||||||
let tablaMesesDuracion:{meses:number, repes:number, semaforizacion:string}[] = $state([]);
|
let tablaMesesDuracion: {
|
||||||
|
meses: number;
|
||||||
|
repes: number;
|
||||||
|
semaforizacion: string;
|
||||||
|
}[] = $state([]);
|
||||||
|
|
||||||
|
let showModoDaltonico: boolean = $state(false);
|
||||||
let modaldata: string = $state("");
|
let modaldata: string = $state("");
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
@@ -24,18 +31,24 @@
|
|||||||
|
|
||||||
async function dataAlquileresporAño(year = 2025) {
|
async function dataAlquileresporAño(year = 2025) {
|
||||||
try {
|
try {
|
||||||
const rep = fetch($urlG+"/api/stats/alquileresIniciados?year="+year, {
|
const rep = fetch(
|
||||||
|
$urlG + "/api/stats/alquileresIniciados?year=" + year,
|
||||||
|
{
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Auth": token,
|
Auth: token,
|
||||||
}
|
},
|
||||||
});
|
},
|
||||||
const pre = fetch($urlG+"/api/tabla/alquileresIniciados?year="+year, {
|
);
|
||||||
|
const pre = fetch(
|
||||||
|
$urlG + "/api/tabla/alquileresIniciados?year=" + year,
|
||||||
|
{
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Auth": token,
|
Auth: token,
|
||||||
}
|
},
|
||||||
});
|
},
|
||||||
|
);
|
||||||
let [r, p] = await Promise.all([rep, pre]);
|
let [r, p] = await Promise.all([rep, pre]);
|
||||||
|
|
||||||
let data = await r.json();
|
let data = await r.json();
|
||||||
@@ -55,17 +68,17 @@
|
|||||||
const p1 = fetch($urlG + "/api/stats/duracionContrato", {
|
const p1 = fetch($urlG + "/api/stats/duracionContrato", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Auth": token,
|
Auth: token,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
const p2 = fetch($urlG + "/api/tabla/duracionContrato", {
|
const p2 = fetch($urlG + "/api/tabla/duracionContrato", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
headers: {
|
headers: {
|
||||||
"Auth": token,
|
Auth: token,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
let [r1, r2] = await Promise.all([p1, p2]);
|
let [r1, r2] = await Promise.all([p1, p2]);
|
||||||
let [d1,d2] = await Promise.all([r1.json(), r2.json()])
|
let [d1, d2] = await Promise.all([r1.json(), r2.json()]);
|
||||||
chartMesesDuracion = d1;
|
chartMesesDuracion = d1;
|
||||||
tablaMesesDuracion = d2;
|
tablaMesesDuracion = d2;
|
||||||
} catch {
|
} catch {
|
||||||
@@ -76,11 +89,11 @@
|
|||||||
function toggleModoDaltonico() {
|
function toggleModoDaltonico() {
|
||||||
if (tablaMesesDuracion == null) return;
|
if (tablaMesesDuracion == null) return;
|
||||||
|
|
||||||
tablaMesesDuracion.forEach(item => {
|
tablaMesesDuracion.forEach((item) => {
|
||||||
if (item.semaforizacion === '🟢') {
|
if (item.semaforizacion === "🟢") {
|
||||||
item.semaforizacion = '🔵';
|
item.semaforizacion = "🔵";
|
||||||
} else if (item.semaforizacion === '🔵') {
|
} else if (item.semaforizacion === "🔵") {
|
||||||
item.semaforizacion = '🟢';
|
item.semaforizacion = "🟢";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -98,22 +111,39 @@
|
|||||||
<div class="accordion" id="accordionExample">
|
<div class="accordion" id="accordionExample">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header" id="hea1">
|
<h2 class="accordion-header" id="hea1">
|
||||||
<button class="accordion-button"
|
<button
|
||||||
|
class="accordion-button"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#c1"
|
data-bs-target="#c1"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
aria-controls="c1">
|
aria-controls="c1"
|
||||||
|
>
|
||||||
Alquileres en el ultimo año
|
Alquileres en el ultimo año
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</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="accordion-body row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="d-flex input-group">
|
<div class="d-flex input-group">
|
||||||
<input class="form-control" type="number" bind:value={y}>
|
<input
|
||||||
<button class="btn btn-primary" onclick={()=>dataAlquileresporAño(y)}><img src="/zoom.svg" alt="lupa" aria-label="Lupa">Buscar</button>
|
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>
|
</div>
|
||||||
<table class="table table-hover">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -144,7 +174,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header" id="hea2">
|
<h2 class="accordion-header" id="hea2">
|
||||||
<button class="accordion-button collapsed"
|
<button
|
||||||
|
class="accordion-button collapsed"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#c2"
|
data-bs-target="#c2"
|
||||||
@@ -154,20 +185,40 @@
|
|||||||
if (visibleMesesDuracion === true) {
|
if (visibleMesesDuracion === true) {
|
||||||
visibleMesesDuracion = false;
|
visibleMesesDuracion = false;
|
||||||
return;
|
return;
|
||||||
} else if (visibleMesesDuracion== false){
|
} else if (visibleMesesDuracion === false) {
|
||||||
|
visibleMesesDuracion = true;
|
||||||
|
showModoDaltonico = false;
|
||||||
dataMesesDuracion();
|
dataMesesDuracion();
|
||||||
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Meses De Duracion
|
Meses De Duracion
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</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="accordion-body row">
|
||||||
<div class="col">
|
<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>
|
<p class="text-muted">
|
||||||
<input class="form-check-input" type="checkbox" onclick={toggleModoDaltonico}> Activar Modo Daltónico
|
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">
|
<table class="table table-hover">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -189,7 +240,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
{#if chartMesesDuracion}
|
{#if chartMesesDuracion}
|
||||||
<FChart chartData={chartMesesDuracion} typec="pie"/>
|
<FChart
|
||||||
|
chartData={chartMesesDuracion}
|
||||||
|
typec="pie"
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user