1

Mi idea es hacer una página para ayudar a un amigo, pero tuve problemas con el firebase y firestore a la hora de guardar datos de un formulario. La idea es una página de alquileres, que el pueda subir las publicaciones desde la página de admin y que estas al ser subidas se muestren en sus respectivas páginas. Hasta ahora es esto lo que he conseguido hacer con JavaScript y Firebase.

JS CSS HTML

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
    import { getFirestore, addDoc, collection } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-firestore.js";

    const firebaseConfig = {
      apiKey: "AIzaSyCmY8EnoBQzJ47554J1SmOBzmCUv1xUsQI",
      authDomain: "alquileres-santo.firebaseapp.com",
      projectId: "alquileres-santo",
      storageBucket: "alquileres-santo.appspot.com",
      messagingSenderId: "673241510521",
      appId: "1:673241510521:web:f5ed6085213680f7b79aa8"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore()

    const TipoPublicacion =  document.getElementById("type");
    const SubtipoPublicacion = document.getElementById("subtype");
    const TituloPublicacion = document.getElementById("title");
    const DescripcionPublicacion = document.getElementById("description");
    const ImagenesPublicacion = document.getElementById("image");
    const Publicar = document.getElementById("btnsave");

    let setData = await addDoc(collection(db, "publicacion"), {
      tipo: TipoPublicacion.value,
      subtipo: SubtipoPublicacion.value,
      titulo: TituloPublicacion.value,
      descripcion: DescripcionPublicacion.value,
      imagenes: ImagenesPublicacion.value
    });

<!-- begin snippet: js hide: false console: true babel: false -->
:root {
        --color-blanco: #FEF5ED;
        --color-negro: #000000;
        --color-oscuro: #333;
    }
      
    html {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
      
    body {
        background: var(--color-blanco);
    }
      
    header {
        margin: -0.6%;
    }
      
    .logo-img {
        display: block;
        position: absolute;
        height: 45px;
        border-radius: 30px;
    }
      
    .navbar {
        height: 45px;
        background-color: var(--color-oscuro);
    }
      
    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        margin-left: 10rem;
        padding: 14px 16px;
        text-decoration: none;
    }
      
    .subnav {
        float: left;
        overflow: hidden;
    }
      
    .subnav .subnavbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 12px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
        margin-left: 10rem;
    }
      
    .navbar a:hover, .subnav:hover .subnavbtn {
        background-color: blue;
    }
      
    .subnav-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: var(--color-blanco);
        width: 100%;
        z-index: 1;
    }
      
    .subnav-content a {
        float: left;
        color: var(--color-negro);
        text-decoration: none;
    }
      
    .subnav-content a:hover {
        background-color: #eee;
        color: black;
    }
      
    .subnav:hover .subnav-content {
        display: block;
    }
      
    .agregar-container {
        text-align: center;
        margin-top: 5rem;
        margin-left: 25rem;
    }
      
    .send-form {
        display: flex;
        flex-direction: column;
        width: 50%;
    }
      
    .footer {
        position: inherit;
        margin: -0.6%;
        margin-top: 15%;
        background-color: var(--color-oscuro);
        color: var(--color-blanco);
        text-align: center;
        font-weight: 300;
        padding: 2rem 0;
        height: 7.5rem;
    }
      
    .footer__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
      
    .footer__social {
        margin-bottom: 2rem;
    }
      
    .footer__icon {
        font-size: 1.5rem;
        color: var(--color-blanco);
        margin: 0 2rem;
    }
      
    .footer__copy {
        font-size: 10px;
    }
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../CSS/admin.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
        <title>Santo Tomé Casas</title>
    </head>
    <body>
        <header>
          <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
            <div class="navbar">
              <a href="./index.html">Inicio</a>
              <div class="subnav">
                <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                  <a href="./HTML/alquiler-casa.html">Casa</a>
                  <a href="./HTML/alquiler-depto.html">Departamento</a>
                  <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                  <a href="./HTML/alquiler-local.html">Local</a>
                </div>
              </div>
              <div class="subnav">
                <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                <div class="subnav-content">
                  <a href="./HTML/venta-casa.html">Casa</a>
                  <a href="./HTML/venta-depto.html">Departamento</a>
                  <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                  <a href="./HTML/venta-local.html">Local</a>
                </div>
              </div>
              <a href="./HTML/consulta.html">Consultas</a>
              <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
            </div>
        </header>

        <section class="agregar-container">
            <form id="sendForm" class="send-form">
              <label>Ingrese la opción a publicar</label>
              <select id="type">
                <option>--Seleccione la opción--</option>
                <option value="Alquiler">Alquiler</option>
                <option value="Venta">Venta</option>
              </select>
              <label>Ingrese el tipo de publicación:</label>
              <select id="subtype">
                <option>--Selecciona el tipo de publicación--</option>
                <option value="departamento">Departamento</option>
                <option value="casa">Casa</option>
                <option value="galpon">Bodega/Galpón</option>
                <option value="local">Local</option>
              </select>
              <label>Titulo de la publicación:</label>
              <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
              <label>Descripción de la publicación:</label>
              <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
              <br>
              <label>Ingrese las imagenes a subir:</label>
              <input id="image" type="file">
              <br>
              <div class="btns">
                <button id="btnsave">Publicar</button>
                <input type="reset">
              </div>
            </form>
        </section>

        <footer class="footer">
            <p class="footer__title">Santo Tomé Casas</p>
            <div class="footer__social">
                <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
            </div>
        </footer>
    </body>
    <script type="module" src="../JS/admin.js"></script>
