tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-04-08 18:55:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

Visual Console Client: improvements into all items

Browse Source 
Former-commit-id: 3d6b50d5305126361db0f308cf314ad218bc0e72
This commit is contained in:
Alejandro Gallardo Escobar 2019-03-08 12:51:03 +01:00
parent 1151332d30
commit 2ca41b4967
6 changed files with 48 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
visual_console/src/VisualConsoleItem.ts → visual_console/src/Item.ts
View File

@ -3,12 +3,13 @@ import {
sizePropsDecoder,
positionPropsDecoder,
parseIntOr,
parseBoolean
parseBoolean,
notEmptyStringOr
} from "./lib";
import TypedEvent, { Listener, Disposable } from "./TypedEvent";
// Enum: https://www.typescriptlang.org/docs/handbook/enums.html.
export const enum VisualConsoleItemType {
export const enum ItemType {
STATIC_GRAPH = 0,
MODULE_GRAPH = 1,
SIMPLE_VALUE = 2,
@ -33,9 +34,9 @@ export const enum VisualConsoleItemType {
}
// Base item properties. This interface should be extended by the item implementations.
export interface VisualConsoleItemProps extends Position, Size {
export interface ItemProps extends Position, Size {
readonly id: number;
readonly type: VisualConsoleItemType;
readonly type: ItemType;
label: string | null;
labelPosition: "up" | "right" | "down" | "left";
isLinkEnabled: boolean;
@ -44,15 +45,6 @@ export interface VisualConsoleItemProps extends Position, Size {
aclGroupId: number | null;
}
interface VisualConsoleBoxItemProps extends Position, Size {
readonly id: number;
readonly type: 12;
isOnTop: boolean;
borderWidth: string;
borderColor: string;
fillColor: string;
}
interface VisualConsoleLineItemProps {
readonly id: number;
readonly type: 13;
@ -64,8 +56,8 @@ interface VisualConsoleLineItemProps {
}
// FIXME: Fix type compatibility.
export interface ItemClickEvent<ItemProps extends VisualConsoleItemProps> {
// data: ItemProps;
export interface ItemClickEvent<Props extends ItemProps> {
// data: Props;
data: UnknownObject;
}
@ -75,7 +67,7 @@ export interface ItemClickEvent<ItemProps extends VisualConsoleItemProps> {
*/
const parseLabelPosition = (
labelPosition: any // eslint-disable-line @typescript-eslint/no-explicit-any
): VisualConsoleItemProps["labelPosition"] => {
): ItemProps["labelPosition"] => {
switch (labelPosition) {
case "up":
case "right":
@ -96,9 +88,7 @@ const parseLabelPosition = (
* @throws Will throw a TypeError if some property
* is missing from the raw object or have an invalid type.
*/
export function itemBasePropsDecoder(
data: UnknownObject
): VisualConsoleItemProps | never {
export function itemBasePropsDecoder(data: UnknownObject): ItemProps | never {
if (data.id == null || isNaN(parseInt(data.id))) {
throw new TypeError("invalid id.");
}
@ -110,10 +100,7 @@ export function itemBasePropsDecoder(
return {
id: parseInt(data.id),
type: parseInt(data.type),
label:
typeof data.label === "string" && data.label.length > 0
? data.label
: null,
label: notEmptyStringOr(data.label, null),
labelPosition: parseLabelPosition(data.labelPosition),
isLinkEnabled: parseBoolean(data.isLinkEnabled),
isOnTop: parseBoolean(data.isOnTop),
@ -124,17 +111,15 @@ export function itemBasePropsDecoder(
};
}
abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
abstract class VisualConsoleItem<Props extends ItemProps> {
// Properties of the item.
private itemProps: ItemProps;
private itemProps: Props;
// Reference to the DOM element which will contain the item.
public readonly elementRef: HTMLElement;
// Reference to the DOM element which will contain the view of the item which extends this class.
protected readonly childElementRef: HTMLElement;
// Event manager for click events.
private readonly clickEventManager = new TypedEvent<
ItemClickEvent<ItemProps>
>();
private readonly clickEventManager = new TypedEvent<ItemClickEvent<Props>>();
// List of references to clean the event listeners.
private readonly disposables: Disposable[] = [];
@ -144,7 +129,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
*/
abstract createDomElement(): HTMLElement;
public constructor(props: ItemProps) {
public constructor(props: Props) {
this.itemProps = props;
/*
@ -187,7 +172,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
* Public accessor of the `props` property.
* @return Properties.
*/
public get props(): ItemProps {
public get props(): Props {
return this.itemProps;
}
@ -197,7 +182,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
* stored props, a render would be fired.
* @param newProps
*/
public set props(newProps: ItemProps) {
public set props(newProps: Props) {
const prevProps = this.props;
// Update the internal props.
this.itemProps = newProps;
@ -219,7 +204,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
* @param newProps
* @return Whether the difference is meaningful enough to perform DOM changes or not.
*/
protected shouldBeUpdated(newProps: ItemProps): boolean {
protected shouldBeUpdated(newProps: Props): boolean {
return this.props !== newProps;
}
@ -227,7 +212,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
* To recreate or update the HTMLElement which represents the item into the DOM.
* @param prevProps If exists it will be used to only perform DOM updates instead of a full replace.
*/
public render(prevProps: ItemProps | null = null): void {
public render(prevProps: Props | null = null): void {
// Move box.
if (!prevProps || prevProps.x !== this.props.x) {
this.elementRef.style.left = `${this.props.x}px`;
@ -294,7 +279,7 @@ abstract class VisualConsoleItem<ItemProps extends VisualConsoleItemProps> {
* To add an event handler to the click of the linked visual console elements.
* @param listener Function which is going to be executed when a linked console is clicked.
*/
public onClick(listener: Listener<ItemClickEvent<ItemProps>>): void {
public onClick(listener: Listener<ItemClickEvent<Props>>): void {
/*
* The '.on' function returns a function which will clean the event
* listener when executed. We store all the 'dispose' functions to

26
visual_console/src/items/Clock/index.ts
View File

@ -1,30 +1,25 @@
import "./Clock.css";
import { LinkedVisualConsoleProps, UnknownObject } from "../../types";
import {
linkedVCPropsDecoder,
parseIntOr,
padLeft,
parseBoolean,
prefixedCssRules
prefixedCssRules,
notEmptyStringOr
} from "../../lib";
import VisualConsoleItem, {
VisualConsoleItemProps,
itemBasePropsDecoder,
VisualConsoleItemType
} from "../../VisualConsoleItem";
import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../../Item";
export type ClockProps = {
type: VisualConsoleItemType.CLOCK;
type: ItemType.CLOCK;
clockType: "analogic" | "digital";
clockFormat: "datetime" | "time";
clockTimezone: string;
clockTimezoneOffset: number; // Offset of the timezone to UTC in seconds.
showClockTimezone: boolean;
color?: string | null;
} & VisualConsoleItemProps &
} & ItemProps &
LinkedVisualConsoleProps;
/**
@ -79,21 +74,18 @@ export function clockPropsDecoder(data: UnknownObject): ClockProps | never {
return {
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: VisualConsoleItemType.CLOCK,
type: ItemType.CLOCK,
clockType: parseClockType(data.clockType),
clockFormat: parseClockFormat(data.clockFormat),
clockTimezone: data.clockTimezone,
clockTimezoneOffset: parseIntOr(data.clockTimezoneOffset, 0),
showClockTimezone: parseBoolean(data.showClockTimezone),
color:
typeof data.color === "string" && data.color.length > 0
? data.color
: null,
color: notEmptyStringOr(data.color, null),
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
};
}
export default class Clock extends VisualConsoleItem<ClockProps> {
export default class Clock extends Item<ClockProps> {
public static readonly TICK_INTERVAL = 1000; // In ms.
private intervalRef: number | null = null;
@ -173,7 +165,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
}
/**
* @override VisualConsoleItem.resize
* @override Item.resize
* To resize the item.
* @param width Width.
* @param height Height.

16
visual_console/src/items/ColorCloud.ts
View File

@ -3,20 +3,14 @@ import {
LinkedVisualConsoleProps,
UnknownObject
} from "../types";
import { modulePropsDecoder, linkedVCPropsDecoder } from "../lib";
import VisualConsoleItem, {
itemBasePropsDecoder,
VisualConsoleItemType,
VisualConsoleItemProps
} from "../VisualConsoleItem";
import Item, { itemBasePropsDecoder, ItemType, ItemProps } from "../Item";
export type ColorCloudProps = {
type: VisualConsoleItemType.COLOR_CLOUD;
type: ItemType.COLOR_CLOUD;
color: string;
// TODO: Add the rest of the color cloud values?
} & VisualConsoleItemProps &
} & ItemProps &
WithModuleProps &
LinkedVisualConsoleProps;
@ -39,7 +33,7 @@ export function colorCloudPropsDecoder(
return {
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: VisualConsoleItemType.COLOR_CLOUD,
type: ItemType.COLOR_CLOUD,
color: data.color,
...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
@ -48,7 +42,7 @@ export function colorCloudPropsDecoder(
const svgNS = "http://www.w3.org/2000/svg";
export default class ColorCloud extends VisualConsoleItem<ColorCloudProps> {
export default class ColorCloud extends Item<ColorCloudProps> {
public createDomElement(): HTMLElement {
const container: HTMLDivElement = document.createElement("div");
container.className = "color-cloud";

16
visual_console/src/items/Group.ts
View File

@ -1,18 +1,12 @@
import { LinkedVisualConsoleProps, UnknownObject } from "../types";
import { linkedVCPropsDecoder, parseIntOr } from "../lib";
import VisualConsoleItem, {
VisualConsoleItemProps,
itemBasePropsDecoder,
VisualConsoleItemType
} from "../VisualConsoleItem";
import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../Item";
export type GroupProps = {
type: VisualConsoleItemType.GROUP_ITEM;
type: ItemType.GROUP_ITEM;
imageSrc: string; // URL?
groupId: number;
} & VisualConsoleItemProps &
} & ItemProps &
LinkedVisualConsoleProps;
/**
@ -34,14 +28,14 @@ export function groupPropsDecoder(data: UnknownObject): GroupProps | never {
return {
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: VisualConsoleItemType.GROUP_ITEM,
type: ItemType.GROUP_ITEM,
imageSrc: data.imageSrc,
groupId: parseInt(data.groupId),
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
};
}
export default class Group extends VisualConsoleItem<GroupProps> {
export default class Group extends Item<GroupProps> {
public createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
img.className = "group";

16
visual_console/src/items/Icon.ts
View File

@ -1,17 +1,11 @@
import { LinkedVisualConsoleProps, UnknownObject } from "../types";
import { linkedVCPropsDecoder } from "../lib";
import VisualConsoleItem, {
VisualConsoleItemProps,
itemBasePropsDecoder,
VisualConsoleItemType
} from "../VisualConsoleItem";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type IconProps = {
type: VisualConsoleItemType.ICON;
type: ItemType.ICON;
imageSrc: string; // URL?
} & VisualConsoleItemProps &
} & ItemProps &
LinkedVisualConsoleProps;
/**
@ -30,13 +24,13 @@ export function iconPropsDecoder(data: UnknownObject): IconProps | never {
return {
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: VisualConsoleItemType.ICON,
type: ItemType.ICON,
imageSrc: data.imageSrc,
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
};
}
export default class Icon extends VisualConsoleItem<IconProps> {
export default class Icon extends Item<IconProps> {
public createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
img.className = "icon";

15
visual_console/src/items/StaticGraph.ts
View File

@ -5,18 +5,13 @@ import {
} from "../types";
import { modulePropsDecoder, linkedVCPropsDecoder } from "../lib";
import VisualConsoleItem, {
VisualConsoleItemProps,
itemBasePropsDecoder,
VisualConsoleItemType
} from "../VisualConsoleItem";
import Item, { ItemType, ItemProps, itemBasePropsDecoder } from "../Item";
export type StaticGraphProps = {
type: VisualConsoleItemType.STATIC_GRAPH;
type: ItemType.STATIC_GRAPH;
imageSrc: string; // URL?
showLastValueTooltip: "default" | "enabled" | "disabled";
} & VisualConsoleItemProps &
} & ItemProps &
(WithModuleProps | LinkedVisualConsoleProps);
/**
@ -54,7 +49,7 @@ export function staticGraphPropsDecoder(
return {
...itemBasePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: VisualConsoleItemType.STATIC_GRAPH,
type: ItemType.STATIC_GRAPH,
imageSrc: data.imageSrc,
showLastValueTooltip: parseShowLastValueTooltip(data.showLastValueTooltip),
...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
@ -62,7 +57,7 @@ export function staticGraphPropsDecoder(
};
}
export default class StaticGraph extends VisualConsoleItem<StaticGraphProps> {
export default class StaticGraph extends Item<StaticGraphProps> {
public createDomElement(): HTMLElement {
const img: HTMLImageElement = document.createElement("img");
img.className = "static-graph";