Modificando estrutura do pdf

Joao848846 · Jul 4, 2024 · 53f9cf1 · 53f9cf1
1 parent 3e047d5
commit 53f9cf1
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 133 deletions.
diff --git a/biged.html b/biged.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exibição de mensagens</title>
+</head>
+<body>
+
+    <h1>Relatórios Smarters</h1>
+    <h4>Mensagem <span>recebidas</span></h4>
+    <h4>Mensagem <span>Enviadas</span></h4>
+
+    <div>
+        <div>
+            <div id="messagesPerDay"></div>
+            <div id="TotalSend"></div>
+        </div>
+    </div>
+
+    <label for="inputYear">Seleciona</label>
+</body>
+</html>
diff --git a/css/smarts.css b/css/smarts.css
@@ -1,73 +1,89 @@
 * {
-    margin: o;
-    padding: 0;
-  }
-
-  body {
-
-    background-color: rgb(202, 160, 185);
-  }
-
-  h1 {
-    text-align: center;
-    font-size: 60px;
-    font-family: 'Courier New', Courier, monospace;
-  }
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 40px;
-    padding: 10px;
-  }
-
-  .data-container {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-    margin-top: 10px;
-    max-width: 600px;
-  }
-
-  .listStyle {
-    padding: 25px;
-    text-align: left;
-    border: 1px solid;
-    border-radius: 10px;
-    width: 190px;
-    height: 150px;
-    margin: 40px;
-  }
-
-  .filtro {
-
-    text-align: center;
-    display: inline-flexbox;
-
-
-  }
-
-  #tokenInput {
-
-
-    height: 15px;
-    width: 300px;
-    left: 50px;
-  }
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  .controlerpage {
+body {
+  background-color: rgb(77, 125, 165);
+  font-family: Arial, sans-serif;
+}
 
-    background-color: pink;
-    width: 870px;
-    padding: 10px;
-    top: 0px;
-  }
-
-  ul {
+h1 {
+  text-align: center;
+  font-size: 60px;
+  font-family: 'Courier New', Courier, monospace;
+  margin: 20px 0;
+  color: #333;
+}
 
-    font-size: 20px;
-    list-style-type: circle;
-    list-style-position: inside;
-    background: rgb(197, 222, 231);
-  }
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 40px;
+  padding: 10px;
+}
+
+.data-container {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 20px;
+  margin-top: 10px;
+  max-width: 600px;
+  background-color: white;
+}
+
+.controlerpage {
+  background-color: #fff;
+  width: 90%;
+  max-width: 870px;
+  padding: 20px;
+  margin: 20px auto;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.input-group label {
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.input-group input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.btn {
+  display: block;
+  width: 100%;
+  padding: 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.btn:hover {
+  background-color: #0056b3;
+}
+
+ul {
+  font-size: 20px;
+  list-style-type: circle;
+  list-style-position: inside;
+  background: rgb(197, 222, 231);
+  padding: 20px;
+  border-radius: 10px;
+}
diff --git a/img/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.avif b/img/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.avif
diff --git a/img/azul.avif b/img/azul.avif
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/smarts.css">
+    <title>Exibição de Dados da API</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+</head>
+
+<body>
+    <h1>Relatório Smarters</h1>
+
+    <div class="container">
+        <div id="lastUpdate"></div>
+        <div id="conversationsSummary"></div>
+        <div id="totalConversations"></div>
+        <br>
+    </div>
+
+    <div class="controlerpage">
+        <div class="input-group">
+            <label for="yearInput">Selecione o ano:</label>
+            <input type="number" id="yearInput" name="yearInput" min="2010" max="2100" value="2024">
+        </div>
+        <div class="input-group">
+            <label for="monthInput">Selecione o mês:</label>
+            <input type="number" id="monthInput" name="monthInput" min="1" max="12" value="3">
+        </div>
+        <div class="input-group">
+            <label for="tokenInput">Insira o token:</label>
+            <input type="text" id="tokenInput" name="tokenInput">
+        </div>
+        <button class="btn" onclick="filterByYearMonth()">Gerar request</button>
+        <br>
+        <button class="btn" onclick="generatePDF()">Gerar PDF</button>
+    </div>
+
+    <script src="luffy.js"></script>
+
+</body>
+
+</html>
diff --git a/luffy.html b/luffy.html
diff --git a/luffy.js b/luffy.js
@@ -21,16 +21,14 @@ function fetchDataByYearMonth(year, month) {
     });
 }
 
-
 // Função para lidar com o evento de filtragem por ano e mês
 function filterByYearMonth() {
-
     const year = document.getElementById('yearInput').value;
     const month = document.getElementById('monthInput').value;
-     token = document.getElementById('tokenInput').value
+    token = document.getElementById('tokenInput').value;
 
-    console.log('Ano selecionado:', year); 
-    console.log('Mês selecionado:', month); 
+    console.log('Ano selecionado:', year);
+    console.log('Mês selecionado:', month);
 
     if (year && month) {
         // Buscar os dados da API com o filtro por ano e mês
@@ -44,40 +42,64 @@ function filterByYearMonth() {
                 // Lidar com erros
                 console.error('Erro ao filtrar os dados:', error);
                 // Limpar a exibição em caso de erro
-                //clearView();
+                clearView();
             });
     } else {
         // Se o ano ou mês não forem válidos, exibir uma mensagem de erro
         console.error('Ano ou mês inválidos');
     }
 }
