300 lines
14 KiB
JavaScript
300 lines
14 KiB
JavaScript
import { state as appState } from "/assets/js/state.js";
|
||
import { tr } from "/assets/js/i18n.js";
|
||
import { $, esc } from "/assets/js/shared.js";
|
||
import { ownerName, rgbName } from "./schema.js";
|
||
import { get } from "/assets/js/navigation.js";
|
||
import { tokenHeaders } from "./services.js";
|
||
import { ensureHosts, loadConfig } from "/assets/js/settings.js";
|
||
|
||
export function pluginText(zh, en) {
|
||
return appState.LANG === "zh" ? zh : en;
|
||
}
|
||
export function renderPlugins() {
|
||
return `<div class="group"><p>${pluginText("仅发现插件不会接管插件的设备能力。接入后发送监控状态；暂停或断开联动不会停止插件的本地功能。", "Discovery does not take control of plugin device capabilities. Connecting sends monitoring state; pausing or disconnecting the link does not stop the plugin’s local functions.")}</p><div class="action-row"><button type="button" id="refreshPlugins" onclick="loadPlugins()">${tr("刷新列表")}</button> <span id="pluginRefreshState" class="hint" role="status" aria-live="polite"></span></div><div id="pluginList"></div></div><div id="pluginEditor"></div>`;
|
||
}
|
||
export function fanMetric(plugins) {
|
||
const fans = Object.entries(plugins)
|
||
.filter(
|
||
([, p]) =>
|
||
p.online && p.capabilities?.fan && p.status?.available !== false,
|
||
)
|
||
.map(([id, p]) => {
|
||
const st = p.status;
|
||
let value = "";
|
||
if (
|
||
p.capabilities.fan.rpm &&
|
||
typeof st.fan_rpm === "number" &&
|
||
Number.isFinite(st.fan_rpm) &&
|
||
st.fan_rpm >= 0
|
||
)
|
||
value = st.fan_rpm + " RPM";
|
||
else if (st.fan_name && st.fan_name !== "UNAVAILABLE")
|
||
value =
|
||
{
|
||
OFF: pluginText("关闭", "Off"),
|
||
L1: pluginText("低速", "Low"),
|
||
L2: pluginText("中低速", "Medium-low"),
|
||
L3: pluginText("中速", "Medium"),
|
||
L4: pluginText("高速", "High"),
|
||
MAX: pluginText("全速", "Full speed"),
|
||
}[st.fan_name] || st.fan_name;
|
||
return value ? { name: p.name || id, value } : null;
|
||
})
|
||
.filter(Boolean);
|
||
return fans.length
|
||
? `<span> · ${fans.map((f) => esc(pluginText("风扇", "Fan") + (fans.length > 1 ? " " + f.name : "") + " " + f.value)).join(" · ")}</span>`
|
||
: "";
|
||
}
|
||
export function pluginSummary(plugins, host) {
|
||
if (!Object.keys(plugins).length)
|
||
return `<div class="group"><strong>${pluginText("风扇与硬件插件", "Fan and hardware plugins")}</strong><p class="muted">${pluginText("尚未接入硬件插件，风扇状态不可用。独立安装并启动插件后，可在插件管理中接入。", "No hardware plugin connected; fan status is unavailable. Install and start a plugin independently, then connect it in plugin management.")}</p><button type="button" data-manage-plugin-host="${esc(host)}">${pluginText("管理插件", "Manage plugin")}</button></div>`;
|
||
return Object.entries(plugins)
|
||
.map(([id, p]) => {
|
||
const st = p.status || {},
|
||
cap = p.capabilities || {},
|
||
details = [];
|
||
if (p.online) {
|
||
if (cap.display)
|
||
details.push("OLED " + esc(ownerName(st.oled_page || "")));
|
||
if (cap.rgb) details.push("RGB " + esc(rgbName(st.rgb_mode || "")));
|
||
}
|
||
return `<div class="group action-row"><span><strong>${esc(p.name || id)}</strong> · ${p.online ? tr("在线") : tr("离线")}${details.length ? " · " + details.join(" · ") : ""}</span><button type="button" data-manage-plugin-host="${esc(host)}">${pluginText("管理插件", "Manage plugin")}</button></div>`;
|
||
})
|
||
.join("");
|
||
}
|
||
|
||
export async function loadPlugins() {
|
||
const list = $("pluginList");
|
||
if (!list) return;
|
||
const button = $("refreshPlugins"),
|
||
feedback = $("pluginRefreshState");
|
||
if (button?.disabled) return;
|
||
if (button) button.disabled = true;
|
||
if (feedback) feedback.textContent = pluginText("正在刷新…", "Refreshing…");
|
||
list.textContent = pluginText(
|
||
"正在发现本机插件…",
|
||
"Discovering local plugins…",
|
||
);
|
||
try {
|
||
const data = await get(
|
||
"/api/v1/plugins?host=" + encodeURIComponent(appState.currentConfigHost),
|
||
);
|
||
appState.pluginRows = data.plugins;
|
||
if (feedback)
|
||
feedback.textContent =
|
||
pluginText(
|
||
"刷新完成，发现 " + appState.pluginRows.length + " 个插件 · ",
|
||
"Refreshed, " + appState.pluginRows.length + " plugins found · ",
|
||
) + new Date().toLocaleTimeString();
|
||
list.innerHTML =
|
||
appState.pluginRows
|
||
.map(
|
||
(p) =>
|
||
`<div class="group"><h3>${esc(p.descriptor?.name || p.id)}</h3><div class="hint">${esc(p.socket)} · ${p.online ? tr("在线") : tr("离线")} · ${p.linked ? (p.paused ? pluginText("联动已暂停", "Link paused") : pluginText("已接入", "Connected")) : pluginText("尚未接入", "Not connected")}</div>${p.error ? `<p class="error">${esc(p.error)}</p>` : ""}${p.status?.errors && Object.keys(p.status.errors).length ? `<p class="error">${esc(JSON.stringify(p.status.errors))}</p>` : ""}<p>${Object.keys(
|
||
p.descriptor?.capabilities || {},
|
||
)
|
||
.map((k) =>
|
||
esc(
|
||
{
|
||
fan: pluginText("风扇", "Fan"),
|
||
display: pluginText("屏幕", "Display"),
|
||
rgb: pluginText("灯光", "Lighting"),
|
||
}[k] || k,
|
||
),
|
||
)
|
||
.join(
|
||
" · ",
|
||
)}</p><div class="toolbar">${p.linked ? `<button data-plugin-op="${p.paused ? "resume" : "pause"}" data-plugin-id="${esc(p.id)}">${p.paused ? pluginText("恢复告警联动", "Resume alert link") : pluginText("暂停告警联动", "Pause alert link")}</button><button data-plugin-op="unlink" data-plugin-id="${esc(p.id)}">${pluginText("断开接入", "Disconnect")}</button>` : `<button data-plugin-op="link" data-plugin-id="${esc(p.id)}" ${p.online ? "" : "disabled"}>${pluginText("接入插件", "Connect plugin")}</button>`}<button data-plugin-edit="${esc(p.id)}" ${p.online ? "" : "disabled"}>${pluginText("插件配置", "Plugin settings")}</button></div></div>`,
|
||
)
|
||
.join("") ||
|
||
`<p class="muted">${pluginText("未发现正在运行的硬件插件。刷新只查询插件，不会安装或启动服务。若已安装，请先在目标机器启动插件，再刷新并接入；未接入不影响监控。", "No running hardware plugins found. Refresh only queries plugins; it does not install or start services. Start the installed plugin on the target host, then refresh and connect. Monitoring works independently.")}</p>`;
|
||
list
|
||
.querySelectorAll("[data-plugin-op]")
|
||
.forEach(
|
||
(b) =>
|
||
(b.onclick = () =>
|
||
pluginAction(b.dataset.pluginId, b.dataset.pluginOp)),
|
||
);
|
||
list
|
||
.querySelectorAll("[data-plugin-edit]")
|
||
.forEach((b) => (b.onclick = () => editPlugin(b.dataset.pluginEdit)));
|
||
} catch (e) {
|
||
list.textContent = e.message;
|
||
if (feedback)
|
||
feedback.textContent = pluginText("刷新失败", "Refresh failed");
|
||
} finally {
|
||
if (button) button.disabled = false;
|
||
}
|
||
}
|
||
export async function pluginPut(path, payload) {
|
||
return get(path, {
|
||
method: "PUT",
|
||
headers: tokenHeaders(),
|
||
body: JSON.stringify({ ...payload, host: appState.currentConfigHost }),
|
||
});
|
||
}
|
||
export async function pluginAction(id, operation) {
|
||
try {
|
||
await pluginPut("/api/v1/plugins", { id, operation });
|
||
await loadPlugins();
|
||
} catch (e) {
|
||
alert(e.message);
|
||
}
|
||
}
|
||
export function capabilityField(section, key, value, spec) {
|
||
const unit =
|
||
appState.LANG === "zh"
|
||
? { s: "秒", ms: "毫秒" }[spec.unit] || spec.unit
|
||
: spec.unit,
|
||
label = spec.label?.[appState.LANG] || spec.label?.en || key,
|
||
id = `${section}.${key}`,
|
||
vis = spec.visible
|
||
? ` data-cap-visible="${esc(JSON.stringify(spec.visible))}"`
|
||
: "";
|
||
return `<label class="field"${vis}>${esc(label)}${spec.type === "enum" ? `<select data-cap-section="${esc(section)}" data-cap-key="${esc(key)}">${spec.choices.map((x) => `<option value="${esc(x)}" ${String(value) === String(x) ? "selected" : ""}>${esc(pluginChoice(x))}</option>`).join("")}</select>` : `<div class="input-unit"><input type="number" step="${section === "rgb" ? 1 : "any"}" min="${esc(spec.min)}" max="${esc(spec.max)}" data-cap-section="${esc(section)}" data-cap-key="${esc(key)}" value="${esc(value)}"><span class="unit">${esc(unit)}</span></div><span class="hint">${pluginText("范围", "Range")} ${spec.min}–${spec.max} ${esc(unit)}</span>`}</label>`;
|
||
}
|
||
export function pluginChoice(x) {
|
||
const zh = {
|
||
off: "全灭",
|
||
solid: "自定义常亮",
|
||
flash: "自定义闪烁（实验性）",
|
||
breathe: "内置呼吸",
|
||
flow: "流水灯",
|
||
marquee: "跑马灯",
|
||
rainbow: "彩虹灯",
|
||
colorful: "炫彩灯",
|
||
red: "红色",
|
||
green: "绿色",
|
||
blue: "蓝色",
|
||
yellow: "黄色",
|
||
purple: "紫色",
|
||
cyan: "青色",
|
||
white: "白色",
|
||
};
|
||
return appState.LANG === "zh" ? zh[x] || x : x;
|
||
}
|
||
export function capabilityFields(section, fields, values) {
|
||
const seen = new Set();
|
||
return Object.entries(fields)
|
||
.map(([key, spec]) => {
|
||
if (!spec.color_group)
|
||
return capabilityField(section, key, values[key], spec);
|
||
if (seen.has(spec.color_group)) return "";
|
||
seen.add(spec.color_group);
|
||
const members = Object.entries(fields).filter(
|
||
([, v]) => v.color_group === spec.color_group,
|
||
),
|
||
hex =
|
||
"#" +
|
||
["r", "g", "b"]
|
||
.map((c) =>
|
||
Number(values[members.find(([, v]) => v.channel === c)[0]])
|
||
.toString(16)
|
||
.padStart(2, "0"),
|
||
)
|
||
.join("");
|
||
return `<div class="group span2" data-cap-visible="${esc(JSON.stringify(spec.visible || {}))}"><div style="display:grid;grid-template-columns:52px repeat(3,minmax(0,1fr));gap:10px;align-items:start"><label style="text-align:center">${pluginText("颜色", "Color")}<input type="color" data-cap-color="${esc(spec.color_group)}" value="${hex}" aria-label="${pluginText("选择颜色", "Choose color")}" style="width:38px;height:34px;padding:0;margin-top:5px"></label>${members.map(([k, v]) => capabilityField(section, k, values[k], { ...v, visible: null })).join("")}</div></div>`;
|
||
})
|
||
.join("");
|
||
}
|
||
export async function editPlugin(id) {
|
||
try {
|
||
appState.pluginSelected = id;
|
||
appState.pluginDraft = await get(
|
||
"/api/v1/plugin/config?host=" +
|
||
encodeURIComponent(appState.currentConfigHost) +
|
||
"&id=" +
|
||
encodeURIComponent(id),
|
||
);
|
||
const data = appState.pluginDraft,
|
||
editor = $("pluginEditor");
|
||
editor.innerHTML = `<div class="group"><h3>${esc(id)}</h3><p class="hint">${pluginText("配置由插件保存并立即应用，不重启监控。", "Settings are saved and applied by the plugin without restarting monitoring.")}</p>${(data.notes || []).map((n) => `<p class="hint">${esc(n[appState.LANG] || n.en || "")}</p>`).join("")}${Object.entries(
|
||
data.schema,
|
||
)
|
||
.map(
|
||
([section, fields]) =>
|
||
`<div class="group"><h3>${{ fan: pluginText("风扇", "Fan"), oled: pluginText("屏幕", "Display"), rgb: pluginText("灯光", "Lighting") }[section] || esc(section)}</h3><div class="fields">${capabilityFields(section, fields, data.config[section])}</div></div>`,
|
||
)
|
||
.join(
|
||
"",
|
||
)}<div class="plugin-actions"><button id="savePlugin">${pluginText("保存插件配置", "Save plugin settings")}</button> <span id="pluginSaveState"></span></div></div>`;
|
||
editor.oninput = (e) => {
|
||
if (e.target.dataset.capColor) {
|
||
const group = e.target.dataset.capColor,
|
||
hex = e.target.value;
|
||
["r", "g", "b"].forEach((c, i) => {
|
||
editor.querySelector(`[data-cap-key="${group}_${c}"]`).value =
|
||
parseInt(hex.slice(1 + 2 * i, 3 + 2 * i), 16);
|
||
});
|
||
}
|
||
for (const picker of editor.querySelectorAll("[data-cap-color]")) {
|
||
picker.value =
|
||
"#" +
|
||
["r", "g", "b"]
|
||
.map((c) =>
|
||
Math.max(
|
||
0,
|
||
Math.min(
|
||
255,
|
||
Number(
|
||
editor.querySelector(
|
||
`[data-cap-key="${picker.dataset.capColor}_${c}"]`,
|
||
).value,
|
||
),
|
||
),
|
||
)
|
||
.toString(16)
|
||
.padStart(2, "0"),
|
||
)
|
||
.join("");
|
||
}
|
||
updatePluginVisibility();
|
||
};
|
||
updatePluginVisibility();
|
||
$("savePlugin").onclick = savePluginConfig;
|
||
} catch (e) {
|
||
$("pluginEditor").textContent = e.message;
|
||
}
|
||
}
|
||
export function updatePluginVisibility() {
|
||
document.querySelectorAll("[data-cap-visible]").forEach((el) => {
|
||
const rules = JSON.parse(el.dataset.capVisible);
|
||
el.classList.toggle(
|
||
"hidden",
|
||
!Object.entries(rules).every(([key, values]) =>
|
||
values.includes(
|
||
document.querySelector(`[data-cap-key="${key}"]`)?.value,
|
||
),
|
||
),
|
||
);
|
||
});
|
||
}
|
||
export async function savePluginConfig() {
|
||
const updates = {};
|
||
for (const el of document.querySelectorAll("[data-cap-key]")) {
|
||
if (!el.reportValidity()) return;
|
||
const s = el.dataset.capSection,
|
||
k = el.dataset.capKey;
|
||
(updates[s] ??= {})[k] = el.value;
|
||
}
|
||
try {
|
||
await pluginPut("/api/v1/plugin/config", {
|
||
id: appState.pluginSelected,
|
||
updates,
|
||
});
|
||
$("pluginSaveState").textContent = pluginText("保存成功", "Saved");
|
||
} catch (e) {
|
||
$("pluginSaveState").textContent = e.message;
|
||
}
|
||
}
|
||
document.addEventListener("click", async (e) => {
|
||
const b = e.target.closest("[data-manage-plugin-host]");
|
||
if (!b) return;
|
||
appState.currentConfigHost = b.dataset.managePluginHost;
|
||
await ensureHosts();
|
||
$("configHost").value = appState.currentConfigHost;
|
||
document.querySelector('[data-tab="config"]').click();
|
||
await loadConfig();
|
||
document.querySelector('[data-config-section="plugins"]')?.click();
|
||
});
|