Add label printing support, use more URLs instead of functions for nav

www/assets/css/app.css

@@ -65,6 +65,26 @@ Framework7 and FontAwesome both have a .fab class
     --f7-safe-area-right: 0px;
 }
 
+#pdf-canvas {
+    margin-left: auto;
+    margin-top: 2em;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+    display: block;
+    box-shadow: var(--f7-elevation-5);
+}
+
+#pdf-loading-message {
+    margin-left: auto;
+    margin-top: 2em;
+    margin-right: auto;
+    padding-left: 0;
+    padding-right: 0;
+    display: block;
+    text-align: center;
+}
+
 /*
  Allow easily changing help text to reflect finger/mouse usage.
 */

www/assets/js/addevent.js

@@ -110,7 +110,7 @@ function addEvent(machineid) {
                         text: 'Event added!',
                         closeTimeout: 2000,
                     }).open();
-                    openMachineInfo(machineid);
+                    router.back();
                 }
             },
             function (xhr) {

www/assets/js/home.js

@@ -8,7 +8,7 @@
 
 $("#machinesearchbar").submit(function (evt) {
     evt.preventDefault();
-    openMachineInfo($("#machinesearchbar input[type=search]").val());
+    router.navigate("/machine/" + $("#machinesearchbar input[type=search]").val());
 });
 
 $("#clientsearchbar").submit(function (evt) {

www/assets/js/labels.js

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2020 Netsyms Technologies.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+var pdfobject = null;
+
+function labelListAsync(routeTo, routeFrom, resolve, reject) {
+    app.dialog.preloader("Loading...");
+    apirequest(
+            "listlabels",
+            {},
+            function (resp) {
+                app.dialog.close();
+                if (resp.status == "ERROR") {
+                    app.dialog.alert(resp.msg, "Error");
+                    reject();
+                } else {
+                    var context = {
+                        labels: resp.labels,
+                        machineid: routeTo.params.machineid
+                    };
+                    resolve({
+                        templateUrl: "pages/labels.html",
+                    }, {
+                        context: context
+                    });
+                }
+            },
+            function (xhr) {
+                app.dialog.close();
+                var error = $.parseJSON(xhr.responseText);
+                if (error && typeof error.msg != 'undefined') {
+                    app.dialog.alert(error.msg, "Error");
+                } else {
+                    app.dialog.alert("A server or network error occurred.", "Error");
+                }
+                reject();
+            });
+}
+
+function getPDFLabelAndDisplay(machineid, labeltype) {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            //this.response is what you're looking for
+            pdfobject = this.response;
+
+            $("#print-fab").removeClass("display-none");
+            $("#pdf-canvas").removeClass("display-none");
+            $("#pdf-loading-message").addClass("display-none");
+
+            pdfjsLib.getDocument({data: pdfobject}).promise.then(function (pdf) {
+                pdf.getPage(1).then(function (page) {
+                    var scale = 1.5;
+                    var viewport = page.getViewport({scale: scale});
+
+                    var canvas = document.getElementById('pdf-canvas');
+                    var context = canvas.getContext('2d');
+                    canvas.height = viewport.height;
+                    canvas.width = viewport.width;
+
+                    var renderContext = {
+                        canvasContext: context,
+                        viewport: viewport
+                    };
+                    page.render(renderContext);
+                });
+            });
+        }
+    }
+    xhr.open('POST', SETTINGS.apiserver + "getlabel", true, getStorage("username"), getStorage("password"));
+    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xhr.responseType = 'arraybuffer';
+    xhr.send("id=" + machineid + "&type=" + labeltype);
+}
+
+function sendPDFToPrintServer() {
+    var bytesArray = new Uint8Array(pdfobject);
+
+    var printurl = getStorage("printserverurl");
+
+    $.getJSON(printurl, {action: "list"}, function (resp) {
+        var printers = resp.printers;
+
+        var buttons = [];
+        for (var i = 0; i < printers.length; i++) {
+            buttons.push({
+                text: printers[i]
+            });
+        }
+        app.dialog.create({
+            title: 'Print',
+            text: 'Select a printer',
+            buttons: buttons,
+            verticalButtons: true,
+            onClick: function (dialog, index) {
+                var printer = printers[index];
+
+                $.ajax({
+                    url: printurl + '?action=print&printer=' + printer,
+                    type: 'POST',
+                    contentType: 'application/octet-stream',
+                    data: bytesArray,
+                    processData: false
+                });
+            }
+        }).open();
+
+    });
+}

www/assets/js/machine.js

@@ -31,18 +31,19 @@ function addMachineToSearchHistory(machineid) {
     setStorage("machinehistory", JSON.stringify(history));
 }
 
-function openMachineEditor(machineid) {
+function machineEditorOpenAsync(routeTo, routeFrom, resolve, reject) {
     app.dialog.preloader("Loading editor...");
 
     apirequest(
             "lookup",
             {
-                id: machineid
+                id: routeTo.params.id
             },
             function (resp) {
                 app.dialog.close();
                 if (resp.status == "ERROR") {
                     app.dialog.alert(resp.msg, "Error");
+                    reject();
                 } else {
                     var context = {
                         machineid: resp.id,
@@ -76,7 +77,10 @@ function openMachineEditor(machineid) {
                             tabindex++;
                         }
                     }
-                    router.navigate("/machineeditor", {
+
+                    resolve({
+                        templateUrl: "pages/machineeditor.html",
+                    }, {
                         context: context
                     });
                 }
@@ -89,21 +93,23 @@ function openMachineEditor(machineid) {
                 } else {
                     app.dialog.alert("A server or network error occurred.", "Error");
                 }
+                reject();
             });
 }
 
-function openMachineInfo(machineid) {
+function machineInfoOpenAsync(routeTo, routeFrom, resolve, reject) {
     app.dialog.preloader("Loading...");
 
     apirequest(
             "lookup",
             {
-                id: machineid
+                id: routeTo.params.id
             },
             function (resp) {
                 app.dialog.close();
                 if (resp.status == "ERROR") {
                     app.dialog.alert(resp.msg, "Error");
+                    reject();
                 } else {
 
                     var events = [];
@@ -175,7 +181,9 @@ function openMachineInfo(machineid) {
                         }
                     }
                     addMachineToSearchHistory(resp.id);
-                    router.navigate("/machine", {
+                    resolve({
+                        templateUrl: "pages/machine.html",
+                    }, {
                         context: context
                     });
                 }
@@ -188,6 +196,7 @@ function openMachineInfo(machineid) {
                 } else {
                     app.dialog.alert("A server or network error occurred.", "Error");
                 }
+                reject();
             });
 }
 
@@ -217,7 +226,7 @@ function saveMachineEdits(machineid) {
                         text: 'Machine saved!',
                         closeTimeout: 2000,
                     }).open();
-                    openMachineInfo(machineid);
+                    router.back();
                 }
             },
             function (xhr) {

www/assets/js/settings.js

@@ -30,6 +30,42 @@ function resyncAndRestart() {
     });
 }
 
+function openPrintServerDialog() {
+    app.dialog.create({
+        title: 'Print Server Setup',
+        buttons: [
+            {
+                text: 'Manual Input',
+            },
+            {
+                text: 'Scan Barcode',
+            },
+            {
+                text: 'Cancel',
+            },
+        ],
+        verticalButtons: true,
+        onClick: function (dialog, index) {
+            switch (index) {
+                case 0:
+                    app.dialog.prompt('Print Server URL:', function (url) {
+                        setStorage("printserverurl", url);
+                    });
+                    break;
+                case 1:
+                    scanBarcode(function (code) {
+                        setStorage("printserverurl", code);
+                    }, function (error) {
+                        app.dialog.alert(error, "Error");
+                    });
+                    break;
+                default:
+                    return;
+            }
+        }
+    }).open();
+}
+
 function clearCaches() {
     app.toast.show({
         text: "Clearing caches. You may need to restart the app to see a difference.",

www/index.html

@@ -28,6 +28,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <script src="node_modules/framework7/js/framework7.bundle.min.js"></script>
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
+<script src="node_modules/pdfjs-dist/build/pdf.min.js"></script>
+<script src="node_modules/pdfjs-dist/build/pdf.worker.min.js"></script>
 
 <script src="settings.js"></script>
 
@@ -35,6 +37,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 <script src="assets/js/platform.js"></script>
 <script src="assets/js/util.js"></script>
 
+<script src="assets/js/labels.js"></script>
 <script src="assets/js/machine.js"></script>
 <script src="assets/js/clients.js"></script>
 <script src="assets/js/addevent.js"></script>

www/package-lock.json

@@ -63,6 +63,11 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
       "integrity": "sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw=="
     },
+    "pdfjs-dist": {
+      "version": "2.5.207",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz",
+      "integrity": "sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw=="
+    },
     "ssr-window": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",

www/package.json

@@ -9,7 +9,8 @@
     "framework7": "^5.5.1",
     "framework7-icons": "^3.0.0",
     "jquery": "^3.4.1",
-    "material-design-icons": "^3.0.1"
+    "material-design-icons": "^3.0.1",
+    "pdfjs-dist": "^2.5.207"
   },
   "devDependencies": {}
 }

www/pages/addevent.html

@@ -11,7 +11,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only" onclick="router.navigate('/')">
+                <a href="#" class="link icon-only back">
                     <i class="icon icon-back"></i>
                 </a>
             </div>

www/pages/client.html

@@ -120,7 +120,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                                 </div>
                             </div>
                             <div class="accordion-item-content">
-                                <a href="" onclick="openMachineInfo('{{id}}')" class="button">Open</a>
+                                <a href="/machine/{{id}}" class="button">Open</a>
                                 <div class="list">
                                     <ul>
                                         {{#each props}}

www/pages/home.html

@@ -55,11 +55,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                 </li>
                 {{#each machinehistory}}
                 <li>
-                    <div class="item-link item-content" onclick="openMachineInfo('{{this}}')">
+                    <a class="item-link item-content" href="/machine/{{this}}">
                         <div class="item-inner">
                             <div class="item-title">{{this}}</div>
                         </div>
-                    </div>
+                    </a>
                 </li>
                 {{/each}}
             </ul>

www/pages/labels.html

@@ -0,0 +1,36 @@
+<!--
+Copyright 2020 Netsyms Technologies.
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="page" data-name="labels">
+
+    <div class="navbar">
+        <div class="navbar-bg"></div>
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Labels for #{{machineid}}</div>
+        </div>
+    </div>
+
+    <div class="page-content">
+        <div class="list links-list no-margin-top">
+            <ul>
+                {{#each labels}}
+                <li>
+                    <a href="/labels/{{../machineid}}/{{@key}}/{{this}}">
+                        {{this}}
+                    </a>
+                </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+
+</div>

www/pages/machine.html

@@ -16,6 +16,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                 </a>
             </div>
             <div class="title"><i class="{{icon}}"></i> {{type.label}} #{{machineid}}</div>
+            <div class="right">
+                <a href="#" class="link icon-only" onclick="router.refreshPage()">
+                    <i class="icon material-icons">refresh</i>
+                </a>
+            </div>
         </div>
     </div>
 
@@ -30,9 +35,30 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         </a>
     </div>
 
-    <div class="fab fab-left-bottom" id="edit-fab">
+    <div class="fab fab-left-bottom">
-        <a href="#" onclick="openMachineEditor('{{machineid}}');">
+        <a href="#">
-            <span class="material-icons">edit</span>
+            <!-- Icons For iOS Theme -->
+            <i class="icon f7-icons if-not-md">plus</i>
+            <i class="icon f7-icons if-not-md">xmark</i>
+            <!-- Icons For MD Theme -->
+            <i class="icon material-icons md-only">add</i>
+            <i class="icon material-icons md-only">close</i>
+        </a>
+        <div class="fab-buttons fab-buttons-top">
+            <a href="/machineeditor/{{machineid}}" class="fab-label-button">
+                <span class="material-icons">edit</span>
+                <span class="fab-label">Edit</span>
+            </a>
+            <a href="/labels/{{machineid}}" class="fab-label-button">
+                <span class="material-icons">print</span>
+                <span class="fab-label">Labels</span>
+            </a>
+        </div>
+    </div>
+    {{else}}
+    <div class="fab fab-left-bottom" id="label-fab">
+        <a href="#">
+            <span class="material-icons">print</span>
         </a>
     </div>
     {{/if}}

www/pages/machineeditor.html

@@ -11,7 +11,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only" onclick="openMachineInfo('{{machineid}}')">
+                <a href="#" class="link icon-only back">
                     <i class="icon icon-back"></i>
                 </a>
             </div>

www/pages/viewlabel.html

@@ -0,0 +1,37 @@
+<!--
+Copyright 2020 Netsyms Technologies.
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="page" data-name="viewlabel">
+
+    <div class="navbar">
+        <div class="navbar-bg"></div>
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">{{$route.params.labelname}} #{{$route.params.machineid}}</div>
+        </div>
+    </div>
+
+    <div class="fab fab-right-bottom display-none" id="print-fab">
+        <a href="#" onclick="sendPDFToPrintServer()">
+            <span class="material-icons">print</span>
+        </a>
+    </div>
+
+    <div class="page-content" id="pdfcanvas-container">
+        <canvas id="pdf-canvas" class="display-none"></canvas>
+        <p id="pdf-loading-message">Loading...</p>
+    </div>
+
+    <script>
+        getPDFLabelAndDisplay("{{$route.params.machineid}}", "{{$route.params.labeltype}}");
+    </script>
+
+</div>

www/routes.js

@@ -21,14 +21,14 @@ var routes = [
         }
     },
     {
-        path: "/machine",
+        path: "/machine/:id",
         name: "machine",
-        templateUrl: "pages/machine.html"
+        async: machineInfoOpenAsync
     },
     {
-        path: "/machineeditor",
+        path: "/machineeditor/:id",
         name: "machineeditor",
-        templateUrl: "pages/machineeditor.html"
+        async: machineEditorOpenAsync
     },
     {
         path: "/clients/:q",
@@ -40,6 +40,16 @@ var routes = [
         name: "client",
         async: clientGetAsync
     },
+    {
+        path: "/labels/:machineid",
+        name: "labels",
+        async: labelListAsync
+    },
+    {
+        path: "/labels/:machineid/:labeltype/:labelname",
+        name: "viewlabel",
+        templateUrl: "pages/viewlabel.html"
+    },
     {
         path: "/addevent",
         name: "addevent",
@@ -98,6 +108,13 @@ var routes = [
                         text: "Change the app theme.",
                         onclick: "router.navigate('/settings/display')",
                         link: true
+                    },
+                    {
+                        setting: "printserverurl",
+                        title: "Print Server",
+                        text: getStorage("printserverurl"),
+                        onclick: "openPrintServerDialog()",
+                        link: true
                     }
             );