6833e9f3a8
* compact-fields.js (new): trimmed to MGC-only output-format pickers (processOutputFormat / dbaseOutputFormat). The logger toggle/level and physical-position visuals now come from generalFunctions' shared iconHelpers, auto-injected via /machineGroupControl/menu.js. * mode-cards.js: strategy cards re-styled — Most-efficient (BEP bell with dot on the curve peak), Priority (clean staircase), Maintenance (Font Awesome fa-wrench). Rendezvous toggle flips Active / Inactive label dynamically. * mgc.html: dropped the duplicated .mgc-icon-* CSS rules (now live in the shared iconHelpers stylesheet). Strategy + rendezvous CSS stays local (MGC-specific). Output picker holders switched to the shared .evolv-icon-picker class. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
93 lines
3.8 KiB
JavaScript
93 lines
3.8 KiB
JavaScript
// compact-fields.js — MGC-only output-format icon picker.
|
|
//
|
|
// Logger toggle/level and physical-position visuals now live in the shared
|
|
// generalFunctions/src/menu/iconHelpers.js (auto-injected by MenuManager), so
|
|
// the only MGC-local visuals left are the two output-format dropdowns
|
|
// (processOutputFormat, dbaseOutputFormat) — those fields aren't part of any
|
|
// shared menu.
|
|
|
|
(function () {
|
|
const editor = window.EVOLV?.nodes?.machineGroupControl?.editor;
|
|
if (!editor) return;
|
|
|
|
const BLUE = '#1F4E79';
|
|
const STEEL = '#607484';
|
|
|
|
// MGC-only SVGs (output formats only — logger/position SVGs come from
|
|
// window.EVOLV.iconHelpers.SVG).
|
|
const SVG = {
|
|
process: `
|
|
<svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<rect x="10" y="14" width="20" height="30" rx="2" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
|
|
<rect x="50" y="14" width="20" height="30" rx="2" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
|
|
<line x1="30" y1="29" x2="46" y2="29" stroke="${BLUE}" stroke-width="3" stroke-linecap="round"/>
|
|
<path d="M42 24 L48 29 L42 34" fill="none" stroke="${BLUE}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>`,
|
|
json: `
|
|
<svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<g fill="none" stroke="${BLUE}" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M30 14 C22 16 22 26 27 29 C22 32 22 42 30 44"/>
|
|
<path d="M50 14 C58 16 58 26 53 29 C58 32 58 42 50 44"/>
|
|
</g>
|
|
<g fill="${STEEL}">
|
|
<circle cx="36" cy="29" r="2.2"/>
|
|
<circle cx="44" cy="29" r="2.2"/>
|
|
</g>
|
|
</svg>`,
|
|
csv: `
|
|
<svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<rect x="12" y="12" width="56" height="34" rx="2" fill="#fff" stroke="${STEEL}" stroke-width="2.4"/>
|
|
<line x1="12" y1="22" x2="68" y2="22" stroke="${STEEL}" stroke-width="2"/>
|
|
<g stroke="${STEEL}" stroke-width="1.6">
|
|
<line x1="12" y1="34" x2="68" y2="34"/>
|
|
<line x1="31" y1="12" x2="31" y2="46"/>
|
|
<line x1="49" y1="12" x2="49" y2="46"/>
|
|
</g>
|
|
</svg>`,
|
|
influxdb: `
|
|
<svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<ellipse cx="40" cy="15" rx="22" ry="6" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
|
|
<path d="M18 15 V42 C18 46 28 49 40 49 C52 49 62 46 62 42 V15" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
|
|
<path d="M18 28 C26 32 54 32 62 28" fill="none" stroke="${STEEL}" stroke-width="1.6" opacity="0.6"/>
|
|
<path d="M22 39 L30 32 L38 41 L46 34 L54 38" fill="none" stroke="${BLUE}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>`,
|
|
};
|
|
|
|
const outputIcons = {
|
|
process: SVG.process,
|
|
json: SVG.json,
|
|
csv: SVG.csv,
|
|
influxdb: SVG.influxdb,
|
|
};
|
|
|
|
const outputLabels = {
|
|
process: 'Process',
|
|
json: 'JSON',
|
|
csv: 'CSV',
|
|
influxdb: 'Influx',
|
|
};
|
|
|
|
function initOutputFormats() {
|
|
const helpers = window.EVOLV?.iconHelpers;
|
|
if (!helpers) return;
|
|
|
|
const processSelect = document.getElementById('node-input-processOutputFormat');
|
|
const processHolder = document.getElementById('mgc-process-output-picker');
|
|
if (processSelect && processHolder) {
|
|
helpers.renderSelectPicker(processSelect, processHolder, outputIcons, outputLabels);
|
|
}
|
|
|
|
const dbaseSelect = document.getElementById('node-input-dbaseOutputFormat');
|
|
const dbaseHolder = document.getElementById('mgc-dbase-output-picker');
|
|
if (dbaseSelect && dbaseHolder) {
|
|
helpers.renderSelectPicker(dbaseSelect, dbaseHolder, outputIcons, outputLabels);
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
initOutputFormats();
|
|
}
|
|
|
|
editor.compactFields = { init };
|
|
})();
|