Add control logic engine, panel logic dialogs, logic-edit restriction
Introduce server-side control-logic flow graphs (cron/alarm triggers, Lua blocks) with CRUD endpoints, panel-logic lifecycle triggers and user-interaction dialog nodes, and a synthetic node-graph editor. Add an optional logic-editor allowlist (server.logic_editors) gating who may add/edit panel logic and control logic, surfaced via /api/v1/me and enforced in the API; hide logic affordances in the UI accordingly. Update README, example config, and functional/technical specs to cover all current features (plot panels, panel/control logic, local variables, access control) and refresh the in-app manual and contextual help. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Martino Ferrari
@@ -1923,6 +1923,22 @@ body {
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* Synthetic-signal node editor: a large modal hosting the shared .flow-editor
|
||||
layout (palette | canvas | inspector). */
|
||||
.synth-graph {
|
||||
background: #1e2535;
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 8px;
|
||||
width: 92vw;
|
||||
height: 88vh;
|
||||
max-width: 95vw;
|
||||
max-height: 92vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2235,6 +2251,18 @@ body {
|
||||
|
||||
.iface-item:hover .iface-item-actions { display: flex; }
|
||||
|
||||
.iface-item[draggable="true"] .iface-item-name { cursor: grab; }
|
||||
|
||||
/* Drag-and-drop reorder / move-to-folder affordances */
|
||||
.iface-item.drop-target {
|
||||
box-shadow: inset 0 2px 0 0 #3b82f6;
|
||||
}
|
||||
.iface-folder-header.drop-target,
|
||||
.iface-list.drop-target {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
outline: 1px dashed #3b82f6;
|
||||
}
|
||||
|
||||
.iface-delete { color: #ef4444 !important; }
|
||||
.iface-delete:hover { background: rgba(239, 68, 68, 0.15) !important; }
|
||||
|
||||
@@ -2511,6 +2539,16 @@ body {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.help-callout {
|
||||
border-left: 3px solid #2563eb;
|
||||
background: #1a2236;
|
||||
padding: 0.6rem 0.85rem;
|
||||
margin: 0.85rem 0;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Getting started cards */
|
||||
.help-cards {
|
||||
display: flex;
|
||||
@@ -3329,3 +3367,220 @@ kbd {
|
||||
}
|
||||
.plot-pane-btn:hover { color: #e2e8f0; border-color: #4a9eff; }
|
||||
.plot-pane-btn:disabled { opacity: 0.35; cursor: default; }
|
||||
|
||||
/* ── Control logic editor (server-side flows) ──────────────────────────────── */
|
||||
.cl-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
.cl-modal {
|
||||
background: #1a1f2e;
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 10px;
|
||||
width: min(1200px, 97vw);
|
||||
height: min(820px, 95vh);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cl-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.cl-subtitle { font-size: 0.8rem; }
|
||||
|
||||
.cl-header-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cl-dirty {
|
||||
font-size: 0.75rem;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.cl-error {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: #3b1d1d;
|
||||
color: #fca5a5;
|
||||
font-size: 0.82rem;
|
||||
border-bottom: 1px solid #5b2a2a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cl-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl-list {
|
||||
width: 230px;
|
||||
min-width: 230px;
|
||||
border-right: 1px solid #2d3748;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cl-list-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.cl-list-empty { padding: 0.75rem; font-size: 0.8rem; }
|
||||
|
||||
.cl-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #232a3a;
|
||||
}
|
||||
.cl-list-item:hover { background: #232a3a; }
|
||||
.cl-list-item-active { background: #2a3450; }
|
||||
|
||||
.cl-status-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #475569;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cl-status-on { background: #34d399; box-shadow: 0 0 5px #34d399; }
|
||||
|
||||
.cl-list-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #e2e8f0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.cl-mini-btn {
|
||||
color: #64748b;
|
||||
font-size: 0.8rem;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cl-mini-btn:hover { color: #e2e8f0; background: #1a1f2e; }
|
||||
|
||||
.cl-editor-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cl-empty {
|
||||
padding: 1.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.cl-graph-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cl-name-input { width: 240px; }
|
||||
|
||||
.cl-enable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Logic dialogs (action.dialog.* user interaction) ──────────────────────── */
|
||||
.logic-dialog-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 700;
|
||||
}
|
||||
|
||||
.logic-dialog {
|
||||
background: #1a1f2e;
|
||||
border: 1px solid #2d3748;
|
||||
border-top: 3px solid #4a9eff;
|
||||
border-radius: 8px;
|
||||
min-width: 320px;
|
||||
max-width: 460px;
|
||||
padding: 1rem 1.25rem 0.9rem;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.logic-dialog-error { border-top-color: #ef4444; }
|
||||
.logic-dialog-setpoint { border-top-color: #34d399; }
|
||||
|
||||
.logic-dialog-header {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #e2e8f0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.logic-dialog-error .logic-dialog-header { color: #fca5a5; }
|
||||
|
||||
.logic-dialog-message {
|
||||
color: #cbd5e1;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.logic-dialog-input {
|
||||
width: 100%;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.logic-dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.logic-dialog-actions .panel-btn { flex: 0 0 auto; min-width: 5rem; }
|
||||
|
||||
.panel-btn-primary {
|
||||
background: #2563eb;
|
||||
}
|
||||
.panel-btn-primary:hover { background: #3b82f6; }
|
||||
|
||||
Reference in New Issue
Block a user