AlquilaFacil/Front/src/paginas/PublicarPropiedad.svelte

<script lang="ts">
    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
    import type { Propiedad } from "../types";
    import { urlG } from "../stores/urlStore";

    let propiedad = $state({
        ubicacion: "",
        canthabitaciones: 1,
        piso: 0,
        letra: "",
        email: localStorage.getItem("email") || "",
        idtipropiedad: 1,
        iddivisa:0,
        monto: 1,
    });

    let token = sessionStorage.getItem("token");
    let mostrarModal = $state(false); 
    let datosModal = $state(""); 

    const submitForm = async (e: Event) => {
        e.preventDefault();
        mostrarModal = false;
        try {
            const response = await fetch(String($urlG)+"/api/propiedad", {
                method: 'POST',
                headers: {
                    'Auth': String(token),
                    'Content-Type': "application/json"
                },
                body: JSON.stringify(propiedad),
            });

            
            const json = await response.json();
            datosModal = json.message;  
            mostrarModal =true;  
        
        } catch (e) {
            console.error(e);
        }
    };
</script>

<NavBarAutocompletable />


<div class="container-fluid mt-4 row">
    
    <div class="col-sm">
    <BarraHorizontalConTexto text={"Formulario Alta propiedad"}/>
    Este es un formulario con el objetivo de que usted pueda registrar las propiedades <b>suyas</b> que quiera hacer visibles a las busquedas de inquilinos. 
    <br><br>
        
    <BarraHorizontalConTexto text={"Indicaciones"}/>
    Para poder cargar la propiedad deberá especificar su ubicacion, la cantidad de habitaciones que posée, en caso de ser un edificio el piso, y letra, y que tipo de propiedad és (casa, departamento, oficina...).
    </div>

    <div class="col">
        <h2>Registrar Propiedad</h2>
        <form class="card card-body" onsubmit={submitForm}>
            <div class="form-floating mb-3">
                <input
                    type="text"
                    id="ubicacion"
                    class="form-control"
                    bind:value={propiedad.ubicacion}
                    placeholder="Ubicación"
                    required
                />
                <label for="ubicacion">Ubicación</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    type="number"
                    id="canthabitaciones"
                    class="form-control"
                    bind:value={propiedad.canthabitaciones}
                    min="1"
                    placeholder="Cantidad de Habitaciones"
                    required
                />
                <label for="canthabitaciones">Cantidad de Habitaciones</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    type="number"
                    id="piso"
                    class="form-control"
                    bind:value={propiedad.piso}
                    min="0"
                    placeholder="Piso"
                />
                <label for="piso">Piso</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    type="number"
                    id="monto"
                    class="form-control"
                    bind:value={propiedad.monto}
                    min="1"
                    placeholder="1"
                />
                <label for="monto">Monto</label>
            </div>
            <div class="form-floating mb-3">
                <input
                    type="text"
                    id="letra"
                    class="form-control"
                    bind:value={propiedad.letra}
                    maxlength="1"
                    placeholder="Letra"
                />
                <label for="letra">Letra</label>
            </div>

            <div class="form-floating mb-3">
                <h6 class="form-floating form-label">Moneda</h6>
                <div class="form-check">
                  <input
                    type="radio"
                    class="form-check-input"
                    bind:group={propiedad.iddivisa}
                    value={0}
                    id="moneda-ar"
                  />
                  <label class="form-check-label" for="moneda-ar">AR$</label>
                </div>
                <div class="form-check">
                  <input
                    type="radio"
                    class="form-check-input"
                    bind:group={propiedad.iddivisa}
                    value={1}
                    id="moneda-us"
                  />
                  <label class="form-check-label" for="moneda-us">US$</label>
                </div>
              </div>

            <div class="form-floating mb-3">
                <select
                    id="idtipropiedad"
                    class="form-select"
                    bind:value={propiedad.idtipropiedad}
                    required
                >
                    <option value="1">Casa</option>
                    <option value="2">Piso</option>
                    <option value="3">Departamento</option>
                    <option value="4">Galpon</option>
                    <option value="5">LocalComercial</option>
                    <option value="6">Oficina</option>
                </select>
                <label for="idtipropiedad">Tipo de Propiedad</label>
            </div>
            <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
    </div>
</div>
{#if mostrarModal == true}
    <ModalEstatico payload={datosModal} />
{/if}