Fixed errors VC forms

pandora_console/include/class/HTML.class.php

@@ -42,6 +42,55 @@ class HTML
      */
     public $breadcrum;
 
+    /**
+     * Current page
+     *
+     * @var integer
+     */
+    public $page;
+
+        /**
+         * Target icon to be shown in discovery wizard list.
+         *
+         * @var string
+         */
+    public $icon;
+
+    /**
+     * Target label to be shown in discovery wizard list.
+     *
+     * @var string
+     */
+    public $label;
+
+    /**
+     * This wizard's url.
+     *
+     * @var string
+     */
+    public $url;
+
+    /**
+     * Result of wizard execution (0 - ok, 1 - not ok).
+     *
+     * @var integer
+     */
+    public $result;
+
+    /**
+     * Message to be delivered to user.
+     *
+     * @var string
+     */
+    public $msg;
+
+    /**
+     * Defines access level to use this util.
+     *
+     * @var string
+     */
+    public $access = 'AR';
+
 
     /**
      * Setter for breadcrum
@@ -85,14 +134,75 @@ class HTML
 
 
     /**
-     * Breadcrum builder.
+     * Setter for label
      *
-     * @param array $urls Array of urls to be transformed into a breadcrum.
+     * @param string $str Label.
      *
-     * @return array Breadcrum prepared.
+     * @return void
+     */
+    public function setLabel(string $str)
+    {
+        $this->label = $str;
+    }
+
+
+    /**
+     * Getter for label
+     *
+     * @return array Breadcrum.
+     */
+    public function getLabel()
+    {
+        return $this->label;
+    }
+
+
+    /**
+     * Return units associated to target interval (in seconds).
+     *
+     * @param integer $interval Target interval.
+     *
+     * @return integer Unit.
+     */
+    public function getTimeUnit($interval)
+    {
+        $units = [
+            1,
+            60,
+            3600,
+            86400,
+            604800,
+            2592000,
+            31104000,
+        ];
+
+        $size = count($units);
+        for ($i = 0; $i < $size; $i++) {
+            if ($interval < $units[$i]) {
+                if (($i - 1) < 0) {
+                    return 1;
+                }
+
+                return $units[($i - 1)];
+            }
+        }
+
+        return $units[-1];
+    }
+
+
+    /**
+     * Builder for breadcrum
+     *
+     * @param array   $urls Array of urls to be stored in breadcrum.
+     * @param boolean $add  True if breadcrum should be added
+     *                      instead of overwrite it.
+     *
+     * @return void
      */
     public function prepareBreadcrum(
-        array $urls
+        array $urls,
+        bool $add=false
     ) {
         $bc = [];
         $i = 0;
@@ -105,15 +215,91 @@ class HTML
             }
 
             $bc[$i] = '';
-            $bc[$i] .= '<span><a class="breadcrumb_link '.$class.'" ';
+            $bc[$i] .= '<span><a class="breadcrumb_link '.$class.'" href="'.$url['link'].'">';
-            $bc[$i] .= 'href="'.$url['link'].'">';
             $bc[$i] .= $url['label'];
             $bc[$i] .= '</a>';
             $bc[$i] .= '</span>';
             $i++;
         }
 
-        return $bc;
+        if ($add === true) {
+            $this->addBreadcrum($bc);
+        } else {
+            $this->setBreadcrum($bc);
+        }
+    }
+
+
+    /**
+     * To be overwritten.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        ui_require_css_file('wizard');
+        // Check access.
+        check_login();
+
+        if (! $this->aclMulticheck()) {
+            return;
+        }
+    }
+
+
+    /**
+     * Check multiple acl perms.
+     *
+     * @param string $access Access in PM|AR|RR format. Optional.
+     *
+     * @return boolean Alowed or not.
+     */
+    public function aclMulticheck($access=null)
+    {
+        global $config;
+
+        if (isset($access)) {
+            $perms = explode('|', $access);
+        } else {
+            $perms = explode('|', $this->access);
+        }
+
+        $allowed = false;
+        foreach ($perms as $perm) {
+            $allowed = $allowed || (bool) check_acl(
+                $config['id_user'],
+                0,
+                $perm
+            );
+        }
+
+        return $allowed;
+    }
+
+
+    /**
+     * Checks if environment is ready,
+     * returns array
+     *   icon: icon to be displayed
+     *   label: label to be displayed
+     *
+     * @return array With data.
+     **/
+    public function load()
+    {
+        global $config;
+        // Check access.
+        check_login();
+
+        if (! $this->aclMulticheck()) {
+            return false;
+        }
+
+        return [
+            'icon'  => $this->icon,
+            'label' => $this->label,
+            'url'   => $this->url,
+        ];
     }
 
 
@@ -131,6 +317,50 @@ class HTML
     }
 
 
