improved pdf generation functionality, dynamic fields on cards

package-lock.json

@@ -213,6 +213,11 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
       "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -731,6 +736,14 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-line-break": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
+      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "requires": {
+        "base64-arraybuffer": "^0.1.5"
+      }
+    },
     "cssom": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.4.tgz",
@@ -1996,6 +2009,14 @@
         "phantomjs-prebuilt": "^2.1.4"
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
+      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "requires": {
+        "css-line-break": "1.0.1"
+      }
+    },
     "htmlescape": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "express-validator": "^5.3.0",
     "helmet": "^3.13.0",
     "html-pdf": "^2.2.0",
+    "html2canvas": "^1.0.0-alpha.12",
     "jquery": "^3.3.1",
     "jspdf": "^1.4.1",
     "lodash": "^4.17.10",

public/js/main.js

@@ -1,29 +1,39 @@
+const html2canvas = require('html2canvas');
+
+$(document).on('keyup', '.stick_text', function() {
+  var btn = this;
+  var _id = $(btn).attr('id');
+  
+  if(_id == '_to') {
+    var to = $(btn).val();
+    $("#span_to").text(to);
+  } else if(_id == '_from') {
+    var from = $(btn).val();
+    $("#span_from").text(from);
+  } else if(_id == '_bdata') {
+    var usg_msg = $(btn).val();
+    $("#span_user_msg").text(usg_msg);
+  }
+});
+
 $(document).on('click', '#bc-btn', function() {
   var text = $('#_bdata').val();
+  var _from = $('#_from').val();
+  var _to = $('#_to').val();
   var _cardid = $('#_cardid').val();
     $.ajax({
       type: 'post',
       url: '/write',
-      data: {_bdata:text, _cardid:_cardid},
+      data: {_bdata:text,_from:_from, _to:_to, _cardid:_cardid},
       success: function(data) {
-        console.log(data);
+
-        //console.log(JSON.parse(data));  
+        html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) {
-        
+            var img = canvas.toDataURL("image/png");
-        var doc = new jsPDF()
+            var doc = new jsPDF('p', 'mm', 'a3');
-        var specialElementHandlers = {
+            doc.addImage(img, 'PNG', 10, 10);
-          '#pdfignore': function(element, renderer){
+            doc.save("test.pdf");
-            return true;
+            doc.autoPrint();
-          }
+        });
-        };
-        //console.log($('#pdfcontent').html());
-        
-        doc.fromHTML($('#pdfcontent').html(), 15, 15, {
-          'width': 170, 
-          'elementHandlers': specialElementHandlers
-        },
-        function(bla){doc.save('card.pdf');},
-        doc.autoPrint()
-      );
 
       },
       error: function(jqXHR, textStatus, errorThrown) {

routes.js

@@ -27,13 +27,25 @@ router.get('/write/:card_id', (req, res)=>{
 })
 
 router.post('/write', [
+  check('_from')
+    .isLength({min:1})
+    .isAlpha()
+    .withMessage('Please specify the name of the sender!')
+    .trim(),
+  check('_to')
+    .isLength({min:1})
+    .isAlpha()
+    .withMessage('Please specify the name of the receiver!')
+    .trim(),
   check('_bdata')
     .isLength({min:1})
-    .withMessage('Please write some remarks!')
+    .isAlphanumeric()
+    .withMessage('Please write the message to be sent to receiver!')
     .trim(),
   check('_cardid')
     .isLength({min:1})
-    .withMessage('Could not find the card id!')
+    .isAlphanumeric()
+    .withMessage('Could not find the card id! Please select the card again.')
     .trim()
 ],
   (req,res)=>{
@@ -49,20 +61,23 @@ router.post('/write', [
     const data = matchedData(req)
 
     let user_msg = data._bdata;
+    let _from = data._from;
+    let _to = data._to;
     let card_id = data._cardid;
 
     var toaddress = "oXCsMUyX3mLJEdnn8SXoH6gyPW9Jd6kjYu";
     var amount = 1;
     
     try {
-        client.sendToAddress(toaddress, amount, "Greetings App", "REBC", false, false, 1, 'UNSET', user_msg)
+        // client.sendToAddress(toaddress, amount, "Greetings App", "REBC Greetigs App", false, false, 1, 'UNSET', user_msg)
-        .then((txnid) => {
+        // .then((txnid) => {
-          console.log(txnid)
+        //   console.log(txnid)
-          res.json({"error":false, "txnid":txnid, "card_id":card_id, "user_msg":user_msg})
+        //   res.json({"error":false, "txnid":txnid, "_from":_from, "_to":_to, "card_id":card_id, "user_msg":user_msg})
-        });
+        // });
+        res.json({"error":false, "txnid":"TXIDKJKLGJLKSJLKGJSKJGK", "_from":_from, "_to":_to, "card_id":card_id, "user_msg":user_msg})
     }catch(err){
         console.log("Unable to send FLO." + err.message);
-    }
+    } 
 
     //res.json({"error":true, "txnid":null, "card_id":null, "user_msg":null})
 

views/write.ejs

@@ -17,8 +17,15 @@
 <% if(data.card_id) { %>
 
     <div class="form-group" id="pdfignore">
+
+      <label for="_to">To: </label>
+      <input type="text" name="_to" class="form-control stick_text" id="_to" placeholder="Name of the receiver">
+
+      <label for="_from">From: </label>
+      <input type="text" name="_from" id="_from" class="form-control stick_text" placeholder="Name of the sender">
+
       <label for="_bdata">Your message:</label>
-      <textarea class="form-control" id="_bdata" name="_bdata"></textarea>
+      <textarea id="_bdata" class="form-control stick_text" placeholder="Your message here"name="_bdata"></textarea>
 
       <input type="hidden" id="_cardid" name="_cardid" value="<%=data.card_id%>" >
       <br>
@@ -26,9 +33,25 @@
     </div>
 
     <div id="pdfcontent"> 
-      <h5>Happy Diwali</h5>
+
-      <img src="/images/<%=data.card_id%>.jpg" alt="images" width="200" height="210">
+      <div class="card mb-3 text-center">
-      <strong>- John Doe</strong>
+        <div class="card-body">
+          <h5 class="card-title">Dear <span id="span_from">Alice</span></h5>
+          <p class="card-text"><i>Happy birthday to you.</i></p>
+          <p class="card-text"><small class="text-muted">From <span id="span_to">Bob</span></small></p>
+        </div>
+        <div class="text-center">
+            <img  src="/images/<%=data.card_id%>.jpg" alt="Card image cap">
+        </div>
+        <div class="card-body">
+          <p class="card-text"><span id="span_user_msg">You’re Beautiful Inside and Out! Hope your Birthday is a Spectacular One, You Deserve It! Happy Birthday!</span></p>
+          <p class="card-text">
+            <img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
+            <p><small class="text-muted">--- FLO Blockchian---</small></p>
+          </p>
+        </div>
+      </div>
+
     </div>    
 <%}%>