App is now usable

7 years ago · 446071b8eb
parent 9eb429e9da
commit 446071b8eb
20 changed files with 464 additions and 23 deletions
--- a/appstore.png
+++ b/appstore.png
--- a/config.xml
+++ b/config.xml
@ -15,7 +15,7 @@
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
-    <icon src="iconoriginal.png" />
+    <icon src="icon.png" />
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="SplashMaintainAspectRatio" value="true" />
--- a/googleplay.png
+++ b/googleplay.png
--- a/icon.png
+++ b/icon.png
--- a/iconoriginal.png
+++ b/iconoriginal.png
--- a/www/css/app.css
+++ b/www/css/app.css
@ -1,5 +1,10 @@
+html, body {
+    height: 100%;
+}
+
 .app-dock-container {
    display: flex;
+    height: 100%;
 }

 .app-dock {
@ -7,6 +12,9 @@
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 }

 .app-icon {
@ -15,18 +23,21 @@
 }

 .app-dock-item {
-    padding: 0px 5px 2px 5px;
+    padding: 0px 10px 2px 10px;
    min-width: 100px;
+    max-width: 50%;
+    width: 120px;
+    margin: 15px;
 }

 .app-dock-item p {
    margin-bottom: 0px;
-    font-size: 95%;
+    font-size: 120%;
    color: #555;
 }

 .app-dock-item p img {
-    width: 50px;
+    width: 80px;
    display: block;
    margin: 0 auto;
 }
@ -34,4 +45,20 @@
 .app-dock-item p span {
    display: block;
    text-align: center;
-}
+}
+
+span.navbar-brand {
+    color: white;
+}
+
+.navbar-brand.pull-left img {
+    margin-right: -10px;
+    height: 30px;
+    margin-top: -4px;
+}
+
+.navbar-brand.pull-right img {
+    margin-right: 6px;
+    height: 30px;
+    margin-top: -4px;
+}
--- a/www/css/spinner.css
+++ b/www/css/spinner.css
@ -0,0 +1,67 @@
+.spinner {
+    -webkit-animation: rotator 1.4s linear infinite;
+    animation: rotator 1.4s linear infinite;
+}
+
+@-webkit-keyframes rotator {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+}
+
+@keyframes rotator {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+}
+.spinner .path {
+    stroke-dasharray: 187;
+    stroke-dashoffset: 0;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+    -webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
+    animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
+    stroke: #448aff;    
+}
+
+@-webkit-keyframes dash {
+    0% {
+        stroke-dashoffset: 187;
+    }
+    50% {
+        stroke-dashoffset: 46.75;
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: 187;
+        -webkit-transform: rotate(450deg);
+        transform: rotate(450deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dashoffset: 187;
+    }
+    50% {
+        stroke-dashoffset: 46.75;
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: 187;
+        -webkit-transform: rotate(450deg);
+        transform: rotate(450deg);
+    }
+}
--- a/www/icons/ic_arrow-back.svg
+++ b/www/icons/ic_arrow-back.svg
@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="#000000"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ic_arrow-back.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="10.125"
+     inkscape:cx="-6.0246914"
+     inkscape:cy="11.802469"
+     inkscape:current-layer="svg2" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path4" />
+  <path
+     d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+     id="path6"
+     style="fill:#ffffff;fill-opacity:1" />
+</svg>
--- a/www/icons/ic_settings.svg
+++ b/www/icons/ic_settings.svg
@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="#000000"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   id="svg3421"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="ic_settings.svg">
+  <metadata
+     id="metadata3431">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3429" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview3427"
+     showgrid="false"
+     inkscape:zoom="33.083333"
+     inkscape:cx="11.969773"
+     inkscape:cy="12"
+     inkscape:current-layer="svg3421" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path3423" />
+  <path
+     d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+     id="path3425"
+     style="fill:#ffffff;fill-opacity:1;stroke:none" />
+</svg>
--- a/www/img/error.svg
+++ b/www/img/error.svg
@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 403.11311 352.57208"
+   height="352.57208"
+   width="403.11313">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-146.20776,-255.22513)"
+     id="layer1">
+    <path
+       id="rect4361"
+       d="m 347.66381,255.22727 c -2.39231,-0.0413 -4.73078,0.51333 -6.84028,1.73125 -0.17129,0.0989 -0.33632,0.20489 -0.50152,0.31068 -3.46803,1.83238 -6.64163,4.83846 -8.9265,8.79597 L 149.3802,581.32449 c -1.6698,2.89218 -2.66186,5.942 -3.01901,8.90436 -0.0972,0.63442 -0.15343,1.27896 -0.15343,1.93506 0,0.0717 0.006,0.14227 0.007,0.21374 -0.0963,5.80318 2.31129,11.01809 6.93341,13.68667 2.80598,1.62003 6.01719,2.06551 9.22115,1.49768 1.09798,0.15203 2.22613,0.23511 3.38007,0.23511 l 364.02986,0 c 1.15394,0 2.28208,-0.0831 3.38006,-0.23511 3.20397,0.56784 6.41517,0.12236 9.22115,-1.49768 4.62213,-2.66858 7.02968,-7.88349 6.93342,-13.68667 10e-4,-0.0715 0.007,-0.14204 0.007,-0.21374 0,-0.65241 -0.0551,-1.29339 -0.15114,-1.92438 -0.35605,-2.9657 -1.34949,-6.01938 -3.0213,-8.91504 L 364.13287,266.06517 c -2.28487,-3.95751 -5.45847,-6.96359 -8.9265,-8.79597 -0.1652,-0.10579 -0.33023,-0.21179 -0.50151,-0.31068 -2.13906,-1.23499 -4.51373,-1.78539 -6.94105,-1.72667 -0.0333,-8.1e-4 -0.0667,-0.004 -0.1,-0.005 z m 0.1,45.01872 159.51359,276.28473 -319.0264,0 159.51281,-276.28473 z"
+       style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <g
+       id="text4409"
+       style="font-style:normal;font-weight:normal;font-size:278.96676636px;line-height:125%;font-family:sans-serif;letter-spacing:-54.46826553px;word-spacing:0px;opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       id="path4414"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:278.96676636px;line-height:125%;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;letter-spacing:-54.46826553px;word-spacing:0px;opacity:0.5;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 360.21586,429.25521 q 0,20.10017 -1.49418,36.61102 -1.49418,16.27157 -3.73546,32.54313 l -14.4438,0 q -2.24128,-16.27156 -3.73546,-32.54313 -1.49419,-16.51085 -1.49419,-36.61102 l 0,-44.98609 24.90309,0 0,44.98609 z m 4.23352,107.91877 q 0,6.46077 -4.48255,11.24653 -4.48255,4.78575 -12.20252,4.78575 -7.71995,0 -12.20251,-4.78575 -4.48255,-4.78576 -4.48255,-11.24653 0,-6.46076 4.48255,-11.24652 4.48256,-4.78576 12.20251,-4.78576 7.71997,0 12.20252,4.78576 4.48255,4.78576 4.48255,11.24652 z" />
+  </g>
+</svg>
--- a/www/index.html
+++ b/www/index.html
@ -9,6 +9,7 @@
        <link rel="stylesheet" href="css/font-awesome.min.css" />
        <link rel="stylesheet" href="css/material-color.min.css" />
        <link rel="stylesheet" href="css/app.css" />
