Add manual setup, add header/status bar colors, add polyfill for String.prototype.startsWith, add setting button to open Portal,

add .mobile-app-hide class to injected CSS, fix a bunch of bugs,
improve layout of app loading spinner, improve overall smoothness,
test and debug on Android 4.4.2
Framework7
Skylar Ittner 7 years ago
parent 446071b8eb
commit bdb87a25bf

@ -16,9 +16,15 @@
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<icon src="icon.png" />
<preference name="StatusBarBackgroundColor" value="#2196f3" />
<platform name="android">
<allow-intent href="market:*" />
<preference name="AndroidLaunchMode" value="singleTop" />
<preference name="android-minSdkVersion" value="19" />
<preference name="android-targetSdkVersion" value="25" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="HeaderColor" value="#2196f3" />
<preference name="StatusBarBackgroundColor" value="#1976d2" />
<splash qualifier="ldpi" src="res/screens/android/screen-ldpi-portrait.png" />
<splash qualifier="mdpi" src="res/screens/android/screen-mdpi-portrait.png" />
<splash qualifier="hdpi" src="res/screens/android/screen-hdpi-portrait.png" />
@ -52,10 +58,13 @@
</platform>
<preference name="SplashScreenDelay" value="3000" />
<engine name="android" spec="^6.2.3" />
<engine name="browser" spec="^4.1.0" />
<plugin name="cordova-plugin-console" spec="git+https://github.com/apache/cordova-plugin-console.git" />
<plugin name="cordova-plugin-device" spec="git+https://github.com/apache/cordova-plugin-device.git" />
<plugin name="cordova-plugin-dialogs" spec="git+https://github.com/apache/cordova-plugin-dialogs.git" />
<plugin name="cordova-plugin-headercolor" spec="^1.0.0" />
<plugin name="cordova-plugin-splashscreen" spec="git+https://github.com/apache/cordova-plugin-splashscreen.git" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.3" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
<plugin name="phonegap-plugin-barcodescanner" spec="^6.0.6" />
</widget>

@ -4,3 +4,5 @@ cordova-plugin-splashscreen=https://github.com/apache/cordova-plugin-splashscree
cordova-plugin-console=https://github.com/apache/cordova-plugin-console.git
cordova-plugin-whitelist=https://github.com/apache/cordova-plugin-whitelist.git
phonegap-plugin-barcodescanner=https://github.com/phonegap/phonegap-plugin-barcodescanner.git
cordova-plugin-statusbar=https://github.com/apache/cordova-plugin-statusbar.git
cordova-plugin-headercolor=https://github.com/tomloprod/cordova-plugin-headercolor.git

341
package-lock.json generated

