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

WIP network links VC

This commit is contained in:
fbsanchez 2020-11-03 16:35:11 +01:00
parent 90f199c5ad
commit d85c1ace3c
16 changed files with 240 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
pandora_console/images/network_link_item.disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
pandora_console/images/network_link_item.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

7
pandora_console/include/javascript/pandora_visual_console.js
View File

@ -289,6 +289,7 @@ function createVisualConsole(
endX: e.endPosition.x,
endY: e.endPosition.y
};
var taskId = "visual-console-item-update-" + id;
// Persist the new position.
@ -312,6 +313,12 @@ function createVisualConsole(
// TODO: Move the element to its initial position.
}
try {
var decoded_data = JSON.parse(data);
visualConsole.updateElement(decoded_data);
} catch (error) {
console.error(error);
}
done();
}
);

4
pandora_console/include/lib/Entity.php
View File

@ -61,12 +61,12 @@ abstract class Entity
/**
* Instances a new object using array definition.
*
* @param string $class_str Class name.
* @param array $data Fields data.
* @param string $class_str Class name.
*
* @return object With current definition.
*/
public static function build(string $class_str, array $data=[])
public static function build(array $data=[], string $class_str=__CLASS__)
{
$obj = new $class_str();
// Set values.

5
pandora_console/include/lib/Module.php
View File

@ -136,11 +136,12 @@ class Module extends Entity
/**
* Creates a module object from given data. Avoid query duplication.
*
* @param array $data Module information.
* @param array $data Module information.
* @param string $class_str Class name.
*
* @return PandoraFMS\Module Object.
*/
public static function build(array $data=[])
public static function build(array $data=[], string $class_str=__CLASS__)
{
$obj = new Module();

160
pandora_console/include/rest-api/models/VisualConsole/Items/NetworkLink.php
View File

@ -71,6 +71,8 @@ final class NetworkLink extends Model
'labelEndWidth' => static::extractlabelEndWidth($data),
'labelStartHeight' => static::extractlabelStartHeight($data),
'labelEndHeight' => static::extractlabelEndHeight($data),
'linkedStart' => static::extractlinkedStart($data),
'linkedEnd' => static::extractlinkedEnd($data),
];
}
@ -312,6 +314,38 @@ final class NetworkLink extends Model
}
/**
* Extract label StartHeight.
*
* @param array $data Unknown input data structure.
*
* @return mixed Float representing label StartHeight or null.
*/
private static function extractlinkedStart(array $data)
{
return static::extractExtra(
'linkedStart',
$data
);
}
/**
* Extract label EndHeight.
*
* @param array $data Unknown input data structure.
*
* @return mixed Float representing label EndHeight or null.
*/
private static function extractlinkedEnd(array $data)
{
return static::extractExtra(
'linkedEnd',
$data
);
}
/**
* Obtain a vc item data structure from the database using a filter.
*
@ -342,25 +376,135 @@ final class NetworkLink extends Model
$row['pos_y'] = ($row['pos_y'] * $ratio);
}
$row['label'] = static::buildLabels($row);
return $row;
}
/**
* Calculates linked elements given line data.
*
* @param array $data Input data (item).
*
* @return array With start and end elements.
*/
private static function getLinkedItems(array $data)
{
$startX = $data['startX'];
$startY = $data['startY'];
$endX = $data['endX'];
$endY = $data['endY'];
if (isset($data['width'])) {
// Row format.
$startX = $data['pos_x'];
$startY = $data['pos_y'];
$endX = $data['width'];
$endY = $data['height'];
}
$start = \db_get_row_filter(
'tlayout_data',
[
'id_layout' => $data['id_layout'],
'pos_x' => '<'.$startX,
'pos_y' => '<'.$startY,
'pos_x`+`width' => '>'.$startX,
'pos_y`+`height' => '>'.$startY,
'order' => [
[
'field' => 'show_on_top',
'order' => 'desc',
],
[
'field' => 'id',
'order' => 'desc',
],
],
]
);
$end = \db_get_row_filter(
'tlayout_data',
[
'id_layout' => $data['id_layout'],
'pos_x' => '<'.$endX,
'pos_y' => '<'.$endY,
'pos_x`+`width' => '>'.$endX,
'pos_y`+`height' => '>'.$endY,
'order' => [
[
'field' => 'show_on_top',
'order' => 'desc',
],
[
'field' => 'id',
'order' => 'desc',
],
],
]
);
return [
'start' => $start,
'end' => $end,
];
}
/**
* Builds a label depending on the information available.
*
* @param array $data Input data.
*
* @return string JSON encoded results to be stored in DB.
*/
private function buildLabels()
private static function buildLabels(array $data)
{
$links = self::getLinkedItems($data);
$labelStart = null;
$labelEnd = null;
$linkedStart = null;
$linkedEnd = null;
if (isset($links['start']) === true) {
$linkedStart = $links['start']['id'];
if (is_numeric($links['start']['id_agente_modulo']) === true
&& $links['start']['id_agente_modulo'] > 0
) {
$module = new \PandoraFMS\Module(
(int) $links['start']['id_agente_modulo']
);
$labelStart = $module->nombre();
}
}
if (isset($links['end']) === true) {
$linkedEnd = $links['end']['id'];
if (is_numeric($links['end']['id_agente_modulo']) === true
&& $links['end']['id_agente_modulo'] > 0
) {
$module = new \PandoraFMS\Module(
(int) $links['end']['id_agente_modulo']
);
$labelEnd = $module->nombre();
}
}
return json_encode(
[
'labelStart' => 'cadena inicio',
'labelEnd' => 'cadena fin',
'labelStartWidth' => 105,
'labelStartHeight' => 105,
'labelEndWidth' => 105,
'labelEndHeight' => 105,
'labelStart' => io_safe_output($labelStart),
'labelEnd' => io_safe_output($labelEnd),
'linkedStart' => $linkedStart,
'linkedEnd' => $linkedEnd,
// 'labelStartWidth' => 105,
// 'labelStartHeight' => 105,
// 'labelEndWidth' => 105,
// 'labelEndHeight' => 105,
]
);
}
@ -437,7 +581,7 @@ final class NetworkLink extends Model
}
// Build labels.
$result['label'] = $this->buildLabels();
$result['label'] = static::buildLabels($data);
$showOnTop = static::issetInArray(
$data,

31
pandora_console/include/rest-api/models/VisualConsole/View.php
View File

@ -30,6 +30,8 @@
namespace Models\VisualConsole;
use Models\VisualConsole\Container as VisualConsole;
define('__DEBUG', 1);
global $config;
require_once $config['homedir'].'/include/class/HTML.class.php';
enterprise_include_once('include/functions_metaconsole.php');
@ -65,12 +67,14 @@ class View extends \HTML
'id' => 'tab-label',
'href' => $url.'&tabSelected=label',
'img' => 'label-settings.png',
],[
],
[
'name' => __('General settings'),
'id' => 'tab-general',
'href' => $url.'&tabSelected=general',
'img' => 'general-settings.png',
],[
],
[
'name' => __('Specific settings'),
'id' => 'tab-specific',
'href' => $url.'&tabSelected=specific',
@ -101,7 +105,8 @@ class View extends \HTML
'id' => 'tab-general',
'href' => $url.'&tabSelected=general',
'img' => 'pencil.png',
],[
],
[
'name' => __('Specific settings'),
'id' => 'tab-specific',
'href' => $url.'&tabSelected=specific',
@ -244,7 +249,7 @@ class View extends \HTML
true
);
return $form.$jsforms;
return $form;
}
@ -516,8 +521,12 @@ class View extends \HTML
// Save the new item.
$data['id_layout'] = $vCId;
$itemId = $class::save($data);
} catch (\Throwable $th) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}
@ -526,8 +535,12 @@ class View extends \HTML
try {
$item = VisualConsole::getItemFromDB($itemId);
$result = $item->toArray();
} catch (Throwable $e) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}
@ -535,8 +548,12 @@ class View extends \HTML
// UpdateVC.
try {
$item = VisualConsole::getItemFromDB($itemId);
} catch (Throwable $e) {
} catch (\Exception $e) {
// Bad params.
if (__DEBUG === 1) {
error_log($e->getMessage());
}
http_response_code(400);
return false;
}

