Files
AlquilaFacil/Front/src/paginas/BusquedaPropiedades.svelte

93 lines
2.8 KiB
Svelte

<script lang="ts">
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
import PublicacionPropiedad from "../Componentes/PublicacionPropiedad.svelte";
import PanelBusqueda from "../Componentes/PanelBusqueda.svelte";
import VolverArriba from "../Componentes/BotonVolverArriba.svelte";
import { onMount } from "svelte";
import { fade } from "svelte/transition";
import {urlG} from "../stores/urlStore"
import type { PropiedadDto } from "../types";
import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
import { text } from "@sveltejs/kit";
let showButton = $state(false);
let propiedades: PropiedadDto[] = $state([]);
let token = sessionStorage.getItem("token");
const handleScroll = () => {
showButton = window.scrollY > 100;
};
onMount(() => {
checkparametros()?
busqueda():
cargaPropiedades();
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
});
function checkparametros(){
const params = new URLSearchParams(window.location.search);
if (params.has('cantidadHabitaciones') && params.has('tipoPropiedad')
&& params.has('servicios') ) {
return true;
}
return false
}
async function cargaPropiedades(){
const response = await fetch(String($urlG)+"/api/propiedades", {
method: "GET",
headers: {
"Auth": String(token),
}
});
if (response.ok){
propiedades = await response.json();
}
}
async function busqueda(){
const params = new URLSearchParams(window.location.search);
let hab = params.get('cantidadHabitaciones');
let tipo = params.get('tipoPropiedad');
let serv = params.get('servicios');
const response = await fetch(String($urlG)+"/api/busqueda"+"?cantidadHabitaciones="+hab+
"&tipoPropiedad="+tipo+"&servicios="+serv, {
method: "GET",
headers: {
"Auth": String(token),
}
});
if (response.ok){
propiedades = await response.json();
}
}
</script>
<NavBarAutocompletable/>
<div class="container mt-4">
<BarraHorizontalConTexto text="Busqueda Propiedades"/>
<div class="row">
<div class="col col-md-8 order-2">
{#each propiedades as item}
<PublicacionPropiedad prop={item} />
<br>
{/each}
</div>
<div class="col-md-4 order-1">
<PanelBusqueda/>
<br>
</div>
</div>
{#if showButton }
<div transition:fade={{duration:100}}>
<VolverArriba/>
</div>
{/if}
</div>