+    /**
+     * Prints a header for current wizard.
+     *
+     * @param boolean $return Return HTML or print it.
+     *
+     * @return string HTML code for header.
+     */
+    public function printHeader(bool $return=false)
+    {
+        $output = $this->printBreadcrum();
+        if ($return === false) {
+            echo $output;
+        }
+
+        return $output;
+    }
+
+
+    /**
+     * Print input using functions html lib.
+     *
+     * @param array $data Input definition.
+     *
+     * @return string HTML code for desired input.
+     */
+    public function printInput($data)
+    {
+        global $config;
+
+        include_once $config['homedir'].'/include/functions_html.php';
+
+        if (is_array($data) === false) {
+            return '';
+        }
+
+        $input = html_print_input(($data + ['return' => true]), 'div', true);
+        if ($input === false) {
+            return '';
+        }
+
+        return $input;
+    }
+
+
     /**
      * Prints a go back button redirecting to main page.
      *
@@ -141,7 +371,9 @@ class HTML
     public function printGoBackButton($url=null)
     {
         if (isset($url) === false) {
-            $url = ui_get_full_url('index.php');
+            $url = ui_get_full_url(
+                'index.php?sec=gservers&sec2=godmode/servers/discovery'
+            );
         }
 
         $form = [
@@ -167,43 +399,48 @@ class HTML
     }
 
 
-    /**
-     * Print input using functions html lib.
-     *
-     * @param array $data Input definition.
-     *
-     * @return string HTML code for desired input.
-     */
-    public function printInput(array $data)
-    {
-        global $config;
-
-        include_once $config['homedir'].'/include/functions_html.php';
-
-        if (is_array($data) === false) {
-            return '';
-        }
-
-        $input = html_print_input(($data + ['return' => true]), 'div', true);
-        if ($input === false) {
-            return '';
-        }
-
-        return $input;
-    }
-
-
     /**
      * Print a block of inputs.
+     * Example, using direct to 'anidate' inputs directly to wrapper:
+     * [
+     *     'wrapper'       => 'div',
+     *     'block_id'      => 'example_id',
+     *     'class'         => 'your class',
+     *     'direct'        => 1,
+     *     'block_content' => [
+     *         [
+     *             'arguments' => [
+     *                 'label'      => __('Sugesstion'),
+     *                 'type'       => 'button',
+     *                 'attributes' => 'class="sub ok btn_sug"',
+     *                 'name'       => 'option_1',
+     *                 'id'         => 'option_1',
+     *                 'script'     => 'change_option1()',
+     *             ],
+     *         ],
+     *         [
+     *             'arguments' => [
+     *                 'label'      => __('Something is not quite right'),
+     *                 'type'       => 'button',
+     *                 'attributes' => 'class="sub ok btn_something"',
+     *                 'name'       => 'option_2',
+     *                 'id'         => 'option_2',
+     *                 'script'     => 'change_option2()',
+     *             ],
+     *         ],
+     *     ],
+     * ].
      *
      * @param array   $input  Definition of target block to be printed.
      * @param boolean $return Return as string or direct output.
+     * @param boolean $direct Avoid encapsulation if input print is direct.
      *
      * @return string HTML content.
      */
     public function printBlock(
         array $input,
-        bool $return=false
+        bool $return=false,
+        bool $direct=false
     ) {
         $output = '';
         if ($input['hidden'] == 1) {
@@ -217,38 +454,79 @@ class HTML
         }
 
         if (is_array($input['block_content']) === true) {
+            $direct = (bool) $input['direct'];
+            $toggle = (bool) $input['toggle'];
+
             // Print independent block of inputs.
-            if (isset($input['wrapper']) === true) {
+            $output .= '<li id="li-'.$input['block_id'].'" class="'.$class.'">';
-                $output .= '<li id="li-'.$input['block_id'].'" ';
+
-                $output .= ' class="'.$class.'">';
+            if ($input['wrapper']) {
-                $output .= '<'.$input['wrapper'].' id="'.$input['block_id'].'"';
+                $output .= '<'.$input['wrapper'].' id="'.$input['block_id'].'" class="'.$class.'">';
-                $output .= ' class="'.$class.'">';
-            } else {
-                $output .= '<li id="'.$input['block_id'].'" ';
-                $output .= ' class="'.$class.'">';
             }
 
-            $output .= '<ul class="wizard '.$input['block_class'].'">';
+            if (!$direct) {
-            foreach ($input['block_content'] as $input) {
+                // Avoid encapsulation if input is direct => 1.
-                $output .= self::printBlock($input, $return);
+                $output .= '<ul class="wizard '.$input['block_class'].'">';
+            }
+
+            $html = '';
+
+            foreach ($input['block_content'] as $in) {
+                $html .= $this->printBlock(
+                    $in,
+                    $return,
+                    (bool) $direct
+                );
+            }
+
+            if ($toggle === true) {
+                $output .= ui_print_toggle(
+                    [
+                        'name'            => (isset($input['toggle_name']) ? $input['toggle_name'] : 'toggle_'.uniqid()),
+                        'content'         => $html,
+                        'title'           => $input['toggle_title'],
+                        'id'              => $input['toggle_id'],
+                        'hidden_default'  => $input['toggle_hidden_default'],
+                        'return'          => (isset($input['toggle_return']) ? $input['toggle_return'] : true),
+                        'toggle_class'    => $input['toggle_toggle_class'],
+                        'main_class'      => $input['toggle_main_class'],
+                        'container_class' => $input['toggle_container_class'],
+                        'img_a'           => $input['toggle_img_a'],
+                        'img_b'           => $input['toggle_img_b'],
+                        'clean'           => (isset($input['toggle_clean']) ? $input['toggle_clean'] : true),
+                    ]
+                );
+            } else {
+                $output .= $html;
             }
 
             // Close block.
-            if (isset($input['wrapper']) === true) {
+            if (!$direct) {
-                $output .= '</ul></'.$input['wrapper'].'>';
+                $output .= '</ul>';
-            } else {
-                $output .= '</ul></li>';
             }
+
+            if ($input['wrapper']) {
+                $output .= '</'.$input['wrapper'].'>';
+            }
+
+            $output .= '</li>';
         } else {
-            if ($input['arguments']['type'] != 'hidden') {
+            if ($input['arguments']['type'] != 'hidden'
-                $output .= '<li id="'.$input['id'].'" class="'.$class.'">';
+                && $input['arguments']['type'] != 'hidden_extended'
+            ) {
+                if (!$direct) {
+                    $output .= '<li id="'.$input['id'].'" class="'.$class.'">';
+                }
+
                 $output .= '<label>'.$input['label'].'</label>';
-                $output .= self::printInput($input['arguments']);
+                $output .= $this->printInput($input['arguments']);
                 // Allow dynamic content.
                 $output .= $input['extra'];
-                $output .= '</li>';
+                if (!$direct) {
+                    $output .= '</li>';
+                }
             } else {
-                $output .= self::printInput($input['arguments']);
+                $output .= $this->printInput($input['arguments']);
                 // Allow dynamic content.
                 $output .= $input['extra'];
             }
@@ -262,89 +540,6 @@ class HTML
     }
 
 
-    /**
-     * Print a form.
-     *
-     * @param array   $data            Definition of target form to be printed.
-     * @param boolean $return          Return as string or direct output.
-     * @param boolean $print_white_box Print a white box.
-     *
-     * @return string HTML code.
-     */
-    public function printForm(
-        array $data,
-        bool $return=false,
-        bool $print_white_box=false
-    ) {
-        $form = $data['form'];
-        $inputs = $data['inputs'];
-        $js = $data['js'];
-        $rawjs = $data['js_block'];
-        $cb_function = $data['cb_function'];
-        $cb_args = $data['cb_args'];
-
-        $output_head = '<form id="'.$form['id'].'" ';
-        $output_head .= 'class="'.$form['class'].'" ';
-        $output_head .= 'onsubmit="'.$form['onsubmit'].'" ';
-        $output_head .= 'enctype="'.$form['enctype'].'" ';
-        $output_head .= 'action="'.$form['action'].'" ';
-        $output_head .= 'method="'.$form['method'].'" ';
-        $output_head .= $form['extra'].'>';
-
-        if ($return === false) {
-            echo $output_head;
-        }
-
-        try {
-            if (isset($cb_function) === true) {
-                call_user_func_array(
-                    $cb_function,
-                    (isset($cb_args) === true) ? $cb_args : []
-                );
-            }
-        } catch (Exception $e) {
-            error_log('Error executing wizard callback: ', $e->getMessage());
-        }
-
-        $output_submit = '';
-        $output = '';
-
-        if ($print_white_box === true) {
-            $output .= '<div class="white_box">';
-        }
-
-        $output .= '<ul class="wizard">';
-
-        foreach ($inputs as $input) {
-            if ($input['arguments']['type'] != 'submit') {
-                $output .= self::printBlock($input, true);
-            } else {
-                $output_submit .= self::printBlock($input, true);
-            }
-        }
-
-        $output .= '</ul>';
-
-        if ($print_white_box === true) {
-            $output .= '</div>';
-        }
-
-        $output .= '<ul class="wizard">'.$output_submit.'</ul>';
-        $output .= '</form>';
-        $output .= '<script>'.$js.'</script>';
-        if ($rawjs) {
-            $output .= $rawjs;
-        }
-
-        if ($return === false) {
-            echo $output;
-        }
-
-        return $output_head.$output;
-
-    }
-
-
     /**
      * Print a block of inputs with grid format.
      *
@@ -376,7 +571,9 @@ class HTML
 
             $output .= '</ul></li>';
         } else {
-            if ($input['arguments']['type'] != 'hidden') {
+            if ($input['arguments']['type'] != 'hidden'
+                && $input['arguments']['type'] != 'hidden_extended'
+            ) {
                 if ($input['arguments']['inline'] != 'true') {
                     $output .= '<div class="edit_discovery_input">';
                 } else {
@@ -479,7 +676,9 @@ class HTML
 
             $output .= '</ul></li>';
         } else {
-            if ($input['arguments']['type'] != 'hidden') {
+            if ($input['arguments']['type'] != 'hidden'
+                && $input['arguments']['type'] != 'hidden_extended'
+            ) {
                 $output .= '<li id="'.$input['id'].'" class="'.$class.'">';
                 $output .= '<label>'.$input['label'].'</label>';
                 $output .= $this->printInput($input['arguments']);
@@ -501,6 +700,84 @@ class HTML
     }
 
 
+    /**
+     * Print a form.
+     *
+     * @param array   $data            Definition of target form to be printed.
+     * @param boolean $return          Return as string or direct output.
+     * @param boolean $print_white_box Print a white box.
+     *
+     * @return string HTML code.
+     */
+    public function printForm(
+        array $data,
+        bool $return=false,
+        bool $print_white_box=false
+    ) {
+        $form = $data['form'];
+        $inputs = $data['inputs'];
+        $js = $data['js'];
+        $rawjs = $data['js_block'];
+        $cb_function = $data['cb_function'];
+        $cb_args = $data['cb_args'];
+
+        $output_head = '<form id="'.$form['id'].'" class="discovery '.$form['class'].'" onsubmit="'.$form['onsubmit'].'" enctype="'.$form['enctype'].'" action="'.$form['action'].'" method="'.$form['method'];
+        $output_head .= '" '.$form['extra'].'>';
+
+        if ($return === false) {
+            echo $output_head;
+        }
+
+        try {
+            if (isset($cb_function) === true) {
+                call_user_func_array(
+                    $cb_function,
+                    (isset($cb_args) === true) ? $cb_args : []
+                );
+            }
+        } catch (Exception $e) {
+            error_log('Error executing wizard callback: ', $e->getMessage());
+        }
+
+        $output_submit = '';
+        $output = '';
+
+        if ($print_white_box === true) {
+            $output .= '<div class="white_box">';
+        }
+
+        $output .= '<ul class="wizard">';
+
+        foreach ($inputs as $input) {
+            if ($input['arguments']['type'] != 'submit') {
+                $output .= $this->printBlock($input, true);
+            } else {
+                $output_submit .= $this->printBlock($input, true);
+            }
+        }
+
+        $output .= '</ul>';
+
+        if ($print_white_box === true) {
+            $output .= '</div>';
+        }
+
+        $output .= '<ul class="wizard">'.$output_submit.'</ul>';
+        $output .= '</form>';
+        $output .= '<script>'.$js.'</script>';
+        if ($rawjs) {
+            $output .= $rawjs;
+        }
+
+        if ($return === false) {
+            echo $output;
+        }
+
+        return $output_head.$output;
+
+    }
+
+
     /**
      * Print a form as a grid of inputs.
      *
@@ -557,15 +834,18 @@ class HTML
                     $first_block_printed = true;
                 }
 
-                $output .= '<div class="edit_discovery_info" style="'.$row['style'].'">';
+                $output .= '<div class="edit_discovery_info '.$row['class'].'" style="'.$row['style'].'">';
 
                 foreach ($row['columns'] as $column) {
                     $width = isset($column['width']) ? 'width: '.$column['width'].';' : 'width: 100%;';
                     $padding_left = isset($column['padding-left']) ? 'padding-left: '.$column['padding-left'].';' : 'padding-left: 0;';
                     $padding_right = isset($column['padding-right']) ? 'padding-right: '.$column['padding-right'].';' : 'padding-right: 0;';
                     $extra_styles = isset($column['style']) ? $column['style'] : '';
+                    $class = isset($column['class']) ? $column['class'] : '';
 
-                    $output .= '<div style="'.$width.$padding_left.$padding_right.$extra_styles.'">';
+                    $output .= '<div class="'.$class.'" ';
+                    $output .= ' style="'.$width.$padding_left.$padding_right;
+                    $output .= $extra_styles.'">';
 
                     foreach ($column['inputs'] as $input) {
                         if (is_array($input)) {
@@ -669,15 +949,45 @@ class HTML
 
 
     /**
-     * Dumps html string to output.
+     * Print a big button element (huge image, big text and link).
      *
-     * @param mixed $html HTML content to be printed.
+     * @param array $data Element data (link, image...).
      *
-     * @return void
+     * @return void Only prints the element.
      */
-    public function render($html)
+    public static function printBigButtonElement($data)
     {
-        echo $html;
+        if (isset($data['url']) === false) {
+            $data['url'] = '#';
+        }
+
+        ?>
+        <li class="discovery">
+            <a href="<?php echo $data['url']; ?>">
+                <div class="data_container">
+                    <?php html_print_image($data['icon']); ?>
+                    <br><label id="text_wizard">
+                        <?php echo io_safe_output($data['label']); ?>
+                    </label>
+                </div>
+            </a>
+        </li>
+        <?php
+    }
+
+
+    /**
+     * Print a list of big buttons elements.
+     *
+     * @param array $list_data Array of data for printBigButtonElement.
+     *
+     * @return void Print the full list.
+     */
+    public static function printBigButtonsList($list_data)
+    {
+        echo '<ul class="bigbuttonlist">';
+        array_map('self::printBigButtonElement', $list_data);
+        echo '</ul>';
     }
 
 

pandora_console/include/functions_html.php

@@ -3793,3 +3793,25 @@ function html_print_autocomplete_users_from_integria(
         echo $output;
     }
 }
+
+
+function html_print_tabs(array $tabs)
+{
+    $result = '<div id="html-tabs">';
+    $result .= '<ul class="">';
+    foreach ($tabs as $key => $value) {
+        $result .= "<li><a href='".$value['href']."' id='".$value['id']."'>";
+        $result .= html_print_image(
+            'images/'.$value['img'],
+            true
+        );
+        $result .= '<span>'.$value['name'].'</span>';
+        $result .= '</a></li>';
+    }
+
+    $result .= '</ul>';
+
+    $result .= '</div>';
+
+    return $result;
+}

pandora_console/include/javascript/pandora_visual_console.js

@@ -1423,6 +1423,20 @@ function createOrUpdateVisualConsoleItem(
     title = "Update item";
   }
   // var props = item.props || {};
+
+  /*
+  var elementsVc = visualConsole.elements
+    .filter(function(item) {
+      return item.props.id;
+    })
+    .map(function(item) {
+      return {
+        value: item.props.id,
+        text: VisualConsole.itemDescriptiveName(item)
+      };
+    });
+  */
+
   load_modal({
     target: $("#modalVCItemForm"),
     form: "itemForm",
@@ -1448,11 +1462,19 @@ function createOrUpdateVisualConsoleItem(
       {
         name: "item",
         value: item
+      },
+      /*{
+        name: "elementsVc",
+        value: elementsVc
+      },*/
+      {
+        name: "vCId",
+        value: visualConsole.props.id
       }
     ],
     onshow: {
       page: "include/rest-api/index",
-      method: "loadForm"
+      method: "loadTabs"
     },
     onsubmit: {
       page: "include/rest-api/index",

pandora_console/include/rest-api/index.php

@@ -55,25 +55,29 @@ $serviceListVisualConsole = (bool) get_parameter(
     'serviceListVisualConsole'
 );
 
+$loadtabs = (bool) get_parameter('loadtabs');
+
 ob_clean();
 
-// Retrieve the visual console.
+if ($visualConsoleId) {
-$visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId]);
+    // Retrieve the visual console.
-$visualConsoleData = $visualConsole->toArray();
+    $visualConsole = VisualConsole::fromDB(['id' => $visualConsoleId]);
-$vcGroupId = $visualConsoleData['groupId'];
+    $visualConsoleData = $visualConsole->toArray();
+    $vcGroupId = $visualConsoleData['groupId'];
 
-// ACL.
+    // ACL.
-$aclRead = check_acl($config['id_user'], $vcGroupId, 'VR');
+    $aclRead = check_acl($config['id_user'], $vcGroupId, 'VR');
-$aclWrite = check_acl($config['id_user'], $vcGroupId, 'VW');
+    $aclWrite = check_acl($config['id_user'], $vcGroupId, 'VW');
-$aclManage = check_acl($config['id_user'], $vcGroupId, 'VM');
+    $aclManage = check_acl($config['id_user'], $vcGroupId, 'VM');
 
-if (!$aclRead && !$aclWrite && !$aclManage) {
+    if (!$aclRead && !$aclWrite && !$aclManage) {
-    db_pandora_audit(
+        db_pandora_audit(
-        'ACL Violation',
+            'ACL Violation',
-        'Trying to access visual console without group access'
+            'Trying to access visual console without group access'
-    );
+        );
-    http_response_code(403);
+        http_response_code(403);
-    return;
+        return;
+    }
 }
 
 if ($getVisualConsole === true) {
@@ -568,6 +572,11 @@ if ($getVisualConsole === true) {
     );
 
     echo io_safe_output(json_encode($services));
+    return;
+} else if ($loadtabs) {
+    $viewer = new Viewer();
+    echo $viewer->loadForm();
+
     return;
 }
 

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

@@ -1699,18 +1699,15 @@ class Item extends CachedModel
      */
     protected static function getImageSrc(array $data)
     {
-        $imageSrc = static::notEmptyStringOr(
+        $imageSrc = static::issetInArray(
-            static::issetInArray(
+            $data,
-                $data,
+            [
-                [
+                'image',
-                    'image',
+                'imageSrc',
-                    'imageSrc',
+                'backgroundColor',
-                    'backgroundColor',
+                'backgroundType',
-                    'backgroundType',
+                'valueType',
-                    'valueType',
+            ]
-                ]
-            ),
-            null
         );
 
         return $imageSrc;
@@ -1898,29 +1895,156 @@ class Item extends CachedModel
     {
         $inputs = [];
 
-        // Label.
+        switch ($values->tabSelected) {
-        $inputs[] = [
+            case 'label':
-            'label'     => __('Label'),
+                // Label.
-            'id'        => 'div-label',
+                // TODO tinyMCE.
-            'arguments' => [
+                $inputs[] = [
-                'name'   => 'Label',
+                    'label'     => __('Label'),
-                'type'   => 'text',
+                    'id'        => 'div-label',
-                'value'  => $values->label,
+                    'arguments' => [
-                'return' => true,
+                        'name'   => 'label',
-            ],
+                        'type'   => 'text',
-        ];
+                        'value'  => $values->label,
+                        'return' => true,
+                    ],
+                ];
+            break;
 
-        // Position.
+            case 'general':
-        $inputs[] = [
+                // Size.
-            'label'     => __('Position'),
+                $inputs[] = [
-            'id'        => 'div-label',
+                    'block_id'      => 'size-item',
-            'arguments' => [
+                    'class'         => 'flex-row flex-start w100p',
-                'name'   => 'position-x',
+                    'direct'        => 1,
-                'type'   => 'text',
+                    'block_content' => [
-                'value'  => $values->posX,
+                        [
-                'return' => true,
+                            'label' => __('Size'),
-            ],
+                        ],
-        ];
+                        [
+                            'label'     => __('width'),
+                            'arguments' => [
+                                'name'   => 'width',
+                                'type'   => 'number',
+                                'value'  => $values->width,
+                                'return' => true,
+                            ],
+                        ],
+                        [
+                            'label'     => __('height'),
+                            'arguments' => [
+                                'name'   => 'height',
+                                'type'   => 'number',
+                                'value'  => $values->height,
+                                'return' => true,
+                            ],
+                        ],
+                    ],
+                ];
+
+                // Link enabled.
+                $inputs[] = [
+                    'label'     => __('Link enabled'),
+                    'arguments' => [
+                        'name'  => 'isLinkEnabled',
+                        'id'    => 'isLinkEnabled',
+                        'type'  => 'switch',
+                        'value' => $values->isLinkEnabled,
+                    ],
+                ];
+
+                // Show on top.
+                $inputs[] = [
+                    'label'     => __('Show on top'),
+                    'arguments' => [
+                        'name'  => 'isOnTop',
+                        'id'    => 'isOnTop',
+                        'type'  => 'switch',
+                        'value' => $values->isOnTop,
+                    ],
+                ];
+
+                // Position.
+                $inputs[] = [
+                    'block_id'      => 'position-item',
+                    'class'         => 'flex-row flex-start w100p',
+                    'direct'        => 1,
+                    'block_content' => [
+                        [
+                            'label' => __('Position'),
+                        ],
+                        [
+                            'label'     => __('X'),
+                            'arguments' => [
+                                'name'   => 'x',
+                                'type'   => 'number',
+                                'value'  => $values->x,
+                                'return' => true,
+                            ],
+                        ],
+                        [
+                            'label'     => __('Y'),
+                            'arguments' => [
+                                'name'   => 'y',
+                                'type'   => 'number',
+                                'value'  => $values->y,
+                                'return' => true,
+                            ],
+                        ],
+                    ],
+                ];
+
+                // Parent.
+                // TODO:XXX
+                $fields = get_parameter('elementsVc', []);
+                $fields[0] = __('None');
+
+                $inputs[] = [
+                    'label'     => __('Parent'),
+                    'arguments' => [
+                        'type'     => 'select',
+                        'fields'   => $fields,
+                        'name'     => 'parentId',
+                        'selected' => $values->parentId,
+                        'return'   => true,
+                    ],
+                ];
+
+                // Restrict access to group.
+                $inputs[] = [
+                    'label'     => __('Restrict access to group'),
+                    'arguments' => [
+                        'type'           => 'select_groups',
+                        'name'           => 'aclGroupId',
+                        'returnAllGroup' => true,
+                        'privilege'      => $values->access,
+                        'selected'       => $values->aclGroupId,
+                        'return'         => true,
+                    ],
+                ];
+
+                // Cache expiration.
+                $inputs[] = [
+                    'label'     => __('Cache expiration'),
+                    'arguments' => [
+                        'name'          => 'cacheExpiration',
+                        'type'          => 'interval',
+                        'value'         => $values->cacheExpiration,
+                        'nothing'       => __('None'),
+                        'nothing_value' => 0,
+                    ],
+                ];
+            break;
+
+            case 'specific':
+                // Override.
+                $inputs = [];
+            break;
+
+            default:
+                // Not possible.
+            break;
+        }
 
         return $inputs;
     }

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

@@ -40,6 +40,61 @@ class View extends \HTML
 {
 
 
+    public function loadTabs()
+    {
+        $url = ui_get_full_url(false, false, false, false);
+        $url .= 'ajax.php?page=include/rest-api/index';
+        $url .= '&loadtabs=1';
+        $url .= '&item='.get_parameter('item', null);
+
+        $tabs = [
+            [
+                'name' => __('Label settings'),
+                'id'   => 'tab-label',
+                'href' => $url.'&tabSelected=label',
+                'img'  => 'zoom.png',
+            ],[
+                'name' => __('General settings'),
+                'id'   => 'tab-general',
+                'href' => $url.'&tabSelected=general',
+                'img'  => 'pencil.png',
+            ],[
+                'name' => __('Specific settings'),
+                'id'   => 'tab-specific',
+                'href' => $url.'&tabSelected=specific',
+                'img'  => 'event_responses_col.png',
+            ],
+        ];
+
+        $result = html_print_tabs($tabs);
+
+        // TODO:Change other place.
+        $js = '<script>
+	            $(function() {
+                    $tabs = $( "#html-tabs" ).tabs({
+                        beforeLoad: function (event, ui) {
+                            if (ui.tab.data("loaded")) {
+                                event.preventDefault();
+                                return;
+                            }
+                            ui.ajaxSettings.cache = false;
+                            ui.jqXHR.done(function() {
+                                ui.tab.data( "loaded", true );
+                            });
+                            ui.jqXHR.fail(function () {
+                                ui.panel.html(
+                                "Couldn\'t load Data. Plz Reload Page or Try Again Later.");
+                            });
+                        }
+
+                    });';
+        $js .= '});';
+        $js .= '</script>';
+
+        return $result.$js;
+    }
+
+
     /**
      * Generates a form for you <3
      *
@@ -58,9 +113,12 @@ class View extends \HTML
         $type = null;
         if (isset($item) === true) {
             $values = $item->itemProps;
+            $values->tabSelected = get_parameter('tabSelected', 'label');
             $type = $values->type;
         }
 
+        hd($values->tabSelected, true);
+
         $itemClass = VisualConsole::getItemClass($type);
 
         if (!isset($itemClass)) {
@@ -72,18 +130,17 @@ class View extends \HTML
         }
 
         $form = [
-            'action'   => '#',
+            'action' => '#',
-            'id'       => 'modal_form',
+            'method' => 'POST',
-            'onsubmit' => 'return false;',
+            'id'     => 'itemForm-'.$values->tabSelected,
-            'class'    => 'discovery modal',
+            'class'  => 'discovery modal',
-            'extra'    => 'autocomplete="new-password"',
         ];
 
         // Retrieve inputs.
         $inputs = $itemClass::getFormInputs($values);
 
         // Generate Form.
-        return $this->printForm(
+        $form = $this->printForm(
             [
                 'form'   => $form,
                 'inputs' => $inputs,
@@ -91,6 +148,8 @@ class View extends \HTML
             true
         );
 
+        return $form;
+
     }
 
 
@@ -101,7 +160,39 @@ class View extends \HTML
      */
     public function processForm()
     {
-        $item = json_decode($_REQUEST['item'])->itemProps;
+        hd($_POST, true);
+
+        // Inserted data in new item.
+        // $data = json_decode($_REQUEST['item'])->itemProps;
+        $vCId = \get_parameter('vCId', 0);
+
+        $data['type'] = 0;
+        $data['label'] = \get_parameter('label', 'vacio');
+
+        $class = VisualConsole::getItemClass((int) $data['type']);
+        try {
+            // Save the new item.
+            $data['id_layout'] = $vCId;
+            hd($data, true);
+            $result = $class::save($data);
+        } catch (\Throwable $th) {
+            // There is no item in the database.
+            // hd($th, true);
+            echo false;
+            return;
+        }
+
+        /*
+            // Extract data new item inserted.
+            try {
+            $item = VisualConsole::getItemFromDB($result);
+            } catch (Throwable $e) {
+            // Bad params.
+            http_response_code(400);
+            return;
+            }
+        */
+
         return json_encode(['error' => obhd($item)]);
     }
 

pandora_console/include/visual-console-client/vc.main.css

@@ -13,16 +13,16 @@
   display: flex;
   -webkit-box-orient: initial;
   -webkit-box-direction: initial;
-      -ms-flex-direction: initial;
+  -ms-flex-direction: initial;
-          flex-direction: initial;
+  flex-direction: initial;
   justify-items: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
+  -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   -webkit-user-select: text;
-     -moz-user-select: text;
+  -moz-user-select: text;
-      -ms-user-select: text;
+  -ms-user-select: text;
-          user-select: text;
+  user-select: text;
   z-index: 1;
 }
 
@@ -33,12 +33,12 @@
 .visual-console-item.is-editing {
   border: 2px dashed #b2b2b2;
   -webkit-transform: translateX(-2px) translateY(-2px);
-          transform: translateX(-2px) translateY(-2px);
+  transform: translateX(-2px) translateY(-2px);
   cursor: move;
   -webkit-user-select: none;
-     -moz-user-select: none;
+  -moz-user-select: none;
-      -ms-user-select: none;
+  -ms-user-select: none;
-          user-select: none;
+  user-select: none;
 }
 
 .visual-console-item.is-editing.is-selected {
@@ -62,22 +62,22 @@
 @-webkit-keyframes spinner-loading {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(1turn);
-            transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 
 @keyframes spinner-loading {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
     -webkit-transform: rotate(1turn);
-            transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 
@@ -91,13 +91,13 @@
 
   -webkit-animation-name: spinner-loading;
 
-          animation-name: spinner-loading;
+  animation-name: spinner-loading;
   -webkit-animation-duration: 0.8s;
-          animation-duration: 0.8s;
+  animation-duration: 0.8s;
   -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
+  animation-timing-function: linear;
 }
 
 .visual-console-spinner,
@@ -122,8 +122,8 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
-      -ms-flex-align: center;
+  -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   opacity: 0.7;
   background: rgb(212, 215, 218);
 }
@@ -143,13 +143,13 @@
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
+  -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-align: center;
-      -ms-flex-align: center;
+  -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: 12pt;
   font-family: "lato-bolder", "Open Sans", sans-serif;
   font-weight: 600;
@@ -172,7 +172,7 @@
   font-weight: lighter;
   padding: 0px 0px 2px 0px;
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin-right: 10px;
   padding-left: 2px;
 }
@@ -195,10 +195,10 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
+  -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .input-group {
@@ -213,13 +213,13 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
+  -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-align: start;
-      -ms-flex-align: start;
+  -ms-flex-align: start;
-          align-items: start;
+  align-items: start;
 }
 
 .div-ranges-input-group > div {
@@ -234,13 +234,13 @@
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-      -ms-flex-direction: row;
+  -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-align: center;
-      -ms-flex-align: center;
+  -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 .div-input-group h3 {
@@ -262,16 +262,16 @@
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
+  -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   -webkit-box-align: start;
-      -ms-flex-align: start;
+  -ms-flex-align: start;
-          align-items: start;
+  align-items: start;
   -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
+  -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   height: 70px;
 }
 
@@ -335,33 +335,33 @@ p.error-p-validate {
 
 .fa-spin {
   -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
 }
 
 .fa-pulse {
   -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
 }
 
 @-webkit-keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -415,17 +415,17 @@ p.error-p-validate {
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
-      -ms-flex-direction: column;
+  -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   -webkit-box-pack: center;
-      -ms-flex-pack: center;
+  -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   justify-items: center;
   -ms-flex-line-pack: center;
-      align-content: center;
+  align-content: center;
   -webkit-box-align: center;
-      -ms-flex-align: center;
+  -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 .visual-console-item .digital-clock > span {
@@ -455,18 +455,48 @@ p.error-p-validate {
 
 .visual-console-item .analogic-clock .hour-hand {
   -webkit-animation: rotate-hour 43200s infinite linear;
-          animation: rotate-hour 43200s infinite linear;
+  animation: rotate-hour 43200s infinite linear;
 }
 
 .visual-console-item .analogic-clock .minute-hand {
   -webkit-animation: rotate-minute 3600s infinite linear;
-          animation: rotate-minute 3600s infinite linear;
+  animation: rotate-minute 3600s infinite linear;
 }
 
 .visual-console-item .analogic-clock .second-hand {
   -webkit-animation: rotate-second 60s infinite linear;
-          animation: rotate-second 60s infinite linear;
+  animation: rotate-second 60s infinite linear;
 }
 
+#html-tabs .ui-widget-header {
+  background-color: #ffffff;
+  border: 0px;
+}
 
-/*# sourceMappingURL=vc.main.css.map*/
+#html-tabs .ui-tabs-anchor {
+  float: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#html-tabs .ui-tabs-anchor img {
+  margin-right: 10px;
+}
+
+#html-tabs .ui-tabs-nav li {
+  border-radius: 5px 5px 0px 0px;
+}
+
+label span.p-slider {
+  width: 30px;
+}
+
+li#li-size-item > label:not(:first-child),
+li#li-position-item > label:not(:first-child) {
+  width: initial;
+  margin-left: 15px;
+}
+
+/*# sourceMappingURL=vc.main.css.map*/