@ -145,6 +145,337 @@
}
}
},
"cordova-browser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/cordova-browser/-/cordova-browser-4.1.0.tgz",
"integrity": "sha1-dQeQZeXNUKpnQ8vYUxdhcFP7IMY=",
"dependencies": {
"adm-zip": {
"version": "0.4.7",
"bundled": true
},
"cordova-serve": {
"version": "1.0.0",
"bundled": true,
"dependencies": {
"chalk": {
"version": "1.1.1",
"bundled": true,
"dependencies": {
"ansi-styles": {
"version": "2.2.0",
"bundled": true,
"dependencies": {
"color-convert": {
"version": "1.0.0",
"bundled": true
}
}
},
"escape-string-regexp": {
"version": "1.0.5",
"bundled": true
},
"has-ansi": {
"version": "2.0.0",
"bundled": true,
"dependencies": {
"ansi-regex": {
"version": "2.0.0",
"bundled": true
}
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"dependencies": {
"ansi-regex": {
"version": "2.0.0",
"bundled": true
}
}
},
"supports-color": {
"version": "2.0.0",
"bundled": true
}
}
},
"compression": {
"version": "1.6.1",
"bundled": true,
"dependencies": {
"accepts": {
"version": "1.3.1",
"bundled": true,
"dependencies": {
"mime-types": {
"version": "2.1.10",
"bundled": true,
"dependencies": {
"mime-db": {
"version": "1.22.0",
"bundled": true
}
}
},
"negotiator": {
"version": "0.6.0",
"bundled": true
}
}
},
"bytes": {
"version": "2.2.0",
"bundled": true
},
"compressible": {
"version": "2.0.7",
"bundled": true,
"dependencies": {
"mime-db": {
"version": "1.22.0",
"bundled": true
}
}
},
"debug": {
"version": "2.2.0",
"bundled": true,
"dependencies": {
"ms": {
"version": "0.7.1",
"bundled": true
}
}
},
"on-headers": {
"version": "1.0.1",
"bundled": true
},
"vary": {
"version": "1.1.0",
"bundled": true
}
}
},
"express": {
"version": "4.13.4",
"bundled": true,
"dependencies": {
"accepts": {
"version": "1.2.13",
"bundled": true,
"dependencies": {
"mime-types": {
"version": "2.1.10",
"bundled": true,
"dependencies": {
"mime-db": {
"version": "1.22.0",
"bundled": true
}
}
},
"negotiator": {
"version": "0.5.3",
"bundled": true
}
}
},
"array-flatten": {
"version": "1.1.1",
"bundled": true
},
"content-disposition": {
"version": "0.5.1",
"bundled": true
},
"content-type": {
"version": "1.0.1",
"bundled": true
},
"cookie": {
"version": "0.1.5",
"bundled": true
},
"cookie-signature": {
"version": "1.0.6",
"bundled": true
},
"debug": {
"version": "2.2.0",
"bundled": true,
"dependencies": {
"ms": {
"version": "0.7.1",
"bundled": true
}
}
},
"depd": {
"version": "1.1.0",
"bundled": true
},
"escape-html": {
"version": "1.0.3",
"bundled": true
},
"etag": {
"version": "1.7.0",
"bundled": true
},
"finalhandler": {
"version": "0.4.1",
"bundled": true,
"dependencies": {
"unpipe": {
"version": "1.0.0",
"bundled": true
}
}
},
"fresh": {
"version": "0.3.0",
"bundled": true
},
"merge-descriptors": {
"version": "1.0.1",
"bundled": true
},
"methods": {
"version": "1.1.2",
"bundled": true
},
"on-finished": {
"version": "2.3.0",
"bundled": true,
"dependencies": {
"ee-first": {
"version": "1.1.1",
"bundled": true
}
}
},
"parseurl": {
"version": "1.3.1",
"bundled": true
},
"path-to-regexp": {
"version": "0.1.7",
"bundled": true
},
"proxy-addr": {
"version": "1.0.10",
"bundled": true,
"dependencies": {
"forwarded": {
"version": "0.1.0",
"bundled": true
},
"ipaddr.js": {
"version": "1.0.5",
"bundled": true
}
}
},
"qs": {
"version": "4.0.0",
"bundled": true
},
"range-parser": {
"version": "1.0.3",
"bundled": true
},
"send": {
"version": "0.13.1",
"bundled": true,
"dependencies": {
"destroy": {
"version": "1.0.4",
"bundled": true
},
"http-errors": {
"version": "1.3.1",
"bundled": true,
"dependencies": {
"inherits": {
"version": "2.0.1",
"bundled": true
}
}
},
"mime": {
"version": "1.3.4",
"bundled": true
},
"ms": {
"version": "0.7.1",
"bundled": true
},
"statuses": {
"version": "1.2.1",
"bundled": true
}
}
},
"serve-static": {
"version": "1.10.2",
"bundled": true
},
"type-is": {
"version": "1.6.12",
"bundled": true,
"dependencies": {
"media-typer": {
"version": "0.3.0",
"bundled": true
},
"mime-types": {
"version": "2.1.10",
"bundled": true,
"dependencies": {
"mime-db": {
"version": "1.22.0",
"bundled": true
}
}
}
}
},
"utils-merge": {
"version": "1.0.0",
"bundled": true
},
"vary": {
"version": "1.0.1",
"bundled": true
}
}
}
}
},
"nopt": {
"version": "3.0.6",
"bundled": true,
"dependencies": {
"abbrev": {
"version": "1.0.7",
"bundled": true
}
}
},
"q": {
"version": "1.4.1",
"bundled": true
},
"shelljs": {
"version": "0.6.0",
"bundled": true
}
}
},
"cordova-plugin-compat": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-compat/-/cordova-plugin-compat-1.1.0.tgz",
@ -164,9 +495,19 @@
"cordova-plugin-dialogs": {
"version": "git+https://github.com/apache/cordova-plugin-dialogs.git#a22b0eb7fd013e5b50486ebc54e6396780cad999"
},
"cordova-plugin-headercolor": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/cordova-plugin-headercolor/-/cordova-plugin-headercolor-1.0.0.tgz",
"integrity": "sha1-AgrNlDeH7gOdZ/Z56NnqbTiSAxY="
},
"cordova-plugin-splashscreen": {
"version": "git+https://github.com/apache/cordova-plugin-splashscreen.git#98f83fea5ae58fb50962af2725310cc199b28f40"
},
"cordova-plugin-statusbar": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/cordova-plugin-statusbar/-/cordova-plugin-statusbar-2.2.3.tgz",
"integrity": "sha1-UcXgKtQzvr0LDcl3pEbrkd/uFQI="
},
"cordova-plugin-whitelist": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.2.tgz",

