Merge branch 'main' into feature/listar-reservas

admin.html

@@ -60,7 +60,7 @@ <h1>Gerenciamento de eventos</h1>
                     <a href="cadastro-evento.html" class="btn btn-primary">Novo Evento</a>
                 </div>
                 <div class="bd-example">
-                    <table class="table">
+                    <table class="table lista-eventos">
                         <thead>
                             <tr>
                                 <th scope="col">#</th>
@@ -71,7 +71,7 @@ <h1>Gerenciamento de eventos</h1>
                             </tr>
                         </thead>
                         <tbody>
-                            
+
                         </tbody>
 
                     </table>

editar-evento.html

@@ -59,7 +59,7 @@ <h1>Editar evento</h1>
                 </div>
                 <div>
                     <!-- - cadastro de evento (nome, atrações, descrição, horário, data, numero de ingressos) -->
-                    <form class="col-6">
+                    <form class="col-6" id="EditEvent">
                         <div class="mb-3">
                             <label for="nome" class="form-label">Nome</label>
                             <input type="text" class="form-control" id="nome" aria-describedby="nome">
@@ -96,7 +96,7 @@ <h1>Editar evento</h1>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
     </script>
-    <script src="js/geral.js"></script>
+    <script src="js/editar-evento.js"></script>
 </body>
 
 </html>

eventos.html

@@ -22,7 +22,7 @@
             <div class="container text-center">
                 <h2>Todos os Eventos</h2>
             </div>
-            <div class="container d-flex justify-content-center align-items-center flex-wrap">
+            <div class="container d-flex justify-content-center align-items-center flex-wrap" id="Listar_Eventos">
                 <article class="evento card p-5 m-3">
                     <h2>nome do evento - 05/03/2022</h2>
                     <h4>Arctic Monkeys, The Kooks, Hiatus Kaiyote</h4>
@@ -82,6 +82,7 @@ <h2>A Sound Garden</h2>
             </nav>
         </div>
     </footer>
+    <script src="js/eventos.js"></script>
 </body>
 
 </html>

js/editar-evento.js

@@ -0,0 +1,107 @@
+const SOUND_URL = "https://xp41-soundgarden-api.herokuapp.com"
+
+
+
+
+    const findID = () => {
+
+        const url = new URL(window.location.href);
+        const id = url.searchParams.get('id');
+
+        return id;
+    }
+
+    // Obtendo as informações do evento pelo metodo GET
+
+
+
+const exibirDetalhesEvento = async () => {
+        const dadosEvento =
+            await fetch('https://xp41-soundgarden-api.herokuapp.com/events/' + findID(), {
+                method: "GET",
+                mode: "cors",
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            }).then((response) => response.json());
+
+        console.log(dadosEvento);
+
+        const inputNome = document.getElementById("nome");
+        const inputAtracoes = document.getElementById("atracoes");
+        const inputDescricao = document.getElementById("descricao");
+        const inputData = document.getElementById("data");
+        const inputLotacao = document.getElementById("lotacao");
+        const inputBanner = document.getElementById("banner");
+
+        inputNome.value = dadosEvento.name;
+        inputAtracoes.value = dadosEvento.attractions.join(', ');
+        inputBanner.value = dadosEvento.poster;
+        inputDescricao.value = dadosEvento.description;
+        inputData.value = dadosEvento.scheduled;
+        inputLotacao.value = dadosEvento.number_tickets;
+}
+
+exibirDetalhesEvento();
+
+const EditEvent = document.getElementById('EditEvent')
+EditEvent.addEventListener('submit', async (event) => {
+
+    event.preventDefault();
+
+    const inputNome = document.getElementById("nome");
+    const inputAtracoes = document.getElementById("atracoes");
+    const inputDescricao = document.getElementById("descricao");
+    const inputData = document.getElementById("data");
+    const inputLotacao = document.getElementById("lotacao");
+    const inputBanner = document.getElementById("banner");
+
+    // conversão de data para padrão do banco de dados
+    const fullDateTime = new Date(inputData.value);
+
+    // criando objeto com os dados do evento
+    const EditEventObj = {
+        "name": inputNome.value,
+        "poster": inputBanner.value,
+        "attractions": inputAtracoes.value.split(","),
+        "description": inputDescricao.value,
+        "scheduled": fullDateTime.toISOString(),
+        "number_tickets": inputLotacao.value
+    };
+
+    // convertendo Obj para JSON
+    const EditEventoJSON = JSON.stringify(EditEventObj);
+
+    //Pegando a Pagina admin
+
+    const findAdim = () => {
+
+
+        //const Adim = window.location.hostname + '/admin.html'
+        const Adim = "file:///D:/Documentos/PROJETOS/soundgarden/admin.html"
+
+        return Adim;
+    }
+
+
+
+    // conexão com API para cadastrar novo evento
+    // salvando resposta na const
+    const resposta = await fetch('https://xp41-soundgarden-api.herokuapp.com/events/' + findID(), {
+        method: "PUT",
+        mode: "cors",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: EditEventoJSON
+    }).then((response) => {
+        console.log(response)
+    }).then((responseOBJ) => {
+        alert("Evento Atualizado")
+        //window.location.href = findAdim()
+    });
+
+
+
+});
+

js/eventos.js

@@ -0,0 +1,41 @@
+const SOUND_URL = 'https://xp41-soundgarden-api.herokuapp.com/events';
+
+const listarEventos = async () => {
+
+    const eventos = await fetch(SOUND_URL, {
+        method: "GET",
+        mode: "cors",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then((resposta) => {
+
+        //retorna lista em array de objetos
+        return resposta.json();
+    });
+
+    //console.log(eventos);
+
+    const tbody = document.getElementById("Listar_Eventos")
+
+    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>
+        </article>
+        `;
+    });
+
+    console.log(htmlEventos)
+
+    tbody.innerHTML = htmlEventos;
+
+
+}
+
+listarEventos();