tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2019-03-27 13:37:00 +01:00
parent e76fe00345
commit faf2332329
4 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
visual_console/playground/index.html
View File

@ -7,6 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="vc.main.css" /> <link rel="stylesheet" type="text/css" media="screen" href="vc.main.css" />
</head> </head>
<style>
body {
margin: 0;
}
</style>
<body> <body>
<div id="visual-console-container"></div> <div id="visual-console-container"></div>
</body> </body>
@ -19,8 +24,8 @@
id: 1, id: 1,
groupId: 0, groupId: 0,
name: "Test Visual Console", name: "Test Visual Console",
width: 800, width: 1000,
height: 300, height: 400,
backgroundURL: null, backgroundURL: null,
backgroundColor: "rgb(86, 86, 86)", backgroundColor: "rgb(86, 86, 86)",
isFavorite: false isFavorite: false
@ -185,6 +190,44 @@
color: "white" 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 = [ var items = [
staticGraphRawProps, staticGraphRawProps,
colorCloudRawProps, colorCloudRawProps,
@ -192,7 +235,9 @@
digitalClockRawProps2, digitalClockRawProps2,
analogicClockRawProps, analogicClockRawProps,
boxRawProps, boxRawProps,
lineRawProps lineRawProps,
labelRawProps,
simpleValueRawProps
]; ];
try { try {

16
visual_console/src/VisualConsole.ts
View File

@ -13,6 +13,8 @@ import Group, { groupPropsDecoder } from "./items/Group";
import Clock, { clockPropsDecoder } from "./items/Clock"; import Clock, { clockPropsDecoder } from "./items/Clock";
import Box, { boxPropsDecoder } from "./items/Box"; import Box, { boxPropsDecoder } from "./items/Box";
import Line, { linePropsDecoder } from "./items/Line"; import Line, { linePropsDecoder } from "./items/Line";
import Label, { labelPropsDecoder } from "./items/Label";
import SimpleValue, { simpleValuePropsDecoder } from "./items/SimpleValue";
// Base properties. // Base properties.
export interface VisualConsoleProps extends Size { export interface VisualConsoleProps extends Size {
@ -82,15 +84,14 @@ function itemInstanceFrom(data: UnknownObject) {
case ItemType.SIMPLE_VALUE_MAX: case ItemType.SIMPLE_VALUE_MAX:
case ItemType.SIMPLE_VALUE_MIN: case ItemType.SIMPLE_VALUE_MIN:
case ItemType.SIMPLE_VALUE_AVG: case ItemType.SIMPLE_VALUE_AVG:
throw new TypeError("item not found"); return new SimpleValue(simpleValuePropsDecoder(data));
case ItemType.PERCENTILE_BAR: 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: case ItemType.PERCENTILE_BUBBLE:
throw new TypeError("item not found"); 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: case ItemType.SERVICE:
throw new TypeError("item not found"); throw new TypeError("item not found");
case ItemType.GROUP_ITEM: case ItemType.GROUP_ITEM:
@ -102,11 +103,8 @@ function itemInstanceFrom(data: UnknownObject) {
case ItemType.AUTO_SLA_GRAPH: case ItemType.AUTO_SLA_GRAPH:
throw new TypeError("item not found"); throw new TypeError("item not found");
case ItemType.CIRCULAR_PROGRESS_BAR: case ItemType.CIRCULAR_PROGRESS_BAR:
throw new TypeError("item not found");
case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR: case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
throw new TypeError("item not found");
case ItemType.DONUT_GRAPH: case ItemType.DONUT_GRAPH:
throw new TypeError("item not found");
case ItemType.BARS_GRAPH: case ItemType.BARS_GRAPH:
throw new TypeError("item not found"); throw new TypeError("item not found");
case ItemType.CLOCK: case ItemType.CLOCK:

6
visual_console/src/items/Label.ts
View File

@ -26,6 +26,10 @@ export function labelPropsDecoder(data: UnknownObject): LabelProps | never {
export default class Label extends Item<LabelProps> { export default class Label extends Item<LabelProps> {
public createDomElement(): HTMLElement { public createDomElement(): HTMLElement {
throw new Error("not implemented"); const element = document.createElement("div");
element.className = "label";
element.innerHTML = this.props.label || "";
return element;
} }
} }

13
visual_console/src/items/SimpleValue.ts
View File

@ -89,6 +89,17 @@ export function simpleValuePropsDecoder(
export default class SimpleValue extends Item<SimpleValueProps> { export default class SimpleValue extends Item<SimpleValueProps> {
public createDomElement(): HTMLElement { 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;
} }
} }