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