Files
AlquilaFacil/Front/src/Componentes/PublicacionPropiedad.svelte

85 lines
2.3 KiB
Svelte

<script lang="ts">
import type { PropiedadDto } from "../types";
import ModalConfirm from "./ModalConfirm.svelte";
import {urlG} from "../stores/urlStore";
import ModalEstatico from "./ModalEstatico.svelte";
let { prop }: { prop: PropiedadDto } = $props();
let show: boolean = $state(false);
let token = sessionStorage.getItem("token");
let remitente = localStorage.getItem("email");
const accion = "Nuevo Alquiler";
let modaldata = $state("");
let mensaje = `Alquiler: ${prop.ubicacion} a ${remitente}`;
const message: string = "Queres consultar con el propietario por el alquiler? (esto le envia una notificacion y email al propietario)";
function Consultar() {
show = true;
}
async function onConfirm() {
const propiedad = prop.id;
try {
const responce = await fetch($urlG+"/api/notificaciones/consultaAlquiler", {
method: "POST",
headers: {
"Auth": String(token),
"Content-Type": "application/json"
},
body : JSON.stringify({remitente, accion, mensaje, propiedad})
});
if (responce.ok){
let data = await responce.json();
}
} catch {
}
show=!show;
}
function onCancel() {
show=!show;
}
</script>
{#if modaldata}
<ModalEstatico payload={modaldata} close={()=>!!(modaldata = "")} />
{/if}
<ModalConfirm {show} {message} title="Consulta" {onConfirm} {onCancel}/>
<div class="card text-center border shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">{prop.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">{prop.ubicacion}</h6>
<p class="card-text">
<strong>Habitaciones:</strong> {prop.canthabitaciones}<br>
<strong>Piso:</strong> {prop.piso || "N/A"}<br>
<strong>Letra:</strong> {prop.letra || "N/A"}<br>
<strong>Servicios:</strong> {prop.servicios || "Sin servicios especificados"}<br>
<strong>Monto:</strong>
{#if prop.iddivisa == 0}
AR$
{:else}
US$
{/if}
{prop.monto}<br>
</p>
<button class="btn btn-primary" onclick={Consultar}>Alquilar</button>
</div>
<div class="card-footer text-muted">
ID Propiedad: {prop.id}
</div>
</div>