teste

<title>PETHEALTH</title> <script src="https://cdn.tailwindcss.com"></script>

PETHEALTH

NOVO

<section class="mt-4">
  <div class="flex gap-4">
    <div class="flex-1 bg-green-200 p-4 rounded-lg">
      <!-- Exibe a imagem do pet -->
      <img src="images/logo.jpeg" alt="Imagem do Pet" class="rounded-lg mb-2">
      <!-- Nome e espécie do pet -->
      <h2 class="text-lg font-bold"><%= pet.petName %></h2>
      <p><%= pet.species %></p>
      <!-- Nome do dono -->
      <p><%= pet.ownerName %></p>
    </div>
    <div class="flex-1">
      <div class="grid grid-cols-2 gap-4">
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          ESTÉTICA
        </div>
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          CLÍNICA
        </div>
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          EXAMES
        </div>
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          VACINAS
        </div>
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          INTERNAÇÃO
        </div>
        <div class="text-center p-2 bg-green-300 rounded-lg cursor-pointer hover:bg-green-400">
          Imprimir Modelo
        </div>
      </div>
    </div>
  </div>
</section>

<section class="mt-4">
  <div class="bg-green-200 p-4 rounded-lg">
    <!-- Exibe a quantidade de eventos relacionados ao pet -->
    <h3 class="font-semibold"><%= pet.events.length %> Eventos</h3>
    
    <div class="flex justify-between mt-2">
      <% pet.events.forEach(function(event) { %>
        <div class="bg-white p-2 rounded-lg flex items-center">
          <i class="fas fa-calendar-alt text-green-500"></i>
          <div class="ml-2">
            <!-- Exibe a data e o tipo de evento -->
            <p class="text-sm"><%= event.date %></p>
            <p class="text-sm"><%= event.time %></p>
            <p class="text-green-600 font-bold"><%= event.type %></p>
          </div>
        </div>
      <% }) %>
    </div>
    
    <div class="flex justify-end mt-2">
      <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition duration-200" onclick="window.location.href='/novo-evento'">
        NOVO EVENTO
      </button>
    </div>
  </div>
</section>

<script> // Verifica se o usuário está logado const token = localStorage.getItem('token'); // Recupera o token armazenado if (!token) { alert('Você não está logado. Redirecionando para a página de login...'); window.location.href = '/login'; // Redireciona se não estiver logado } // Faz a requisição para obter os dados do pet fetch('/pets/dados', { method: 'GET', headers: { 'Authorization': `Bearer ${token}`, // Inclui o token no cabeçalho da requisição } }) .then(response => { if (!response.ok) { throw new Error('Nenhum pet cadastrado. Redirecionando para o cadastro de pet...'); } return response.json(); // Lida com a resposta JSON }) .then(data => { const pet = data.pet; // Supondo que a resposta tem { pet: { ... } } // Preenche os dados do pet no HTML document.querySelector("h2").innerText = pet.petName; document.querySelector("p:nth-of-type(1)").innerText = pet.species; document.querySelector("p:nth-of-type(2)").innerText = pet.ownerName; // Renderiza os eventos do pet (exemplo simples) const eventsContainer = document.querySelector('.flex.justify-between.mt-2'); pet.events.forEach(event => { const eventElement = `

${event.date}

${event.time}

${event.type}

`; eventsContainer.insertAdjacentHTML('beforeend', eventElement); }); }) .catch(error => { alert(error.message); window.location.href = '/cadastrar-pet'; // Redireciona se nenhum pet for encontrado }); </script>