93 lines
3.2 KiB
Svelte
93 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
|
|
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
|
|
import ModalEstatico from "../Componentes/ModalEstatico.svelte";
|
|
import {urlG} from "../stores/urlStore";
|
|
import type { ContratoDto } from "../types";
|
|
import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
|
|
import { fade } from "svelte/transition";
|
|
import { navigate } from "svelte-routing";
|
|
|
|
let token: string = sessionStorage.getItem("token")|| "";
|
|
|
|
let alquileres: ContratoDto[] = $state([]);
|
|
let modaldata:string = $state("");
|
|
let showButton:boolean = $state(false);
|
|
|
|
onMount(()=>{
|
|
recuperarContratos();
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
});
|
|
|
|
const handleScroll = () => {
|
|
showButton = window.scrollY > 100;
|
|
};
|
|
async function recuperarContratos() {
|
|
try{
|
|
const responce = await fetch($urlG+"/api/contratos/inquilino", {
|
|
method: "GET",
|
|
headers: {
|
|
"Auth": String(token),
|
|
},
|
|
});
|
|
if (responce.ok){
|
|
let data = await responce.json();
|
|
alquileres = data;
|
|
return;
|
|
}
|
|
|
|
let data = await responce.json();
|
|
modaldata = data.message;
|
|
|
|
}catch{
|
|
modaldata = "fallo al intentar hacer la request";
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<NavBarAutocompletable/>
|
|
|
|
{#if modaldata }
|
|
<ModalEstatico payload={modaldata} close={()=>!!(modaldata="")}/>
|
|
{/if}
|
|
|
|
<div class="container-fluid">
|
|
<BarraHorizontalConTexto text="Control Alquileres" />
|
|
|
|
<div class="row g-3">
|
|
{#each alquileres as alquiler}
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0 text-center">{alquiler.tipoPropiedad}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-subtitle mb-2 text-muted">{alquiler.ubicacion}</h6>
|
|
<p class="card-text">
|
|
<strong>Fecha de inicio:</strong> {new Date(alquiler.fechainicio).toLocaleDateString()}<br />
|
|
<strong>Inquilino:</strong> {alquiler.inquilino}<br />
|
|
<strong>Propietario:</strong> {alquiler.propietario}<br>
|
|
<strong>Id Propiedad: </strong>{alquiler.id}
|
|
</p>
|
|
<div class="d-flex justify-content-center">
|
|
<button class="btn btn-primary" onclick={()=>navigate("/inquilino/contratos?id="+alquiler.id)}>
|
|
Ver
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-center">
|
|
<strong>Estado:</strong> {alquiler.estado}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{#if showButton }
|
|
<div transition:fade={{duration:100}}>
|
|
<BotonVolverArriba/>
|
|
</div>
|
|
{/if} |