11423-Graph analytics. Drag&Drop (WIP)
This commit is contained in:
Pablo Aragon
parent
28b8eeca61
commit
5ed9206f36
|
|
@ -44,12 +44,40 @@ div.padding-div {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.filters-div {
|
div.filters-div-main {
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
border-right: 1px solid var(--border-dark-color);
|
border-right: 1px solid var(--border-dark-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.graphs-div {
|
div.filters-div-main.filters-div-main-collapsed {
|
||||||
|
width: 20px;
|
||||||
|
min-width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.filters-div-main.filters-div-main-collapsed
|
||||||
|
*:not(.filters-div-header):not(.filters-div-header > img) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.filters-div-main > .filters-div-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.filters-div-main > .filters-div-header > img {
|
||||||
|
width: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.filters-div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.graphs-div-main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -57,21 +85,13 @@ div.graphs-div {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sortable-graphs {
|
#droppable-graphs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sortable-graphs .drop-zone-sortable {
|
|
||||||
background-color: (--primary-color);
|
|
||||||
width: 100%;
|
|
||||||
height: 20px;
|
|
||||||
border: 2px dashed var(--border-dark-color);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interval-div {
|
.interval-div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -79,3 +99,86 @@ div.graphs-div {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Draggable */
|
||||||
|
.draggable.ui-draggable-dragging {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
width: 100px;
|
||||||
|
height: 20px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable2 {
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable3 {
|
||||||
|
background: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.droppable {
|
||||||
|
width: 100%;
|
||||||
|
/* height: 20px; */
|
||||||
|
margin-bottom: 5px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .droppable-zone {
|
||||||
|
background-color: #0077ff80;
|
||||||
|
border: 2px dashed #0077ff;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .drops-hover {
|
||||||
|
background-color: #82b92e80;
|
||||||
|
border: 2px dashed #82b92e;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .droppable.droppable-default-zone:not(.droppable-new) {
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .droppable.droppable-default-zone.droppable-new {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs
|
||||||
|
.droppable.droppable-default-zone.droppable-new
|
||||||
|
> span.drop-here {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .droppable.droppable-default-zone > span.drop-here {
|
||||||
|
font-size: 15pt;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #0077ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs
|
||||||
|
.droppable.droppable-default-zone.droppable-new.ui-droppable-active
|
||||||
|
> span.drop-here {
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs .droppable.droppable-default-zone.ui-droppable-active {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
#droppable-graphs
|
||||||
|
.droppable.droppable-default-zone.ui-droppable-active.drops-hover
|
||||||
|
> span.drop-here {
|
||||||
|
color: #82b92e;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -145,28 +145,24 @@ $left_content = '';
|
||||||
$right_content = '';
|
$right_content = '';
|
||||||
|
|
||||||
$left_content .= '
|
$left_content .= '
|
||||||
<div class="sortable-graphs-connected">
|
<div class="filters-div-header">
|
||||||
<div data-id-module="6">
|
<div></div>
|
||||||
<span class="handle-graph">6 </span>
|
<img src="images/menu/contraer.svg">
|
||||||
<img width="25" src="images/application_double.png">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="filters-div">
|
||||||
<div class="sortable-graphs-connected">
|
<div class="draggable draggable1" data-id-module="1"></div>
|
||||||
<div data-id-module="7">
|
<div class="draggable draggable2" data-id-module="2"></div>
|
||||||
<span class="handle-graph">7 </span>
|
<div class="draggable draggable3" data-id-module="3"></div>
|
||||||
<img width="25" src="images/building.png">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
';
|
';
|
||||||
|
|
||||||
$intervals = [];
|
$intervals = [];
|
||||||
$intervals[SECONDS_1HOUR] = human_time_description_raw(SECONDS_1HOUR, true, 'large');
|
$intervals[SECONDS_1HOUR] = _('Last ').human_time_description_raw(SECONDS_1HOUR, true, 'large');
|
||||||
$intervals[SECONDS_6HOURS] = human_time_description_raw(SECONDS_6HOURS, true, 'large');
|
$intervals[SECONDS_6HOURS] = _('Last ').human_time_description_raw(SECONDS_6HOURS, true, 'large');
|
||||||
$intervals[SECONDS_12HOURS] = human_time_description_raw(SECONDS_12HOURS, true, 'large');
|
$intervals[SECONDS_12HOURS] = _('Last ').human_time_description_raw(SECONDS_12HOURS, true, 'large');
|
||||||
$intervals[SECONDS_1DAY] = human_time_description_raw(SECONDS_1DAY, true, 'large');
|
$intervals[SECONDS_1DAY] = _('Last ').human_time_description_raw(SECONDS_1DAY, true, 'large');
|
||||||
$intervals[SECONDS_2DAY] = human_time_description_raw(SECONDS_2DAY, true, 'large');
|
$intervals[SECONDS_2DAY] = _('Last ').human_time_description_raw(SECONDS_2DAY, true, 'large');
|
||||||
$intervals[SECONDS_1WEEK] = human_time_description_raw(SECONDS_1WEEK, true, 'large');
|
$intervals[SECONDS_1WEEK] = _('Last ').human_time_description_raw(SECONDS_1WEEK, true, 'large');
|
||||||
|
|
||||||
$right_content .= '<div class="interval-div">'.html_print_select(
|
$right_content .= '<div class="interval-div">'.html_print_select(
|
||||||
$intervals,
|
$intervals,
|
||||||
|
|
@ -182,33 +178,16 @@ $right_content .= '<div class="interval-div">'.html_print_select(
|
||||||
).'</div>';
|
).'</div>';
|
||||||
|
|
||||||
$right_content .= '
|
$right_content .= '
|
||||||
<div id="sortable-graphs" class="sortable-graphs-connected">
|
<div id="droppable-graphs">
|
||||||
<div data-id-module="1">
|
<div class="droppable droppable-default-zone" data-modules="[]"><span class="drop-here">'.__('Drop here').'<span></div>
|
||||||
<span class="handle-graph">1 </span>
|
|
||||||
<img width="25" src="images/add.png">
|
|
||||||
</div>
|
|
||||||
<div data-id-module="2">
|
|
||||||
<span class="handle-graph">2 </span>
|
|
||||||
<img width="25" src="images/advanced.png">
|
|
||||||
</div>
|
|
||||||
<div data-id-module="3">
|
|
||||||
<span class="handle-graph">3 </span>
|
|
||||||
<img width="25" src="images/agent_notinit.png">
|
|
||||||
</div>
|
|
||||||
<div data-id-module="4">
|
|
||||||
<span class="handle-graph">4 </span>
|
|
||||||
<img width="25" src="images/alerts_command.png">
|
|
||||||
</div>
|
|
||||||
<div data-id-module="5">
|
|
||||||
<span class="handle-graph">5 </span>
|
|
||||||
<img width="25" src="images/alarm-off.png">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
';
|
';
|
||||||
|
// <div class="droppable" data-id-zone="zone1"></div>
|
||||||
|
// <div class="droppable" data-id-zone="zone2"></div>
|
||||||
|
// <div class="droppable" data-id-zone="zone3"></div>
|
||||||
$filters_div = html_print_div(
|
$filters_div = html_print_div(
|
||||||
[
|
[
|
||||||
'class' => 'padding-div filters-div',
|
'class' => 'padding-div filters-div-main',
|
||||||
'content' => $left_content,
|
'content' => $left_content,
|
||||||
],
|
],
|
||||||
true
|
true
|
||||||
|
|
@ -216,7 +195,7 @@ $filters_div = html_print_div(
|
||||||
|
|
||||||
$graphs_div = html_print_div(
|
$graphs_div = html_print_div(
|
||||||
[
|
[
|
||||||
'class' => 'padding-div graphs-div',
|
'class' => 'padding-div graphs-div-main',
|
||||||
'content' => $right_content,
|
'content' => $right_content,
|
||||||
],
|
],
|
||||||
true
|
true
|
||||||
|
|
@ -233,67 +212,113 @@ html_print_div(
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
// Interval change.
|
||||||
$(".sortable-graphs-connected").sortable({
|
$('#interval').change(function (e) {
|
||||||
handle: '.handle-graph',
|
console.log(parseInt($(this).val()));
|
||||||
placeholder: 'drop-zone-sortable',
|
|
||||||
connectWith: ['.sortable-graphs-connected'],
|
|
||||||
containment: '#sortable-graphs',
|
|
||||||
opacity: 0.7,
|
|
||||||
cursor: 'move',
|
|
||||||
scrollSpeed: 10,
|
|
||||||
revert: 300,
|
|
||||||
start: function(event, ui) {
|
|
||||||
// console.log('start');
|
|
||||||
const divs = $('#sortable-graphs div');
|
|
||||||
const sort = $(this).sortable('instance');
|
|
||||||
|
|
||||||
ui.placeholder.height(ui.helper.height());
|
|
||||||
|
|
||||||
divs.each(function(i, v) {
|
|
||||||
sort.containment[i +1] += ui.helper.height() * 1 - sort.offset.click.bottom;
|
|
||||||
});
|
|
||||||
|
|
||||||
sort.containment[1] -= sort.offset.click.bottom;
|
|
||||||
},
|
|
||||||
stop: function(e, ui) {
|
|
||||||
// console.log('stop');
|
|
||||||
let data = [];
|
|
||||||
$('#sortable-graphs div').each(function(i, v) {
|
|
||||||
data.push($(this).data('id-module'));
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
|
|
||||||
// $.ajax({
|
|
||||||
// method: "POST",
|
|
||||||
// url: '',
|
|
||||||
// data: {
|
|
||||||
// page: '',
|
|
||||||
// method: "updatePriorityNodes",
|
|
||||||
// order: data
|
|
||||||
// },
|
|
||||||
// dataType: "json",
|
|
||||||
// success: function(data) {
|
|
||||||
// if(data.result == 1){
|
|
||||||
// confirmDialog({
|
|
||||||
// title: "<?php echo __('Update priority nodes'); ?>",
|
|
||||||
// message: "<?php echo __('Successfully updated priority order nodes'); ?>",
|
|
||||||
// hideCancelButton: true
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// confirmDialog({
|
|
||||||
// title: "<?php echo __('Update priority nodes'); ?>",
|
|
||||||
// message: "<?php echo __('Could not be updated priority order nodes'); ?>",
|
|
||||||
// hideCancelButton: true
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// error: function(data) {
|
|
||||||
// console.error("Fatal error in AJAX call", data);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Collapse filters.
|
||||||
|
$('div.filters-div-main > .filters-div-header > img').click(function (e) {
|
||||||
|
if ($('.filters-div-main').hasClass('filters-div-main-collapsed') === true) {
|
||||||
|
$('.filters-div-header > img').attr('src', 'images/menu/contraer.svg');
|
||||||
|
$('.filters-div-main').removeClass('filters-div-main-collapsed');
|
||||||
|
} else {
|
||||||
|
$('.filters-div-header > img').attr('src', 'images/menu/expandir.svg');
|
||||||
|
$('.filters-div-main').addClass('filters-div-main-collapsed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
// Draggable & Droppable graphs.
|
||||||
|
$('.draggable').draggable({
|
||||||
|
revert: "invalid",
|
||||||
|
stack: ".draggable",
|
||||||
|
helper: "clone",
|
||||||
|
});
|
||||||
|
|
||||||
|
var droppableOptions = {
|
||||||
|
accept: ".draggable",
|
||||||
|
hoverClass: "drops-hover",
|
||||||
|
activeClass: "droppable-zone",
|
||||||
|
drop: function(event, ui) {
|
||||||
|
// Add new module.
|
||||||
|
$(this).data('modules').push(ui.draggable.data('id-module'));
|
||||||
|
|
||||||
|
var modulesByGraphs = [];
|
||||||
|
$('#droppable-graphs > div').each(function (i, v) {
|
||||||
|
var modulesTmp = $(v).data('modules');
|
||||||
|
if (modulesTmp.length > 0) {
|
||||||
|
modulesByGraphs.push(modulesTmp)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ajax.
|
||||||
|
// $.ajax({
|
||||||
|
// method: "POST",
|
||||||
|
// url: '',
|
||||||
|
// data: {
|
||||||
|
// page: '',
|
||||||
|
// method: "updatePriorityNodes",
|
||||||
|
// order: data
|
||||||
|
// },
|
||||||
|
// dataType: "json",
|
||||||
|
// success: function(data) {
|
||||||
|
// if(data.result == 1){
|
||||||
|
// confirmDialog({
|
||||||
|
// title: "<?php echo __('Update priority nodes'); ?>",
|
||||||
|
// message: "<?php echo __('Successfully updated priority order nodes'); ?>",
|
||||||
|
// hideCancelButton: true
|
||||||
|
// });
|
||||||
|
// } else {
|
||||||
|
// confirmDialog({
|
||||||
|
// title: "<?php echo __('Update priority nodes'); ?>",
|
||||||
|
// message: "<?php echo __('Could not be updated priority order nodes'); ?>",
|
||||||
|
// hideCancelButton: true
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// error: function(data) {
|
||||||
|
// console.error("Fatal error in AJAX call", data);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
createDroppableZones(droppableOptions, modulesByGraphs);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set droppable zones.
|
||||||
|
$('.droppable').droppable(droppableOptions);
|
||||||
|
});
|
||||||
|
|
||||||
|
function createDroppableZones(droppableOptions, modulesByGraphs) {
|
||||||
|
// Translate.
|
||||||
|
const dropHere = '<?php echo __('Drop here'); ?>';
|
||||||
|
|
||||||
|
// Clear graph area.
|
||||||
|
$('#droppable-graphs').empty();
|
||||||
|
|
||||||
|
// example graph modules
|
||||||
|
modulesByGraphs.slice().reverse().forEach(graph => {
|
||||||
|
// Create graph div.
|
||||||
|
var graphDiv = $(`<div class="droppable" data-modules="[${graph}]"></div>`);
|
||||||
|
$("#droppable-graphs").prepend(graphDiv);
|
||||||
|
|
||||||
|
// todo: Print graph
|
||||||
|
graph.forEach(module => {
|
||||||
|
graphDiv.append($(`<div class="draggable draggable${module} ui-draggable ui-draggable-handle"></div>`));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create next droppable zone.
|
||||||
|
graphDiv.after($(`<div class="droppable droppable-default-zone droppable-new" data-modules="[]"><span class="drop-here">${dropHere}<span></div>`));
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create first droppable zones and graphs.
|
||||||
|
$("#droppable-graphs").prepend($(`<div class="droppable droppable-default-zone droppable-new" data-modules="[]"><span class="drop-here">${dropHere}<span></div>`));
|
||||||
|
|
||||||
|
// Set droppable zones.
|
||||||
|
$('.droppable').droppable(droppableOptions);
|
||||||
|
|
||||||
|
// todo: Create draggable graphs.
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue