mirror of
https://github.com/pandorafms/pandorafms.git
synced 2025-07-31 01:35:36 +02:00
Visual Console Client: added the box item
Former-commit-id: d4986307c2df713f86472ce383312fc5aa15b5f7
This commit is contained in:
parent
2ca41b4967
commit
af26c7cdfc
@ -150,12 +150,29 @@
|
|||||||
showClockTimezone: true
|
showClockTimezone: true
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var boxRawProps = {
|
||||||
|
// Generic props.
|
||||||
|
id: 6,
|
||||||
|
type: 12, // Box = 12
|
||||||
|
// Position props.
|
||||||
|
x: 720,
|
||||||
|
y: 20,
|
||||||
|
// Size props.
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
// Custom props.
|
||||||
|
borderWidth: 10,
|
||||||
|
borderColor: "white",
|
||||||
|
fillColor: "black"
|
||||||
|
};
|
||||||
|
|
||||||
var items = [
|
var items = [
|
||||||
staticGraphRawProps,
|
staticGraphRawProps,
|
||||||
colorCloudRawProps,
|
colorCloudRawProps,
|
||||||
digitalClockRawProps,
|
digitalClockRawProps,
|
||||||
digitalClockRawProps2,
|
digitalClockRawProps2,
|
||||||
analogicClockRawProps
|
analogicClockRawProps,
|
||||||
|
boxRawProps
|
||||||
];
|
];
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
@ -1,14 +1,17 @@
|
|||||||
import { UnknownObject, Size } from "./types";
|
import { UnknownObject, Size } from "./types";
|
||||||
import { parseBoolean, sizePropsDecoder, parseIntOr } from "./lib";
|
import {
|
||||||
import VisualConsoleItem, {
|
parseBoolean,
|
||||||
VisualConsoleItemProps,
|
sizePropsDecoder,
|
||||||
VisualConsoleItemType
|
parseIntOr,
|
||||||
} from "./VisualConsoleItem";
|
notEmptyStringOr
|
||||||
|
} from "./lib";
|
||||||
|
import Item, { ItemType, ItemProps } from "./Item";
|
||||||
import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
|
import StaticGraph, { staticGraphPropsDecoder } from "./items/StaticGraph";
|
||||||
import Icon, { iconPropsDecoder } from "./items/Icon";
|
import Icon, { iconPropsDecoder } from "./items/Icon";
|
||||||
import ColorCloud, { colorCloudPropsDecoder } from "./items/ColorCloud";
|
import ColorCloud, { colorCloudPropsDecoder } from "./items/ColorCloud";
|
||||||
import Group, { groupPropsDecoder } from "./items/Group";
|
import Group, { groupPropsDecoder } from "./items/Group";
|
||||||
import Clock, { clockPropsDecoder } from "./items/Clock";
|
import Clock, { clockPropsDecoder } from "./items/Clock";
|
||||||
|
import Box, { boxPropsDecoder } from "./items/Box";
|
||||||
|
|
||||||
// Base properties.
|
// Base properties.
|
||||||
export interface VisualConsoleProps extends Size {
|
export interface VisualConsoleProps extends Size {
|
||||||
@ -56,14 +59,8 @@ export function visualConsolePropsDecoder(
|
|||||||
id: parseInt(id),
|
id: parseInt(id),
|
||||||
name,
|
name,
|
||||||
groupId: parseInt(groupId),
|
groupId: parseInt(groupId),
|
||||||
backgroundURL:
|
backgroundURL: notEmptyStringOr(backgroundURL, null),
|
||||||
typeof backgroundURL === "string" && backgroundURL.length > 0
|
backgroundColor: notEmptyStringOr(backgroundColor, null),
|
||||||
? backgroundURL
|
|
||||||
: null,
|
|
||||||
backgroundColor:
|
|
||||||
typeof backgroundColor === "string" && backgroundColor.length > 0
|
|
||||||
? backgroundColor
|
|
||||||
: null,
|
|
||||||
isFavorite: parseBoolean(isFavorite),
|
isFavorite: parseBoolean(isFavorite),
|
||||||
...sizePropsDecoder(data)
|
...sizePropsDecoder(data)
|
||||||
};
|
};
|
||||||
@ -75,48 +72,48 @@ function itemInstanceFrom(data: UnknownObject) {
|
|||||||
const type = parseIntOr(data.type, null);
|
const type = parseIntOr(data.type, null);
|
||||||
if (type == null) throw new TypeError("missing item type.");
|
if (type == null) throw new TypeError("missing item type.");
|
||||||
|
|
||||||
switch (type as VisualConsoleItemType) {
|
switch (type as ItemType) {
|
||||||
case VisualConsoleItemType.STATIC_GRAPH:
|
case ItemType.STATIC_GRAPH:
|
||||||
return new StaticGraph(staticGraphPropsDecoder(data));
|
return new StaticGraph(staticGraphPropsDecoder(data));
|
||||||
case VisualConsoleItemType.MODULE_GRAPH:
|
case ItemType.MODULE_GRAPH:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.SIMPLE_VALUE:
|
case ItemType.SIMPLE_VALUE:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.PERCENTILE_BAR:
|
case ItemType.PERCENTILE_BAR:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.LABEL:
|
case ItemType.LABEL:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.ICON:
|
case ItemType.ICON:
|
||||||
return new Icon(iconPropsDecoder(data));
|
return new Icon(iconPropsDecoder(data));
|
||||||
case VisualConsoleItemType.SIMPLE_VALUE_MAX:
|
case ItemType.SIMPLE_VALUE_MAX:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.SIMPLE_VALUE_MIN:
|
case ItemType.SIMPLE_VALUE_MIN:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.SIMPLE_VALUE_AVG:
|
case ItemType.SIMPLE_VALUE_AVG:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.PERCENTILE_BUBBLE:
|
case ItemType.PERCENTILE_BUBBLE:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.SERVICE:
|
case ItemType.SERVICE:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.GROUP_ITEM:
|
case ItemType.GROUP_ITEM:
|
||||||
return new Group(groupPropsDecoder(data));
|
return new Group(groupPropsDecoder(data));
|
||||||
case VisualConsoleItemType.BOX_ITEM:
|
case ItemType.BOX_ITEM:
|
||||||
|
return new Box(boxPropsDecoder(data));
|
||||||
|
case ItemType.LINE_ITEM:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.LINE_ITEM:
|
case ItemType.AUTO_SLA_GRAPH:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.AUTO_SLA_GRAPH:
|
case ItemType.CIRCULAR_PROGRESS_BAR:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.CIRCULAR_PROGRESS_BAR:
|
case ItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.CIRCULAR_INTERIOR_PROGRESS_BAR:
|
case ItemType.DONUT_GRAPH:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.DONUT_GRAPH:
|
case ItemType.BARS_GRAPH:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
case VisualConsoleItemType.BARS_GRAPH:
|
case ItemType.CLOCK:
|
||||||
throw new TypeError("item not found");
|
|
||||||
case VisualConsoleItemType.CLOCK:
|
|
||||||
return new Clock(clockPropsDecoder(data));
|
return new Clock(clockPropsDecoder(data));
|
||||||
case VisualConsoleItemType.COLOR_CLOUD:
|
case ItemType.COLOR_CLOUD:
|
||||||
return new ColorCloud(colorCloudPropsDecoder(data));
|
return new ColorCloud(colorCloudPropsDecoder(data));
|
||||||
default:
|
default:
|
||||||
throw new TypeError("item not found");
|
throw new TypeError("item not found");
|
||||||
@ -129,7 +126,7 @@ export default class VisualConsole {
|
|||||||
// Properties.
|
// Properties.
|
||||||
private _props: VisualConsoleProps;
|
private _props: VisualConsoleProps;
|
||||||
// Visual Console Item instances.
|
// Visual Console Item instances.
|
||||||
private elements: VisualConsoleItem<VisualConsoleItemProps>[] = [];
|
private elements: Item<ItemProps>[] = [];
|
||||||
|
|
||||||
public constructor(
|
public constructor(
|
||||||
container: HTMLElement,
|
container: HTMLElement,
|
||||||
|
65
visual_console/src/items/Box.ts
Normal file
65
visual_console/src/items/Box.ts
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { UnknownObject } from "../types";
|
||||||
|
import { parseIntOr, notEmptyStringOr } from "../lib";
|
||||||
|
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
|
||||||
|
|
||||||
|
interface BoxProps extends ItemProps {
|
||||||
|
// Overrided properties.
|
||||||
|
readonly type: ItemType.BOX_ITEM;
|
||||||
|
label: null;
|
||||||
|
isLinkEnabled: false;
|
||||||
|
parentId: null;
|
||||||
|
aclGroupId: null;
|
||||||
|
// Custom properties.
|
||||||
|
borderWidth: number;
|
||||||
|
borderColor: string | null;
|
||||||
|
fillColor: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build a valid typed object from a raw object.
|
||||||
|
* This will allow us to ensure the type safety.
|
||||||
|
*
|
||||||
|
* @param data Raw object.
|
||||||
|
* @return An object representing the item props.
|
||||||
|
* @throws Will throw a TypeError if some property
|
||||||
|
* is missing from the raw object or have an invalid type.
|
||||||
|
*/
|
||||||
|
export function boxPropsDecoder(data: UnknownObject): BoxProps | never {
|
||||||
|
return {
|
||||||
|
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
|
||||||
|
type: ItemType.BOX_ITEM,
|
||||||
|
label: null,
|
||||||
|
isLinkEnabled: false,
|
||||||
|
parentId: null,
|
||||||
|
aclGroupId: null,
|
||||||
|
// Custom properties.
|
||||||
|
borderWidth: parseIntOr(data.borderWidth, 0),
|
||||||
|
borderColor: notEmptyStringOr(data.borderColor, null),
|
||||||
|
fillColor: notEmptyStringOr(data.fillColor, null)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Box extends Item<BoxProps> {
|
||||||
|
public createDomElement(): HTMLElement {
|
||||||
|
const box: HTMLDivElement = document.createElement("div");
|
||||||
|
box.className = "box";
|
||||||
|
// To prevent this item to expand beyond its parent.
|
||||||
|
box.style.boxSizing = "border-box";
|
||||||
|
|
||||||
|
if (this.props.fillColor) {
|
||||||
|
box.style.backgroundColor = this.props.fillColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Border.
|
||||||
|
if (this.props.borderWidth > 0) {
|
||||||
|
box.style.borderStyle = "solid";
|
||||||
|
box.style.borderWidth = `${this.props.borderWidth}px`;
|
||||||
|
|
||||||
|
if (this.props.borderColor) {
|
||||||
|
box.style.borderColor = this.props.borderColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return box;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user