@ -8,12 +8,15 @@
"license": "netsyms-business-license",
"dependencies": {
"cordova-android": "^6.2.3",
"cordova-browser": "^4.1.0",
"cordova-plugin-compat": "^1.1.0",
"cordova-plugin-console": "git+https://github.com/apache/cordova-plugin-console.git",
"cordova-plugin-device": "git+https://github.com/apache/cordova-plugin-device.git",
"cordova-plugin-dialog": "0.0.1",
"cordova-plugin-dialogs": "git+https://github.com/apache/cordova-plugin-dialogs.git",
"cordova-plugin-headercolor": "^1.0.0",
"cordova-plugin-splashscreen": "git+https://github.com/apache/cordova-plugin-splashscreen.git",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"phonegap-plugin-barcodescanner": "^6.0.6"
},
@ -24,10 +27,13 @@
"cordova-plugin-device": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-splashscreen": {}
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-headercolor": {}
},
"platforms": [
"android"
"android",
"browser"
]
}
}

@ -62,3 +62,7 @@ span.navbar-brand {
height: 30px;
margin-top: -4px;
}
#manual_setup {
margin-top: 15px;
}

@ -0,0 +1,10 @@
/*
A tiny bit of CSS to inject into apps even if injectcode = false.
This hides items in the app with the class mobile-app-hide.
*/
.mobile-app-hide {
display: none;
visibility: hidden;
}

