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

Visual Console Client: improved the module exposition and the playground 

Former-commit-id: a519293bd398b4176c164b25fb909ca4e32337bd
This commit is contained in:
Alejandro Gallardo Escobar 2019-03-05 16:18:52 +01:00
parent b5ddabb9de
commit 10cb9c969b
6 changed files with 190 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
visual_console/playground/index.html Normal file
View File

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Visual Console Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
type="text/css"
media="screen"
href="visual-console-client.css"
/>
</head>
<body>
<div id="visual-console-container"></div>
</body>
<script src="visual-console-client.min.js"></script>
<script>
var container = document.getElementById("visual-console-container");
if (container != null) {
var props = {
id: 1,
groupId: 0,
name: "Test Visual Console",
width: 800,
height: 300,
backgroundURL: null,
backgroundColor: "rgb(86, 86, 86)",
isFavorite: false
};
var staticGraphRawProps = {
// Generic props.
id: 1,
type: 0, // Static graph = 0
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 100,
y: 50,
// Size props.
width: 70,
height: 70,
// Agent props.
agentId: null,
agentName: null,
// Module props.
moduleId: null,
moduleName: null,
// Custom props.
imageSrc:
"http://localhost/pandora_console/images/console/icons/bridge_ok.png",
showLastValueTooltip: "default"
};
var colorCloudRawProps = {
// Generic props.
id: 2,
type: 20, // Color cloud = 20
label: null,
labelText: "CLOUD",
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 300,
y: 50,
// Size props.
width: 150,
height: 150,
// Agent props.
agentId: null,
agentName: null,
// Module props.
moduleId: null,
moduleName: null,
// Custom props.
color: "rgb(100, 50, 245)"
};
var digitalClockRawProps = {
// Generic props.
id: 3,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 60,
y: 150,
// Size props.
width: 300,
height: 150,
// Custom props.
clockType: "digital",
clockFormat: "datetime",
clockTimezone: "Madrid",
clockTimezoneOffset: 60,
showClockTimezone: true,
color: "white"
};
var digitalClockRawProps2 = {
// Generic props.
id: 4,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 10,
y: 250,
// Size props.
width: 100,
height: 50,
// Custom props.
clockType: "digital",
clockFormat: "datetime",
clockTimezone: "Madrid",
clockTimezoneOffset: 60,
showClockTimezone: true,
color: "#82B92E"
};
var analogicClockRawProps = {
// Generic props.
id: 5,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 500,
y: 50,
// Size props.
width: 200,
height: 200,
// Custom props.
clockType: "analogic",
clockFormat: "datetime",
clockTimezone: "Copenhagen",
clockTimezoneOffset: 60,
showClockTimezone: true
};
var items = [
staticGraphRawProps,
colorCloudRawProps,
digitalClockRawProps,
digitalClockRawProps2,
analogicClockRawProps
];
try {
var visualConsole = new VisualConsole(container, props, items);
console.log(visualConsole);
} catch (error) {
console.log("ERROR", error.message);
}
}
</script>
</html>

5
visual_console/src/VisualConsole.ts
View File

