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

#11093 grid background VC

This commit is contained in:
Jonathan 2023-06-07 12:46:39 +02:00
parent eada3f7079
commit dd375dc73e
7 changed files with 190 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pandora_console/extras/mr/65.sql Normal file
View File

@ -0,0 +1,7 @@
START TRANSACTION;
ALTER TABLE `tlayout`
ADD COLUMN `grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc' AFTER `maintenance_mode`,
ADD COLUMN `grid_size` VARCHAR(45) NOT NULL DEFAULT '10px' AFTER `grid_color`;
COMMIT;

20
pandora_console/include/ajax/visual_console.ajax.php
View File

@ -39,6 +39,7 @@ $graph_javascript = (bool) get_parameter('graph_javascript', false);
$force_remote_check = (bool) get_parameter('force_remote_check', false);
$update_maintanance_mode = (bool) get_parameter('update_maintanance_mode', false);
$load_css_cv = (bool) get_parameter('load_css_cv', false);
$update_grid_style = (bool) get_parameter('update_grid_style', false);
if ($render_map) {
$width = (int) get_parameter('width', '400');
@ -126,3 +127,22 @@ if ($update_maintanance_mode === true) {
echo json_encode(['result' => $result]);
return;
}
if ($update_grid_style === true) {
$idVisualConsole = (int) get_parameter('idVisualConsole', 0);
$color = get_parameter('color', '#CCC');
$size = get_parameter('size', '10');
$values = [];
$values['grid_color'] = $color;
$values['grid_size'] = $size;
$result = db_process_sql_update(
'tlayout',
$values,
['id' => $idVisualConsole]
);
echo json_encode(['result' => $result]);
return;
}

2
pandora_console/include/functions_html.php
View File

@ -4423,7 +4423,7 @@ function html_print_checkbox_switch_extended(
$name.($idcounter[$name] ? $idcounter[$name] : '')
);
$output = '<label class="p-switch pdd_0px'.$classParent.'">';
$output = '<label class="p-switch pdd_0px '.$classParent.'">';
$output .= '<input name="'.$name.'" type="checkbox" value="'.$value.'" '.($checked ? 'checked="checked"' : '');
if ($id == '') {
$output .= ' id="checkbox-'.$id_aux.'"';

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

@ -91,6 +91,8 @@ final class Container extends Model
'relationLineWidth' => (int) $data['relationLineWidth'],
'hash' => static::extractHash($data),
'maintenanceMode' => static::extractMaintenanceMode($data),
'grid_size' => (int) $data['grid_size'],
'grid_color' => (string) $data['grid_color'],
];
}

9
pandora_console/include/styles/pandora.css
View File

@ -6909,6 +6909,10 @@ div.graph div.legend table {
/*
* MARGIN LEFT
*/
.mrgn_lft-20px {
margin-left: -20px !important;
}
.mrgn_lft_05em {
margin-left: 0.5em;
}
@ -12226,3 +12230,8 @@ div.parent_graph > p.legend_background > table > tbody > tr {
.toggle-traffic-graph {
margin: 0px !important;
}
#grid_img {
position: absolute;
margin-top: -2px;
}

149
pandora_console/operation/visual_console/view.php
View File

@ -463,6 +463,68 @@ if ($pure === false) {
echo '</div>';
}
echo '<div id ="grid-controls" class="flex-colum-center center_switch" style="visibility:hidden">';
echo html_print_label(__('Grid'), 'grid-mode', true);
echo '<div>';
echo html_print_checkbox_switch_extended('grid-mode', 1, false, $disabled_edit_mode, '', '', true, '', 'mrgn_lft-20px');
echo html_print_image(
'images/configuration@svg.svg',
true,
[
'title' => __('Grid style'),
'class' => 'main_menu_icon invert_filter invisible',
'style' => 'position: absolute; margin-left: 5px;',
'id' => 'grid_img',
'onclick' => 'dialog_grid()',
]
);
echo '</div>';
echo '</div>';
echo '<div id="dialog_grid" class="invisible">';
$table = new stdClass();
$table->width = '100%';
$table->class = 'filter-table-adv';
$table->size[0] = '50%';
$table->size[1] = '50%';
$table->data = [];
$table->data[0][0] = html_print_label_input_block(
__('Grid size'),
html_print_input_number(
[
'name' => 'grid_size',
'value' => $visualConsoleData['grid_size'],
'id' => 'grid_size',
'min' => 2,
'max' => 50,
'return' => true,
]
)
);
$table->data[0][1] = html_print_label_input_block(
__('Grid color'),
html_print_input_color(
'grid_color',
$visualConsoleData['grid_color'],
'grid_color',
'w100p',
true
)
);
html_print_table($table);
html_print_submit_button(
__('Update'),
'grid_setup',
false,
[
'icon' => 'next',
'class' => 'float-right',
],
);
echo '</div>';
echo '<div id="edit-mode-control" class="flex-colum-center center_switch">';
echo html_print_label(__('Edit'), 'edit-mode', true);
echo html_print_checkbox_switch('edit-mode', 1, false, true, $disabled_edit_mode);
@ -768,16 +830,103 @@ if ($edit_capable === true) {
visualConsoleManager.visualConsole.enableEditMode();
visualConsoleManager.changeUpdateInterval(0);
$('#edit-controls').css('visibility', '');
$('#grid-controls').css('visibility', '');
} else {
visualConsoleManager.visualConsole.disableEditMode();
visualConsoleManager.visualConsole.unSelectItems();
visualConsoleManager.changeUpdateInterval(<?php echo ($refr * 1000); ?>); // To ms.
$('#edit-controls').css('visibility', 'hidden');
$('#grid-controls').css('visibility', 'hidden');
$('input[name=grid-mode]').prop('checked', false);
$('#div-grid').remove();
}
resetInterval();
});
$('input[name=grid-mode]').change(function(evente) {
if ($(this).prop('checked')) {
color = $('#grid_color').val();
size = $('#grid_size').val();
display_grid(color,size);
$('#grid_img').removeClass('invisible');
} else {
$('#div-grid').remove();
$('#grid_img').addClass('invisible');
}
});
$('#button-grid_setup').click(function(){
if(validate_size()){
color = $('#grid_color').val();
size = $('#grid_size').val();
display_grid(color,size);
$('#dialog_grid').dialog('close');
save_grid_style(color, size);
}
});
$('#grid_size').blur(function(){
validate_size();
});
function validate_size(){
if($('#grid_size').val()<2 || $('#grid_size').val()>50){
$('#grid_size').val('10');
alert("<?php echo __('The size should be between 2 and 50'); ?>");
return false;
} else {
return true;
}
}
function dialog_grid(){
$('#dialog_grid').dialog({
title: '<?php echo __('Grid style'); ?>',
resizable: true,
draggable: true,
modal: true,
close: false,
height: 200,
width: 480,
overlay: {
opacity: 0.5,
background: "black"
}
})
.show();
}
function display_grid(color='#ccc', size='10'){
$('#div-grid').remove();
var grid = "<div id='div-grid' style='background-image: linear-gradient("+color+" .1em, transparent .1em), linear-gradient(90deg, "+color+", .1em, transparent .1em); background-size: "+size+"px "+size+"px;height: 100%;width: 100%;'></div>";
$('#visual-console-container').append(grid);
};
function save_grid_style(color, size){
const idVisualConsole = '<?php echo $visualConsoleId; ?>';
$.ajax({
type: "POST",
url: "ajax.php",
dataType: "json",
data: {
page: "include/ajax/visual_console.ajax",
update_grid_style: true,
color: color,
size: size,
idVisualConsole: idVisualConsole,
},
success: function (data) {
if(data.result) {
alert("<?php echo __('Grid style saved.'); ?>");
}
},
error: function (err) {
console.error(err);
}
});
}
// Enable/disable the maintenance mode.
$('input[name=maintenance-mode]').click(function(event) {
event.preventDefault();

2
pandora_console/pandoradb.sql
View File

@ -1700,6 +1700,8 @@ CREATE TABLE IF NOT EXISTS `tlayout` (
`is_favourite` INT UNSIGNED NOT NULL DEFAULT 0,
`auto_adjust` INT UNSIGNED NOT NULL DEFAULT 0,
`maintenance_mode` TEXT,
`grid_color` VARCHAR(45) NOT NULL DEFAULT '#cccccc',
`grid_size` VARCHAR(45) NOT NULL DEFAULT '10px',
PRIMARY KEY(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=UTF8MB4;