Business
/
Station
2
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity
Browse Source

Add setup/configuration tool, add "no connection" UI and handling

master
Skylar Ittner 4 years ago
parent
7155cbbd6f
commit
6cdc9acb6a
9 changed files with 458 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 120
      assets/img/no-connection-horizontal.svg
  2. 116
      assets/img/no-connection-vertical.svg
  3. 15
      index.html
  4. 10
      js/init.js
  5. 37
      js/settings.js
  6. 22
      js/setup.js
  7. 21
      pages/login.html
  8. 82
      pages/noconnection.html
  9. 47
      pages/setup.html

120
assets/img/no-connection-horizontal.svg
File diff suppressed because it is too large
View File

116
assets/img/no-connection-vertical.svg
File diff suppressed because it is too large
View File

15
index.html
View File

@ -30,9 +30,22 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/fontawesome-all.min.js"></script>
<script src="js/init.js"></script>
<script src="js/functions.js"></script>
<script src="js/settings.js"></script>
<script src="js/session.js"></script>
<script>
openScreen("login");
validateSettings(function (resp) {
if (resp === true) {
openScreen("login");
} else if (resp === false) {
openScreen("noconnection");
} else {
openScreen("setup");
}
});
if (kioskmode == "true") {
nw.Window.get().enterKioskMode();
}
</script>

10
js/init.js
View File

@ -0,0 +1,10 @@
/*
* 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/.
*/
$.ajaxSetup({
timeout: 10000
});

37
js/settings.js
View File

@ -5,9 +5,42 @@
*/
var accounthubapi = "http://localhost/accounthub/api.php";
var apikey = "123";
var accounthubapi = localStorage.getItem("apiurl");
var apikey = localStorage.getItem("apikey");
var kioskmode = localStorage.getItem("kioskmode");
var largebtns = localStorage.getItem("largebtns");
function getAPIKey() {
return apikey;
}
/**
* Validate the connection settings. Callback will be run with `true` an error message, or `false` for a connection failure.
* @param function callback(resp) a function to receive whether or not the settings are valid.
* @returns {undefined}
*/
function validateSettings(callback) {
$.post(accounthubapi, {
key: apikey,
action: "ping"
}, function (resp) {
if (resp.status == "OK") {
callback(true);
} else {
callback(resp.msg);
}
}, "json").fail(function (data) {
if (data.readyState == 4) {
callback(data.statusText);
} else {
callback(false);
}
});
}
function reloadSettings() {
accounthubapi = localStorage.getItem("apiurl");
apikey = localStorage.getItem("apikey");
kioskmode = localStorage.getItem("kioskmode");
largebtns = localStorage.getItem("largebtns");
}

22
js/setup.js
View File

@ -0,0 +1,22 @@
/*
* 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/.
*/
$("#settings_form").submit(function (event) {
event.preventDefault();
localStorage.setItem("apiurl", $("#url").val());
localStorage.setItem("apikey", $("#key").val());
localStorage.setItem("kioskmode", $("#kioskmode").is(":checked") ? true : null);
localStorage.setItem("largebtns", $("#largebtns").is(":checked") ? true : null);
reloadSettings();
validateSettings(function (resp) {
if (resp !== true) {
showmsg("Error", "danger", "Something is wrong. Check the settings you entered.");
return;
}
document.location.href = "index.html";
});
});

21
pages/login.html
View File

@ -3,7 +3,7 @@
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="card" style="width: 100%;">
<h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
<ul class="nav nav-tabs">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#userlist">Quick Access</a>
</li>
@ -16,28 +16,32 @@
</ul>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade active show" id="userlist">
<div class="row justify-content-around">
</div>
</div>
<div class="tab-pane fade" id="userpass">
<div id="userpass_form">
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
<div class="input-group">
<span class="input-group-addon"><i class="far fa-user"></i></span>
<input type="text" class="form-control" id="username" placeholder="Username" />
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fas fa-key"></i></span>
<input type="password" class="form-control" id="password" placeholder="Password" />
<input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
</div>
<br />
<button class="btn btn-primary" id="userpassloginbtn">Log In</button>
</div>
</div>
<div class="tab-pane fade" id="mobilecode">
<div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-desktop"></i> button to get a code.</div>
<div id="mobilecode_form">
@ -49,9 +53,8 @@
<button class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
</div>
</div>
<div class="tab-pane fade" id="userlist">
</div>
</div>
</div>
</div>

82
pages/noconnection.html
View File

@ -0,0 +1,82 @@
<!--
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/.
-->
<style>
.noconnection {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 60vw;
max-height: 50vh;
z-index: 0;
}
#text {
z-index: 100;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(240,240,240,.7);
padding: 10px;
text-align: center;
}
#text p {
font-size: 110%;
}
#noconnection-horiz {
display: none;
}
#noconnection-vert {
display: block;
}
@media (orientation: landscape) {
#noconnection-horiz {
display: block;
}
#noconnection-vert {
display: none;
}
#text {
max-width: 20vw;
}
}
@media (min-width: 1200px) and (orientation: landscape) {
#noconnection-horiz {
max-width: 40vw;
}
#text {
max-width: 15vw;
}
}
@media (min-width: 2100px) and (orientation: landscape) {
#noconnection-horiz {
max-width: 35vw;
}
#text {
max-width: 20vw;
}
}
@media (min-height: 800px) and (orientation: portrait) {
#text {
max-height: 25vw;
}
}
</style>
<img src="assets/img/no-connection-horizontal.svg" id="noconnection-horiz" class="noconnection" />
<img src="assets/img/no-connection-vertical.svg" id="noconnection-vert" class="noconnection" />
<div id="text">
<h2>No connection</h2>
<p>Could not communicate with the server.</p>
<a href="index.html" class="btn btn-lg btn-primary">Try again</a>
</div>

47
pages/setup.html
View File

@ -0,0 +1,47 @@
<!--
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="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="card">
<h3 class="card-header">
<i class="fas fa-cog"></i> Settings
</h3>
<div class="card-body">
<div class="alert alert-info">
The connection settings are invalid. Please set them.
</div>
<form id="settings_form">
<div class="input-group">
<span class="input-group-addon"><i class="fas fa-server"></i></span>
<input type="text" class="form-control" id="url" placeholder="AccountHub API URL" />
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fas fa-key"></i></span>
<input type="text" class="form-control" id="key" placeholder="API Key" />
</div>
<br />
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" value="1" type="checkbox" id="kioskmode">
Kiosk mode (run in fullscreen)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" value="1" type="checkbox" id="largebtns">
Use larger buttons if available
</label>
</div>
<br />
<button type="submit" class="btn btn-primary" id="settings_save">Save Settings</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="js/setup.js"></script>
Write Preview
Loading…
Cancel
Save