From faf233232933652675779a8c70dc26021e8ba6dc Mon Sep 17 00:00:00 2001 From: Alejandro Gallardo Escobar Date: Wed, 27 Mar 2019 13:37:00 +0100 Subject: [PATCH] Visual Console Refactor: added the label and simple value items to the client Former-commit-id: d13d210abf0dcfaf2cb2567bc05b143a128cbd55 --- visual_console/playground/index.html | 51 +++++++++++++++++++++++-- visual_console/src/VisualConsole.ts | 16 ++++---- visual_console/src/items/Label.ts | 6 ++- visual_console/src/items/SimpleValue.ts | 13 ++++++- 4 files changed, 72 insertions(+), 14 deletions(-) diff --git a/visual_console/playground/index.html b/visual_console/playground/index.html index 189b0ed656..4cd72a7ec2 100644 --- a/visual_console/playground/index.html +++ b/visual_console/playground/index.html @@ -7,6 +7,11 @@ +
@@ -19,8 +24,8 @@ id: 1, groupId: 0, name: "Test Visual Console", - width: 800, - height: 300, + width: 1000, + height: 400, backgroundURL: null, backgroundColor: "rgb(86, 86, 86)", isFavorite: false @@ -185,6 +190,44 @@ color: "white" }; + var labelRawProps = { + // Generic props. + id: 8, + type: 4, // Label = 4 + label: '

I\'m a label

', + isLinkEnabled: false, + isOnTop: false, + parentId: null, + aclGroupId: null, + // Position props. + x: 410, + y: 0, + // Size props. + width: 200, + height: 200 + }; + + var simpleValueRawProps = { + // Generic props. + id: 9, + type: 2, // Simple value = 2 + label: '

Simple Value: 10

', + isLinkEnabled: false, + isOnTop: false, + parentId: null, + aclGroupId: null, + // Position props. + x: 10, + y: 10, + // Size props. + width: 50, + height: 50, + // Custom props. + valueType: "string", + value: "10", + processValue: "none" + }; + var items = [ staticGraphRawProps, colorCloudRawProps, @@ -192,7 +235,9 @@ digitalClockRawProps2, analogicClockRawProps, boxRawProps, - lineRawProps + lineRawProps, + labelRawProps, + simpleValueRawProps ]; try { diff --git a/visual_console/src/VisualConsole.ts b/visual_console/src/VisualConsole.ts index 0b834d9ee3..3f627790c3 100644 --- a/visual_console/src/VisualConsole.ts +++ b/visual_console/src/VisualConsole.ts @@ -13,6 +13,8 @@ import Group, { groupPropsDecoder } from "./items/Group"; import Clock, { clockPropsDecoder } from "./items/Clock"; import Box, { boxPropsDecoder } from "./items/Box"; import Line, { linePropsDecoder } from "./items/Line"; +import Label, { labelPropsDecoder } from "./items/Label"; +import SimpleValue, { simpleValuePropsDecoder } from "./items/SimpleValue"; // Base properties. export interface VisualConsoleProps extends Size { @@ -82,15 +84,14 @@ function itemInstanceFrom(data: UnknownObject) { case ItemType.SIMPLE_VALUE_MAX: case ItemType.SIMPLE_VALUE_MIN: case ItemType.SIMPLE_VALUE_AVG: - throw new TypeError("item not found"); + return new SimpleValue(simpleValuePropsDecoder(data)); case ItemType.PERCENTILE_BAR: - throw new TypeError("item not found"); - case ItemType.LABEL: - throw new TypeError("item not found"); - case ItemType.ICON: - return new Icon(iconPropsDecoder(data)); case ItemType.PERCENTILE_BUBBLE: throw new TypeError("item not found"); + case ItemType.LABEL: + return new Label(labelPropsDecoder(data)); + case ItemType.ICON: + return new Icon(iconPropsDecoder(data)); case ItemType.SERVICE: throw new TypeError("item not found"); case ItemType.GROUP_ITEM: @@ -102,11 +103,8 @@ function itemInstanceFrom(data: UnknownObject) { case ItemType.AUTO_SLA_GRAPH: throw new TypeError("item not found"); case ItemType.CIRCULAR_PROGRESS_BAR: - throw new TypeError("item not found"); case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR: - throw new TypeError("item not found"); case ItemType.DONUT_GRAPH: - throw new TypeError("item not found"); case ItemType.BARS_GRAPH: throw new TypeError("item not found"); case ItemType.CLOCK: diff --git a/visual_console/src/items/Label.ts b/visual_console/src/items/Label.ts index 0f67473dcc..9395653499 100644 --- a/visual_console/src/items/Label.ts +++ b/visual_console/src/items/Label.ts @@ -26,6 +26,10 @@ export function labelPropsDecoder(data: UnknownObject): LabelProps | never { export default class Label extends Item { public createDomElement(): HTMLElement { - throw new Error("not implemented"); + const element = document.createElement("div"); + element.className = "label"; + element.innerHTML = this.props.label || ""; + + return element; } } diff --git a/visual_console/src/items/SimpleValue.ts b/visual_console/src/items/SimpleValue.ts index 2f0eb5ca9e..8b5116a044 100644 --- a/visual_console/src/items/SimpleValue.ts +++ b/visual_console/src/items/SimpleValue.ts @@ -89,6 +89,17 @@ export function simpleValuePropsDecoder( export default class SimpleValue extends Item { public createDomElement(): HTMLElement { - throw new Error("not implemented"); + const element = document.createElement("div"); + element.className = "simple-value"; + + if (this.props.valueType === "image") { + const img = document.createElement("img"); + img.src = this.props.value; + element.append(img); + } else { + element.innerHTML = this.props.label || ""; + } + + return element; } }