+        <link rel="stylesheet" href="css/spinner.css" />

        <script src="cordova.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
@ -19,11 +20,25 @@
        <div id="modal-load-box" class="container" style='z-index: 1000;'>

        </div>
-        <div id="content-zone" class="container">

+        <nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">
+            <div class="container-fluid">
+                <div class="navbar-header" id="navbar-header">
+                    <span class="navbar-brand" style="color: white;">Business</span>
+                </div>
+            </div>
+        </nav>
+
+        <div id="content-zone" class="container" style="margin-top: 75px;">
+            <div class="app-dock-container">
+                <div class="app-dock" id="app-dock">
+                    <div style="margin-top: 50px;">
+                        <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+                        </svg>
+                    </div>
+                </div>
+            </div>
        </div>
-        <script>
-            
-        </script>
    </body>
 </html>
--- a/www/js/app.js
+++ b/www/js/app.js
@ -7,7 +7,7 @@ $(document).ready(function () {

    if (localStorage.getItem("setupcomplete")) {
        getuserinfo(function () {
-           openscreen("home");
+            openscreen("home");
        });
    } else {
        openscreen("setup1");
@ -26,9 +26,11 @@ function getuserinfo(callback) {
            callback();
        } else {
            navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
+            openscreen("homeloaderror");
        }
    }, "json").fail(function () {
        navigator.notification.alert("Could not connect to the server.  Try again later.", null, "Error", 'Dismiss');
+        openscreen("homeloaderror");
    });
 }

@ -76,6 +78,27 @@ function openfragment(fragment, target, effect) {
    }
 }