7
pandora_console/include/styles/visual_maps.css
View File

@ -217,7 +217,12 @@ input.service_min {
input.service_min[disabled] {
background: url(../../images/box.disabled.png) no-repeat center;
}
input.network_link_min {
background: url(../../images/network_link_item.png) no-repeat center;
}
input.network_link_min[disabled] {
background: url(../../images/network_link_item.disabled.png) no-repeat center;
}
input.group_item_min {
background: url(../../images/group_green.png) no-repeat center;
}

9
pandora_console/include/visual-console-client/vc.main.css
View File

@ -31,6 +31,10 @@
z-index: 2;
}
.visual-console-item * {
overflow: visible;
}
.visual-console-item.is-editing {
border: 2px dashed #b2b2b2;
-webkit-transform: translateX(-2px) translateY(-2px);
@ -41,9 +45,14 @@
user-select: none;
}
.visual-console-item.is-editing:hover {
border-color: #82b92e;
}
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
z-index: 10;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

10
visual_console_client/src/VisualConsole.ts
View File

@ -211,6 +211,12 @@ export default class VisualConsole {
private relations: {
[key: string]: Line;
} = {};
// Dictionary which store the created links.
private lineLinks: {
[key: string]: Line;
} = {};
// Event manager for click events.
private readonly clickEventManager = new TypedEvent<ItemClickEvent>();
// Event manager for double click events.
@ -502,7 +508,9 @@ export default class VisualConsole {
public updateElement(item: AnyObject): void {
// Update item.
try {
this.elementsById[item.id].props = decodeProps(item);
this.elementsById[item.id].props = {
...decodeProps(item)
};
} catch (error) {
console.log("Error updating element:", error.message);
}

4
visual_console_client/src/items/Line.ts
View File

@ -24,6 +24,8 @@ export interface LineProps extends ItemProps {
viewportOffsetY: number;
labelEnd: string;
labelStart: string;
linkedEnd: number | null;
linkedStart: number | null;
labelEndWidth: number;
labelEndHeight: number;
labelStartWidth: number;
@ -67,6 +69,8 @@ export function linePropsDecoder(data: AnyObject): LineProps | never {
viewportOffsetY: 0,
labelEnd: notEmptyStringOr(data.labelEnd, ""),
labelEndWidth: parseIntOr(data.labelEndWidth, 0),
linkedEnd: data.linkedEnd,
linkedStart: data.linkedStart,
labelEndHeight: parseIntOr(data.labelEndHeight, 0),
labelStart: notEmptyStringOr(data.labelStart, ""),
labelStartWidth: parseIntOr(data.labelStartWidth, 0),

29
visual_console_client/src/items/NetworkLink.ts
View File

@ -32,8 +32,8 @@ export function networkLinkPropsDecoder(
return {
...linePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
type: ItemType.NETWORK_LINK,
viewportOffsetX: 300,
viewportOffsetY: 300,
viewportOffsetX: 0,
viewportOffsetY: 0,
labelEnd: notEmptyStringOr(data.labelEnd, ""),
labelEndWidth: parseIntOr(data.labelEndWidth, 0),
labelEndHeight: parseIntOr(data.labelEndHeight, 0),
@ -71,6 +71,7 @@ export default class NetworkLink extends Line {
50, // ms.
(x: Position["x"], y: Position["y"]) => {
this.isMoving = false;
const startPosition = { x, y };
// Re-Paint after move.
@ -126,10 +127,6 @@ export default class NetworkLink extends Line {
labelStartHeight
} = this.props;
if (labelStart == "" && labelEnd == "") {
// No more actions are required.
return;
}
const svgs = element.getElementsByTagName("svg");
let line;
let svg;
@ -159,8 +156,13 @@ export default class NetworkLink extends Line {
return;
}
if (labelStart == "" && labelEnd == "") {
// No more actions are required.
return;
}
// Font size and text adjustments.
const fontsize = 7.4;
const fontsize = 10;
const adjustment = 50;
let x1 = startPosition.x - x + lineWidth / 2 + viewportOffsetX / 2;
@ -220,16 +222,10 @@ export default class NetworkLink extends Line {
if (labelStart != "") {
let start = document.createElementNS(svgNS, "g");
start.setAttribute("x", `${x1}`);
start.setAttribute("y", `${y1}`);
start.setAttribute("width", `${labelStartWidth + fontsize * 2}`);
start.setAttribute("height", `${labelStartHeight}`);
start.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
let sr = document.createElementNS(svgNS, "rect");
sr.setAttribute("x", `${x1}`);
sr.setAttribute("y", `${y1}`);
sr.setAttribute("width", `${labelStartWidth}`);
sr.setAttribute("width", `${labelStartWidth + fontsize * 2}`);
sr.setAttribute("height", `${labelStartHeight}`);
sr.setAttribute("stroke", `${color}`);
sr.setAttribute("stroke-width", "2");
@ -240,8 +236,8 @@ export default class NetworkLink extends Line {
st.setAttribute("x", `${x1 + fontsize}`);
st.setAttribute("y", `${y1 + (fontheight * 2) / 3}`);
st.setAttribute("fill", "#000");
st.setAttribute("font-size", `${fontsize}`);
st.textContent = labelStart;
st.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
start.append(st);
svg.append(start);
@ -257,15 +253,14 @@ export default class NetworkLink extends Line {
er.setAttribute("stroke", `${color}`);
er.setAttribute("stroke-width", "2");
er.setAttribute("fill", "#FFF");
er.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
end.append(er);
let et = document.createElementNS(svgNS, "text");
et.setAttribute("x", `${x2 + fontsize}`);
et.setAttribute("y", `${y2 + (fontheight * 2) / 3}`);
et.setAttribute("fill", "#000");
et.setAttribute("font-size", `${fontsize}`);
et.textContent = labelEnd;
et.setAttribute("transform", `rotate(${g} ${x1} ${y1})`);
end.append(et);
svg.append(end);

9
visual_console_client/src/main.css
View File

@ -21,15 +21,24 @@
z-index: 2;
}
.visual-console-item * {
overflow: visible;
}
.visual-console-item.is-editing {
border: 2px dashed #b2b2b2;
transform: translateX(-2px) translateY(-2px);
user-select: none;
}
.visual-console-item.is-editing:hover {
border-color: #82b92e;
}
.visual-console-item.is-editing.is-selected {
border: 2px dashed #2b2b2b;
cursor: move;
z-index: 10;
}
.visual-console-item.is-editing > .resize-draggable {
float: right;