Add POSTNET barcode to address lookup, refine lookup tool

scripts/remove_bloat.sh

@@ -19,6 +19,10 @@ rm -rf {util-deprecate,vt-pbf,wgs84}
 # Make npm stop complaining that these don't exist by actually removing them
 rm -rf .bin/*
 
+cd bwip-js
+rm -rf {bin,examples,src,barcode.ps,demo.html,stb_truetype.h}
+rm -rf dist/bwip-js.js
+rm -rf dist/node-bwipjs.js
 
 cd @fortawesome/fontawesome-free
 rm -rf {js,less,metadata,scss,sprites,svgs}

www/assets/js/toolbox_addresslookup.js

@@ -24,7 +24,6 @@ function addressLookup() {
         method: 'post',
         data: {
             "street": $("#numberstreetinput").val(),
-            "unit": $("#unitinput").val(),
             "city": $("#cityinput").val(),
             "state": $("#stateinput").val(),
             "zip": $("#zipcodeinput").val()
@@ -40,21 +39,44 @@ function addressLookup() {
                     var address = resp.address;
                     $(".item-text #address").text(address.address);
                     var zipstr = "";
+                    var postnetstr = "";
+                    var postnetspacedstr = "";
                     if (address.zip != "") {
                         zipstr = address.zip;
+                        postnetstr = address.zip;
+                        postnetspacedstr = address.zip;
                     }
                     if (address.plus4 != "") {
                         zipstr += "-" + address.plus4;
+                        postnetstr += "" + address.plus4;
+                        postnetspacedstr += " " + address.plus4;
+                    }
+                    if (address.delivery_point != "") {
+                        postnetstr += "" + address.delivery_point;
+                        postnetspacedstr += " " + address.delivery_point;
                     }
                     $(".item-text #citystate").text(address.city + " " + address.state + " " + zipstr);
-                    
+
                     $(".item-text #dp").text(address.delivery_point);
                     $(".item-text #route").text(address.route);
                     $(".item-text #county").text(address.county);
                     $(".item-text #dpvconfirmed").text(address.dpv_confirmed ? "Yes" : "No");
                     $(".addrresult").removeClass("display-none");
+                    let canvas = document.createElement('canvas');
+                    bwipjs.toCanvas(canvas, {
+                        bcid: 'postnet', // Barcode type
+                        text: postnetstr, // Text to encode
+                        scale: 2,
+                        height: 3, // Bar height, in millimeters
+                        alttext: postnetspacedstr,
+                        includetext: true, // Show human-readable text
+                        textxalign: 'center', // Always good to set this
+                    });
+                    document.getElementById("postnetbarcode").src = canvas.toDataURL('image/png');
+                    $(".barcoderesult").removeClass("display-none");
                 } else {
                     $(".addrresult").addClass("display-none");
+                    $(".barcoderesult").addClass("display-none");
                     app.dialog.alert(resp.address.message, "Error");
                 }
                 if (resp.geocode.status == "OK") {

www/index.html

@@ -42,6 +42,7 @@
 <script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
 <script src="node_modules/mapbox-gl/dist/mapbox-gl.js"></script>
 <script src="node_modules/jsbarcode/dist/JsBarcode.all.min.js"></script>
+<script src="node_modules/bwip-js/dist/bwip-js-min.js"></script>
 <script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
 
 <script src="settings.js"></script>

www/package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@zxing/library": "^0.15.2",
+    "bwip-js": "^2.0.6",
     "framework7": "^5.1.3",
     "jquery": "^3.4.1",
     "jsbarcode": "^3.11.0",

www/pages/toolbox/addrlookup.html

@@ -21,21 +21,11 @@
         <div class="list no-margin-top">
             <ul>
                 <li>
-                    <div class="row justify-content-stretch">
+                    <div class="item-content item-input">
-                        <div class="col-70 item-content item-input">
+                        <div class="item-inner margin-right">
-                            <div class="item-inner">
+                            <div class="item-title item-label">Number and Street</div>
-                                <div class="item-title item-label">Number and Street</div>
+                            <div class="item-input-wrap">
-                                <div class="item-input-wrap">
+                                <input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
-                                    <input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-30 item-content item-input no-padding-left">
-                            <div class="item-inner no-padding-right">
-                                <div class="item-title item-label">Unit</div>
-                                <div class="item-input-wrap">
-                                    <input type="text" id="unitinput" placeholder="" value="" autocomplete="off" autocorrect="off">
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -116,6 +106,11 @@
                         </div>
                     </div>
                 </li>
+                <li class="barcoderesult display-none">
+                    <div class="item-content bg-color-white padding-half padding-horizontal" style="display: flex; justify-content: center;">
+                        <img class="barcode" id="postnetbarcode" style="max-width: 100%;" />
+                    </div>
+                </li>
             </ul>
         </div>
     </div>

www/pages/toolbox/trackinginfo.html

@@ -51,7 +51,7 @@
                     </div>
                 </li>
                 <li>
-                    <div class="item-content" style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
+                    <div class="item-content bg-color-white" style="display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
                         <svg class="barcode" id="trackingbarcode"></svg>
                     </div>
                 </li>