`;
const dirty = (record = true) => {
onDirty(true);
q("#save-state").textContent = "Por guardar";
q("#save-state").className = "unsaved";
if (record) {
const snapshot = JSON.stringify(draft.graph);
if (snapshot !== JSON.stringify(history[cursor])) {
history = history.slice(0, cursor + 1);
history.push(clone(draft.graph));
if (history.length > 80) history.shift();
cursor = history.length - 1;
}
}
updateTools();
};
function updateTools() {
q("#undo").disabled = !owner() || cursor === 0;
q("#redo").disabled = !owner() || cursor === history.length - 1;
q("#duplicate-node").disabled = !owner() || !active();
}
function undo(direction) {
if (
!owner() ||
cursor + direction < 0 ||
cursor + direction >= history.length
)
return;
cursor += direction;
draft.graph = clone(history[cursor]);
if (!active()) selected = draft.graph.nodes[0]?.id;
dirty(false);
render();
}
function sizing() {
const maxX = Math.max(800, ...draft.graph.nodes.map((n) => n.x + 290)),
maxY = Math.max(
600,
...draft.graph.nodes.map((n) => n.y + height(n) + 80),
);
q("#world").style.width = `${maxX}px`;
q("#world").style.height = `${maxY}px`;
q("#world-space").style.width = `${maxX * zoom}px`;
q("#world-space").style.height = `${maxY * zoom}px`;
q("#world").style.transform = `scale(${zoom})`;
q("#zoom-label").textContent = `${Math.round(zoom * 100)}%`;
}
function fit() {
const nodes = draft.graph.nodes;
if (!nodes.length) return;
const minX = Math.min(...nodes.map((n) => n.x)),
minY = Math.min(...nodes.map((n) => n.y)),
width = Math.max(...nodes.map((n) => n.x + 230)) - minX + 80,
totalHeight = Math.max(...nodes.map((n) => n.y + height(n))) - minY + 80;
zoom = Math.min(
1.2,
Math.max(
0.25,
Math.min(
q("#canvas").clientWidth / width,
q("#canvas").clientHeight / totalHeight,
),
),
);
sizing();
q("#canvas").scrollLeft = Math.max(0, (minX - 40) * zoom);
q("#canvas").scrollTop = Math.max(0, (minY - 40) * zoom);
}
function edges() {
q("#edges").innerHTML =
`${esc(t.group)}CONFIGURAÇÃO${t.fields.map((f) => field(n, f)).join("") || '
Sem parâmetros adicionais.
'}
${n.type === "webhook" ? `
POST ${esc(location.origin)}/api/hooks/${esc(bot.id)}
Cabeçalho: X-Webhook-Secret
` : ""}
${!t.trigger && t.outputs.includes("error") ? `
Liga a saída Erro para tratar a falha. As tentativas repetem a ação; usa-as quando a repetição for adequada.
` : ""}
Variáveis e expressões
{{server.virtualserver_name}}
{{server.virtualserver_clientsonline - server.virtualserver_queryclientsonline}}
{{event.clid}} · {{event.client_database_id}}
{{item.clid}} no ramo Cada
{{temp.nome}} · {{variables.nome}}
{{time.time}}:{{time.seconds}}
{{text}} · {{top}}
{{temp.error.message}}
Funções: round, min, max, length, contains. Filtros: {{text | upper}} e {{temp.result | json}}.
${connections.map(({ e, i }) => `
${esc(draft.graph.nodes.find((node) => node.id === (e.from === n.id ? e.to : e.from))?.label)}${e.from === n.id ? "Saída" : "Entrada"} · ${labels[e.port] || e.port}
`).join("") || '
Ainda sem ligações.
'}
`;
q("#node-label").oninput = (e) => {
if (!owner()) return;
n.label = e.target.value;
dirty();
q(`[data-node="${n.id}"] strong`).textContent = n.label;
};
el.querySelectorAll("[data-field]").forEach(
(input) =>
(input.onchange = () => {
if (!owner()) return;
try {
n.config[input.dataset.field] = input.hasAttribute("data-json")
? JSON.parse(input.value || "{}")
: input.type === "number"
? Number(input.value)
: input.value;
input.setCustomValidity("");
dirty();
render();
} catch {
input.setCustomValidity("JSON inválido.");
input.reportValidity();
toast("Corrige o JSON do bloco antes de guardar.", true);
}
}),
);
q("#delete-node").onclick = remove;
el.querySelectorAll("[data-delete-edge]").forEach(
(b) =>
(b.onclick = () => {
draft.graph.edges.splice(Number(b.dataset.deleteEdge), 1);
dirty();
render();
}),
);
if (q("#new-secret"))
q("#new-secret").onclick = () => {
n.config.secret = token();
dirty();
render();
};
}
async function validate() {
const invalid = q("#editor input:invalid, #editor textarea:invalid");
if (invalid) {
invalid.reportValidity();
throw new Error("Corrige o campo inválido antes de guardar.");
}
return api("/api/validate", {
method: "POST",
body: JSON.stringify({ graph: draft.graph }),
});
}
async function save() {
try {
const result = await validate();
await api(`/api/bots/${bot.id}`, {
method: "PUT",
body: JSON.stringify({
graph: draft.graph,
connectionId: draft.connectionId,
}),
});
await refresh();
onDirty(false);
q("#save-state").textContent = "Guardado";
q("#save-state").className = "";
toast(
result.warnings.length
? `Guardado. ${result.warnings[0]}`
: "Flow guardado.",
);
return true;
} catch (error) {
toast(error.message, true);
return false;
}
}
async function execute(simulation) {
if (busy) return;
if (
!simulation &&
!confirm("Executar este flow no servidor TeamSpeak configurado?")
)
return;
if (!(await save())) return;
busy = true;
q("#simulate").disabled = q("#run").disabled = true;
q("#cancel-flow").hidden = false;
try {
const result = await api(
`/api/bots/${bot.id}/${simulation ? "simulate" : "run"}`,
{
method: "POST",
body: JSON.stringify({
triggerId: q("#test-trigger").value,
...(simulation ? { event: eventFixture } : {}),
}),
},
);
await refresh();
showRun(result);
} catch (error) {
toast(error.message, true);
} finally {
busy = false;
if (q("#simulate")) {
q("#simulate").disabled = q("#run").disabled = !owner();
q("#cancel-flow").hidden = true;
}
}
}
q("#bot-select").onchange = (e) => onBot(e.target.value);
q("#search-block").oninput = (e) =>
q("#editor")
.querySelectorAll(".palette-item")
.forEach(
(b) =>
(b.hidden = !b.textContent
.toLowerCase()
.includes(e.target.value.toLowerCase())),
);
q("#editor")
.querySelectorAll("[data-add]")
.forEach((b) => (b.onclick = () => add(b.dataset.add)));
q("#undo").onclick = () => undo(-1);
q("#redo").onclick = () => undo(1);
q("#duplicate-node").onclick = duplicate;
q("#arrange").onclick = arrange;
q("#validate").onclick = async () => {
try {
const result = await validate();
toast(
result.warnings.join(" ") ||
"Flow válido: ligações e parâmetros verificados.",
);
} catch (error) {
toast(error.message, true);
}
};
q("#zoom-in").onclick = () => {
zoom = Math.min(1.5, zoom + 0.1);
sizing();
};
q("#zoom-out").onclick = () => {
zoom = Math.max(0.25, zoom - 0.1);
sizing();
};
q("#fit").onclick = fit;
q("#fullscreen").onclick = () =>
document.fullscreenElement
? document.exitFullscreen()
: q("#editor")
.requestFullscreen()
.catch(() => toast("Ecrã inteiro indisponível.", true));
q("#flow-connection").onchange = (e) => {
draft.connectionId = e.target.value;
dirty(false);
inspect();
};
q("#load-resources").onclick = async () => {
if (!draft.connectionId) {
toast("Escolhe uma ligação primeiro.", true);
return;
}
const button = q("#load-resources");
button.disabled = true;
try {
const result = await api(
`/api/connections/${draft.connectionId}/resources`,
{ method: "POST" },
);
resources.set(draft.connectionId, result);
inspect();
toast(
Object.keys(result.errors).length
? `Listas carregadas parcialmente: ${Object.values(result.errors).join("; ")}`
: "Clientes, canais, grupos e permissões carregados.",
Boolean(Object.keys(result.errors).length),
);
} catch (error) {
toast(error.message, true);
} finally {
button.disabled = !owner();
}
};
q("#test-data").onclick = () => {
const dialog = q("#dialog");
dialog.innerHTML = `