Feature Fazer Reserva

JaquelineVictal · Aug 19, 2022 · 3f1eb61 · 3f1eb61
1 parent 922c881
commit 3f1eb61
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 11 deletions.
diff --git a/eventos.html b/eventos.html
@@ -63,6 +63,27 @@ <h2>A Sound Garden</h2>
                 </div>
             </div>
         </section>
+        <div class="modal">            
+            <div class="modal-content">
+                <form id="formularioReserva" class="form-Reserva">
+                    <h1 class="container d-flex justify-content-center align-items-center">Faça a sua reserva</h1>
+                    <br>
+                    <label>Nome:</label>
+                    <input id="owner_name" type="text" placeholder="Digite o seu nome:">
+                    <br/><br/>
+                    <label>Email:</label>
+                    <input id="owner_email" type="text" placeholder="Digite o seu email:">
+                    <br/><br/>
+                    <label>Quantidade de ingressos:</label>
+                    <input id="number_tickets" type="text" placeholder="Digite a quantidade de ingressos:">
+                    <br/><br/>
+                    <div>
+                        <button id="close-btn" class="close-btn" type="button">Cancelar</button>
+                        <button id="salve-modal" class="submit-btn" type="submit" >Reserva</button>
+                    </div>
+                </form>
+            </div>            
+          </div>
 
     </main>
     <footer>

diff --git a/js/eventos.js b/js/eventos.js
@@ -1,4 +1,62 @@
 const SOUND_URL = 'https://xp41-soundgarden-api.herokuapp.com/events';
+const RESERVA_URL = 'https://xp41-soundgarden-api.herokuapp.com/bookings'
+
+const divEventos = document.getElementById("eventos-principais")
+const modal = document.querySelector(".modal")
+const closeBtn = document.getElementById("close-btn")
+
+closeBtn.onclick = function(){
+  modal.style.display = "none"
+}
+window.onclick = function(e){
+  if(e.target == modal){
+    modal.style.display = "none"
+  }
+}
+
+const AbrirModal = (id) => {
+  console.log(id)
+  modal.style.display = "block"
+
+  const formCadastroReserva = document.getElementById('formularioReserva')
+
+
+  formCadastroReserva.addEventListener('submit', async (event) => {
+
+    event.preventDefault()
+
+    const inputOwner_name = document.getElementById("owner_name")
+    const inputOwner_email = document.getElementById("owner_email")
+    const inputNumber_tickets = document.getElementById("number_tickets")
+
+
+
+    const novaReservaObj = {
+      "owner_name": inputOwner_name.value,
+      "owner_email": inputOwner_email.value,
+      "number_tickets": inputNumber_tickets.value,
+      "event_id": id
+  }
+
+  //convertendo obj para JSON
+  const novaReservaJSON = JSON.stringify(novaReservaObj)
+
+  //conexão com API para cadastrar novo evento
+  //salvando resposta na const
+  const resposta = await fetch(RESERVA_URL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: novaReservaJSON
+  }).then((response) => {
+    return response.json()
+  }).then((responseOBJ) => {
+    console.log(responseOBJ)
+ })
+})
+
+}
 
 const listarEventos = async () => {
 
@@ -21,17 +79,18 @@ const listarEventos = async () => {
     let htmlEventos = "";
 
     eventos.forEach(evento => {
+
         htmlEventos += `
         <article class="evento card p-5 m-3">
             <h2>${evento.name} - ${evento.scheduled}</h2>
             <h4>${evento.attractions.join(', ')}</h4>
             <p>${evento.description}</p>
-            <a href="reservas.html?id=${evento._id}" class="btn btn-primary">reservar ingresso</a>
+            <a id="modal" class="btn btn-primary" onclick="AbrirModal('${evento._id}')">reservar ingresso</a>
         </article>
         `;
     });
 
-    console.log(htmlEventos)
+
 
     tbody.innerHTML = htmlEventos;
 

diff --git a/js/index.js b/js/index.js
@@ -5,7 +5,14 @@ const divEventos = document.getElementById("eventos-principais")
 const modal = document.querySelector(".modal")
 const closeBtn = document.getElementById("close-btn")
 
-
+closeBtn.onclick = function(){
+  modal.style.display = "none"
+}
+window.onclick = function(e){
+  if(e.target == modal){
+    modal.style.display = "none"
+  }
+}
 
 const AbrirModal = (id) => {
   console.log(id)
@@ -87,11 +94,3 @@ listarEventos()
 
 
 
-closeBtn.onclick = function(){
-  modal.style.display = "none"
-}
-window.onclick = function(e){
-  if(e.target == modal){
-    modal.style.display = "none"
-  }
-}