diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index bedc963186..ab64f0c165 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -22,7 +22,6 @@ import { EntityId } from '@shared/models/id/entity-id'; import { NULL_UUID } from '@shared/models/id/has-uuid'; import { EntityType, baseDetailsPageByEntityType } from '@shared/models/entity-type.models'; import { HttpErrorResponse } from '@angular/common/http'; -import { letterSpacing } from 'html2canvas/dist/types/css/property-descriptors/letter-spacing'; import { TranslateService } from '@ngx-translate/core'; import { serverErrorCodesTranslations } from '@shared/models/constants'; @@ -479,6 +478,18 @@ export function flatFormattedData(input: FormattedData[]): FormattedData { return result; } +export function flatDataWithoutOverride(data: FormattedData[]): FormattedData { + const processingKeyValue = data[0]; + for (let i = 1; i < data.length; i++) { + Object.keys(data[i]).forEach((key) => { + if (!isDefinedAndNotNull(processingKeyValue[key]) || isEmptyStr(processingKeyValue[key])) { + processingKeyValue[key] = data[i][key]; + } + }); + } + return processingKeyValue; +} + export function mergeFormattedData(first: FormattedData[], second: FormattedData[]): FormattedData[] { const merged = first.concat(second); return _(merged).groupBy(el => el.$datasource) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts index daf2e40221..d76e43d765 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts @@ -23,12 +23,11 @@ import { DatasourceData, FormattedData } from '@shared/models/widget.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { createLabelFromPattern, - fillDataPattern, - flatFormattedData, + flatDataWithoutOverride, formattedDataFormDatasourceData, hashCode, isDefinedAndNotNull, isNotEmptyStr, - parseFunction, processDataPattern, + parseFunction, safeExecute } from '@core/utils'; import cssjs from '@core/css/css'; @@ -119,7 +118,7 @@ export class MarkdownWidgetComponent extends PageComponent implements OnInit { const data = formattedDataFormDatasourceData(initialData); let markdownText = this.settings.useMarkdownTextFunction ? safeExecute(this.markdownTextFunction, [data]) : this.settings.markdownTextPattern; - const allData = flatFormattedData(data); + const allData: FormattedData = flatDataWithoutOverride(data); markdownText = createLabelFromPattern(markdownText, allData); if (this.markdownText !== markdownText) { this.markdownText = this.utils.customTranslation(markdownText, markdownText); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts index 07e5334419..94f7d10471 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts @@ -23,7 +23,7 @@ import { DatasourceData, FormattedData } from '@shared/models/widget.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { createLabelFromPattern, - flatFormattedData, + flatDataWithoutOverride, formattedDataFormDatasourceData, isNumber, isObject, @@ -101,7 +101,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte const data = formattedDataFormDatasourceData(initialData); const pattern = this.settings.useQrCodeTextFunction ? safeExecute(this.qrCodeTextFunction, [data]) : this.settings.qrCodeTextPattern; - const allData = flatFormattedData(data); + const allData: FormattedData = flatDataWithoutOverride(data); qrCodeText = createLabelFromPattern(pattern, allData); this.updateQrCodeText(qrCodeText); } @@ -132,5 +132,4 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte this.scheduleUpdateCanvas = true; } } - } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html index 3859a17e90..040e470be1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/markdown-widget-settings.component.html @@ -28,7 +28,8 @@ + label="{{ 'widgets.markdown.markdown-text-pattern' | translate }}" + helpId="widget/editor/widget_js_markdown_pattern"> diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html index 715d1f1fe6..f0157c8987 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html @@ -22,6 +22,7 @@ widgets.qr-code.qr-code-text-pattern + {{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }} {{ 'widgets.qr-code.qr-code-text-pattern-required' | translate }} diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.html b/ui-ngx/src/app/shared/components/markdown-editor.component.html index 2259f4d38f..74e69216de 100644 --- a/ui-ngx/src/app/shared/components/markdown-editor.component.html +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.html @@ -17,25 +17,30 @@ -->
-
+
+ + + +
+
+
+ +
+
-
- - - -
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.scss b/ui-ngx/src/app/shared/components/markdown-editor.component.scss index a4149c54d7..1a1cf57a63 100644 --- a/ui-ngx/src/app/shared/components/markdown-editor.component.scss +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.scss @@ -58,20 +58,15 @@ overflow: auto; height: 100%; } - .buttons-panel { - position: absolute; - top: 5px; - right: 24px; - z-index: 1; - button.edit-toggle { - min-width: 32px; - min-height: 15px; - padding: 4px; - margin: 0; - font-size: .8rem; - line-height: 15px; - color: #7b7b7b; - background: rgba(220, 220, 220, .35); - } + button.panel-button { + background: rgba(220, 220, 220, .35); + align-items: center; + vertical-align: middle; + min-width: 32px; + min-height: 15px; + padding: 4px; + font-size: .8rem; + line-height: 15px; + color: #7b7b7b; } } diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.ts b/ui-ngx/src/app/shared/components/markdown-editor.component.ts index 919c621620..fee904b60d 100644 --- a/ui-ngx/src/app/shared/components/markdown-editor.component.ts +++ b/ui-ngx/src/app/shared/components/markdown-editor.component.ts @@ -40,6 +40,8 @@ export class MarkdownEditorComponent implements OnInit, ControlValueAccessor, On @Input() readonly: boolean; + @Input() helpId: string; + @ViewChild('markdownEditor', {static: true}) markdownEditorElmRef: ElementRef; diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_markdown_pattern.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_markdown_pattern.md new file mode 100644 index 0000000000..fd4ab60a9c --- /dev/null +++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_markdown_pattern.md @@ -0,0 +1,68 @@ +#### Markdown pattern + +
+
+ +The Markdown template displays the value of the first found key in the entities in the entity alias. + +
+
+ +#### Examples + +Use # to create a Markdown header. The number of characters # specifies the type of header: # - h1, ## - h2, ### - h3, etc. + +```markdown + ###### Markdown/HTML card +{:copy-code} +``` + ###### Markdown/HTML card + +
+
+ +Use - character to create list item. You can create nested lists separating them with tabs in the pattern: + + ```markdown + - Element 1 + - Element 2 + - Element 2.1 + - Element 2.2 + -Element 3 +{:copy-code} + ``` +- Element 1 +- Element 2 + - Element 2.1 + - Element 2.2 +- Element 3 + +
+
+ +Use * character to choose style: + + ```markdown + - *Element 1* + - **Element 2** + - ***Element 3*** +{:copy-code} + ``` +- *Element 1* +- **Element 2** +- ***Element 3*** + +
+
+ +Use ${} to add some value from your key: + ```markdown + - **Element 1**: ${key1Name} + - **Element 1**: ${key2Name} + - **Element 1**: ${key3Name} +{:copy-code} + ``` + - **Element 1**: key1Value + - **Element 2**: key2Value + - **Element 3**: key3Value + diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 2b1eb11de7..3f3f70860f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4276,6 +4276,7 @@ "qr-code": { "use-qr-code-text-function": "Use QR code text function", "qr-code-text-pattern": "QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')", + "qr-code-text-pattern-hint": "QR code text pattern use the value of the first found key in the entities in the entity alias.", "qr-code-text-pattern-required": "QR code text pattern is required.", "qr-code-text-function": "QR code text function" },