-    function updateView(data) {
-        // Preencher a última atualização
-        // usar quando tiver motivos document.getElementById('lastUpdate').innerText = 'Última Atualização: ' + data.data.lastUpdate;
-
-        // Preencher o total de conversas
-        const totalContainer = document.getElementById('totalConversations');
-        totalContainer.innerText = 'Total de HSMs utilizadas no mês:';
-
-
-        // Criar uma lista para exibir os detalhes do total
-        const totalList = document.createElement('ul');
-        totalList.classList.add('listStyle')
-
-        // Obter apenas os dados do campo "total"
-        const totalData = data.data.conversationsSummary.total;
-
-        // Iterar sobre os dados do campo "total" e preencher a lista
-        for (const key in totalData) {
-            const listItem = document.createElement('li');
-            listItem.innerText = `${key}: ${totalData[key]}`;
-            totalList.appendChild(listItem);
-        }
 
-        // Anexar a lista ao contêiner de total de conversas
-        totalContainer.appendChild(totalList);
+// Função para atualizar a visualização com os dados recebidos
+function updateView(data) {
+    // Preencher a última atualização
+    // usar quando tiver motivos document.getElementById('lastUpdate').innerText = 'Última Atualização: ' + data.data.lastUpdate;
+
+    // Preencher o total de conversas
+    const totalContainer = document.getElementById('totalConversations');
+    totalContainer.innerText = 'Total de HSMs utilizadas no mês:';
+
+    // Criar uma lista para exibir os detalhes do total
+    const totalList = document.createElement('ul');
+    totalList.classList.add('listStyle');
 
-        // Preencher o status da mensagem
-        // Usar em outro momento document.getElementById('statusMessage').innerText = 'Status da Mensagem: ' + data.status;
+    // Obter apenas os dados do campo "total"
+    const totalData = data.data.conversationsSummary.total;
+
+    // Iterar sobre os dados do campo "total" e preencher a lista
+    for (const key in totalData) {
+        const listItem = document.createElement('li');
+        listItem.innerText = `${key}: ${totalData[key]}`;
+        totalList.appendChild(listItem);
     }
 
+    // Anexar a lista ao contêiner de total de conversas
+    totalContainer.appendChild(totalList);
+
+    // Preencher o status da mensagem
+    // Usar em outro momento document.getElementById('statusMessage').innerText = 'Status da Mensagem: ' + data.status;
+}
+
+// Função para limpar a visualização em caso de erro
+function clearView() {
+    document.getElementById('lastUpdate').innerText = '';
+    document.getElementById('conversationsSummary').innerText = '';
+    document.getElementById('totalConversations').innerText = '';
+}
+
+// Função para gerar o PDF
+function generatePDF() {
+    const { jsPDF } = window.jspdf;
+    const doc = new jsPDF();
+
+    const lastUpdate = document.getElementById('lastUpdate').innerText;
+    const conversationsSummary = document.getElementById('conversationsSummary').innerText;
+    const totalConversations = document.getElementById('totalConversations').innerText;
+
+    doc.text("Relatório Smarters", 10, 10);
+    doc.text(lastUpdate, 10, 20);
+    doc.text(conversationsSummary, 10, 30);
+    doc.text(totalConversations, 10, 40);
+
+    doc.save("relatorio_smarters.pdf");
+}