adicionando exemplo de cliente js

dvcirilo · Oct 11, 2024 · 4d246c4 · 4d246c4
1 parent ac73bef
commit 4d246c4
Showing 1 changed file with 101 additions and 0 deletions.
diff --git a/src/cliente-fetchjs.html b/src/cliente-fetchjs.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Listar Usuários - JSONPlaceholder</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Lista de Usuários</h1>
+
+        <div class="d-grid gap-2 col-6 mx-auto">
+            <button id="load-users-btn" class="btn btn-primary btn-lg">Carregar Usuários</button>
+        </div>
+
+        <!-- Accordion para a lista de usuários -->
+        <div class="accordion mt-4" id="user-accordion"></div>
+    </div>
+
+    <!-- Bootstrap 5 JS and Popper.js -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script>
+        // Função para carregar os usuários usando async/await
+        async function loadUsers() {
+            try {
+                const url = 'https://jsonplaceholder.typicode.com/users';
+                const response = await fetch(url); // Espera a resposta da API
+                const users = await response.json(); // Espera a conversão para JSON
+
+                const userAccordion = document.getElementById('user-accordion');
+                userAccordion.innerHTML = ''; // Limpa o accordion anterior
+
+                // Itera sobre os usuários e cria os itens do accordion
+                users.forEach((user, index) => {
+                    const accordionItem = document.createElement('div');
+                    accordionItem.className = 'accordion-item';
+
+                    accordionItem.innerHTML = `
+                        <h2 class="accordion-header" id="heading-${index}">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${index}" aria-expanded="false" aria-controls="collapse-${index}">
+                                ${user.name} - <span class="text-muted">${user.email}</span>
+                            </button>
+                        </h2>
+                        <div id="collapse-${index}" class="accordion-collapse collapse" aria-labelledby="heading-${index}" data-bs-parent="#user-accordion">
+                            <div class="accordion-body" id="user-details-${index}">
+                                <div class="text-center">Carregando detalhes...</div>
+                            </div>
+                        </div>
+                    `;
+
+                    userAccordion.appendChild(accordionItem);
+
+                    // Adiciona o evento de clique para carregar os detalhes do usuário
+                    accordionItem.querySelector('.accordion-button').addEventListener('click', () => {
+                        const detailsElement = document.getElementById(`user-details-${index}`);
+                        if (!detailsElement.classList.contains('loaded')) {
+                            loadUserDetails(user.id, index); // Carrega os detalhes do usuário apenas uma vez
+                        }
+                    });
+                });
+
+            } catch (error) {
+                console.error('Erro ao buscar os usuários:', error);
+                alert('Não foi possível carregar os usuários.');
+            }
+        }
+
+        // Função para carregar os detalhes de um usuário específico usando async/await
+        async function loadUserDetails(userId, index) {
+            try {
+                const url = `https://jsonplaceholder.typicode.com/users/${userId}`;
+                const response = await fetch(url); // Espera a resposta da API
+                const user = await response.json(); // Espera a conversão para JSON
+
+                const userDetails = document.getElementById(`user-details-${index}`);
+                userDetails.innerHTML = `
+                    <p><strong>Nome:</strong> ${user.name}</p>
+                    <p><strong>Email:</strong> ${user.email}</p>
+                    <p><strong>Telefone:</strong> ${user.phone}</p>
+                    <p><strong>Website:</strong> <a href="http://${user.website}" target="_blank">${user.website}</a></p>
+                    <p><strong>Endereço:</strong> ${user.address.street}, ${user.address.suite}, ${user.address.city}, ${user.address.zipcode}</p>
+                    <p><strong>Empresa:</strong> ${user.company.name}</p>
+                `;
+                userDetails.classList.add('loaded'); // Marca como carregado para evitar recarregar os dados
+
+            } catch (error) {
+                console.error('Erro ao carregar os detalhes do usuário:', error);
+                alert('Não foi possível carregar os detalhes do usuário.');
+            }
+        }
+
+        // Adiciona o evento de clique no botão para carregar os usuários
+        document.getElementById('load-users-btn').addEventListener('click', loadUsers);
+    </script>
+
+</body>
+</html>