</html>

<!-- language: lang-html -->
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="../CSS/admin.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
            <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
            <title>Casas</title>
        </head>
        <body>
            <header>
              <a href="../index.html"><img src="../IMG/Logo page.jpg" alt="logo" class="logo-img"></a>
                <div class="navbar">
                  <a href="./index.html">Inicio</a>
                  <div class="subnav">
                    <button class="subnavbtn">Alquileres <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/alquiler-casa.html">Casa</a>
                      <a href="./HTML/alquiler-depto.html">Departamento</a>
                      <a href="./HTML/alquiler-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/alquiler-local.html">Local</a>
                    </div>
                  </div>
                  <div class="subnav">
                    <button class="subnavbtn">Ventas <i class="fa fa-caret-down"></i></button>
                    <div class="subnav-content">
                      <a href="./HTML/venta-casa.html">Casa</a>
                      <a href="./HTML/venta-depto.html">Departamento</a>
                      <a href="./HTML/venta-bodega.html">Bodega-Galpón</a>
                      <a href="./HTML/venta-local.html">Local</a>
                    </div>
                  </div>
                  <a href="./HTML/consulta.html">Consultas</a>
                  <a href="./HTML/login.html"><i class="fas fa-user"></i></a>
                </div>
            </header>

            <section class="agregar-container">
                <form id="sendForm" class="send-form">
                  <label>Ingrese la opción a publicar</label>
                  <select id="type">
                    <option>--Seleccione la opción--</option>
                    <option value="Alquiler">Alquiler</option>
                    <option value="Venta">Venta</option>
                  </select>
                  <label>Ingrese el tipo de publicación:</label>
                  <select id="subtype">
                    <option>--Selecciona el tipo de publicación--</option>
                    <option value="departamento">Departamento</option>
                    <option value="casa">Casa</option>
                    <option value="galpon">Bodega/Galpón</option>
                    <option value="local">Local</option>
                  </select>
                  <label>Titulo de la publicación:</label>
                  <input id="title" type="text" placeholder="Ingresa el titulo de tu publicación...">
                  <label>Descripción de la publicación:</label>
                  <textarea id="description" cols="30" rows="10" placeholder="Ingrese la descripción de la publicación..."></textarea>
                  <br>
                  <label>Ingrese las imagenes a subir:</label>
                  <input id="image" type="file">
                  <br>
                  <div class="btns">
                    <button id="btnsave">Publicar</button>
                    <input type="reset">
                  </div>
                </form>
            </section>

            <footer class="footer">
                <p class="footer__title">Casas</p>
                <div class="footer__social">
                    <a href="#" class="footer__icon"><i class="bx bxl-facebook" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-instagram" ></i></a>
                    <a href="#" class="footer__icon"><i class="bx bxl-telegram" ></i></a>
                </div>
            </footer>
        </body>
        <script type="module" src="../JS/admin.js"></script>
    </html>

<!-- end snippet -->

La imagen es el firestore, cuando intento guardar los datos de los input, el textarea y la imagen, los guarda vacios y no se por que. Por favor ayuda!!

https://i.sstatic.net/Ucfwr.png

0

1 respuesta 1

0

Ya lo hice funcionar, les dejo el código por si necesitan:

function saveData() {
  addDoc(collection(db, "publicaciones"), {
    tipo: TipoPublicacion.value,
    subtipo: SubtipoPublicacion.value,
    titulo: TituloPublicacion.value,
    descripcion: DescripcionPublicacion.value,
    imagenes: ImagenesPublicacion.value
  })
  .then(() => {
    alert("publicación subida");
  })
  .catch((error) => {
    alert(error);
  });
}

Publicar.addEventListener("click", (e) => {
  e.preventDefault();

  saveData();
})

1
  • Pulsa en editar y explica brevemente cómo tu respuesta responde a tu pregunta. Lee Cómo responder.
    – padaleiana
    Commented el 18 jul. 2022 a las 18:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.