@ -133,11 +133,11 @@ export default class VisualConsole {
public constructor(
container: HTMLElement,
props: VisualConsoleProps,
props: UnknownObject,
items: UnknownObject[]
) {
this.containerRef = container;
this._props = props;
this._props = visualConsolePropsDecoder(props);
// Force the first render.
this.render();
@ -254,5 +254,6 @@ export default class VisualConsole {
public remove(): void {
this.elements.forEach(e => e.remove()); // Arrow function.
this.elements = [];
// TODO: Clean container.
}
}

168
visual_console/src/index.ts
View File

@ -5,168 +5,10 @@
* https://www.typescriptlang.org/
*/
import VisualConsole, { visualConsolePropsDecoder } from "./VisualConsole";
import "./main.css"; // CSS import.
import VisualConsole from "./VisualConsole";
// declare global {
// interface Window {
// VisualConsole: VisualConsole;
// }
// }
// Export the VisualConsole class to the global object.
// window.VisualConsole = VisualConsole;
const container = document.getElementById("visual-console-container");
if (container != null) {
const rawProps = {
id: 1,
groupId: 0,
name: "Test Visual Console",
width: 800,
height: 300,
backgroundURL: null,
backgroundColor: "rgb(86, 86, 86)",
isFavorite: false
};
const staticGraphRawProps = {
// Generic props.
id: 1,
type: 0, // Static graph = 0
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 100,
y: 50,
// Size props.
width: 70,
height: 70,
// Agent props.
agentId: null,
agentName: null,
// Module props.
moduleId: null,
moduleName: null,
// Custom props.
imageSrc:
"http://localhost/pandora_console/images/console/icons/bridge_ok.png",
showLastValueTooltip: "default"
};
const colorCloudRawProps = {
// Generic props.
id: 2,
type: 20, // Color cloud = 20
label: null,
labelText: "CLOUD",
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 300,
y: 50,
// Size props.
width: 150,
height: 150,
// Agent props.
agentId: null,
agentName: null,
// Module props.
moduleId: null,
moduleName: null,
// Custom props.
color: "rgb(100, 50, 245)"
};
const digitalClockRawProps = {
// Generic props.
id: 3,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 60,
y: 150,
// Size props.
width: 300,
height: 150,
// Custom props.
clockType: "digital",
clockFormat: "datetime",
clockTimezone: "Madrid",
clockTimezoneOffset: 60,
showClockTimezone: true,
color: "white"
};
const digitalClockRawProps2 = {
// Generic props.
id: 4,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 10,
y: 250,
// Size props.
width: 100,
height: 50,
// Custom props.
clockType: "digital",
clockFormat: "datetime",
clockTimezone: "Madrid",
clockTimezoneOffset: 60,
showClockTimezone: true,
color: "#82B92E"
};
const analogicClockRawProps = {
// Generic props.
id: 5,
type: 19, // Clock = 19
label: null,
isLinkEnabled: false,
isOnTop: false,
parentId: null,
aclGroupId: null,
// Position props.
x: 500,
y: 50,
// Size props.
width: 200,
height: 200,
// Custom props.
clockType: "analogic",
clockFormat: "datetime",
clockTimezone: "Copenhagen",
clockTimezoneOffset: 60,
showClockTimezone: true
};
try {
const visualConsole = new VisualConsole(
container,
visualConsolePropsDecoder(rawProps),
[
staticGraphRawProps,
colorCloudRawProps,
digitalClockRawProps,
digitalClockRawProps2,
analogicClockRawProps
]
);
console.log(visualConsole);
} catch (error) {
console.log("ERROR", error.message);
}
}
// eslint-disable-next-line
(window as any).VisualConsole = VisualConsole;

8
visual_console/src/main.css Normal file
View File

@ -0,0 +1,8 @@
.visual-console-item {
position: absolute;
}
.visual-console-item > * {
width: inherit;
height: inherit;
}

14
visual_console/static/index.html
View File

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Visual Console Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="visual-console-container"></div>
</body>
<script src="visual-console.bundle.js"></script>
</html>

56
visual_console/static/main.css
View File

@ -1,56 +0,0 @@
.visual-console-item {
position: absolute;
}
.visual-console-item > * {
width: inherit;
height: inherit;
}
/* Clock item */
@font-face {
font-family: Alarm Clock;
src: url(alarm-clock.ttf);
}
/* Digital clock */
.visual-console-item .digital-clock {
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-content: center;
align-items: center;
}
.visual-console-item .digital-clock > span {
font-family: "Alarm Clock", "Courier New", Courier, monospace;
font-size: 50px;
}
.visual-console-item .digital-clock > span.date {
font-size: 25px;
}
.visual-console-item .digital-clock > span.timezone {
font-size: 25px;
}
/* Analog clock */
.visual-console-item .analogic-clock .hour-hand {
-webkit-animation: rotate-hour 43200s infinite linear;
animation: rotate-hour 43200s infinite linear;
}
.visual-console-item .analogic-clock .minute-hand {
-webkit-animation: rotate-minute 3600s infinite linear;
animation: rotate-minute 3600s infinite linear;
}
.visual-console-item .analogic-clock .second-hand {
-webkit-animation: rotate-second 60s infinite linear;
animation: rotate-second 60s infinite linear;
}