From db92cb5f6a1f4ad6f42677ea6653aaf9f63046d9 Mon Sep 17 00:00:00 2001
From: Abhishek Sinha <avishkarabhishek786@gmail.com>
Date: Thu, 2 Aug 2018 22:20:24 +0530
Subject: [PATCH] Image downloading option added, pdf view improved

---
 public/css/main.css | 10 ++++++++++
 public/js/bundle.js | 16 +++++++++-------
 public/js/main.js   | 16 +++++++++-------
 views/write.ejs     | 44 +++++++++++++++++++++++---------------------
 4 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index d0dc1ae..9b06505 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -42,3 +42,13 @@ img {
     padding: 5px 10px;
 }
 
+.pdfcontent, .pdfcontent > div {
+    width: 1124px;
+    height: 1590px;
+    border: none;
+    background-color: #c6c6c6;
+}
+
+.border_stashed {
+    border-style: dotted;
+}
diff --git a/public/js/bundle.js b/public/js/bundle.js
index c3c30f3..f9e0cbe 100644
--- a/public/js/bundle.js
+++ b/public/js/bundle.js
@@ -27381,11 +27381,11 @@ $(document).on('click', '#bc-btn', function() {
   var _to = $('#_to').val();
   var _cardid = $('#_cardid').val();
 
-  var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
-  // if (!atLeastOneIsChecked) {
-  //   alert('Please specify download option: Image and/or PDF');
-  //   return false;
-  // }
+  var atLeastOneIsChecked = $('input[name="chk"]').is(":checked");
+  if (!atLeastOneIsChecked) {
+    alert('Please specify download option: Image and/or PDF');
+    return false;
+  }
   
     $.ajax({
       type: 'post',
@@ -27414,12 +27414,14 @@ $(document).on('click', '#bc-btn', function() {
         QRCode.toCanvas(canvas, urlstring, opts, function (error) {
             if (error) console.error(error)
             console.log('Qr generated! for : '.urlstring);
+            // canvas in QRCode.toCanvas()is different to canvas below 
             html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) {
                 if (download_pdf==true) {
                   let namepdf = "flo-greetings-"+new Date().getTime()+".pdf";
-                  var img = canvas.toDataURL("image/png");
+                  var img = canvas.toDataURL("image/png"); 
                   var doc = new jsPDF('p', 'mm', 'a3');
-                  doc.addImage(img, 'PNG', 1, 2);
+                  doc.addImage(img, 'PNG', 0, 0);
+                  //doc.addImage(img, 'PNG', 1, 2);
                   doc.save(namepdf);
                   doc.autoPrint();
                 }
diff --git a/public/js/main.js b/public/js/main.js
index 8032798..de93d4a 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -45,11 +45,11 @@ $(document).on('click', '#bc-btn', function() {
   var _to = $('#_to').val();
   var _cardid = $('#_cardid').val();
 
-  var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
-  // if (!atLeastOneIsChecked) {
-  //   alert('Please specify download option: Image and/or PDF');
-  //   return false;
-  // }
+  var atLeastOneIsChecked = $('input[name="chk"]').is(":checked");
+  if (!atLeastOneIsChecked) {
+    alert('Please specify download option: Image and/or PDF');
+    return false;
+  }
   
     $.ajax({
       type: 'post',
@@ -78,12 +78,14 @@ $(document).on('click', '#bc-btn', function() {
         QRCode.toCanvas(canvas, urlstring, opts, function (error) {
             if (error) console.error(error)
             console.log('Qr generated! for : '.urlstring);
+            // canvas in QRCode.toCanvas()is different to canvas below 
             html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) {
                 if (download_pdf==true) {
                   let namepdf = "flo-greetings-"+new Date().getTime()+".pdf";
-                  var img = canvas.toDataURL("image/png");
+                  var img = canvas.toDataURL("image/png"); 
                   var doc = new jsPDF('p', 'mm', 'a3');
-                  doc.addImage(img, 'PNG', 1, 2);
+                  doc.addImage(img, 'PNG', 0, 0);
+                  //doc.addImage(img, 'PNG', 1, 2);
                   doc.save(namepdf);
                   doc.autoPrint();
                 }
diff --git a/views/write.ejs b/views/write.ejs
index 932e266..236b1ee 100644
--- a/views/write.ejs
+++ b/views/write.ejs
@@ -42,28 +42,30 @@
       <button type="submit" class="btn btn-primary" id="bc-btn">Submit</button>
     </div>
 
-    <div id="pdfcontent" class="pdfcontent"> 
+    <div class="border_stashed">
 
-      <div class="card mb-3 text-center">
-        <div class="card-body">
-          <h5 class="card-title">Dear <span id="span_to">Alice</span></h5>
-        </div>
-        <div class="text-center">
-            <img src="/images/<%=data.card_id%>.jpg" alt="Card image cap" id="pdf-img">
-        </div>
-        <div class="card-body">
-          <p class="card-text"><span id="span_user_msg" class="span_user_msg"><i>Your special message will appear here.</i></span></p>
-          <p class="card-text"><small class="text-muted">From <span id="span_from">Bob</span></small></p>
-          
-          <p class="card-text">
-            <canvas id="canvas"></canvas>
-          </p>
-          
-          <p class="card-text">
-            <img src="/images/rm.png" alt="Ranchi Mall logo" width="50" height="50">
-            <img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
-            <p><small class="text-muted">--- A Ranchi Mall FLO Blockchian Product ---</small></p>
-          </p>
+      <div id="pdfcontent" height="1000" width="1000" class="pdfcontent"> 
+        <div class="card mb-3 text-center">
+          <div class="card-body">
+            <h5 class="card-title">Dear <span id="span_to">Alice</span></h5>
+          </div>
+          <div class="text-center">
+              <img src="/images/<%=data.card_id%>.jpg" alt="Card image cap" id="pdf-img">
+          </div>
+          <div class="card-body">
+            <p class="card-text"><span id="span_user_msg" class="span_user_msg"><i>Your special message will appear here.</i></span></p>
+            <p class="card-text"><small class="text-muted">From <span id="span_from">Bob</span></small></p>
+            
+            <p class="card-text">
+              <canvas id="canvas"></canvas>
+            </p>
+            
+            <p class="card-text">
+              <img src="/images/rm.png" alt="Ranchi Mall logo" width="50" height="50">
+              <img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
+              <p><small class="text-muted">--- A Ranchi Mall FLO Blockchian Product ---</small></p>
+            </p>
+          </div>
         </div>
       </div>