Tracking: Get machines for linked client account (close #1)

www/assets/css/app.css

@@ -54,16 +54,16 @@ Framework7 and FontAwesome both have a .fab class
     -webkit-app-region: no-drag;
 }
 
-.list ul {
+.list.transparent ul {
     background-color: rgba(255,255,255,0.65);
 }
-.list ul li.item-divider {
+.list.transparent ul li.item-divider {
     background-color: rgba(255,255,255,0.5);
 }
-.theme-dark .list ul {
+.theme-dark .list.transparent ul {
     background-color: rgba(0,0,0,0.65);
 }
-.theme-dark .list ul li.item-divider {
+.theme-dark .list.transparent ul li.item-divider {
     background-color: rgba(0,0,0,0.5);
 }
 

www/assets/js/linkaccount.js

@@ -21,7 +21,15 @@ function setupNewAccount(name) {
                 }
                 setStorage("client_uuid", resp.client_uuid);
                 setStorage("device_uuid", resp.device_uuid);
-                restartApplication();
+                app.toast.create({
+                    icon: '<i class="far fa-user-check fa-3x margin"></i>',
+                    text: '<h3 class="no-margin-top">Account Set Up!</h3>',
+                    position: 'center',
+                    closeTimeout: 3000
+                }).open();
+                router.navigate("/home", {
+                    transition: "f7-dive"
+                });
             },
             function (xhr) {
                 app.dialog.close();
@@ -56,7 +64,15 @@ function setupExistingAccount(email, phone, invoiceid) {
                 }
                 setStorage("client_uuid", resp.client_uuid);
                 setStorage("device_uuid", resp.device_uuid);
-                restartApplication();
+                app.toast.create({
+                    icon: '<i class="far fa-user-check fa-3x margin"></i>',
+                    text: '<h3 class="no-margin-top">Account Linked!</h3>',
+                    position: 'center',
+                    closeTimeout: 3000
+                }).open();
+                router.navigate("/home", {
+                    transition: "f7-dive"
+                });
             },
             function (xhr) {
                 app.dialog.close();
@@ -72,3 +88,9 @@ function setupExistingAccount(email, phone, invoiceid) {
                 }
             }, "POST");
 }
+
+function unlinkAccount() {
+    localStorage.removeItem("client_uuid");
+    localStorage.removeItem("device_uuid");
+    restartApplication();
+}

www/assets/js/track.js

@@ -6,11 +6,47 @@
 
 function openTrackingInfoPage(id) {
     if (typeof id == "undefined" || id == null || id == "") {
+        app.input.validate("#deviceid");
         return;
     }
+
     router.navigate("/track/" + id);
 }
 
+function addClientMachineSuggestions() {
+    $("#client-link-account-message").addClass("display-none");
+    $("#client-machine-suggestion-list").addClass("display-none");
+    $("#client-machine-suggestion-list-preloader").addClass("display-none");
+    $("#client-machine-suggestion-list ul").html("");
+    if (inStorage("client_uuid")) {
+        $("#client-machine-suggestion-list-preloader").removeClass("display-none");
+        apirequest(
+                SETTINGS.apis.getmachines,
+                {
+                    clientuuid: getStorage("client_uuid")
+                },
+                function (resp) {
+                    if (resp.status == "OK") {
+                        if (resp.machines.length > 0) {
+                            for (var i = 0; i < resp.machines.length; i++) {
+                                var id = resp.machines[i].id;
+                                var type = resp.machines[i].type.label;
+                                var icon = resp.machines[i].icon;
+                                $("#client-machine-suggestion-list ul").append('<li><a class="item-link item-content" href="/track/' + id + '">'
+                                        + '<div class="item-inner"><div class="item-title">'
+                                        + '<i class="' + icon + '"></i> ' + type + " #" + id
+                                        + '</div></div></a></li>');
+                            }
+                            $("#client-machine-suggestion-list").removeClass("display-none");
+                        }
+                        $("#client-machine-suggestion-list-preloader").addClass("display-none");
+                    }
+                }, "GET");
+    } else {
+        $("#client-link-account-message").removeClass("display-none");
+    }
+}
+
 function trackOpenAsync(routeTo, routeFrom, resolve, reject) {
     app.dialog.preloader("Loading...");
 

www/pages/linkaccount.html

@@ -12,7 +12,7 @@
                     <span class="if-not-md">Back</span>
                 </a>
             </div>
-            <div class="title">Setup Account</div>
+            <div class="title">Link Account</div>
         </div>
     </div>
 
@@ -21,8 +21,7 @@
         <div class="row justify-content-center margin-top">
             <div class="col-100 medium-90 xlarge-75 margin-horizontal">
                 <div class="block text-color-white">
-                    <p>Before we get started, tell us a little bit about yourself.
+                    <p><span class="taptext">Tap</span><span class="clicktext">Click</span> the option that best describes you.
-                        <span class="taptext">Tap</span><span class="clicktext">Click</span> the option that best describes you.
                 </div>
             </div>
             <div class="col-100 medium-90 xlarge-75 margin-horizontal">

www/pages/linkaccount_existing.html

@@ -12,7 +12,7 @@
                     <span class="if-not-md">Back</span>
                 </a>
             </div>
-            <div class="title">Setup Account</div>
+            <div class="title">Link Account</div>
         </div>
     </div>
 

www/pages/settings.html

@@ -19,7 +19,7 @@
     <div class="page-content noselect">
         <div class="row justify-content-center">
             <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
-                <div class="list media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
+                <div class="list transparent media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
                     <ul>
                         {{#each settings}}
                         <li>

www/pages/track.html

@@ -22,17 +22,14 @@
             <div class="col-100 medium-90 xlarge-75 margin-horizontal">
                 <div class="card margin">
                     <div class="card-content text-align-center padding-vertical">
-                        <div>
+
-                            <div class="card-header display-block no-hairlines">
-                                <h3 class="no-margin">Device ID or Tracking Code</h3>
-                            </div>
-                        </div>
                         <div class="list">
                             <ul>
                                 <li class="item-content item-input item-input-outline">
                                     <div class="item-inner">
+                                        <div class="item-title item-floating-label">Device ID or Tracking Code</div>
                                         <div class="item-input-wrap">
-                                            <input type="text" id="deviceid" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
+                                            <input type="text" id="deviceid" required validate data-error-message="&nbsp;" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
                                             <span class="input-clear-button"></span>
                                         </div>
                                     </div>
@@ -43,6 +40,23 @@
                             <div class="button" onclick="openTrackingInfoPage($('input[name=\'deviceid\']').val())"><i class="fal fa-search"></i> Track</div>
                         </div>
                     </div>
+                    <div class="card-content padding-vertical display-none" id="client-link-account-message">
+                        <div class="block">
+                            <p>Don't like typing?  Connect to your Netsyms billing account for one-click tracking.</p>
+                            <a href="/linkaccount" class="button"><i class="far fa-link"></i> Link Account</a>
+                        </div>
+                    </div>
+                    <div class="card-content display-none padding text-align-center" id="client-machine-suggestion-list-preloader">
+                        <div class="preloader"></div>
+                    </div>
+                    <div class="card-content display-none" id="client-machine-suggestion-list">
+                        <h4 class="block">Or <span class="taptext">tap</span><span class="clicktext">click</span> one of your devices:</h4>
+                        <div class="list">
+                            <ul>
+
+                            </ul>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

www/pages/trackresult.html

@@ -20,7 +20,7 @@
     <div class="page-content">
         <div class="row justify-content-center">
             <div class="col-100 medium-60 large-50 xlarge-40">
-                <div class="list no-hairlines tablet-inset elevation-tablet">
+                <div class="list transparent no-hairlines tablet-inset elevation-tablet">
                     <ul>
                         <li class="item-divider">Info</li>
                         {{#each info}}

www/routes.js

@@ -52,7 +52,15 @@ var routes = [
     {
         path: '/track',
         url: './pages/track.html',
-        name: 'track'
+        name: 'track',
+        on: {
+            pageBeforeIn: function () {
+                addClientMachineSuggestions();
+                $("#deviceid").val("0");
+                app.input.validate("#deviceid");
+                $("#deviceid").val("");
+            }
+        }
     },
     {
         path: '/linkaccount',
@@ -102,6 +110,27 @@ var routes = [
         name: 'settings',
         async: function (routeTo, routeFrom, resolve, reject) {
             var settings = [];
+            if (!inStorage("client_uuid")) {
+                settings.push(
+                        {
+                            setting: "linkaccount",
+                            title: "Link To Account",
+                            text: "Connect to your Netsyms billing account to enable more features.",
+                            onclick: "router.navigate('/linkaccount')",
+                            link: true
+                        }
+                );
+            } else {
+                settings.push(
+                        {
+                            setting: "linkaccount",
+                            title: "Unlink Account",
+                            text: "Disconnect this device from your Netsyms account.",
+                            onclick: "unlinkAccount()",
+                            link: true
+                        }
+                );
+            }
             settings.push(
                     {
                         setting: "display",

www/settings.js

@@ -7,6 +7,7 @@
 var SETTINGS = {
     apis: {
         track: "https://track.netsyms.com/public/api.php",
+        getmachines: "https://apis.netsyms.net/repairapp/getmachines.php",
         offers: "https://apis.netsyms.net/repairapp/offers.php",
         registernew: "https://apis.netsyms.net/repairapp/registernew.php",
         registerexisting: "https://apis.netsyms.net/repairapp/registerexisting.php"