Visual Console Refactor: added the label and simple value items to the client
Former-commit-id: d13d210abf0dcfaf2cb2567bc05b143a128cbd55
This commit is contained in:
Alejandro Gallardo Escobar
parent
e76fe00345
commit
faf2332329
|
|
@ -7,6 +7,11 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="vc.main.css" />
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="visual-console-container"></div>
|
||||
</body>
|
||||
|
|
@ -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: '<h1 style="color: #FDFD96;">I\'m a label</h1>',
|
||||
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: '<h3 style="color: #FDFD96;">Simple Value: 10</h3>',
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ export function labelPropsDecoder(data: UnknownObject): LabelProps | never {
|
|||
|
||||
export default class Label extends Item<LabelProps> {
|
||||
public createDomElement(): HTMLElement {
|
||||
throw new Error("not implemented");
|
||||
const element = document.createElement("div");
|
||||
element.className = "label";
|
||||
element.innerHTML = this.props.label || "";
|
||||
|
||||
return element;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,6 +89,17 @@ export function simpleValuePropsDecoder(
|
|||
|
||||
export default class SimpleValue extends Item<SimpleValueProps> {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue