mirror of
https://github.com/xoseperez/espurna.git
synced 2026-03-03 15:04:17 +01:00
1553 lines
40 KiB
JavaScript
1553 lines
40 KiB
JavaScript
import {
|
|
capitalize,
|
|
pageReloadIn,
|
|
showPanelByName,
|
|
stringToBoolean,
|
|
} from './core.mjs';
|
|
|
|
import {
|
|
send,
|
|
sendAction,
|
|
listenAppConnected,
|
|
} from './connection.mjs';
|
|
|
|
import { validateFormsReportValidity, validateFormsPasswords, resetCustomValidity } from './validate.mjs';
|
|
import { notifyError } from './notify.mjs';
|
|
|
|
import {
|
|
countChangedElements,
|
|
isChangedElement,
|
|
isGroupElement,
|
|
isIgnoredElement,
|
|
setChangedElement,
|
|
resetChangedElement,
|
|
resetSettingsGroup,
|
|
} from './settings/utils.mjs';
|
|
|
|
/**
|
|
* generic value type to set to or get from an element. usually an editable type, like input or select
|
|
* @typedef { string | number | boolean | null } ElementValue
|
|
*/
|
|
|
|
/**
|
|
* generic value to be set to an element. usually cannot be edited after setting, expected to be updated from the device side
|
|
* @typedef { ElementValue | ElementValue[] } DisplayValue
|
|
*/
|
|
|
|
/**
|
|
* @typedef { HTMLInputElement | HTMLSelectElement } InputOrSelect
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{element: InputOrSelect, key: string, value: ElementValue}} GroupElementInfo
|
|
*/
|
|
|
|
// Right now, group additions happen from:
|
|
// - WebSocket, likely to happen exactly once per connection through processData handler(s). Specific keys trigger functions that append into the container element.
|
|
// - User input. Same functions are triggered, but with an additional event for the container element that causes most recent element to be marked as changed.
|
|
// Removal only happens from user input by triggering 'settings-group-del' from the target element.
|
|
|
|
/**
|
|
* @param {Element} target
|
|
* @returns {GroupElementInfo[]}
|
|
*/
|
|
function groupElementInfo(target) {
|
|
/** @type {GroupElementInfo[]} */
|
|
const out = [];
|
|
|
|
findInputOrSelect(target).forEach((elem) => {
|
|
const name = elem.dataset.settingsRealName || elem.name;
|
|
if (name === undefined) {
|
|
return;
|
|
}
|
|
|
|
const value = getOriginalForElement(elem) ?? getDataForElement(elem);
|
|
if (null === value) {
|
|
return;
|
|
}
|
|
|
|
out.push({
|
|
element: elem,
|
|
key: name,
|
|
value: value,
|
|
});
|
|
});
|
|
|
|
return out;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {string[]} pending
|
|
*/
|
|
function setGroupPending(elem, pending) {
|
|
elem.dataset["settingsGroupPending"] =
|
|
([...new Set(pending)]).join(" ");
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @returns {string[]}
|
|
*/
|
|
function getGroupPending(elem) {
|
|
const raw = elem.dataset["settingsGroupPending"] || "";
|
|
if (!raw.length) {
|
|
return [];
|
|
}
|
|
|
|
return raw.split(" ");
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} group
|
|
*/
|
|
export function groupSettingsAdd(group) {
|
|
const index = group.children.length - 1;
|
|
const last = group.children[index];
|
|
|
|
const before = countChangedElements(group);
|
|
|
|
const pending = getGroupPending(group);
|
|
pending.push(`set:${index}`);
|
|
setGroupPending(group, pending);
|
|
|
|
let once = true;
|
|
|
|
for (let elem of findInputOrSelect(last)) {
|
|
if (once && elem.required) {
|
|
elem.focus();
|
|
elem.reportValidity();
|
|
once = false;
|
|
}
|
|
|
|
if (elem.required
|
|
&& elem.checkValidity()
|
|
&& (getDataForElement(elem) !== null))
|
|
{
|
|
setChangedElement(elem);
|
|
}
|
|
}
|
|
|
|
Settings.countFor(
|
|
countChangedElements(group) - before);
|
|
Settings.stylizeSave();
|
|
}
|
|
|
|
/**
|
|
* to 'instantiate' a new element, we must explicitly set 'target' keys in kvs
|
|
* notice that the 'row' creation *should* be handled by the group-specific
|
|
* event listener, we already expect the dom element to exist at this point
|
|
* @param {Event} event
|
|
*/
|
|
function onGroupSettingsEventAdd(event) {
|
|
const group = event.target;
|
|
if (!(group instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
groupSettingsAdd(group);
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} group
|
|
*/
|
|
function delGroupPending(group) {
|
|
const top = group.childElementCount - 1;
|
|
if (top < 0) {
|
|
return;
|
|
}
|
|
|
|
let pending = getGroupPending(group);
|
|
|
|
const set = pending.indexOf(`set:${top}`);
|
|
if (set >= 0) {
|
|
pending.splice(set, 1);
|
|
} else {
|
|
pending.push(`del:${top}`);
|
|
}
|
|
|
|
setGroupPending(group, pending);
|
|
}
|
|
|
|
// TODO: 'current' state is maintaned through element data. track it externally?
|
|
|
|
/**
|
|
* @param {HTMLElement} group
|
|
* @param {HTMLElement} target
|
|
*/
|
|
export function groupSettingsDel(group, target) {
|
|
const elems = Array.from(group.children);
|
|
const shiftFrom = elems.indexOf(target);
|
|
|
|
const before = countChangedElements(group);
|
|
|
|
const info = elems.map(groupElementInfo);
|
|
for (let index = -1; index < info.length; ++index) {
|
|
const prev = (index > 0)
|
|
? info[index - 1]
|
|
: null;
|
|
const current = info[index];
|
|
|
|
if ((index > shiftFrom) && prev && (prev.length === current.length)) {
|
|
for (let inner = 0; inner < prev.length; ++inner) {
|
|
const [lhs, rhs] = [prev[inner], current[inner]];
|
|
if (lhs.value !== rhs.value) {
|
|
setChangedElement(rhs.element);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
delGroupPending(group);
|
|
target.remove();
|
|
|
|
Settings.countFor(
|
|
countChangedElements(group) - before);
|
|
Settings.stylizeSave();
|
|
}
|
|
|
|
/**
|
|
* removing the element means we need to notify the kvs about the updated keys
|
|
* in case it's the last row, just remove those keys from the store
|
|
* in case we are in the middle, make sure to handle difference update
|
|
* in case change was 'ephemeral' (i.e. from the previous add that was not saved), do nothing
|
|
* @param {Event} event
|
|
*/
|
|
function onGroupSettingsEventDel(event) {
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
const group = event.currentTarget;
|
|
if (!(group instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
groupSettingsDel(group, target);
|
|
}
|
|
|
|
// 'settings-group' contain elements that represent kv list that is suffixed with an index in raw kvs
|
|
// 'button-add-settings-group' will trigger update on the specified 'data-settings-group' element id, which
|
|
// needs to have 'settings-group-add' event handler attached to it.
|
|
|
|
/**
|
|
* @param {Event} event
|
|
* @returns {boolean}
|
|
*/
|
|
function groupSettingsCheckMax(event) {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLElement)) {
|
|
return false;
|
|
}
|
|
|
|
const max = target.dataset["settingsMax"];
|
|
const val = 1 + target.children.length;
|
|
|
|
if ((max !== undefined) && (max !== "0") && (parseInt(max, 10) < val)) {
|
|
alert(`Max number of ${target.id} has been reached (${val} out of ${max})`);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {EventListener} listener
|
|
*/
|
|
export function groupSettingsOnAddElem(elem, listener) {
|
|
elem.addEventListener("settings-group-add",
|
|
(event) => {
|
|
event.stopPropagation();
|
|
if (!groupSettingsCheckMax(event)) {
|
|
return;
|
|
}
|
|
|
|
listener(event);
|
|
onGroupSettingsEventAdd(event);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param {string} id
|
|
* @param {EventListener} listener
|
|
*/
|
|
export function groupSettingsOnAdd(id, listener) {
|
|
const elem = document.getElementById(id);
|
|
if (elem) {
|
|
groupSettingsOnAddElem(elem, listener);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Event} event
|
|
*/
|
|
export function onGroupSettingsDel(event) {
|
|
let target = /** @type {HTMLElement | null} */(event.target);
|
|
if (!(target instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
let parent = target.parentElement;
|
|
if (!(parent instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
while (parent && !parent.classList.contains("settings-group")) {
|
|
target = parent;
|
|
parent = target.parentElement;
|
|
}
|
|
|
|
target.dispatchEvent(
|
|
new CustomEvent("settings-group-del", {bubbles: true}));
|
|
}
|
|
|
|
/**
|
|
* handle addition to the group using the 'add' button
|
|
* @param {Event} event
|
|
*/
|
|
function onGroupSettingsAddClick(event) {
|
|
const elem = event.target;
|
|
if (!(elem instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
const name = elem.dataset["settingsGroup"];
|
|
if (!name) {
|
|
return;
|
|
}
|
|
|
|
document.getElementById(name)
|
|
?.dispatchEvent(new CustomEvent("settings-group-add"));
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} container
|
|
* @param {string[]} keys
|
|
* @returns {string[]} - key# for each node that needs removal
|
|
*/
|
|
function groupSettingsCleanup(container, keys) {
|
|
/** @type {string[]} */
|
|
const out = [];
|
|
|
|
for (let elem of container.getElementsByClassName("settings-group")) {
|
|
if (!(elem instanceof HTMLElement)) {
|
|
continue;
|
|
}
|
|
|
|
const schema = elem.dataset["settingsSchemaDel"]
|
|
?? elem.dataset["settingsSchema"]
|
|
?? "";
|
|
if (!schema) {
|
|
continue;
|
|
}
|
|
|
|
const prefix = "del:";
|
|
|
|
getGroupPending(elem)
|
|
.filter((x) => x.startsWith(prefix))
|
|
.map((x) => x.slice(prefix.length))
|
|
.forEach((index) => {
|
|
const elem_keys = schema
|
|
.split(" ")
|
|
.map((x) => `${x}${index}`);
|
|
if (!elem_keys.length) {
|
|
return;
|
|
}
|
|
|
|
elem_keys.forEach((key) => {
|
|
if (!keys.includes(key)) {
|
|
out.push(key);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
return [...new Set(out)];
|
|
}
|
|
|
|
/**
|
|
* @param {string | number |boolean} value
|
|
* @returns {DataValue}
|
|
*/
|
|
function maybeAdjustDataValue(value) {
|
|
if (typeof value === "boolean") {
|
|
return value ? 1 : 0;
|
|
}
|
|
|
|
if (typeof value === "string" && (value.length > 0)) {
|
|
const number = Number(value);
|
|
if (!Number.isNaN(number)) {
|
|
return number;
|
|
}
|
|
}
|
|
|
|
if (typeof value === "number" && isNaN(value)) {
|
|
return "nan";
|
|
}
|
|
|
|
return value;
|
|
}
|
|
|
|
/**
|
|
* besides gathering the data, func is expected to also provide
|
|
* - del: 'cleanup' keys, usually from setting groups that marked certain keys for deletion
|
|
* - set: kvs only for 'changed' keys, or everything available
|
|
* @typedef {{cleanup?: boolean, assumeChanged?: boolean}} GetDataOptions
|
|
*/
|
|
|
|
/**
|
|
* kvs for the device settings storage
|
|
* @typedef {string | number} DataValue
|
|
* @typedef {{[k: string]: DataValue}} SetRequest
|
|
*/
|
|
|
|
/**
|
|
* usually, settings request is sent as a single object
|
|
* @typedef {{set: SetRequest, del: string[]}} DataRequest
|
|
*/
|
|
|
|
/**
|
|
* populates two sets of data, ones that had been changed and ones that stayed the same
|
|
* @param {HTMLFormElement[]} forms
|
|
* @param {GetDataOptions} options
|
|
*/
|
|
export function getData(forms, {cleanup = true, assumeChanged = false} = {}) {
|
|
/** @type {{[k: string]: DataValue}} */
|
|
const data = {};
|
|
|
|
/** @type {string[]} */
|
|
const changed_data = [];
|
|
|
|
/** @type {{[k: string]: number}} */
|
|
const group_counter = {};
|
|
|
|
/** @type DataRequest */
|
|
const out = {
|
|
set: {
|
|
},
|
|
del: [
|
|
]
|
|
};
|
|
|
|
// TODO: <input type="radio"> can be found as both individual elements and as a `RadioNodeList` view.
|
|
// matching will extract the specific radio element, but will ignore the list b/c it has no tagName
|
|
// TODO: actually use type="radio" in the WebUI to check whether this works
|
|
for (let form of forms) {
|
|
for (let elem of form.elements) {
|
|
if (!(elem instanceof HTMLInputElement) && !(elem instanceof HTMLSelectElement)) {
|
|
continue;
|
|
}
|
|
|
|
if (isIgnoredElement(elem)) {
|
|
continue;
|
|
}
|
|
|
|
if (elem instanceof HTMLInputElement && elem.readOnly) {
|
|
continue;
|
|
}
|
|
|
|
const name = elem.dataset["settingsRealName"] || elem.name;
|
|
if (!name) {
|
|
continue;
|
|
}
|
|
|
|
// explicitly attributed, but *could* be determined implicitly by `form.elements[elem.name]` or `FormData::getAll(elem.name)` returing a list
|
|
// - https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
|
|
// - https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll
|
|
// ts-lint would trigger false positive, though (at least with current version of lib-dom)
|
|
// - https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1009
|
|
const group_element = isGroupElement(elem);
|
|
const group_index = group_counter[name] || 0;
|
|
const group_name = `${name}${group_index}`;
|
|
if (group_element) {
|
|
group_counter[name] = group_index + 1;
|
|
}
|
|
|
|
const value = getDataForElement(elem);
|
|
if (null !== value) {
|
|
const elem_indexed = changed_data.indexOf(name) >= 0;
|
|
if ((isChangedElement(elem) || assumeChanged) && !elem_indexed) {
|
|
changed_data.push(group_element ? group_name : name);
|
|
}
|
|
|
|
// whenever group is involved, make sure its name is used instead
|
|
const data_name = group_element
|
|
? group_name : name;
|
|
|
|
// fixing outgoing data, when it is necessary
|
|
data[data_name] = maybeAdjustDataValue(value);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Finally, filter out only fields that *must* be assigned.
|
|
for (const name of Object.keys(data)) {
|
|
if (assumeChanged || (changed_data.indexOf(name) >= 0)) {
|
|
out.set[name] = data[name];
|
|
}
|
|
}
|
|
|
|
// Make sure to remove dynamic group entries from the kvs
|
|
// Only group keys can be removed atm, so only process .settings-group
|
|
if (cleanup) {
|
|
for (let form of forms) {
|
|
out.del.push(...groupSettingsCleanup(form, Object.keys(out.set)));
|
|
}
|
|
}
|
|
|
|
return out;
|
|
}
|
|
|
|
// TODO: <input type="radio"> is a special beast, since the actual value is one of 'checked' elements with the same name=... attribute.
|
|
// Right now, WebUI does not use this kind of input, but in case it does this needs a once-over that the actual input value is picked up correctly through all of changed / original comparisons.
|
|
|
|
// Not all of available forms are used for settings:
|
|
// - terminal input, which is implemented with an input field. it is attributed with `action="none"`, so settings handler never treats it as 'changed'
|
|
// - initial setup. it is shown programatically, but is still available from the global list of forms
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
* @returns {ElementValue}
|
|
*/
|
|
export function getDataForElement(elem) {
|
|
if (elem instanceof HTMLInputElement) {
|
|
switch (elem.type) {
|
|
case "checkbox":
|
|
return elem.checked;
|
|
|
|
case "radio":
|
|
if (elem.checked) {
|
|
return elem.value;
|
|
}
|
|
|
|
return null;
|
|
|
|
case "text":
|
|
case "password":
|
|
case "hidden":
|
|
return elem.value;
|
|
|
|
case "number":
|
|
case "range":
|
|
return elem.valueAsNumber;
|
|
|
|
}
|
|
} else if (elem instanceof HTMLSelectElement) {
|
|
if (elem.multiple) {
|
|
return bitsetForSelectElement(elem);
|
|
} else if (elem.selectedIndex >= 0) {
|
|
const option = elem.options[elem.selectedIndex];
|
|
if (option.disabled) {
|
|
return null;
|
|
}
|
|
|
|
return option.value;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
* @returns {ElementValue}
|
|
*/
|
|
export function getOriginalForElement(elem) {
|
|
const original = elem.dataset["original"];
|
|
|
|
if (elem instanceof HTMLInputElement) {
|
|
switch (elem.type) {
|
|
case "radio":
|
|
case "text":
|
|
case "password":
|
|
case "hidden":
|
|
return original ?? "";
|
|
|
|
case "checkbox":
|
|
return (original !== undefined)
|
|
? stringToBoolean(original)
|
|
: false;
|
|
|
|
case "number":
|
|
case "range":
|
|
return (original !== undefined)
|
|
? parseInt(original)
|
|
: NaN;
|
|
}
|
|
} else if (elem instanceof HTMLSelectElement) {
|
|
if (original === undefined) {
|
|
return "";
|
|
} else if (elem.multiple) {
|
|
return bitsetFromSelectedValues(original.split(","));
|
|
} else {
|
|
return original;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSelectElement} select
|
|
* @returns {string[]}
|
|
*/
|
|
function selectedValues(select) {
|
|
if (select.multiple) {
|
|
return Array.from(select.selectedOptions)
|
|
.map(option => option.value);
|
|
} else if (select.selectedIndex >= 0) {
|
|
return [select.options[select.selectedIndex].value];
|
|
}
|
|
|
|
return [];
|
|
}
|
|
|
|
// When receiving / returning data, <select multiple=true> <option> values are treated as bitset (u32) indexes (i.e. individual bits that are set)
|
|
// For example 0b101 is translated to ["0", "2"], or 0b1111 is translated to ["0", "1", "2", "3"]
|
|
// Right now only `hbReport` uses such format, but it is not yet clear how such select element should behave when value is not an integer
|
|
|
|
/**
|
|
* @param {number} bitset
|
|
* @returns {string[]}
|
|
*/
|
|
function bitsetToSelectedValues(bitset) {
|
|
let values = [];
|
|
for (let index = 0; index < 31; ++index) {
|
|
if (bitset & (1 << index)) {
|
|
values.push(index.toString());
|
|
}
|
|
}
|
|
|
|
return values;
|
|
}
|
|
|
|
/**
|
|
* @param {string[]} values
|
|
* @returns {number}
|
|
*/
|
|
function bitsetFromSelectedValues(values) {
|
|
let result = 0;
|
|
for (let value of values) {
|
|
result |= 1 << parseInt(value);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSelectElement} select
|
|
* @returns {number}
|
|
*/
|
|
function bitsetForSelectElement(select) {
|
|
return bitsetFromSelectedValues(selectedValues(select))
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLInputElement} input
|
|
* @param {ElementValue} value
|
|
*/
|
|
export function setInputValue(input, value) {
|
|
switch (input.type) {
|
|
case "radio":
|
|
input.checked = (value === input.value);
|
|
break;
|
|
|
|
case "checkbox":
|
|
input.checked =
|
|
(typeof value === "boolean") ? value :
|
|
(typeof value === "string") ? stringToBoolean(value) :
|
|
(typeof value === "number") ? (value !== 0) : false;
|
|
break;
|
|
|
|
case "number":
|
|
case "range":
|
|
input.valueAsNumber =
|
|
(typeof value === "string") ? parseInt(value) :
|
|
(typeof value === "number") ? value : NaN;
|
|
break;
|
|
|
|
case "password":
|
|
case "text":
|
|
input.value =
|
|
(value ?? "").toString();
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSpanElement} span
|
|
* @param {ElementValue} value
|
|
* @returns {string}
|
|
*/
|
|
function prepareSpanValue(span, value) {
|
|
value = value ?? "";
|
|
value = value.toString();
|
|
|
|
if (value) {
|
|
value = span.dataset[`value${capitalize(value)}`] ?? value;
|
|
}
|
|
|
|
const out = [
|
|
`${span.dataset["pre"] || ""}`,
|
|
`${value}`,
|
|
`${span.dataset["post"] || ""}`,
|
|
];
|
|
|
|
return out.join("");
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSpanElement} span
|
|
* @param {DisplayValue} value
|
|
*/
|
|
export function setSpanValue(span, value) {
|
|
if (Array.isArray(value)) {
|
|
/** @type {Node[]} */
|
|
const nodes = [];
|
|
|
|
value.forEach((entry) => {
|
|
nodes.push(new Text(prepareSpanValue(span, entry)));
|
|
nodes.push(document.createElement("br"));
|
|
});
|
|
span.replaceChildren(...nodes);
|
|
} else {
|
|
span.textContent = prepareSpanValue(span, value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSelectElement} select
|
|
* @param {ElementValue} value
|
|
*/
|
|
export function setSelectValue(select, value) {
|
|
/** @type string[] */
|
|
const values = [];
|
|
|
|
switch (typeof value) {
|
|
case "boolean":
|
|
case "string":
|
|
values.push(value.toString());
|
|
break;
|
|
|
|
case "number":
|
|
if (select.multiple) {
|
|
values.push(...bitsetToSelectedValues(value));
|
|
} else {
|
|
values.push(value.toString());
|
|
}
|
|
break;
|
|
}
|
|
|
|
Array.from(select.options)
|
|
.forEach((option) => {
|
|
option.selected = values.includes(option.value);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
*/
|
|
export function setOriginalFromValue(elem) {
|
|
if (elem instanceof HTMLInputElement) {
|
|
if (elem.readOnly) {
|
|
return;
|
|
}
|
|
|
|
if (elem.type === "checkbox") {
|
|
elem.dataset["original"] = elem.checked.toString();
|
|
} else {
|
|
elem.dataset["original"] = elem.value;
|
|
}
|
|
} else if (elem instanceof HTMLSelectElement) {
|
|
elem.dataset["original"] = selectedValues(elem).join(",");
|
|
}
|
|
|
|
resetChangedElement(elem);
|
|
}
|
|
|
|
/**
|
|
* @param {InputOrSelect[]} elems
|
|
*/
|
|
export function setOriginalsFromValues(elems) {
|
|
for (let elem of elems) {
|
|
setOriginalFromValue(elem);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Element | HTMLElement | DocumentFragment} node
|
|
* @returns {Array<InputOrSelect>}
|
|
*/
|
|
function findInputOrSelect(node) {
|
|
return Array.from(node.querySelectorAll("input,select"));
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement | DocumentFragment} node
|
|
*/
|
|
export function setOriginalsFromValuesForNode(node) {
|
|
setOriginalsFromValues(findInputOrSelect(node));
|
|
}
|
|
|
|
/**
|
|
* Automatically updates element contents using named entries.
|
|
*
|
|
* Consumer is expected to
|
|
* - set 'data-<NAME>' attribute on the element, either statically or dynamically
|
|
* - install default or custom listener for the respective <NAME>d event
|
|
*
|
|
* Element behaviour varies
|
|
* - <select> recreates <options> with value=$key and labeled with the string contents
|
|
* - <span> inner text is updated with the all of the string contents joined together
|
|
*
|
|
* @typedef {[string, string]} EnumerableTuple
|
|
* @typedef {{[k: string]: string}} EnumerableNames
|
|
*/
|
|
|
|
|
|
/** @type {{[k: string]: EnumerableNames}} */
|
|
const Enumerable = {};
|
|
|
|
/** PREFIX + NAME propogated to every "data-enumerable='NAME'" */
|
|
const ENUMERABLE_EVENT_PREFIX = 'enumerable-update-';
|
|
|
|
// <select> initialization from simple {id: ..., name: ...} that map as <option> value=... and textContent
|
|
// To avoid depending on order of incoming messages, always store real value inside of dataset["original"] and provide a way to re-initialize every 'enumerable' <select> element on the page
|
|
//
|
|
// Notice that <select multiple> input and output format is u32 number, but the 'original' string is comma-separated <option> value=... attributes
|
|
|
|
/**
|
|
* @typedef {{value: string, text: string}} ElementOption
|
|
*/
|
|
|
|
/**
|
|
* @param {HTMLSelectElement | HTMLDataListElement} elem
|
|
* @param {ElementOption[]} options
|
|
*/
|
|
export function initElementOptions(elem, options) {
|
|
const initial = document.createElement("option");
|
|
initial.disabled = true;
|
|
initial.value = "";
|
|
|
|
elem.appendChild(initial);
|
|
if (elem instanceof HTMLSelectElement) {
|
|
elem.selectedIndex = 0;
|
|
}
|
|
|
|
for (const option of options) {
|
|
const child = document.createElement("option");
|
|
child.value = option.value;
|
|
child.textContent = option.text;
|
|
elem.appendChild(child);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {EnumerableNames} names
|
|
* @returns {ElementOption[]}
|
|
*/
|
|
function elementOptionsFromEnumerable(names) {
|
|
/** @type {ElementOption[]} */
|
|
const out = [];
|
|
|
|
Object.entries(names)
|
|
.forEach(([id, name]) => {
|
|
out.push({
|
|
"value": id,
|
|
"text": name,
|
|
});
|
|
});
|
|
|
|
return out;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
*/
|
|
function cleanupChildElements(elem) {
|
|
while (elem.childElementCount && elem.firstElementChild) {
|
|
elem.removeChild(elem.firstElementChild);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSelectElement} select
|
|
* @param {EnumerableNames} names
|
|
*/
|
|
function onEnumerableUpdateSelect(select, names) {
|
|
cleanupChildElements(select);
|
|
initElementOptions(select, elementOptionsFromEnumerable(names));
|
|
|
|
const original = getOriginalForElement(select);
|
|
if (original !== null) {
|
|
setSelectValue(select, original);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLSpanElement} span
|
|
* @param {EnumerableNames} names
|
|
*/
|
|
function onEnumerableUpdateSpan(span, names) {
|
|
const id = span.dataset["enumerableId"] ?? "";
|
|
if (id.length === 0) {
|
|
return;
|
|
}
|
|
|
|
const name = names[id];
|
|
if (!name) {
|
|
return;
|
|
}
|
|
|
|
setSpanValue(span, name);
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLDataListElement} datalist
|
|
* @param {EnumerableNames} names
|
|
*/
|
|
function onEnumerableUpdateDataList(datalist, names) {
|
|
cleanupChildElements(datalist);
|
|
initElementOptions(datalist, elementOptionsFromEnumerable(names));
|
|
}
|
|
|
|
/**
|
|
* @callback EnumerableElemCallback
|
|
* @param {HTMLElement} elem
|
|
* @param {EnumerableNames} names
|
|
* @returns {void}
|
|
*/
|
|
|
|
/**
|
|
* @type {EnumerableElemCallback}
|
|
*/
|
|
function onEnumerableUpdateElem(elem, names) {
|
|
if (elem instanceof HTMLSelectElement) {
|
|
onEnumerableUpdateSelect(elem, names);
|
|
} else if (elem instanceof HTMLSpanElement) {
|
|
onEnumerableUpdateSpan(elem, names);
|
|
} else if (elem instanceof HTMLDataListElement) {
|
|
onEnumerableUpdateDataList(elem, names);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Event} event
|
|
* @param {EnumerableElemCallback} callback
|
|
*/
|
|
function onEnumerableUpdate(event, callback) {
|
|
const elem = /** @type {!HTMLElement} */(event.target);
|
|
const enumerables = /** @type {CustomEvent<{enumerables: EnumerableNames}>} */
|
|
(event).detail.enumerables;
|
|
callback(elem, enumerables);
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @param {EnumerableNames} enumerables
|
|
*/
|
|
function notifyEnumerables(name, enumerables) {
|
|
document.querySelectorAll(`[data-enumerable=${name}]`)
|
|
.forEach((elem) => {
|
|
if (!(elem instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
elem.dispatchEvent(
|
|
new CustomEvent(
|
|
`${ENUMERABLE_EVENT_PREFIX}${name}`,
|
|
{detail: {enumerables}}));
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {string} name
|
|
* @param {EnumerableElemCallback?} callback
|
|
*/
|
|
export function listenEnumerableName(elem, name, callback = null) {
|
|
callback = callback ?? onEnumerableUpdateElem;
|
|
elem.addEventListener(
|
|
`${ENUMERABLE_EVENT_PREFIX}${name}`,
|
|
(event) => onEnumerableUpdate(event, callback));
|
|
|
|
const current = Enumerable[name];
|
|
if (!current) {
|
|
return;
|
|
}
|
|
|
|
callback(elem, current);
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {number} id
|
|
* @param {string} name
|
|
*/
|
|
export function prepareEnumerableTarget(elem, id, name) {
|
|
elem.dataset["enumerableId"] = id.toString();
|
|
elem.dataset["enumerable"] = name;
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {number} id
|
|
* @param {string} name
|
|
* @param {EnumerableElemCallback?} callback
|
|
*/
|
|
export function listenEnumerableTarget(elem, id, name, callback = null) {
|
|
const span = document.createElement("span");
|
|
prepareEnumerableTarget(span, id, name);
|
|
listenEnumerableName(span, name, callback);
|
|
elem.appendChild(span);
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} elem
|
|
* @param {EnumerableElemCallback?} callback
|
|
*/
|
|
export function listenEnumerable(elem, callback = null) {
|
|
const name = elem.dataset["enumerable"];
|
|
if (!name) {
|
|
return;
|
|
}
|
|
|
|
listenEnumerableName(elem, name, callback);
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @returns {EnumerableNames}
|
|
*/
|
|
export function getEnumerables(name) {
|
|
return Enumerable[name] ?? {};
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @param {EnumerableNames | EnumerableTuple[]} enumerables
|
|
*/
|
|
export function addEnumerables(name, enumerables) {
|
|
/** @type {EnumerableNames} */
|
|
let names = {};
|
|
|
|
if (Array.isArray(enumerables)) {
|
|
enumerables.forEach(([id, name]) => {
|
|
names[id] = name;
|
|
});
|
|
} else {
|
|
names = enumerables;
|
|
}
|
|
|
|
Enumerable[name] = names;
|
|
notifyEnumerables(name, names);
|
|
}
|
|
|
|
/**
|
|
* @param {string} name
|
|
* @param {string} prettyName
|
|
* @param {number} count
|
|
*/
|
|
export function addSimpleEnumerables(name, prettyName, count) {
|
|
if (count <= 0) {
|
|
return;
|
|
}
|
|
|
|
/** @type {EnumerableNames} */
|
|
const names = {};
|
|
for (let id = 0; id < count; ++id) {
|
|
names[id.toString()] = `${prettyName} #${id}`;
|
|
}
|
|
|
|
addEnumerables(name, names);
|
|
}
|
|
|
|
// track <input> values, count total number of changes and their side-effects / needed actions
|
|
class SettingsBase {
|
|
constructor() {
|
|
this.counters = {
|
|
changed: 0,
|
|
reboot: 0,
|
|
reconnect: 0,
|
|
reload: 0,
|
|
};
|
|
this.saved = false;
|
|
}
|
|
|
|
/**
|
|
* @param {number} count
|
|
* @param {string?} action
|
|
*/
|
|
countFor(count, action = null) {
|
|
this.counters.changed += count;
|
|
if (typeof action === "string") {
|
|
switch (action) {
|
|
case "reboot":
|
|
case "reload":
|
|
case "reconnect":
|
|
this.counters[action] += count;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string?} action
|
|
*/
|
|
increment(action = null) {
|
|
this.countFor(1, action);
|
|
}
|
|
|
|
/**
|
|
* @param {string?} action
|
|
*/
|
|
decrement(action = null) {
|
|
this.countFor(-1, action);
|
|
}
|
|
|
|
resetChanged() {
|
|
this.counters.changed = 0;
|
|
}
|
|
|
|
resetCounters() {
|
|
this.counters.changed = 0;
|
|
this.counters.reboot = 0;
|
|
this.counters.reconnect = 0;
|
|
this.counters.reload = 0;
|
|
}
|
|
|
|
stylizeSave() {
|
|
const changed = this.counters.changed !== 0;
|
|
document.querySelectorAll(".button-save")
|
|
.forEach((elem) => {
|
|
if (!(elem instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
if (changed) {
|
|
elem.style.setProperty("--save-background", "rgb(0, 192, 0)");
|
|
} else {
|
|
elem.style.removeProperty("--save-background");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* read-only kv pairs. currently, this is span with a data-key=$key
|
|
* @param {Document | Element} node
|
|
* @param {string} key
|
|
* @param {DisplayValue} value
|
|
*/
|
|
export function setSpanValueByKey(node, key, value) {
|
|
for (const span of node.querySelectorAll(`span[data-key='${key}']`)) {
|
|
if (!(span instanceof HTMLSpanElement)) {
|
|
continue;
|
|
}
|
|
|
|
setSpanValue(span, value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
* @param {ElementValue} value
|
|
*/
|
|
function setInputOrSelect(elem, value) {
|
|
if (elem instanceof HTMLInputElement) {
|
|
setInputValue(elem, value);
|
|
} else if (elem instanceof HTMLSelectElement) {
|
|
setSelectValue(elem, value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* handle plain kv pairs when they are already on the page, and don't need special template handlers
|
|
* @param {Document | Element} node
|
|
* @param {string} key
|
|
* @param {ElementValue} value
|
|
*/
|
|
export function setInputOrSelectValueByKey(node, key, value) {
|
|
const inputs = [];
|
|
|
|
for (const elem of node.querySelectorAll(`[name='${key}'`)) {
|
|
if ((elem instanceof HTMLInputElement)
|
|
|| (elem instanceof HTMLSelectElement))
|
|
{
|
|
if (isGroupElement(elem)) {
|
|
continue;
|
|
}
|
|
|
|
setInputOrSelect(elem, value);
|
|
inputs.push(elem);
|
|
}
|
|
}
|
|
|
|
setOriginalsFromValues(inputs);
|
|
}
|
|
|
|
const Settings = new SettingsBase();
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
* @returns {boolean}
|
|
*/
|
|
function checkElementChanged(elem) {
|
|
const lhs = getOriginalForElement(elem);
|
|
const rhs = getDataForElement(elem);
|
|
|
|
if (typeof lhs === "number"
|
|
&& typeof rhs === "number"
|
|
&& isNaN(lhs)
|
|
&& isNaN(rhs))
|
|
{
|
|
return false;
|
|
}
|
|
|
|
return lhs !== rhs;
|
|
}
|
|
|
|
/**
|
|
* @param {InputOrSelect} elem
|
|
* @returns {boolean}
|
|
*/
|
|
export function checkAndSetElementChanged(elem) {
|
|
const changed = isChangedElement(elem);
|
|
|
|
if (checkElementChanged(elem)) {
|
|
setChangedElement(elem);
|
|
} else {
|
|
resetChangedElement(elem);
|
|
}
|
|
|
|
return changed !== isChangedElement(elem);
|
|
}
|
|
|
|
/**
|
|
* @param {Event} event
|
|
*/
|
|
export function onElementChange(event) {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLInputElement)
|
|
&& !(target instanceof HTMLSelectElement))
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (target instanceof HTMLInputElement && target.readOnly) {
|
|
return;
|
|
}
|
|
|
|
const action = target.dataset["action"];
|
|
if ("none" === action) {
|
|
return;
|
|
}
|
|
|
|
resetCustomValidity(target);
|
|
|
|
if (!checkAndSetElementChanged(target)) {
|
|
return;
|
|
}
|
|
|
|
if (isChangedElement(target)) {
|
|
Settings.increment(action);
|
|
} else {
|
|
Settings.decrement(action);
|
|
}
|
|
|
|
if (target.required) {
|
|
target.reportValidity();
|
|
}
|
|
|
|
Settings.stylizeSave();
|
|
}
|
|
|
|
/**
|
|
* @typedef {function(string, any): void} KeyValueListener
|
|
*/
|
|
|
|
/**
|
|
* @typedef {{[k: string]: KeyValueListener}} KeyValueListeners
|
|
*/
|
|
|
|
/**
|
|
* @type {{[k: string]: KeyValueListener[]}}
|
|
*/
|
|
const __variable_listeners = {};
|
|
|
|
/**
|
|
* @param {string} key
|
|
* @param {KeyValueListener} func
|
|
*/
|
|
export function listenVariables(key, func) {
|
|
if (__variable_listeners[key] === undefined) {
|
|
__variable_listeners[key] = [];
|
|
}
|
|
|
|
__variable_listeners[key].push(func);
|
|
}
|
|
|
|
/**
|
|
* @param {KeyValueListeners} listeners
|
|
*/
|
|
export function variableListeners(listeners) {
|
|
for (const [key, listener] of Object.entries(listeners)) {
|
|
listenVariables(key, listener);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {string} key
|
|
* @param {any} value
|
|
*/
|
|
export function updateKeyValue(key, value) {
|
|
const listeners = __variable_listeners[key];
|
|
if (listeners !== undefined) {
|
|
for (let listener of listeners) {
|
|
listener(key, value);
|
|
}
|
|
}
|
|
|
|
if (typeof value === "object") {
|
|
return;
|
|
}
|
|
|
|
setSpanValueByKey(document, key, value);
|
|
setInputOrSelectValueByKey(document, key, value);
|
|
}
|
|
|
|
function resetOriginals() {
|
|
setOriginalsFromValuesForNode(document.documentElement);
|
|
resetSettingsGroup();
|
|
|
|
Settings.resetCounters();
|
|
Settings.saved = false;
|
|
}
|
|
|
|
function afterSaved() {
|
|
let response = false;
|
|
|
|
if (Settings.counters.reboot > 0) {
|
|
response = window.confirm("You have to reboot the board for the changes to take effect, do you want to do it now?");
|
|
if (response) {
|
|
sendAction("reboot");
|
|
}
|
|
} else if (Settings.counters.reconnect > 0) {
|
|
response = window.confirm("You have to reconnect to the WiFi for the changes to take effect, do you want to do it now?");
|
|
if (response) {
|
|
sendAction("reconnect");
|
|
}
|
|
} else if (Settings.counters.reload > 0) {
|
|
response = window.confirm("You have to reload the page to see the latest changes, do you want to do it now?");
|
|
if (response) {
|
|
pageReloadIn(0);
|
|
}
|
|
}
|
|
|
|
resetOriginals();
|
|
Settings.stylizeSave();
|
|
}
|
|
|
|
function waitForSaved(){
|
|
if (!Settings.saved) {
|
|
setTimeout(waitForSaved, 1000);
|
|
} else {
|
|
afterSaved();
|
|
}
|
|
}
|
|
|
|
/** @param {any} settings */
|
|
export function applySettings(settings) {
|
|
send(JSON.stringify({settings}));
|
|
}
|
|
|
|
/** @param {HTMLFormElement[]} forms */
|
|
export function applySettingsFromForms(forms) {
|
|
applySettings(getData(forms));
|
|
Settings.resetChanged();
|
|
waitForSaved();
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLFormElement[]} forms
|
|
* @returns {boolean}
|
|
*/
|
|
function validateForms(forms) {
|
|
return validateFormsReportValidity(forms)
|
|
&& validateFormsPasswords(forms, {strict: false});
|
|
}
|
|
|
|
/** @param {Event} event */
|
|
function applySettingsFromAllForms(event) {
|
|
event.preventDefault();
|
|
|
|
const elems = /** @type {NodeListOf<HTMLFormElement>} */
|
|
(document.querySelectorAll("form.form-settings"));
|
|
|
|
const forms = Array.from(elems);
|
|
if (validateForms(forms)) {
|
|
applySettingsFromForms(forms);
|
|
}
|
|
}
|
|
|
|
/** @param {Event} event */
|
|
function resetToFactoryDefaults(event) {
|
|
event.preventDefault();
|
|
|
|
if (window.confirm("Are you sure you want to erase all settings from the device?")) {
|
|
sendAction("factory_reset");
|
|
}
|
|
}
|
|
|
|
/** @param {Event} event */
|
|
function handleSettingsFile(event) {
|
|
event.preventDefault();
|
|
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLInputElement)) {
|
|
return;
|
|
}
|
|
|
|
const inputFiles = target.files;
|
|
if (!inputFiles || inputFiles.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
const inputFile = inputFiles[0];
|
|
target.value = "";
|
|
|
|
if (!window.confirm("Previous settings will be overwritten. Are you sure you want to restore from this file?")) {
|
|
return false;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = function(event) {
|
|
try {
|
|
const data = event.target?.result;
|
|
if (!data) {
|
|
throw new Error(`${event.target} is missing data payload`);
|
|
}
|
|
|
|
if (data instanceof ArrayBuffer) {
|
|
throw new Error("invalid payload type - ArrayBuffer");
|
|
}
|
|
|
|
sendAction("restore", JSON.parse(data));
|
|
} catch (e) {
|
|
notifyError(/** @type {Error} */(e));
|
|
}
|
|
};
|
|
reader.readAsText(inputFile);
|
|
}
|
|
|
|
/** @returns {boolean} */
|
|
export function pendingChanges() {
|
|
return Settings.counters.changed > 0;
|
|
}
|
|
|
|
/** @type {import("./question.mjs").QuestionWrapper} */
|
|
export function askSaveSettings(ask) {
|
|
if (pendingChanges()) {
|
|
return ask("There are pending changes to the settings, continue the operation without saving?");
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/** @returns {KeyValueListeners} */
|
|
function listeners() {
|
|
return {
|
|
"saved": (_, value) => {
|
|
Settings.saved = value;
|
|
},
|
|
};
|
|
}
|
|
|
|
/** @param {{[k: string]: any}} kvs */
|
|
export function updateVariables(kvs) {
|
|
Object.entries(kvs)
|
|
.forEach(([key, value]) => {
|
|
updateKeyValue(key, value);
|
|
});
|
|
}
|
|
|
|
export function init() {
|
|
variableListeners(listeners());
|
|
|
|
document.getElementById("uploader")
|
|
?.addEventListener("change", handleSettingsFile);
|
|
|
|
document.querySelector(".button-save")
|
|
?.addEventListener("click", applySettingsFromAllForms);
|
|
|
|
const backup = document.querySelector(".button-settings-backup");
|
|
if (backup instanceof HTMLButtonElement) {
|
|
listenAppConnected((urls) => {
|
|
backup.dataset["url"] = urls.config.href;
|
|
});
|
|
|
|
backup.addEventListener("click", (event) => {
|
|
event.preventDefault();
|
|
|
|
const url = backup.dataset["url"];
|
|
if (!url) {
|
|
alert("Not connected");
|
|
return;
|
|
}
|
|
|
|
const elem = document.getElementById("downloader");
|
|
if (elem instanceof HTMLAnchorElement) {
|
|
elem.href = url;
|
|
elem.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelector(".button-settings-restore")
|
|
?.addEventListener("click", () => {
|
|
document.getElementById("uploader")?.click();
|
|
});
|
|
document.querySelector(".button-settings-factory")
|
|
?.addEventListener("click", resetToFactoryDefaults);
|
|
|
|
document.querySelector(".button-settings-password")
|
|
?.addEventListener("click", () => {
|
|
showPanelByName("password");
|
|
});
|
|
|
|
document.querySelectorAll(".button-add-settings-group")
|
|
.forEach((elem) => {
|
|
elem.addEventListener("click", onGroupSettingsAddClick);
|
|
});
|
|
|
|
// aka elements that already have "dataset['enumerable']" set
|
|
// most likely, merged static .html contains this reference
|
|
document.querySelectorAll("[data-enumerable]")
|
|
.forEach((elem) => {
|
|
if (!(elem instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
listenEnumerable(elem);
|
|
});
|
|
|
|
// No group handler should be registered after this point, since we depend on the order
|
|
// of registration to trigger 'after-add' handler and update group attributes *after*
|
|
// module function finishes modifying the container
|
|
for (const group of document.querySelectorAll(".settings-group")) {
|
|
group.addEventListener("settings-group-del", onGroupSettingsEventDel);
|
|
group.addEventListener("change", onElementChange);
|
|
}
|
|
|
|
for (let elem of document.querySelectorAll("input,select")) {
|
|
elem.addEventListener("change", onElementChange);
|
|
}
|
|
|
|
resetOriginals();
|
|
}
|