@ -8,6 +8,11 @@
visibility: hidden;
}
.mobile-app-hide {
display: none;
visibility: hidden;
}
@media screen and (max-width: 767px) {
#navbar-collapse {
display: none;

@ -14,6 +14,7 @@
<script src="cordova.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/polyfills.js"></script>
<script src="js/app.js"></script>
</head>
<body>

@ -14,6 +14,18 @@ $(document).ready(function () {
}
});
document.addEventListener("deviceready", function () {
if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString("#1976d2");
}
}, false);
/**
* Fetch user info (name, email, etc) from the server and save to the global
* variable `userinfo`.
* @param function callback An optional function to run if/when the request
* succeeds.
*/
function getuserinfo(callback) {
$.post(localStorage.getItem("portalurl"), {
username: localStorage.getItem("username"),
@ -23,7 +35,9 @@ function getuserinfo(callback) {
}, function (data) {
if (data.status === 'OK') {
userinfo = data.info;
callback();
if (typeof callback == 'function') {
callback();
}
} else {
navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
openscreen("homeloaderror");
@ -57,7 +71,6 @@ function openscreen(screenname, effect) {
$('#content-zone').load("views/" + screenname + ".html");
}
currentscreen = screenname;
updateStatusBarColor();
}
function openfragment(fragment, target, effect) {
@ -78,12 +91,26 @@ function openfragment(fragment, target, effect) {
}
}
function setnavbar(type) {
/**
* Set the navbar.
* @param String,boolean type false if no navbar, "home" for the home screen,
* "settings" for settings, "app" for a custom title, or anything else for
* a simple one.
* @param String title The title to show if type == "app"
* @returns {undefined}
*/
function setnavbar(type, title) {
var navbar = $('#navbar-header');
if (type == false) {
$('#navbar').css('display', 'none');
$('#content-zone').css('margin-top', '0px');
} else {
if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString("#1976d2");
window.plugins.headerColor.tint("#2196f3");
} else {
StatusBar.backgroundColorByHexString("#2196f3");
}
$('#navbar').css('display', 'initial');
$('#content-zone').css('margin-top', '75px');
switch (type) {
@ -93,12 +120,32 @@ function setnavbar(type) {
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;
case "app":
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\')">' + title + '</span>');
break;
default:
navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
}
}
}
/**
* Load the app.html view and open an app with native Android UI elements
* @param String id Application ID
* @param String api Path to the mobile API
* @param String url Base URL of the app
* @param String icon URL to the app icon
* @param String title Friendly app name
* @param boolean injectcode (optional, default true) Whether or not to inject UI modification code into the app
* @param boolean shownavbar (optional, default false) Whether or not to show the navbar at the top of the screen.
* @returns {undefined}
*/
function openapp(id, api, url, icon, title, injectcode, shownavbar) {
$('#content-zone').load("views/app.html", function () {
launchapp(id, api, url, icon, title, injectcode, shownavbar);
});
}
/**
* Opens a modal dialog over the top of everything else.
* @param {String} filename screens/[filename].html

@ -0,0 +1,320 @@
/*
Based on the file
https://github.com/srekanui/google-material-color-palette-json/blob/master/lib/palette.json
MIT License
Copyright (c) 2016 Sravan Kumar Rekandar
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
_PALETTE = {
"red": {
"shade_50": "#ffebee",
"shade_100": "#ffcdd2",
"shade_200": "#ef9a9a",
"shade_300": "#e57373",
"shade_400": "#ef5350",
"shade_500": "#f44336",
"shade_600": "#e53935",
"shade_700": "#d32f2f",
"shade_800": "#c62828",
"shade_900": "#b71c1c",
"shade_A100": "#ff8a80",
"shade_A200": "#ff5252",
"shade_A400": "#ff1744",
"shade_A700": "#d50000"
},
"pink": {
"shade_50": "#fce4ec",
"shade_100": "#f8bbd0",
"shade_200": "#f48fb1",
"shade_300": "#f06292",
"shade_400": "#ec407a",
"shade_500": "#e91e63",
"shade_600": "#d81b60",
"shade_700": "#c2185b",
"shade_800": "#ad1457",
"shade_900": "#880e4f",
"shade_A100": "#ff80ab",
"shade_A200": "#ff4081",
"shade_A400": "#f50057",
"shade_A700": "#c51162"
},
"purple": {
"shade_50": "#f3e5f5",
"shade_100": "#e1bee7",
"shade_200": "#ce93d8",
"shade_300": "#ba68c8",
"shade_400": "#ab47bc",
"shade_500": "#9c27b0",
"shade_600": "#8e24aa",
"shade_700": "#7b1fa2",
"shade_800": "#6a1b9a",
"shade_900": "#4a148c",
"shade_A100": "#ea80fc",
"shade_A200": "#e040fb",
"shade_A400": "#d500f9",
"shade_A700": "#aa00ff"
},
"deepPurple": {
"shade_50": "#ede7f6",
"shade_100": "#d1c4e9",
"shade_200": "#b39ddb",
"shade_300": "#9575cd",
"shade_400": "#7e57c2",
"shade_500": "#673ab7",
"shade_600": "#5e35b1",
"shade_700": "#512da8",
"shade_800": "#4527a0",
"shade_900": "#311b92",
"shade_A100": "#b388ff",
"shade_A200": "#7c4dff",
"shade_A400": "#651fff",
"shade_A700": "#6200ea"
},
"indigo": {
"shade_50": "#e8eaf6",
"shade_100": "#c5cae9",
"shade_200": "#9fa8da",
"shade_300": "#7986cb",
"shade_400": "#5c6bc0",
"shade_500": "#3f51b5",
"shade_600": "#3949ab",
"shade_700": "#303f9f",
"shade_800": "#283593",
"shade_900": "#1a237e",
"shade_A100": "#8c9eff",
"shade_A200": "#536dfe",
"shade_A400": "#3d5afe",
"shade_A700": "#304ffe"
},
"blue": {
"shade_50": "#e3f2fd",
"shade_100": "#bbdefb",
"shade_200": "#90caf9",
"shade_300": "#64b5f6",
"shade_400": "#42a5f5",
"shade_500": "#2196f3",
"shade_600": "#1e88e5",
"shade_700": "#1976d2",
"shade_800": "#1565c0",
"shade_900": "#0d47a1",
"shade_A100": "#82b1ff",
"shade_A200": "#448aff",
"shade_A400": "#2979ff",
"shade_A700": "#2962ff"
},
"lightBlue": {
"shade_50": "#e1f5fe",
"shade_100": "#b3e5fc",
"shade_200": "#81d4fa",
"shade_300": "#4fc3f7",
"shade_400": "#29b6f6",
"shade_500": "#03a9f4",
"shade_600": "#039be5",
"shade_700": "#0288d1",
"shade_800": "#0277bd",
"shade_900": "#01579b",
"shade_A100": "#80d8ff",
"shade_A200": "#40c4ff",
"shade_A400": "#00b0ff",
"shade_A700": "#0091ea"
},
"cyan": {
"shade_50": "#e0f7fa",
"shade_100": "#b2ebf2",
"shade_200": "#80deea",
"shade_300": "#4dd0e1",
"shade_400": "#26c6da",
"shade_500": "#00bcd4",
"shade_600": "#00acc1",
"shade_700": "#0097a7",
"shade_800": "#00838f",
"shade_900": "#006064",
"shade_A100": "#84ffff",
"shade_A200": "#18ffff",
"shade_A400": "#00e5ff",
"shade_A700": "#00b8d4"
},
"teal": {
"shade_50": "#e0f2f1",
"shade_100": "#b2dfdb",
"shade_200": "#80cbc4",
"shade_300": "#4db6ac",
"shade_400": "#26a69a",
"shade_500": "#009688",
"shade_600": "#00897b",
"shade_700": "#00796b",
"shade_800": "#00695c",
"shade_900": "#004d40",
"shade_A100": "#a7ffeb",
"shade_A200": "#64ffda",
"shade_A400": "#1de9b6",
"shade_A700": "#00bfa5"
},
"green": {
"shade_50": "#e8f5e9",
"shade_100": "#c8e6c9",
"shade_200": "#a5d6a7",
"shade_300": "#81c784",
"shade_400": "#66bb6a",
"shade_500": "#4caf50",
"shade_600": "#43a047",
"shade_700": "#388e3c",
"shade_800": "#2e7d32",
"shade_900": "#1b5e20",
"shade_A100": "#b9f6ca",
"shade_A200": "#69f0ae",
"shade_A400": "#00e676",
"shade_A700": "#00c853"
},
"lightGreen": {
"shade_50": "#f1f8e9",
"shade_100": "#dcedc8",
"shade_200": "#c5e1a5",
"shade_300": "#aed581",
"shade_400": "#9ccc65",
"shade_500": "#8bc34a",
"shade_600": "#7cb342",
"shade_700": "#689f38",
"shade_800": "#558b2f",
"shade_900": "#33691e",
"shade_A100": "#ccff90",
"shade_A200": "#b2ff59",
"shade_A400": "#76ff03",
"shade_A700": "#64dd17"
},
"lime": {
"shade_50": "#f9fbe7",
"shade_100": "#f0f4c3",
"shade_200": "#e6ee9c",
"shade_300": "#dce775",
"shade_400": "#d4e157",
"shade_500": "#cddc39",
"shade_600": "#c0ca33",
"shade_700": "#afb42b",
"shade_800": "#9e9d24",
"shade_900": "#827717",
"shade_A100": "#f4ff81",
"shade_A200": "#eeff41",
"shade_A400": "#c6ff00",
"shade_A700": "#aeea00"
},
"yellow": {
"shade_50": "#fffde7",
"shade_100": "#fff9c4",
"shade_200": "#fff59d",
"shade_300": "#fff176",
"shade_400": "#ffee58",
"shade_500": "#ffeb3b",
"shade_600": "#fdd835",
"shade_700": "#fbc02d",
"shade_800": "#f9a825",
"shade_900": "#f57f17",
"shade_A100": "#ffff8d",
"shade_A200": "#ffff00",
"shade_A400": "#ffea00",
"shade_A700": "#ffd600"
},
"amber": {
"shade_50": "#fff8e1",
"shade_100": "#ffecb3",
"shade_200": "#ffe082",
"shade_300": "#ffd54f",
"shade_400": "#ffca28",
"shade_500": "#ffc107",
"shade_600": "#ffb300",
"shade_700": "#ffa000",
"shade_800": "#ff8f00",
"shade_900": "#ff6f00",
"shade_A100": "#ffe57f",
"shade_A200": "#ffd740",
"shade_A400": "#ffc400",
"shade_A700": "#ffab00"
},
"orange": {
"shade_50": "#fff3e0",
"shade_100": "#ffe0b2",
"shade_200": "#ffcc80",
"shade_300": "#ffb74d",
"shade_400": "#ffa726",
"shade_500": "#ff9800",
"shade_600": "#fb8c00",
"shade_700": "#f57c00",
"shade_800": "#ef6c00",
"shade_900": "#e65100",
"shade_A100": "#ffd180",
"shade_A200": "#ffab40",
"shade_A400": "#ff9100",
"shade_A700": "#ff6d00"
},
"deepOrange": {
"shade_50": "#fbe9e7",
"shade_100": "#ffccbc",
"shade_200": "#ffab91",
"shade_300": "#ff8a65",
"shade_400": "#ff7043",
"shade_500": "#ff5722",
"shade_600": "#f4511e",
"shade_700": "#e64a19",
"shade_800": "#d84315",
"shade_900": "#bf360c",
"shade_A100": "#ff9e80",
"shade_A200": "#ff6e40",
"shade_A400": "#ff3d00",
"shade_A700": "#dd2c00"
},
"brown": {
"shade_50": "#efebe9",
"shade_100": "#d7ccc8",
"shade_200": "#bcaaa4",
"shade_300": "#a1887f",
"shade_400": "#8d6e63",
"shade_500": "#795548",
"shade_600": "#6d4c41",
"shade_700": "#5d4037",
"shade_800": "#4e342e",
"shade_900": "#3e2723"
},
"grey": {
"shade_50": "#fafafa",
"shade_100": "#f5f5f5",
"shade_200": "#eeeeee",
"shade_300": "#e0e0e0",
"shade_400": "#bdbdbd",
"shade_500": "#9e9e9e",
"shade_600": "#757575",
"shade_700": "#616161",
"shade_800": "#424242",
"shade_900": "#212121"
},
"blueGrey": {
"shade_50": "#eceff1",
"shade_100": "#cfd8dc",
"shade_200": "#b0bec5",
"shade_300": "#90a4ae",
"shade_400": "#78909c",
"shade_500": "#607d8b",
"shade_600": "#546e7a",
"shade_700": "#455a64",
"shade_800": "#37474f",
"shade_900": "#263238"
}
}

@ -0,0 +1,7 @@
// https://stackoverflow.com/a/33106217
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str) {
return this.indexOf(str) === 0;
};
}

@ -17,6 +17,29 @@
/*
* sidemenu.js
*/
// This code from
// https://stackoverflow.com/a/6177502
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle)
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
if (bg.search("rgb") == -1)
return bg;
else {
bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
}
}
function openmenu() {
if ($('#swipe-nav').css('display') == 'none') {
$('#swipe-shader').show("fade", {}, 300);
@ -44,12 +67,14 @@ $(document).ready(function () {
var user = $('#navbar-collapse .navbar-right').html();
//$('body').append("<div id='swipe-nav'><div id='swipe-header'></div>\n<ul id='swipe-pages'>" + pages + "</ul>\n<ul id='swipe-user'>" + user + "</ul></div>");
var username = "%%USERNAME%%";
var menucolor = $('.navbar').css('background-color');
var menucolor = $('.navbar').css('backgroundColor');
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><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>");
parent.postMessage("setcolor " + menucolor, "*");
$('button.navbar-toggle[data-toggle="collapse"]').click(togglemenu);
$('#swipe-shader').click(togglemenu);

@ -1,8 +1,25 @@
<iframe id="appframe" src="views/appspinner.html" 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%; border: 0px;"></iframe>
<script src="js/material-palette.js"></script>
<script>
function launchapp(id, api, url, icon, title) {
setnavbar(false);
/**
* Open an app with native Android UI elements
* @param String id Application ID
* @param String api Path to the mobile API
* @param String url Base URL of the app
* @param String icon URL to the app icon
* @param String title Friendly app name
* @param boolean injectcode (optional, default true) Whether or not to inject UI modification code into the app
* @param boolean shownavbar (optional, default false) Whether or not to show the navbar at the top of the screen.
* @returns {undefined}
*/
function launchapp(id, api, url, icon, title, injectcode, shownavbar) {
if (typeof shownavbar === 'undefined' || shownavbar === false) {
setnavbar(false);
} else {
setnavbar("app", title);
$('#appframe').css('top', '75px');
}
$.post(url + api, {
username: localStorage.getItem("username"),
key: localStorage.getItem("key"),
@ -10,16 +27,25 @@
action: "start_session"
}, function (data) {
if (data.status === 'OK') {
$('#appframe').on("load", function () {
$.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>");
if (typeof injectcode === 'undefined' || injectcode === true) {
$('#appframe').on("load", function () {
$.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>");
});
});
});
} else {
// Only inject minimal CSS
$('#appframe').on("load", function () {
$.get("css/inject_mini.css", function (style) {
$('#appframe').contents().find('head').append("<style>" + style + "</style>");
});
});
});
}
$('#appframe').attr('src', url);
} else {
navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
@ -33,10 +59,25 @@
window.addEventListener('message', function (event) {
console.log(event.data);
switch (event.data) {
case "quit":
openscreen("home");
break;
if (event.data == "quit") {
openscreen("home");
} else if (event.data.startsWith("setcolor ")) {
var color = event.data.split(" ", 2)[1];
if (cordova.platformId == 'android') {
window.plugins.headerColor.tint(color);
for (var swatch in _PALETTE) {
if (color == _PALETTE[swatch]["shade_500"]) {
StatusBar.backgroundColorByHexString(_PALETTE[swatch]["shade_700"]);
return;
}
}
} else {
StatusBar.backgroundColorByHexString(color);
}
}
}, false);
if (userinfo == null) {
getuserinfo();
}
</script>

@ -13,6 +13,7 @@
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.spinner {
@ -89,5 +90,7 @@
<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>
<p>Logging in...</p>
</body>
</html>

@ -9,12 +9,6 @@
</div>
<script>
function openapp(id, api, url, icon, title) {
$('#content-zone').load("views/app.html", function () {
launchapp(id, api, url, icon, title);
});
}
function loadapps() {
$.post(localStorage.getItem("portalurl"), {
username: localStorage.getItem("username"),
@ -41,6 +35,10 @@
});
}
setnavbar("home");
loadapps();
if (localStorage.getItem('setupcomplete')) {
setnavbar("home");
loadapps();
} else {
openscreen("setup1");
}
</script>

@ -1,7 +1,14 @@
<div class="list-group">
<div class="list-group-item" onclick="openportal()">
<b>Open Portal</b>
<p>Manage your account.</p>
</div>
</div>
<div class="list-group">
<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>
<p>Forget all stored user data and open the setup tool.</p>
</div>
</div>
@ -25,4 +32,8 @@
}, "App Reset", 'Continue');
}, "Are you sure?");
}
function openportal() {
openapp("portal", "/mobile/index.php", localStorage.getItem("portalurl").replace("/mobile/index.php", ""), "/static/img/logo.svg", "Portal", false, true);
}
</script>

@ -8,11 +8,111 @@
<br /><br />
Open Portal on another device and go to your account settings. Generate a mobile sync code, then press the button below to scan it.
</p>
<div class="btn btn-primary" onclick="scanCode()"><i class="fa fa-qrcode"></i> Scan Code</div>
<span class="btn btn-primary" onclick="scanCode()" id="scancodebtn">
<i class="fa fa-qrcode"></i> Scan Code
</span>
<span class="btn btn-link" onclick="manualshow()" id="manualsetupbtn">
Manual Setup
</span>
<div id="manual_setup" class="well" style="display: none;">
<input type="text" id="username" class="form-control" placeholder="Username" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" /> <br />
<input type="text" id="key" class="form-control" placeholder="Sync key" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" /> <br />
<div class="input-group" style="margin-left: -20px;">
<span class="input-group-addon" id="protocol-select">https://</span>
<input type="text" id="portalurl" class="form-control" placeholder="URL" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</div> <br />
<div class="checkbox">
<label>
<input type="checkbox" id="use-security" checked > Use secure connection
</label>
</div>
<br />
<div class="btn btn-primary" onclick="manualsetup()">
Continue
</div>
</div>
</div>
</div>
<script>
$('#use-security').click(function () {
if (this.checked) {
$('#protocol-select').text("https://");
} else {
$('#protocol-select').text("http://");
}
});
/* Detect if the user typed "http[s]://" into the URL box and correct for it */
$("#portalurl").blur(function () {
if ($('#portalurl').val().toLowerCase().startsWith("https://")) {
$('#portalurl').val($('#portalurl').val().replace(/https\:\/\//ig, ""));
$('#protocol-select').text("https://");
$('#use-security').prop('checked', true);
} else if ($('#portalurl').val().toLowerCase().startsWith("http://")) {
$('#portalurl').val($('#portalurl').val().replace(/http\:\/\//ig, ""));
$('#protocol-select').text("http://");
$('#use-security').prop('checked', false);
}
});
$("#key").on("keyup", function () {
if (window.getSelection().toString() !== '') {
return;
}
var text = $('#key').val().replace(/\s+/g, '');
var formatted = "";
for (var i = 1; i <= text.length; i++) {
formatted = formatted + text[i - 1];
if (i % 5 == 0 && i > 1 && i < text.length) {
// add a space every 5 characters,
// unless it's the first character
// or the last character
formatted = formatted + " ";
}
}
$('#key').val(formatted.toUpperCase());
});
$('#username').on("keyup", function () {
$('#username').val($('#username').val().toLowerCase());
});
function manualsetup() {
if ($('#portalurl').val().toLowerCase().startsWith("http")) {
var portal = $('#portalurl').val();
} else {
var portal = $('#protocol-select').text() + $('#portalurl').val();
}
var username = $('#username').val();
var key = $('#key').val().replace(/\s+/g, '');
checkAndSave(portal, username, key);
}
function manualshow() {
$('#manual_setup').css('display', 'block');
}
function checkAndSave(portal, username, key) {
$.post(portal, {
username: username,
key: key,
action: "check_key"
}, function (data) {
if (data.status === 'OK') {
localStorage.setItem("username", username);
localStorage.setItem("portalurl", portal);
localStorage.setItem("key", key);
openscreen("setup2");
} else {
navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
}
}, "json").fail(function () {
navigator.notification.alert("Could not connect to the server. Try again.", null, "Error", 'Dismiss');
});
}
function scanCode() {
try {
cordova.plugins.barcodeScanner.scan(
@ -27,22 +127,7 @@
var portal = parts[0].replace(/\\/g, "/");
var username = parts[1];
var key = parts[2];
$.post(portal, {
username: username,
key: key,
action: "check_key"
}, function (data) {
if (data.status === 'OK') {
localStorage.setItem("username", username);
localStorage.setItem("portalurl", portal);
localStorage.setItem("key", key);
openscreen("setup2");
} else {
navigator.notification.alert(data.msg, null, "Error", 'Dismiss');
}
}, "json").fail(function () {
navigator.notification.alert("Could not connect to the server. Try again later.", null, "Error", 'Dismiss');
});
checkAndSave(portal, username, key);
}
},
function (error) {
@ -57,6 +142,6 @@
navigator.notification.alert(ex.message, null, "Error", 'Dismiss');
}
}
setnavbar("home");
</script>
Loading…
Cancel
Save