11423-Graph analytics. Get filter data (WIP)
This commit is contained in:
parent
5ed9206f36
commit
a10b526938
|
@ -14,6 +14,23 @@
|
|||
border: 1px solid #e5e9ed;
|
||||
} */
|
||||
|
||||
div#main {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.box-flat.white_table_graph > div[id^="tgl_div_"] {
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
div.box-flat.white_table_graph > div[id^="tgl_div_"] > div.white-box-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
div#menu_tab ul li,
|
||||
div#menu_tab ul li span {
|
||||
display: flex;
|
||||
|
@ -37,6 +54,7 @@ div.main-div {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
min-height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
div.padding-div {
|
||||
|
@ -44,13 +62,20 @@ div.padding-div {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
div.margin-div {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.filters-div-main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 400px;
|
||||
border-right: 1px solid var(--border-dark-color);
|
||||
}
|
||||
|
||||
div.filters-div-main.filters-div-main-collapsed {
|
||||
width: 20px;
|
||||
width: 35px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
|
@ -64,6 +89,7 @@ div.filters-div-main > .filters-div-header {
|
|||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
div.filters-div-main > .filters-div-header > img {
|
||||
|
@ -71,10 +97,39 @@ div.filters-div-main > .filters-div-header > img {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.filters-div {
|
||||
div.filters-div-submain {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
div.filter-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
border-top: 1px solid var(--border-dark-color);
|
||||
}
|
||||
|
||||
.filters-left-div {
|
||||
border-right: 1px solid var(--border-dark-color);
|
||||
}
|
||||
|
||||
.filters-right-div {
|
||||
}
|
||||
|
||||
.search-graph-analytics {
|
||||
background-image: url(../../images/details.svg);
|
||||
background-position: center right 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 17px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
div.graphs-div-main {
|
||||
|
|
|
@ -35,7 +35,87 @@ ui_require_css_file('graph_analytics');
|
|||
require_once 'include/functions_custom_graphs.php';
|
||||
|
||||
// Get parameters.
|
||||
$x = (bool) get_parameter('x');
|
||||
$x = get_parameter('x');
|
||||
|
||||
// Ajax.
|
||||
if (is_ajax()) {
|
||||
$search_left = get_parameter('search_left');
|
||||
|
||||
if (empty($search_left) === false) {
|
||||
$output = [];
|
||||
$search = io_safe_input($search_left);
|
||||
|
||||
// Agents.
|
||||
// Concatenate AW and AD permisions to get all the possible groups where the user can manage.
|
||||
$user_groupsAW = users_get_groups($config['id_user'], 'AW');
|
||||
$user_groupsAD = users_get_groups($config['id_user'], 'AD');
|
||||
|
||||
$user_groups = ($user_groupsAW + $user_groupsAD);
|
||||
$user_groups_to_sql = implode(',', array_keys($user_groups));
|
||||
|
||||
$search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR alias LIKE "%%'.$search.'%%")';
|
||||
|
||||
$sql = sprintf(
|
||||
'SELECT *
|
||||
FROM tagente
|
||||
LEFT JOIN tagent_secondary_group tasg
|
||||
ON tagente.id_agente = tasg.id_agent
|
||||
WHERE (tagente.id_grupo IN (%s) OR tasg.id_group IN (%s))
|
||||
%s
|
||||
GROUP BY tagente.id_agente
|
||||
ORDER BY tagente.nombre',
|
||||
$user_groups_to_sql,
|
||||
$user_groups_to_sql,
|
||||
$search_sql
|
||||
);
|
||||
|
||||
$output['agents'] = db_get_all_rows_sql($sql);
|
||||
|
||||
// Groups.
|
||||
$search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR description LIKE "%%'.$search.'%%")';
|
||||
|
||||
$sql = sprintf(
|
||||
'SELECT id_grupo, nombre, icon, description
|
||||
FROM tgrupo
|
||||
WHERE (id_grupo IN (%s))
|
||||
%s
|
||||
ORDER BY nombre',
|
||||
$user_groups_to_sql,
|
||||
$search_sql
|
||||
);
|
||||
|
||||
$output['groups'] = db_get_all_rows_sql($sql);
|
||||
|
||||
// Modules.
|
||||
$result_agents = [];
|
||||
$sql_result = db_get_all_rows_sql('SELECT id_agente FROM tagente WHERE id_grupo IN ('.$user_groups_to_sql.')');
|
||||
|
||||
foreach ($sql_result as $result) {
|
||||
array_push($result_agents, $result['id_agente']);
|
||||
}
|
||||
|
||||
$id_agents = implode(',', $result_agents);
|
||||
$search_sql = ' AND (nombre LIKE "%%'.$search.'%%" OR descripcion LIKE "%%'.$search.'%%")';
|
||||
|
||||
$sql = sprintf(
|
||||
'SELECT id_agente_modulo, nombre, descripcion
|
||||
FROM tagente_modulo
|
||||
WHERE (id_agente IN (%s))
|
||||
%s
|
||||
ORDER BY nombre',
|
||||
$id_agents,
|
||||
$search_sql
|
||||
);
|
||||
|
||||
$output['modules'] = db_get_all_rows_sql($sql);
|
||||
|
||||
// Return.
|
||||
echo json_encode($output);
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Header & Actions.
|
||||
$title_tab = __('Start realtime');
|
||||
|
@ -144,15 +224,26 @@ ui_print_standard_header(
|
|||
$left_content = '';
|
||||
$right_content = '';
|
||||
|
||||
// $left_content .= '<input id="search" name="search" placeholder="Enter keywords to search" type="search" class="w100p">';
|
||||
$left_content .= '
|
||||
<div class="filters-div-header">
|
||||
<div></div>
|
||||
<img src="images/menu/contraer.svg">
|
||||
</div>
|
||||
<div class="filters-div">
|
||||
<div class="draggable draggable1" data-id-module="1"></div>
|
||||
<div class="draggable draggable2" data-id-module="2"></div>
|
||||
<div class="draggable draggable3" data-id-module="3"></div>
|
||||
<div class="filters-div-submain">
|
||||
<div class="filter-div filters-left-div">
|
||||
<input id="search-left" name="search-left" placeholder="Enter keywords to search" type="search" class="search-graph-analytics">
|
||||
<div class="draggable draggable1" data-id-module="1"></div>
|
||||
<div class="draggable draggable2" data-id-module="2"></div>
|
||||
<div class="draggable draggable3" data-id-module="3"></div>
|
||||
<br>
|
||||
'.ui_toggle('code', __('Agents'), 'agents-toggle', 'agents-toggle', true, true).'
|
||||
'.ui_toggle('code', __('Groups'), 'groups-toggle', 'groups-toggle', true, true).'
|
||||
'.ui_toggle('code', __('Modules'), 'modules-toggle', 'modules-toggle', true, true).'
|
||||
</div>
|
||||
<div class="filter-div filters-right-div ">
|
||||
<input id="search-right" name="search-right" placeholder="Enter keywords to search" type="search" class="search-graph-analytics">
|
||||
</div>
|
||||
</div>
|
||||
';
|
||||
|
||||
|
@ -187,7 +278,7 @@ $right_content .= '
|
|||
// <div class="droppable" data-id-zone="zone3"></div>
|
||||
$filters_div = html_print_div(
|
||||
[
|
||||
'class' => 'padding-div filters-div-main',
|
||||
'class' => 'filters-div-main',
|
||||
'content' => $left_content,
|
||||
],
|
||||
true
|
||||
|
@ -228,7 +319,56 @@ $('div.filters-div-main > .filters-div-header > img').click(function (e) {
|
|||
}
|
||||
});
|
||||
|
||||
// Search left.
|
||||
$('#search-left').keyup(function (e) {
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: 'ajax.php',
|
||||
dataType: "json",
|
||||
data: {
|
||||
page: 'operation/reporting/graph_analytics',
|
||||
search_left: e.target.value,
|
||||
},
|
||||
success: function(data) {
|
||||
if(data.agents || data.groups || data.modules){
|
||||
console.log(data);
|
||||
var agentsToggle = $('#agents-toggle > div[id^=tgl_div_] > div.white-box-content');
|
||||
var groupsToggle = $('#groups-toggle > div[id^=tgl_div_] > div.white-box-content');
|
||||
var modulesToggle = $('#modules-toggle > div[id^=tgl_div_] > div.white-box-content');
|
||||
agentsToggle.empty();
|
||||
groupsToggle.empty();
|
||||
modulesToggle.empty();
|
||||
|
||||
data.agents.forEach(agent => {
|
||||
agentsToggle.append(`<div class="draggable draggable1" data-id-agent="${agent.id_agente}">${agent.alias}</div>`);
|
||||
});
|
||||
|
||||
data.groups.forEach(group => {
|
||||
groupsToggle.append(`<div class="draggable draggable2" data-id-group="${group.id_grupo}">${group.nombre}</div>`);
|
||||
});
|
||||
|
||||
data.modules.forEach(module => {
|
||||
modulesToggle.append(`<div class="draggable draggable3" data-id-module="${module.id_agente_modulo}">${module.nombre}</div>`);
|
||||
});
|
||||
|
||||
// todo: position: static; div#tgl_div_...
|
||||
$('.draggable').draggable({
|
||||
revert: "invalid",
|
||||
stack: ".draggable",
|
||||
helper: "clone",
|
||||
});
|
||||
} else {
|
||||
console.error('NO DATA FOUND');
|
||||
}
|
||||
},
|
||||
error: function(data) {
|
||||
// console.error("Fatal error in AJAX call", data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
// Draggable & Droppable graphs.
|
||||
$('.draggable').draggable({
|
||||
revert: "invalid",
|
||||
|
@ -236,6 +376,7 @@ $(document).ready(function(){
|
|||
helper: "clone",
|
||||
});
|
||||
|
||||
// Droppable options.
|
||||
var droppableOptions = {
|
||||
accept: ".draggable",
|
||||
hoverClass: "drops-hover",
|
||||
|
@ -255,11 +396,10 @@ $(document).ready(function(){
|
|||
// Ajax.
|
||||
// $.ajax({
|
||||
// method: "POST",
|
||||
// url: '',
|
||||
// url: 'ajax.php',
|
||||
// data: {
|
||||
// page: '',
|
||||
// method: "updatePriorityNodes",
|
||||
// order: data
|
||||
// method: "",
|
||||
// },
|
||||
// dataType: "json",
|
||||
// success: function(data) {
|
||||
|
@ -282,6 +422,7 @@ $(document).ready(function(){
|
|||
// }
|
||||
// });
|
||||
|
||||
// Create elements.
|
||||
createDroppableZones(droppableOptions, modulesByGraphs);
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue