mirror of
https://github.com/cesanta/mongoose.git
synced 2026-09-30 13:32:29 +07:00
509 lines
17 KiB
JavaScript
509 lines
17 KiB
JavaScript
// SPDX-FileCopyrightText: 2026 Cesanta Software Limited
|
|
// SPDX-License-Identifier: GPL-2.0-only or commercial
|
|
(function (global) {
|
|
"use strict";
|
|
|
|
const Watch = (function() {
|
|
function Watch(url, onev, onmsg) {
|
|
let ws, reconnect = true;
|
|
const connect = () => {
|
|
ws = new WebSocket(url);
|
|
ws.onopen = () => onev && onev('open');
|
|
ws.onclose = () => { onev && onev('close'); reconnect && setTimeout(connect, 1000); };
|
|
ws.onmessage = e => {
|
|
onev && onev('message', e.data);
|
|
let m;
|
|
try {
|
|
m = JSON.parse(e.data);
|
|
} catch(err) {
|
|
console.log('INVALID JSON:', e.data);
|
|
return;
|
|
}
|
|
onmsg && onmsg(m);
|
|
};
|
|
};
|
|
|
|
connect();
|
|
return {
|
|
close: () => { reconnect = false; ws?.close(); },
|
|
get ws() { return ws; }
|
|
};
|
|
}
|
|
|
|
return Watch;
|
|
})();
|
|
|
|
function fetch_and_ready() {
|
|
if (isMock) {
|
|
return delay(500).then(rescan).then(mark_ready);
|
|
}
|
|
return fetch('api/get')
|
|
.then(r => r.ok ? r.json() : Promise.reject(r.status))
|
|
.then(data => {
|
|
for (const k in data) {
|
|
if (typeof data[k] === 'number') {
|
|
const prev = settings.data[k];
|
|
const arr = prev && typeof prev === 'object' ? prev : {};
|
|
data[k] = {
|
|
...arr,
|
|
size: data[k],
|
|
start: typeof arr.start === 'number' ? arr.start : 0,
|
|
data: Array.isArray(arr.data) ? arr.data : [],
|
|
};
|
|
}
|
|
}
|
|
return apply_and_rescan(settings.data, data);
|
|
})
|
|
.then(expand_arrays)
|
|
.then(() => {
|
|
ws_connect();
|
|
return mark_ready();
|
|
})
|
|
.catch(err => console.log('GET failed', err));
|
|
}
|
|
|
|
function ws_connect() {
|
|
if (isMock || ws) return;
|
|
ws = Watch('api/websocket', function (evname, args) {
|
|
if (evname == 'open') { status.online = true; rescan(); }
|
|
if (evname == 'close') { status.online = false; rescan(); }
|
|
if (settings.debug) console.log('WS', evname, args);
|
|
}, function (m) {
|
|
if (m.method == 'change' && m.params) {
|
|
const rest = {};
|
|
const arrays = [];
|
|
for (const k in m.params) {
|
|
const ma = k.match(/^(.+)\/(\d+)$/);
|
|
if (ma) {
|
|
const arr = settings.data[ma[1]];
|
|
if (arr?.data) { const i = +ma[2] - (arr.start || 0); if (i >= 0 && i < arr.data.length) arr.data[i] = Object.assign(arr.data[i] || {}, m.params[k]); }
|
|
} else if (typeof m.params[k] === 'number' && settings.data[k]?.data !== undefined) {
|
|
const arr = settings.data[k];
|
|
arr.size = m.params[k];
|
|
if (is_expandable(arr)) arrays.push(expand_array(k, arr.start, arr.end));
|
|
} else {
|
|
rest[k] = m.params[k];
|
|
}
|
|
}
|
|
apply(settings.data, rest);
|
|
prune(settings.data, settings.edits);
|
|
Promise.all(arrays)
|
|
.then(rescan)
|
|
.then(() => userhandlers['change']?.(m.params));
|
|
}
|
|
if (m.method == 'logout') ws_disconnect();
|
|
});
|
|
}
|
|
|
|
function ws_disconnect() {
|
|
if (!ws) return;
|
|
ws.close();
|
|
ws = null;
|
|
status.online = false;
|
|
}
|
|
|
|
|
|
function login(params) {
|
|
if (isMock) return fetch_and_ready().then(() => ({}));
|
|
const opts = {};
|
|
if (params) {
|
|
const username = (params?.username ?? '').trim();
|
|
const password = params?.password ?? '';
|
|
const join = username + ':' + password;
|
|
opts.headers = { Authorization: `Basic ${btoa(join)}` };
|
|
}
|
|
return fetch('api/login', opts)
|
|
.then(r => r.ok ? r.json() : r.text().then(t => Promise.reject(t || r.statusText)))
|
|
.then(resp => {
|
|
status.username = resp?.user || '';
|
|
status.userlevel = resp?.level || 0;
|
|
return fetch_and_ready().then(() => resp);
|
|
});
|
|
};
|
|
|
|
function logout() {
|
|
if (isMock) { ws_disconnect(); return Promise.resolve({}); }
|
|
return fetch('api/logout')
|
|
.catch(() => true)
|
|
.then(() => {
|
|
status.username = '';
|
|
status.userlevel = 0;
|
|
ws_disconnect();
|
|
return true;
|
|
});
|
|
}
|
|
|
|
if (global.Dashboard) return;
|
|
const isMock = location.protocol === 'file:' || !!window.frameElement || (window !== window.top);
|
|
const settings = {data: {}, edits: {}, debug: true};
|
|
const userhandlers = {}; // User event handlers
|
|
const status = { online: false, username: '', userlevel: 0, ready: false };
|
|
let ws = null;
|
|
let ready_started = false;
|
|
|
|
function install_ready_gate() {
|
|
document.documentElement.classList.remove('dashboard-ready');
|
|
if (document.getElementById('dashboard-ready-gate')) return;
|
|
const style = document.createElement('style');
|
|
style.id = 'dashboard-ready-gate';
|
|
style.textContent = `html:not(.dashboard-ready) *,html:not(.dashboard-ready) *::before,html:not(.dashboard-ready) *::after{transition:none!important;animation:none!important}`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function mark_ready() {
|
|
if (ready_started) return Promise.resolve();
|
|
ready_started = true;
|
|
return next_frame().then(() => {
|
|
status.ready = true;
|
|
document.documentElement.classList.add('dashboard-ready');
|
|
userhandlers['ready']?.();
|
|
});
|
|
}
|
|
|
|
const fromPath = (path, value) => path.split('.').reverse().reduce((acc, k) => ({ [k]: acc }), value);
|
|
const get = (obj, path) => path.split('.').reduce((o, k) => o?.[k], obj);
|
|
const set = (obj, path, value) => apply(obj, fromPath(path, value));
|
|
const has = (obj, path) => path.split('.').every(k => (obj = obj?.[k]) !== undefined);
|
|
const del = (obj, path) => {
|
|
const keys = path.split('.');
|
|
const last = keys.pop();
|
|
const parent = keys.reduce((o, k) => o?.[k], obj);
|
|
return parent && delete parent[last];
|
|
};
|
|
const eq = (a, b) =>
|
|
a === b ||
|
|
(a && b && typeof a === 'object' && typeof b === 'object' &&
|
|
Object.keys(a).length === Object.keys(b).length &&
|
|
Object.keys(a).every(k => eq(a[k], b[k])));
|
|
const isEmpty = obj => obj && typeof obj === 'object' && Object.keys(obj).length === 0;
|
|
function prune(o1, o2, p = '') {
|
|
for (const k in p ? get(o2, p) : o2) {
|
|
const path = p ? p + '.' + k : k;
|
|
if (!has(o1, path)) continue;
|
|
const x1 = get(o1, path), x2 = get(o2, path);
|
|
if (eq(x1, x2)) del(o2, path);
|
|
if (x2 && typeof (x2) === 'object') prune(o1, o2, path);
|
|
if (isEmpty(get(o2, path))) del(o2, path);
|
|
}
|
|
}
|
|
|
|
function safeEval(expr, context) {
|
|
const c = Object.freeze(context);
|
|
const k = Object.keys(c).join(",");
|
|
let result;
|
|
try {
|
|
result = Function("x", `"use strict"; const {${k}} = x; return ${expr};`)(c);
|
|
} catch (err) {
|
|
//console.log('EVAL', expr, context, err);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function edit(el, key, val) {
|
|
const dv = get(settings.data, key);
|
|
if (typeof(dv) === 'number') {
|
|
const v = +val;
|
|
if (isNaN(v) || val.endsWith('.')) { // Typing number, endingdot
|
|
el.classList.toggle("error", true);
|
|
} else {
|
|
el.classList.toggle("error", false);
|
|
val = v;
|
|
}
|
|
} else if (typeof(dv) === 'boolean') {
|
|
val = !!val;
|
|
}
|
|
|
|
set(settings.edits, key, val);
|
|
if (val === dv) {
|
|
del(settings.edits, key);
|
|
el.classList.toggle("edited", false);
|
|
} else {
|
|
el.classList.toggle("edited", true);
|
|
}
|
|
|
|
if (el.dataset.autosave) save(key);
|
|
rescan();
|
|
};
|
|
|
|
// Return if any of the keys matching pattern is edited
|
|
function edited(key) {
|
|
return has(settings.edits, key);
|
|
};
|
|
|
|
function handle_bind(el, key, context) {
|
|
if (!has(context, key)) { console.error('EVAL', key, context); return; }
|
|
const v = get(context, key)
|
|
// console.log(2, key, v);
|
|
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) {
|
|
if (el.type == 'checkbox') el.checked = v;
|
|
if (el.type == 'text' || el.tagName == 'SELECT') el.value = v;
|
|
if (!has(settings.edits, key)) {
|
|
el.classList.toggle('edited', false);
|
|
el.classList.toggle('error', false);
|
|
}
|
|
if (!el.bound) el.addEventListener("input", ev => edit(el, key, el.type == 'checkbox' ? ev.target.checked : ev.target.value)), el.bound = true;
|
|
} else if (el.tagName == 'BUTTON') {
|
|
if (!el.bound) {
|
|
el.addEventListener("pointerdown", ev => Dashboard.call('set', set({}, key, true)));
|
|
el.addEventListener("pointerup", ev => Dashboard.call('set', set({}, key, false)));
|
|
el.bound = true;
|
|
el.dataset.autosave = 1;
|
|
}
|
|
} else {
|
|
el.innerHTML = v;
|
|
}
|
|
};
|
|
|
|
// Save the edits for keys that match pattern
|
|
function save(key) {
|
|
const changes = {};
|
|
set(changes, key, get(settings.edits, key));
|
|
fetch('api/set', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(changes),
|
|
}).catch(err => console.log('SET failed', key, err));
|
|
};
|
|
|
|
// Cancel the edits for keys that match pattern
|
|
function cancel(key) {
|
|
del(settings.edits, key);
|
|
rescan();
|
|
};
|
|
|
|
// Set a checkbox's `checked` *property* from a boolean expression. The
|
|
// `checked` content attribute is presence-based - templating its value
|
|
// would not work, so this binds straight to the IDL property instead
|
|
function handle_checked(el, key, context) {
|
|
if (!has(context, key)) { console.error('EVAL', key, context); return; }
|
|
el.checked = !!get(context, key);
|
|
};
|
|
|
|
function handle_save(el, key) {
|
|
el.disabled = !edited(key);
|
|
if (!el.bound) el.addEventListener("click", ev => save(key)), el.bound = true;
|
|
};
|
|
|
|
function handle_cancel(el, key) {
|
|
if (!el.bound) el.addEventListener("click", ev => cancel(key)), el.bound = true;
|
|
el.disabled = !edited(key);
|
|
};
|
|
|
|
function handle_repeat(el, key, context) {
|
|
if (!has(context, key)) { console.error('EVAL', key, context); return; }
|
|
if (!el.orig) el.orig = el.children[0].cloneNode(true);
|
|
const v = get(context, key);
|
|
const it = el.dataset.iterator ?? '__obj';
|
|
const json = v.map(item => JSON.stringify(item));
|
|
const prev = el.itemsJson || [];
|
|
if (json.length === prev.length && el.children.length === json.length) {
|
|
// Same length: re-template each changed row's existing DOM node in
|
|
// place instead of replacing it. Untouched rows are left completely
|
|
// alone, and changed rows keep their live elements too - so bound
|
|
// properties (e.g. a checkbox's `checked`) change on an
|
|
// already-painted node, which is what lets CSS transitions play, and
|
|
// in-progress edits in unrelated fields of that row survive
|
|
json.forEach((j, i) => {
|
|
if (j !== prev[i]) process(el.children[i], { ...context, [it]: v[i] }, true);
|
|
});
|
|
} else {
|
|
const frag = document.createDocumentFragment();
|
|
v.forEach(item => {
|
|
const node = el.orig.cloneNode(true);
|
|
process(node, { ...context, [it]: item }, true);
|
|
frag.appendChild(node);
|
|
});
|
|
el.replaceChildren(frag);
|
|
}
|
|
el.itemsJson = json;
|
|
};
|
|
|
|
function upload(el, is_ota) {
|
|
if (el.bound) return;
|
|
el.bound = true;
|
|
el.addEventListener("change", function (ev) {
|
|
const f = ev.target.files[0];
|
|
if (!f) return;
|
|
const reader = new FileReader();
|
|
reader.readAsArrayBuffer(f);
|
|
reader.onload = function () {
|
|
const url = is_ota ? 'api/ota' : `fs/${el.dataset.upload}/${encodeURIComponent(f.name)}`;
|
|
let begin = Date.now(), body = reader.result, ok = false;
|
|
// console.log(2, url, body);
|
|
fetch(url, { method: 'POST', body })
|
|
.then(r => { ok = r.ok; })
|
|
.catch(() => true)
|
|
.finally(() => {
|
|
console.log('UPLOAD finshed in ', Date.now() - begin, 'ms');
|
|
});
|
|
};
|
|
ev.target.value = '';
|
|
ev.preventDefault();
|
|
});
|
|
};
|
|
|
|
const handle_upload = el => upload(el, false);
|
|
const handle_ota = el => upload(el, true);
|
|
|
|
function substituteExpressions(text, context) {
|
|
const expected = { string: 1, number: 1, boolean: 1 };
|
|
const f = (orig, expr) => {
|
|
const res = safeEval(expr, context);
|
|
return (typeof res) in expected ? res : orig;
|
|
};
|
|
return typeof text == "string" ? text.replace(/\${(.+?)}/g, f) : text;
|
|
}
|
|
|
|
function process(root, context, x) {
|
|
const selector = x ? "*" : "*:not([data-repeat] *)";
|
|
const all = root.querySelectorAll(selector);
|
|
const els = root.nodeType === Node.DOCUMENT_NODE ? all : [root, ...all];
|
|
els.forEach(function (el) {
|
|
if (el.tagName === "SCRIPT" || el.tagName === "STYLE") return;
|
|
for (const node of el.childNodes) {
|
|
if (node.nodeType === Node.TEXT_NODE &&
|
|
(node.originalValue || node.nodeValue.includes('${'))) {
|
|
if (!node.originalValue) node.originalValue = node.nodeValue;
|
|
const v = substituteExpressions(node.originalValue, context);
|
|
if (v !== node.nodeValue) node.nodeValue = v;
|
|
}
|
|
}
|
|
for (const attr of el.attributes) {
|
|
const cv = attr.value || '';
|
|
if (!el.originalAttrs) el.originalAttrs = {};
|
|
if (el.originalAttrs[attr.name] || cv.includes('${')) {
|
|
if (!el.originalAttrs[attr.name]) el.originalAttrs[attr.name] = cv;
|
|
const v = substituteExpressions(el.originalAttrs[attr.name], context);
|
|
if (v !== attr.value) attr.value = v;
|
|
}
|
|
}
|
|
const handlers = {
|
|
bind: handle_bind,
|
|
checked: handle_checked,
|
|
save: handle_save,
|
|
cancel: handle_cancel,
|
|
repeat: handle_repeat,
|
|
upload: handle_upload,
|
|
ota: handle_ota,
|
|
};
|
|
for (const [key, val] of Object.entries(el.dataset)) {
|
|
handlers[key]?.(el, val, context);
|
|
}
|
|
});
|
|
};
|
|
|
|
function realrescan() {
|
|
// const t0 = performance.now();
|
|
const context = JSON.parse(JSON.stringify(settings.data));
|
|
apply(context, { __status: status });
|
|
apply(context, settings.edits);
|
|
process(document, context);
|
|
// const t1 = performance.now();
|
|
// console.log(`Took2 ${t1 - t0} ms`);
|
|
};
|
|
|
|
function rescan() {
|
|
if (document.readyState === "loading") {
|
|
return new Promise(resolve => {
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
realrescan();
|
|
resolve();
|
|
}, { once: true });
|
|
});
|
|
} else {
|
|
realrescan();
|
|
return Promise.resolve();
|
|
}
|
|
};
|
|
|
|
const delay = (ms, value) => new Promise(r => setTimeout(() => r(value), ms));
|
|
const next_frame = () => new Promise(r => requestAnimationFrame(() => r()));
|
|
const is_expandable = arr => arr && Array.isArray(arr.data) &&
|
|
typeof arr.start === 'number' && typeof arr.end === 'number';
|
|
|
|
function expand_array(name, start, end) {
|
|
const arr = settings.data[name];
|
|
const page = 100, all = [];
|
|
const stop = Math.min(end, typeof arr?.size === 'number' ? arr.size - 1 : end);
|
|
const done = () => {
|
|
set(settings.data, `${name}.data`, all);
|
|
set(settings.data, `${name}.start`, start);
|
|
return rescan().then(() => all);
|
|
};
|
|
const next = from => {
|
|
if (from > stop) return Promise.resolve(done());
|
|
const to = Math.min(from + page - 1, stop);
|
|
return fetch(`api/get/${name}/${from}/${to}`)
|
|
.then(r => r.ok ? r.json() : Promise.reject(r.statusText))
|
|
.then(data => {
|
|
if (!data || !data.length) return done();
|
|
all.push(...data);
|
|
return next(from + data.length);
|
|
});
|
|
};
|
|
return next(start);
|
|
}
|
|
|
|
function expand_arrays() {
|
|
const all = [];
|
|
for (const name in settings.data) {
|
|
const arr = settings.data[name];
|
|
if (is_expandable(arr)) all.push(expand_array(name, arr.start, arr.end));
|
|
}
|
|
return Promise.all(all);
|
|
}
|
|
|
|
function call(name, args) {
|
|
if (isMock) {
|
|
return delay(750, true).then(() => console.log('response', name));
|
|
}
|
|
if (name === 'set') {
|
|
return fetch('api/set', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(args),
|
|
}).catch(err => console.log('CALL FAILED', name, args, err));
|
|
}
|
|
if (args && typeof args === 'object') {
|
|
const {name: aname, start: s = 0, size: total = 100, end} = args;
|
|
const stop = typeof end === 'number' ? end : s + total - 1;
|
|
return expand_array(aname, s, stop).catch(err => console.log('CALL FAILED', name, args, err));
|
|
}
|
|
const path = typeof args === 'string' && args ? '/' + args : '';
|
|
return fetch('api/get' + path)
|
|
.then(r => r.ok ? r.json() : Promise.reject(r.statusText))
|
|
.catch(err => console.log('CALL FAILED', name, args, err));
|
|
};
|
|
|
|
function apply(target, patch) {
|
|
for (const k in patch) {
|
|
const v = patch[k];
|
|
if (v && typeof v === 'object' && !Array.isArray(v)) {
|
|
target[k] = apply(target[k] || {}, v);
|
|
} else {
|
|
target[k] = v;
|
|
}
|
|
}
|
|
return target;
|
|
};
|
|
|
|
function apply_and_rescan(target, patch) {
|
|
apply(target, patch);
|
|
prune(settings.data, settings.edits);
|
|
return rescan();
|
|
};
|
|
|
|
function on(name, fn) {
|
|
userhandlers[name] = fn;
|
|
if (name === 'ready' && status.ready) setTimeout(fn, 0);
|
|
};
|
|
|
|
function init(conf) {
|
|
install_ready_gate();
|
|
apply_and_rescan(settings, conf);
|
|
if (!settings.auth) fetch_and_ready();
|
|
};
|
|
|
|
global.Dashboard = { init, call, on, status, login, logout };
|
|
})(window);
|