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!!