#11093 grid background VC

pandora_console/extras/mr/65.sql

@@ -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;

pandora_console/include/ajax/visual_console.ajax.php

@@ -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;
+}

pandora_console/include/functions_html.php

@@ -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.'"';

pandora_console/include/rest-api/models/VisualConsole/Container.php

@@ -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'],
         ];
     }
 

pandora_console/include/styles/pandora.css

@@ -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;
+}

pandora_console/operation/visual_console/view.php

@@ -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();

pandora_console/pandoradb.sql

@@ -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;