funcionalidad terminada

2025-02-02 20:14:39 -03:00
parent 2a8ba5a9f4
commit e7747455ec
11 changed files with 352 additions and 15 deletions
@@ -1,14 +1,148 @@
 <script lang="ts">
-    import { text } from "@sveltejs/kit";
-import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
-import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import { onMount } from "svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import type { PropiedadDto, PropiedadVentaDto } from "../types";
+    import { urlG } from "../stores/urlStore";
+    import BotonVolverArriba from "../Componentes/BotonVolverArriba.svelte";
+    import { fade } from "svelte/transition";
+    import ModalConfirm from "../Componentes/ModalConfirm.svelte";
+    import PaginacionStepper from "../Componentes/PaginacionStepper.svelte";
+
+    let token = sessionStorage.getItem("token")||"";
+
+    let propiedades:PropiedadVentaDto[]|null = $state(null);
+    let pag:number = $state(1);
+    let cantpag:number = $state(0);
+    let message:string = "Esto le enviará una notificacion al propietario";
+    let show:boolean = $state(false);


+    let showButton:boolean = $state(false);
+    let modaldata:string = $state("");
+
+
+    onMount(()=>{
+        obtenerpropiedades();
+
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    });
+
+    const handleScroll = () => {
+        showButton = window.scrollY > 100;
+    };
+
+    async function obtenerpropiedades() {
+        try {
+            const r = await fetch($urlG+"/api/propiedades/Venta?pag="+pag, {
+                method:"GET",
+                headers: {
+                    "Auth": token
+                }
+            });
+            let data = await r.json();
+            if(r.ok){
+                propiedades = data.propiedades;
+                cantpag = data.cantpaginas;
+                return;
+            }
+            modaldata = data.message;
+        } catch {
+            modaldata = "Fallo al hacer la request";
+        }
+    }
+
+    let selp: PropiedadVentaDto|any = $state();
+    function Consultar(p:PropiedadVentaDto) {
+        selp = p;
+        show = true;
+    }
+
+    async function handleConfirm() {
+        const remitente = localStorage.getItem("email");
+        const accion = "Consulta Compra";
+        let mensaje = "el usuario con email: "+remitente+" quiere comprar la propiedad situada en: "+selp.ubicacion;
+        const propiedad = selp.id;
+        try { 
+            const responce = await fetch($urlG+"/api/notificar/ConsultaCompra", {
+                method: "POST",
+                headers: {
+                "Auth": token,
+                "Content-Type": "application/json"
+                },
+                body : JSON.stringify({remitente, accion, mensaje, propiedad})
+            });
+            let data = await responce.json();
+            modaldata = data.message;
+
+        } catch {
+            modaldata = "Fallo al hacer la request";
+        }
+
+        show=!show;
+    }
+
+    async function queryPag(a:number) {
+        pag= a;
+        obtenerpropiedades();
+    }
 </script>

 <NavBarAutocompletable/>

 <div class="container-fluid mt-2">
    <BarraHorizontalConTexto text="Venta Propiedades"/>
-    
-</div>
+    <div class="row">
+        {#if propiedades == null}
+        <div class="position-absolute start-50 top-50">
+            <div class="spinner-border" role="status">
+            </div>
+            Cargando...
+        </div>
+        {:else if propiedades.length <= 0}
+            <div class="card">
+                <div class="card-body">
+                    No hay Propiedades a la Venta.
+                </div>
+            </div>
+        {:else}
+            {#each propiedades as p}
+                <div class="col-12 col-md-6 mb-3">
+                    <ModalConfirm {show} {message} title="Consulta" onConfirm={handleConfirm} onCancel={()=>show=false}/>
+                    <div class="card text-center border shadow-sm">
+                        <div class="card-header bg-primary text-white">
+                            <h5 class="mb-0">{p.tipo}</h5>
+                        </div>
+                        <div class="card-body">
+                            <div class="card-img-top mb-3">
+                                <i class="bi bi-building" style="font-size: 3rem;"></i>
+                            </div>
+                            <h6 class="card-title">{p.ubicacion}</h6>
+                            <p class="card-text">
+                                <strong>Habitaciones:</strong> {p.canthabitaciones}<br>
+                                <strong>Piso:</strong> {p.piso || "N/A"}<br>
+                                <strong>Letra:</strong> {p.letra || "N/A"}<br>
+                                <strong>Servicios:</strong> {p.servicios || "Sin servicios especificados"}<br>
+                                <strong>Monto:</strong>
+                                {p.divisa} {p.monto}<br>
+                            </p>
+                            <button class="btn btn-primary" onclick={()=>Consultar(p)}>Consultar Compra</button>
+                        </div>
+                        <div class="card-footer text-muted">
+                            ID Propiedad: {p.id}
+                        </div>
+                    </div>
+                </div>
+            {/each}
+            <div class="d-flex justify-content-center">
+                <PaginacionStepper currentPag={pag} {cantpag} {queryPag}/>
+            </div>
+        {/if}
+    </div>
+</div>
+{#if showButton }
+<div transition:fade={{duration:100}}>
+    <BotonVolverArriba/>
+</div>
+{/if}