mirror of https://github.com/espruino/BangleApps
89 lines
3.0 KiB
HTML
89 lines
3.0 KiB
HTML
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||
|
|
<title>Home Assistant Sensors configuration</title>
|
||
|
|
<style>
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
}
|
||
|
|
label span:first-child {
|
||
|
|
display: inline-block;
|
||
|
|
min-width: 20ex;
|
||
|
|
}
|
||
|
|
label span.explanation {
|
||
|
|
display: block;
|
||
|
|
margin-left: 21ex;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:invalid {
|
||
|
|
outline: 1px solid red;
|
||
|
|
background: lightcoral;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form id="sensorform">
|
||
|
|
<label><span>Sensor ID:</span>
|
||
|
|
<input name="id" size="10" value="banglejs" required pattern="[_a-z0-9]+">
|
||
|
|
<span class="explanation">Lowercase letters, numbers or underscores.</span></label>
|
||
|
|
<label><span>Sensor Name:</span>
|
||
|
|
<input name="name" size="10" value="Bangle.js" required>
|
||
|
|
<span class="explanation">Human-friendly sensor name.</span></label>
|
||
|
|
<label><span>Home Assistant URL:</span>
|
||
|
|
<input name="url" type="url" placeholder="http://home_assistant_url:8123" required>
|
||
|
|
<span class="explanation">Needs to be reachable by your phone.</span></label>
|
||
|
|
<label><span>Authentication Token:</span>
|
||
|
|
<input name="token" required pattern="[\-_\.0-9a-zA-Z]+">
|
||
|
|
<span class="explanation">Create a long-lived access token in Home Assistant at the bottom of
|
||
|
|
<a href="https://my.home-assistant.io/redirect/profile/" target="_blank">your user profile</a>.</span></label>
|
||
|
|
</form>
|
||
|
|
<p>
|
||
|
|
<button id="upload" class="btn btn-primary">Upload</button>
|
||
|
|
</p>
|
||
|
|
<script src="../../core/lib/customize.js"></script>
|
||
|
|
<script>
|
||
|
|
const STORAGE_KEY = 'hasensors-config';
|
||
|
|
const fields = ['id', 'name', 'url', 'token'];
|
||
|
|
const form = document.getElementById('sensorform');
|
||
|
|
|
||
|
|
let stored = localStorage.getItem(STORAGE_KEY);
|
||
|
|
if (stored) {
|
||
|
|
try {
|
||
|
|
stored = JSON.parse(stored);
|
||
|
|
} catch (_) {
|
||
|
|
stored = undefined;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (stored) {
|
||
|
|
for (const field of fields) {
|
||
|
|
form[field].value = stored[field];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("upload").addEventListener("click", function () {
|
||
|
|
let config = {};
|
||
|
|
for (const field of fields) {
|
||
|
|
if (!form[field].validity.valid) {
|
||
|
|
form[field].focus();
|
||
|
|
alert("Please enter a valid " + field);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (const field of fields) {
|
||
|
|
config[field] = form[field].value
|
||
|
|
}
|
||
|
|
console.log('config:', config, JSON.stringify(config));
|
||
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
|
||
|
|
sendCustomizedApp({
|
||
|
|
id: "hasensors",
|
||
|
|
storage: [
|
||
|
|
{name: "hasensors.boot.js", url: "boot.js"},
|
||
|
|
{name: "hasensors", url: "lib.js"},
|
||
|
|
{name: "hasensors.settings.json", content: JSON.stringify(config)},
|
||
|
|
]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|