Add Offers page with refresh from API (closes #2)

www/assets/css/app.css

@@ -82,6 +82,10 @@ Framework7 and FontAwesome both have a .fab class
     font-size: var(--f7-block-font-size);
 }
 
+.card-header.no-hairlines:after {
+    display: none;
+}
+
 .no-animation * {
     -webkit-transition: 10ms !important;
     -moz-transition: 10ms !important;

www/assets/js/offers.js

@@ -0,0 +1,51 @@
+/*
+ * 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/.
+ */
+
+
+function openOffersAsync(routeTo, routeFrom, resolve, reject) {
+    app.dialog.preloader("Fetching latest deals...");
+
+    apirequest(
+            SETTINGS.apis.offers,
+            {},
+            function (resp) {
+                app.dialog.close();
+                if (resp.status == "ERROR") {
+                    app.dialog.alert(resp.msg, "Error");
+                    reject();
+                } else {
+                    var context = {
+                        offers: []
+                    };
+
+                    for (var i = 0; i < resp.offers.length; i++) {
+                        if (resp.offers[i].valid === true) {
+                            // no expiration
+                            resp.offers[i].expires = "Limited time offer";
+                        } else {
+                            resp.offers[i].expires = "Expires " + formatTimestamp("l F j, Y", resp.offers[i].valid.to);
+                        }
+                        context.offers.push(resp.offers[i]);
+                    }
+
+                    resolve({
+                        templateUrl: "pages/offers.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();
+            }, "GET");
+}

www/index.html

@@ -45,6 +45,7 @@
 
 <script src="assets/js/util.js"></script>
 <script src="assets/js/track.js"></script>
+<script src="assets/js/offers.js"></script>
 
 <script src="routes.js"></script>
 <script src="assets/js/main.js"></script>

www/pages/offers.html

@@ -0,0 +1,46 @@
+<!-- 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="offers">
+
+    <div class="navbar">
+        <div class="navbar-inner text-color-white color-white">
+            <div class="left">
+                <a class="link back" href="#">
+                    <i class="icon icon-back"></i>
+                    <span class="if-not-md">Back</span>
+                </a>
+            </div>
+            <div class="title">Offers</div>
+        </div>
+    </div>
+
+    <div class="page-content noselect">
+        <div class="row justify-content-center margin-top">
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="row justify-content-center">
+                    {{#each offers}}
+                    <div class="col-100 small-50 xlarge-33">
+                        <div class="card margin">
+                            <div class="card-content text-align-center padding-vertical">
+                                <div>
+                                    <div class="card-header display-block no-hairlines">
+                                        <h1 class="no-margin"><i class="{{icon}}"></i></h1>
+                                        <h1 class="no-margin">{{title}}</h1>
+                                        <small style="opacity: 0.7"><i class="far fa-clock"></i> {{expires}}</small>
+                                    </div>
+                                </div>
+                                <div class="card-content-padding">
+                                    <p>{{text}}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

www/routes.js

@@ -19,6 +19,11 @@ var routes = [
                             href: "/bookrepair",
                             icon: "fal fa-calendar-check"
                         },
+                        {
+                            title: "Live Chat",
+                            href: "/chat",
+                            icon: "fal fa-comments"
+                        },
                         {
                             title: "Repair Status",
                             href: "/track",
@@ -27,13 +32,18 @@ var routes = [
                         {
                             title: "Pay Bill",
                             href: "/pay",
-                            icon: "fal fa-file-invoice-dollar"
+                            icon: "fal fa-file-invoice"
                         },
                         {
-                            title: "View Offers",
+                            title: "Get Deals",
                             href: "/offers",
-                            icon: "fal fa-badge-percent"
-                        }
+                            icon: "fal fa-badge-dollar"
+                        },
+                        {
+                            title: "View Services",
+                            href: "/services",
+                            icon: "fal fa-magic"
+                        },
                     ]
                 }
             });
@@ -44,6 +54,16 @@ var routes = [
         url: './pages/track.html',
         name: 'track'
     },
+    {
+        path: '/offers',
+        name: 'offers',
+        async: openOffersAsync,
+        on: {
+            pageAfterIn: function () {
+                JsBarcode(".offerbarcode").init();
+            }
+        }
+    },
     {
         path: '/track/:id',
         name: 'trackresult',

www/settings.js

@@ -6,7 +6,8 @@
 
 var SETTINGS = {
     apis: {
-        track: "https://track.netsyms.com/public/api.php"
+        track: "https://track.netsyms.com/public/api.php",
+        offers: "https://apis.netsyms.net/repairapp/offers.php"
     },
     branding: {
         apptitle: "Netsyms PC Repair",