+function setnavbar(type) {
+    var navbar = $('#navbar-header');
+    if (type == false) {
+        $('#navbar').css('display', 'none');
+        $('#content-zone').css('margin-top', '0px');
+    } else {
+        $('#navbar').css('display', 'initial');
+        $('#content-zone').css('margin-top', '75px');
+        switch (type) {
+            case "home":
+                navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right" onclick="openscreen(\'settings\')"><img src="icons/ic_settings.svg" alt="" /></span>');
+                break;
+            case "settings":
+                navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand" style="color: white;" onclick="openscreen(\'home\')">Settings</span>');
+                break;
+            default:
+                navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
+        }
+    }
+}
+
 /**
 * Opens a modal dialog over the top of everything else.
 * @param {String} filename screens/[filename].html
--- a/www/js/sidemenu.js
+++ b/www/js/sidemenu.js
@ -47,7 +47,7 @@ $(document).ready(function () {
    var menucolor = $('.navbar').css('background-color');
    var textcolor = $('.navbar .navbar-nav > li > a').css('color');
    var logo = "%%LOGO%%";
-    $('body').append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul></div>");
+    $('body').append("<div id='swipe-nav'><div id='swipe-header' style='background-color: " + menucolor + "; color: " + textcolor + "'><a href='./app.php'><img id='swipe-appicon' src='" + logo + "' /></a> <div id='swipe-username'><i class='fa fa-user fa-fw'></i> " + username + "</div></div>\n<ul id='swipe-pages'>" + pages + "</ul><ul><li><a onclick='quitapp()'><i class='fa fa-sign-out fa-fw'></i> Back to Menu</a></li></ul></div>");
    $('body').append("<div id='swipe-shader'></div>");

    $('button.navbar-toggle[data-toggle="collapse"]').click(togglemenu);
@ -66,4 +66,8 @@ $(document).ready(function () {
    Hammer(document.body).on("swipeleft", function (e) {
        closemenu();
    });
-});
+});
+
+function quitapp() {
+    parent.postMessage('quit','*');
+}
--- a/www/views/app.html
+++ b/www/views/app.html
@ -1,8 +1,8 @@
-<div id="apploadershade" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; background-color: rgba(0,0,0,0.5); display: none;"></div>
-<iframe id="appframe" src="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; border: 0px;"></iframe>
+<iframe id="appframe" src="views/appspinner.html" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; border: 0px;"></iframe>

 <script>
    function launchapp(id, api, url, icon, title) {
+        setnavbar(false);
        $.post(url + api, {
            username: localStorage.getItem("username"),
            key: localStorage.getItem("key"),
@ -11,14 +11,12 @@
        }, function (data) {
            if (data.status === 'OK') {
                $('#appframe').on("load", function () {
-                    $('#apploadershade').css('display', 'block');
                    $.get("css/sidemenu.css", function (style) {
                        $('#appframe').contents().find('head').append("<style>" + style + "</style>");
                        $.get("js/sidemenu.js", function (script) {
                            script = script.replace("%%USERNAME%%", userinfo.realname);
                            script = script.replace("%%LOGO%%", icon);
                            $('#appframe').contents().find('body').append("<script>" + script + "<\/script>");
-                            $('#apploadershade').css('display', 'none');
                        });
                    });
                });
@ -32,4 +30,13 @@
            openscreen("home");
        });
    }
+
+    window.addEventListener('message', function (event) {
+        console.log(event.data);
+        switch (event.data) {
+            case "quit":
+                openscreen("home");
+                break;
+        }
+    }, false);
 </script>
--- a/www/views/appspinner.html
+++ b/www/views/appspinner.html
@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Loading</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            html, body {
+                height: 100%;
+            }
+
+            body {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .spinner {
+                -webkit-animation: rotator 1.4s linear infinite;
+                animation: rotator 1.4s linear infinite;
+            }
+
+            @-webkit-keyframes rotator {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(270deg);
+                    transform: rotate(270deg);
+                }
+            }
+
+            @keyframes rotator {
+                0% {
+                    -webkit-transform: rotate(0deg);
+                    transform: rotate(0deg);
+                }
+                100% {
+                    -webkit-transform: rotate(270deg);
+                    transform: rotate(270deg);
+                }
+            }
+            .spinner .path {
+                stroke-dasharray: 187;
+                stroke-dashoffset: 0;
+                -webkit-transform-origin: center;
+                transform-origin: center;
+                -webkit-animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
+                animation: dash 1.4s ease-in-out infinite, 5.6s ease-in-out infinite;
+                stroke: #448aff;    
+            }
+
+            @-webkit-keyframes dash {
+                0% {
+                    stroke-dashoffset: 187;
+                }
+                50% {
+                    stroke-dashoffset: 46.75;
+                    -webkit-transform: rotate(135deg);
+                    transform: rotate(135deg);
+                }
+                100% {
+                    stroke-dashoffset: 187;
+                    -webkit-transform: rotate(450deg);
+                    transform: rotate(450deg);
+                }
+            }
+
+            @keyframes dash {
+                0% {
+                    stroke-dashoffset: 187;
+                }
+                50% {
+                    stroke-dashoffset: 46.75;
+                    -webkit-transform: rotate(135deg);
+                    transform: rotate(135deg);
+                }
+                100% {
+                    stroke-dashoffset: 187;
+                    -webkit-transform: rotate(450deg);
+                    transform: rotate(450deg);
+                }
+            }
+
+        </style>
+    </head>
+    <body>
+        <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+        </svg>
+    </body>
+</html>
--- a/www/views/home.html
+++ b/www/views/home.html
@ -1,7 +1,10 @@
-<br />
 <div class="app-dock-container">
    <div class="app-dock" id="app-dock">
-
+        <div style="margin-top: 50px;">
+            <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+            </svg>
+        </div>
    </div>
 </div>

@ -11,7 +14,7 @@
            launchapp(id, api, url, icon, title);
        });
    }
-    
+
    function loadapps() {
        $.post(localStorage.getItem("portalurl"), {
            username: localStorage.getItem("username"),
@ -19,6 +22,7 @@
            action: "listapps"
        }, function (data) {
            if (data.status === 'OK') {
+                $('#app-dock').html("");
                Object.keys(data.apps).forEach(function (k) {
                    var app = data.apps[k];
                    var iconurl = app.icon;
@ -29,11 +33,14 @@
                });
            } else {
                navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
+                openscreen("homeloaderror");
            }
        }, "json").fail(function () {
            navigator.notification.alert("Could not connect to the server.  Try again later.", null, "Error", 'Dismiss');
+            openscreen("homeloaderror");
        });
    }
-    
+
+    setnavbar("home");
    loadapps();
 </script>
--- a/www/views/homeloaderror.html
+++ b/www/views/homeloaderror.html
@ -0,0 +1,16 @@
+<div class="app-dock-container">
+    <div class="app-dock" id="app-dock">
+        <div style="margin-top: 50px; text-align: center; font-size: 120%;">
+            <img src="img/error.svg" alt="" style="max-width: 80%; max-height: 33%;" />
+            <br /><br />
+            Could not load application data from server.
+            <br />
+            <div class="btn btn-blue" onclick="openscreen('home')">
+                Try again
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    setnavbar('home');
+</script>
--- a/www/views/settings.html
+++ b/www/views/settings.html
@ -1,5 +1,28 @@
 <div class="list-group">
-    <div class="list-group-item">
-        
+    <div class="list-group-item" onclick="deleteall()">
+	<b>Log out and unpair</b>
+	<p>Forget all stored user data.  You will need to run the setup again.</p>
    </div>
-</div>
+</div>
+
+<script>
+    setnavbar("settings");
+
+    function deleteall() {
+	navigator.notification.confirm("Really wipe user data?  You will need to resync the app with Portal to use it again.", function (result) {
+		if (result != 1) {
+			return;
+		}
+		// Wipe localStorage
+		localStorage.removeItem("setupcomplete");
+		localStorage.removeItem("username");
+		localStorage.removeItem("portalurl");
+		localStorage.removeItem("key");
+		localStorage.clear();
+		// force-reload app
+		navigator.notification.alert("Connection data and credentials erased.", function () {
+		    document.location.href = "index.html";
+		}, "App Reset", 'Continue');
+	}, "Are you sure?");
+    }
+</script>
--- a/www/views/setup1.html
+++ b/www/views/setup1.html
@ -57,4 +57,6 @@
            navigator.notification.alert(ex.message, null, "Error", 'Dismiss');
        }
    }
+    
+    setnavbar("home");
 </script>
--- a/www/views/setup2.html
+++ b/www/views/setup2.html
@ -34,4 +34,6 @@
            navigator.notification.alert("Could not connect to the server.  Try again later.", null, "Error", 'Dismiss');
        });
    }
+    
+    setnavbar("home");
 </script>