2023-02-12 18:17:16 +00:00
|
|
|
<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>
|
2023-05-16 20:29:44 +00:00
|
|
|
<button id="upload" class="btn btn-primary" disabled>Upload</button>
|
2023-02-12 18:17:16 +00:00
|
|
|
</p>
|
|
|
|
|
<script src="../../core/lib/customize.js"></script>
|
|
|
|
|
<script>
|
2023-05-16 21:04:08 +00:00
|
|
|
const STORAGE_KEY = "hasensors-config";
|
|
|
|
|
const fields = ["id", "name", "url", "token"];
|
|
|
|
|
const form = document.getElementById("sensorform");
|
|
|
|
|
const LIBRARY_URL = "./lib.js";
|
2023-02-12 18:17:16 +00:00
|
|
|
|
2023-05-16 21:04:08 +00:00
|
|
|
// fetch library code template, enable upload button once we"ve got it
|
2023-05-16 20:29:44 +00:00
|
|
|
let libTpl;
|
|
|
|
|
fetch(LIBRARY_URL).then(response=>{
|
|
|
|
|
if (! response.ok) return;
|
|
|
|
|
console.log(response);
|
|
|
|
|
response.text().then(code=>{
|
|
|
|
|
libTpl = code;
|
2023-05-16 21:04:08 +00:00
|
|
|
document.getElementById("upload").disabled = false;
|
2023-05-16 20:29:44 +00:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// try to pre-fill form with values previously saved in localStorage
|
2023-02-12 18:17:16 +00:00
|
|
|
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 () {
|
2023-05-16 20:29:44 +00:00
|
|
|
// validate form fields or bail out
|
2023-02-12 18:17:16 +00:00
|
|
|
for (const field of fields) {
|
|
|
|
|
if (!form[field].validity.valid) {
|
|
|
|
|
form[field].focus();
|
|
|
|
|
alert("Please enter a valid " + field);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-05-16 20:29:44 +00:00
|
|
|
let config = {};
|
2023-02-12 18:17:16 +00:00
|
|
|
for (const field of fields) {
|
2023-05-16 20:29:44 +00:00
|
|
|
config[field] = form[field].value;
|
2023-02-12 18:17:16 +00:00
|
|
|
}
|
2023-05-16 20:29:44 +00:00
|
|
|
// save config to localStorage for re-use next time
|
2023-02-12 18:17:16 +00:00
|
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
|
2023-05-16 20:29:44 +00:00
|
|
|
// replace {placeholders} in library code template
|
|
|
|
|
const lib = libTpl.replace(/\{(\w+)\}/g, (_,f) => config[f]);
|
2023-05-16 21:04:08 +00:00
|
|
|
console.log("config:", config, JSON.stringify(config));
|
2023-02-12 18:17:16 +00:00
|
|
|
sendCustomizedApp({
|
|
|
|
|
id: "hasensors",
|
|
|
|
|
storage: [
|
|
|
|
|
{name: "hasensors.boot.js", url: "boot.js"},
|
2023-05-16 20:29:44 +00:00
|
|
|
{name: "hasensors", content: lib},
|
|
|
|
|
],
|
2023-02-12 18:17:16 +00:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
