From ec270fe8b9c77027bc95891513d4e1c69d0cb268 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 19 Aug 2021 10:38:41 +0200
Subject: [PATCH] page numbers

---
 cara/apps/calculator/static/css/report.css       |  2 ++
 cara/apps/calculator/static/js/pdf.js            | 16 +++++++++++++---
 .../templates/base/calculator.report.html.j2     |  2 +-
 .../cern/templates/calculator.report.html.j2     |  1 -
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/cara/apps/calculator/static/css/report.css b/cara/apps/calculator/static/css/report.css
index bb970ef9..166b3cb8 100644
--- a/cara/apps/calculator/static/css/report.css
+++ b/cara/apps/calculator/static/css/report.css
@@ -116,6 +116,8 @@ p.notes {
     #rules,
     #data {
         display: inline!important;
+        break-inside: avoid;
+        page-break-inside: avoid;
     }
     .tab-content {
         border-top: none!important;
diff --git a/cara/apps/calculator/static/js/pdf.js b/cara/apps/calculator/static/js/pdf.js
index a119f229..e59f7612 100644
--- a/cara/apps/calculator/static/js/pdf.js
+++ b/cara/apps/calculator/static/js/pdf.js
@@ -6,12 +6,22 @@ function execute_me() {
     var opt = {
         filename: 'myfile.pdf',
         image: { type: 'jpeg', quality: 0.9 },
-        html2canvas: { scale: 2, width: 1200, windowWidth: 1200 },
+        html2canvas: { scale: 2, logging: true, dpi: 192, letterRendering: true, width: 1200, windowWidth: 1200 },
         jsPDF: {
+            unit: 'mm',
             format: 'a4',
             orientation: 'portrait'
         },
-        pagebreak: { after: '.page-break' }
+        pagebreak: { mode: 'avoid-all', after: ['#rules', '#results'] }
     };
-    const pdf = html2pdf().set(opt).from(pdf_version).outputImg().save();
+    html2pdf().set(opt).from(pdf_version).toPdf().get('pdf').then(function(pdf) {
+            var totalPages = pdf.internal.getNumberOfPages();
+            for (i = 1; i <= totalPages; i++) {
+                pdf.setPage(i);
+                pdf.setFontSize(10);
+                pdf.setTextColor(150);
+                pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth() / 2.25, (pdf.internal.pageSize.getHeight() - 8)));
+            }
+        })
+        .save();
 };
\ No newline at end of file
diff --git a/cara/apps/calculator/templates/base/calculator.report.html.j2 b/cara/apps/calculator/templates/base/calculator.report.html.j2
index ad0611b9..9c9909a6 100644
--- a/cara/apps/calculator/templates/base/calculator.report.html.j2
+++ b/cara/apps/calculator/templates/base/calculator.report.html.j2
@@ -24,10 +24,10 @@
 		</div>
 		<button type="button" class="btn btn-outline-dark align-self-center print-button" id="download-pdf" onclick="execute_me()">Download PDF</button>
 	</div>
+	<div class="html2pdf__page-break"></div>
 
 {% endblock report_header %}
 
-
 <div class="tabs-div">
 	<ul class="nav nav-tabs"role="tablist" style="margin: 0.5% 0% 0% 1%">
 		<li class="nav-item">
diff --git a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2 b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
index 75802209..e2fdbe76 100644
--- a/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
+++ b/cara/apps/calculator/themes/cern/templates/calculator.report.html.j2
@@ -106,7 +106,6 @@
 {% endblock report_scenarios_summary_table %}
 
 {% block report_preamble %}
-<br class="card_break">
 <div class="tab-pane fade show active" id="rules" role="tabpanel" aria-labelledby="rules-tab" style="padding: 1%">
   <div class="card bg-light mb-3">
     <div class="card-header"><strong>Applicable rules </strong>