Adição do botão de download

mdsreq-fga-unb · Dec 11, 2023 · 61f3c47 · 61f3c47
1 parent b4f00ed
commit 61f3c47
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/frontend/src/pages/ViewPlan.tsx b/frontend/src/pages/ViewPlan.tsx
@@ -6,6 +6,7 @@ import DrillService from '../service/drillService';
 import { toast, ToastContainer } from 'react-toastify';
 import { Icon } from '@iconify/react/dist/iconify.js';
 import DrillElementService from '../service/drillElementService';
+import html2pdf from 'html2pdf.js';
 
 const ViewPlan = () => {
   const stringSelectedClassPlan = localStorage.getItem('selectedClassPlan');
@@ -233,6 +234,70 @@ const ViewPlan = () => {
     } catch (error) {}
   };
 
+  const downloadPlan = async () => {
+    try {
+      // Carregar todos os drills relacionados ao plano de aula
+      const drillResponses = await Promise.all(
+        drills.map((drl) => drill.getById((drl as { id: string }).id))
+      );
+
+      // Criar um elemento HTML para representar o plano de aula e os drills
+      const container = document.createElement('div');
+
+      // Adicionar os dados do plano de aula ao HTML
+      const planDiv = document.createElement('div');
+      planDiv.style.margin = '50px'
+      planDiv.innerHTML = `
+        <center><h1 style="color: black; font-size: 2em; margin-top: 1em;">${planUpdated.title}</h1></center>
+        <br></br>
+        <h2 style="color: blue; font-size: 2em;">Objetivos</h2>
+        <p style="color: black;">${planUpdated.goals}</p>
+        <br></br>
+        <h2 style="color: blue; font-size: 2em;">Observações</h2>
+        <p style="color: black;">${planUpdated.observations}</p>
+        <br></br>
+        <h1 style="color: blue; font-size: 2em">Drills</h1>
+      `;
+      container.appendChild(planDiv);
+
+      // Adicionar os dados dos drills ao HTML
+      drillResponses.forEach((response) => {
+        const drillData = response.data;
+        const drillDiv = document.createElement('div');
+        drillDiv.innerHTML = `
+          <br></br>
+          <center><h1 style="color: black; font-size: 2em">${drillData.title}</h2></center>
+          <br></br>
+          <h1 style="color: blue; font-size: 2em">Descrição</h1>
+          <p style="color: black;">${drillData.description}</p>
+          <br></br>
+          <h1 style="color: blue; font-size: 2em">Observações</h2>
+          <p style="color: black;">${drillData.observations}</p>
+          <br></br>
+          <img src="${drillData.image}" style="width: 100%; max-width: 500px; height: auto; display: block; margin-left: auto; margin-right: auto;"/>
+          
+          `;
+        container.appendChild(drillDiv);
+      });
+
+      // Configurar as opções do html2pdf
+      const options = {
+
+        filename: 'plano_de_aula_com_drills.pdf',
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+      };
+
+      // Converter o HTML para PDF usando html2pdf
+      html2pdf(container, options);
+
+    } catch (error) {
+      console.error('Erro ao criar o arquivo PDF:', error);
+      // Lide com o erro conforme necessário
+    }
+  };
+
   return (
     <>
       <ToastContainer
@@ -271,6 +336,10 @@ const ViewPlan = () => {
               onClick={startEditingTitle}
               className="clickableIcon"
             />
+            <button onClick={() => {}}
+              style={{paddingLeft: "10px"}}>
+              <Icon icon="bi:download" color="white" width="20" />
+            </button>
           </div>
         ) : (
           <div