From b75c95b1cbac715f2466dd581164e444941ea7d5 Mon Sep 17 00:00:00 2001 From: Brandon Jordan Date: Wed, 15 Nov 2023 22:02:47 -0500 Subject: [PATCH] Improve value rendering --- src/style.css | 4 +-- src/value.ts | 81 +++++++++++++++++++++++++++++++++++---------------- 2 files changed, 57 insertions(+), 28 deletions(-) diff --git a/src/style.css b/src/style.css index 5e152ca..f180e54 100644 --- a/src/style.css +++ b/src/style.css @@ -234,9 +234,7 @@ } .sp-container .sp-variable-icon i { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 0.9rem; } .sp-container .sp-scrollable-action-content { diff --git a/src/value.ts b/src/value.ts index d169f00..38a792b 100644 --- a/src/value.ts +++ b/src/value.ts @@ -4,6 +4,11 @@ interface AttachmentValue { attachmentsByRange: object } +interface Aggrandizements { + Type: string + PropertyName: string +} + export function renderValue(value?: any, placeholder?: string): HTMLElement { const container = document.createElement('div'); if (value || typeof value === 'boolean' || value === 0) { @@ -35,33 +40,10 @@ export function renderValue(value?: any, placeholder?: string): HTMLElement { container.appendChild(label); break case 'object': - if (Array.isArray(value)) { - container.innerText = '[Array]'; - } else if (value && value.Value && value.Value.attachmentsByRange) { - let str = String(value.Value.string); - for (let v in value.Value.attachmentsByRange) { - let variable = value.Value.attachmentsByRange[v]; - if (variable.Type === 'Variable') { - const inlineVar = renderInlineVariable(variable.VariableName); - str = str.replace('\uFFFC', inlineVar.outerHTML); - } else { - const inlineVar = renderInlineVariable(variable.VariableName, 'globe'); - str = str.replace('\uFFFC', inlineVar.outerHTML); - } - } - container.innerHTML = str; - } else if (value && value.Value && value.Value.OutputName) { - const inlineVar = renderInlineVariable(value.Value.OutputName); - container.appendChild(inlineVar); - } else if (value && value.Variable) { - const inlineVar = renderInlineVariable(value.Variable.Value.VariableName); - container.appendChild(inlineVar); - } else { - container.innerText = '[Object]'; - } + renderObjectValue(container, value); break; default: - container.innerText = '[Object]'; + container.innerText = '[Unsupported Value]'; } } else if (placeholder) { container.className = 'sp-placeholder-value'; @@ -70,6 +52,55 @@ export function renderValue(value?: any, placeholder?: string): HTMLElement { return container; } +function renderObjectValue(container: HTMLElement, value?: any) { + if (Array.isArray(value)) { + container.innerText = '[Array]'; + } else if (value && value.Value && value.Value.attachmentsByRange) { + let str = String(value.Value.string); + for (let v in value.Value.attachmentsByRange) { + let variable = value.Value.attachmentsByRange[v]; + if (variable.Type === 'Variable') { + const inlineVar = renderInlineVariable(variable.VariableName); + str = str.replace('\uFFFC', inlineVar.outerHTML); + } else { + let globalName = variable.VariableName; + let globalIcon = 'globe'; + if (variable.Aggrandizements) { + globalName = variable.Aggrandizements[0].PropertyName; + } + switch (variable.Type) { + case 'DeviceDetails': + globalIcon = 'desktopcomputer'; + } + const inlineVar = renderInlineVariable(globalName, globalIcon); + str = str.replace('\uFFFC', inlineVar.outerHTML); + } + } + container.innerHTML = str; + } else if (value && value.Value) { + if (value.Value.OutputName) { + const inlineVar = renderInlineVariable(value.Value.OutputName); + container.appendChild(inlineVar); + } else { + let char; + if (value.Value.Type !== 'Variable') { + char = 'globe'; + } + switch (value.Value.Type) { + case 'DeviceDetails': + char = 'desktopcomputer'; + } + const inlineVar = renderInlineVariable(value.Value.VariableName, char); + container.appendChild(inlineVar); + } + } else if (value && value.Variable) { + const inlineVar = renderInlineVariable(value.Variable.Value.VariableName); + container.appendChild(inlineVar); + } else { + container.innerText = '[Unsupported Object]'; + } +} + function renderInlineVariable(v: string, char?: string) { const variable = document.createElement('div'); variable.className = 'sp-variable-value';