From 39a9ef4c287acf23298e16e289e347d681bb2e7f Mon Sep 17 00:00:00 2001 From: Arturo Gonzalez Date: Tue, 8 Mar 2016 17:04:09 +0100 Subject: [PATCH] New maps in progress... (contextual menus) --- pandora_console/include/ajax/map.ajax.php | 110 +++++++++++++++++- .../include/javascript/d3-context-menu.js | 78 +++++++++++++ .../include/javascript/map/MapController.js | 76 ++++++++++-- .../include/styles/d3-context-menu.css | 29 +++++ 4 files changed, 282 insertions(+), 11 deletions(-) create mode 100644 pandora_console/include/javascript/d3-context-menu.js create mode 100644 pandora_console/include/styles/d3-context-menu.css diff --git a/pandora_console/include/ajax/map.ajax.php b/pandora_console/include/ajax/map.ajax.php index 2f39609fd0..da245760e6 100644 --- a/pandora_console/include/ajax/map.ajax.php +++ b/pandora_console/include/ajax/map.ajax.php @@ -24,6 +24,7 @@ if (is_ajax ()) { $getNodeData = (bool)get_parameter('getNodeData', 0); + $getNodeDetails = (bool)get_parameter('getNodeDetails', 0); if ($getNodeData) { $id_node_data = (int)get_parameter('id_node_data'); @@ -106,7 +107,6 @@ if (is_ajax ()) { $return_data); break; case ITEM_TYPE_MODULE_NETWORKMAP: - $node_data = db_get_all_rows_sql("SELECT descripcion FROM tagente_modulo WHERE id_agente_modulo = " . $id_node_data); @@ -150,6 +150,114 @@ if (is_ajax ()) { echo json_encode($return_data); return; } + else if ($getNodeDetails) { + $id_node_data = (int)get_parameter('id_node_data'); + $type = (int)get_parameter('type'); + $id_map = (int)get_parameter('id_map'); + $data_graph_id = (int)get_parameter('data_graph_id'); + $node_id = get_parameter('node_id'); + + switch ($type) { + case ITEM_TYPE_AGENT_NETWORKMAP: + $details = str_replace( + "{data_graph_id}", + $data_graph_id, + $details); + $details = str_replace( + "{node_id}", + $node_id, + $details); + $details = str_replace( + "{title}", + agents_get_name($id_node_data), + $details); + + + $agent_group = groups_get_name( + db_get_value('id_grupo', 'tagente', 'id_agente', $id_node_data)); + + ob_start(); + ?> + + : + +
+ + : + +
+ + : + +
+ + : + +
+ + : + +
+ + : + +
+ + : + + + + + : + +
+ + : + +
+ diff --git a/pandora_console/include/javascript/d3-context-menu.js b/pandora_console/include/javascript/d3-context-menu.js new file mode 100644 index 0000000000..3b71dc4226 --- /dev/null +++ b/pandora_console/include/javascript/d3-context-menu.js @@ -0,0 +1,78 @@ +(function(root, factory) { + if (typeof module === 'object' && module.exports) { + module.exports = function(d3) { + d3.contextMenu = factory(d3); + return d3.contextMenu; + }; + } else { + root.d3.contextMenu = factory(root.d3); + } +}( this, + function(d3) { + return function (menu, opts) { + + var openCallback, + closeCallback; + + if (typeof opts === 'function') { + openCallback = opts; + } else { + opts = opts || {}; + openCallback = opts.onOpen; + closeCallback = opts.onClose; + } + + // create the div element that will hold the context menu + d3.selectAll('.d3-context-menu').data([1]) + .enter() + .append('div') + .attr('class', 'd3-context-menu'); + + // close menu + d3.select('body').on('click.d3-context-menu', function() { + d3.select('.d3-context-menu').style('display', 'none'); + if (closeCallback) { + closeCallback(); + } + }); + + // this gets executed when a contextmenu event occurs + return function(data, index) { + var elm = this; + + d3.selectAll('.d3-context-menu').html(''); + var list = d3.selectAll('.d3-context-menu').append('ul'); + list.selectAll('li').data(typeof menu === 'function' ? menu(data) : menu).enter() + .append('li') + .html(function(d) { + return (typeof d.title === 'string') ? d.title : d.title(data); + }) + .on('click', function(d, i) { + d.action(elm, data, index); + d3.select('.d3-context-menu').style('display', 'none'); + + if (closeCallback) { + closeCallback(); + } + }); + + // the openCallback allows an action to fire before the menu is displayed + // an example usage would be closing a tooltip + if (openCallback) { + if (openCallback(data, index) === false) { + return; + } + } + + // display context menu + d3.select('.d3-context-menu') + .style('left', (d3.event.pageX - 2) + 'px') + .style('top', (d3.event.pageY - 2) + 'px') + .style('display', 'block'); + + d3.event.preventDefault(); + d3.event.stopPropagation(); + }; + }; + } +)); diff --git a/pandora_console/include/javascript/map/MapController.js b/pandora_console/include/javascript/map/MapController.js index 750e4b0ad3..522c8af732 100644 --- a/pandora_console/include/javascript/map/MapController.js +++ b/pandora_console/include/javascript/map/MapController.js @@ -155,10 +155,6 @@ MapController.prototype.init_map = function() { .property("max", Math.log(MAX_ZOOM_LEVEL)) .property("step", Math.log(MAX_ZOOM_LEVEL) * 2 / MAX_ZOOM_LEVEL) .on("input", slided); - - $("svg").on("contextmenu", function() { - return false; - }); d3.select("#map .zoom_box .home_zoom") .on("click", home_zoom); @@ -169,7 +165,6 @@ MapController.prototype.init_map = function() { d3.select("#map .zoom_box .zoom_out") .on("click", zoom_out); - self.paint_nodes(); this.init_events(); @@ -355,18 +350,35 @@ MapController.prototype.init_events = function(principalObject) { var node_menu = [ { - title: 'Ejemplo 1', + title: 'Show details', action: function(elm, d, i) { - console.log('Primer elemento!!'); + self.openNodeDetais(self, elm); } }, { - title: 'Ejemplo 1', + title: 'Edit', action: function(elm, d, i) { - console.log('Segundo elemento!!'); + console.log('Edit node!!'); + } + }, + { + title: 'Delete', + action: function(elm, d, i) { + console.log('Delete node!!'); } } - ] + ]; + + var map_menu = [ + { + title: 'Edit map', + action: function(elm, d, i) { + console.log('Edit map!!'); + } + } + ]; + + d3.select("#map").on("contextmenu", d3.contextMenu(map_menu)); $(this._target + " svg *, " + this._target + " svg") .off("mousedown", {map: this}, this.click_event); @@ -488,6 +500,50 @@ MapController.prototype.tooltip_map_create = function(self, target) { nodeTarget.tooltipster("show"); } +/** +* Function openNodeDetais +* Return void +* This function shows node details in extra window +*/ +MapController.prototype.openNodeDetais = function(self, target) { + var nodeTarget = $(target); + + var type = parseInt(nodeTarget.data("type")); + var data_id = parseInt(nodeTarget.data("id")); + var data_graph_id = parseInt(nodeTarget.data("graph_id")); + var node_id = nodeTarget.attr("id"); + + var link = self.nodeGetDetails(data_id, type, self._id, data_graph_id, node_id); + + //window.open(link); +} + +/** +* Function nodeGetDetails +* Return link +* This function returns a link with node details +*/ +MapController.prototype.nodeGetDetails = function(data_id, type, id_map, data_graph_id, node_id) { + var params = {}; + params["getNodeDetails"] = 1; + params["id_node_data"] = data_id; + params["type"] = type; + params["id_map"] = id_map; + params["data_graph_id"] = data_graph_id; + params["node_id"] = node_id; + params["page"] = "include/ajax/map.ajax"; + + jQuery.ajax ({ + data: params, + dataType: "json", + type: "POST", + url: "ajax.php", + success: function (data) { + window.open(data); + } + }); +} + /** * Function close_all_tooltips * Return void diff --git a/pandora_console/include/styles/d3-context-menu.css b/pandora_console/include/styles/d3-context-menu.css new file mode 100644 index 0000000000..757f6663b0 --- /dev/null +++ b/pandora_console/include/styles/d3-context-menu.css @@ -0,0 +1,29 @@ +.d3-context-menu { + position: absolute; + display: none; + background-color: #f2f2f2; + border-radius: 4px; + + font-family: Arial, sans-serif; + font-size: 14px; + min-width: 150px; + border: 1px solid #d4d4d4; + + z-index:1200; +} + +.d3-context-menu ul { + list-style-type: none; + margin: 4px 0px; + padding: 0px; + cursor: default; +} + +.d3-context-menu ul li { + padding: 4px 16px; +} + +.d3-context-menu ul li:hover { + background-color: #4677f8; + color: #fefefe; +} \ No newline at end of file