Add setup/configuration tool, add "no connection" UI and handling
parent
7155cbbd6f
commit
6cdc9acb6a
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 16 KiB |
@ -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
|
||||
});
|
@ -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";
|
||||
});
|
||||
});
|
@ -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>
|
@ -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>
|
Loading…
Reference in New Issue