fixed CV in console mobile metaconsole #8676

pandora_console/godmode/massive/massive_edit_agents.php

@@ -69,8 +69,6 @@ if (is_ajax() === true) {
     if ($groups_secondary_selected === true) {
         $groups = get_parameter('groups', []);
         $groups_selected = get_parameter('groups_selected', []);
-        hd($groups, true);
-        hd($groups_selected, true);
 
         $user_groups = users_get_groups($config['user'], 'AR', false);
         $ret = [];

pandora_console/include/ajax/visual_console.ajax.php

@@ -37,6 +37,7 @@ $ajax = true;
 $render_map = (bool) get_parameter('render_map', false);
 $graph_javascript = (bool) get_parameter('graph_javascript', false);
 $force_remote_check = (bool) get_parameter('force_remote_check', false);
+$load_css_cv = (bool) get_parameter('load_css_cv', false);
 
 if ($render_map) {
     $width = (int) get_parameter('width', '400');
@@ -89,3 +90,12 @@ if ($force_remote_check) {
 
     return;
 }
+
+if ($load_css_cv === true) {
+    $uniq = get_parameter('uniq', 0);
+    $ratio = get_parameter('ratio', 0);
+
+    $output = css_label_styles_visual_console($uniq, $ratio);
+    echo $output;
+    return;
+}

pandora_console/include/functions_visual_map.php

@@ -4538,3 +4538,43 @@ function visual_map_load_client_resources()
         }
     }
 }
+
+
+function css_label_styles_visual_console($uniq, $ratio_t=1)
+{
+    $output = '';
+    // Horrible trick! due to the use of tinyMCE
+    // it is necessary to modify specific classes of each
+    // of the visual consoles.
+    $output .= '.c-'.$uniq.' a {color: #3f3f3f } ';
+    $output .= '.c-'.$uniq.' .label p strong span {display: inline-block !important;} ';
+    $output .= '.c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t)).'pt; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio_t).'pt !important; line-height:'.(4 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio_t).'pt !important; line-height:'.(6 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio_t).'pt !important; line-height:'.(10 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio_t).'pt !important; line-height:'.(12 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio_t).'pt !important; line-height:'.(14 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio_t).'pt !important; line-height:'.(18 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio_t).'pt !important; line-height:'.(24 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio_t).'pt !important; line-height:'.(28 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio_t).'pt !important; line-height:'.(36 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio_t).'pt !important; line-height:'.(48 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio_t).'pt !important; line-height:'.(60 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio_t).'pt !important; line-height:'.(72 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio_t).'pt !important; line-height:'.(84 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio_t).'pt !important; line-height:'.(96 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio_t).'pt !important; line-height:'.(116 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio_t).'pt !important; line-height:'.(128 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio_t).'pt !important; line-height:'.(140 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio_t).'pt !important; line-height:'.(154 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio_t).'pt !important; line-height:'.(196 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
+    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio_t).'px !important; line-height: '.(50 * $ratio_t).'px !important;}';
+    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
+    $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
+    $output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio_t).'px !important; line-height: '.(8 * $ratio_t).'px !important;}';
+    $output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio_t).' !important; height: '.(15 * $ratio_t).' !important;}';
+
+    return $output;
+}

pandora_console/include/javascript/pandora_dashboards.js

@@ -1215,40 +1215,104 @@ function dashboardLoadVC(settings) {
   // Add the datetime when the item was received.
   var receivedAt = new Date();
 
-  var beforeUpdate = function(items, visualConsole, props) {
+  var beforeUpdate = function() {};
-    // Add the datetime when the item was received.
+  if (settings.mobile == undefined || settings.mobile !== true) {
-    items.map(function(item) {
+    beforeUpdate = function(items, visualConsole, props) {
-      item["receivedAt"] = receivedAt;
+      // Add the datetime when the item was received.
-      return item;
+      items.map(function(item) {
-    });
+        item["receivedAt"] = receivedAt;
+        return item;
+      });
 
-    var ratio_visualconsole = props.height / props.width;
+      var ratio_visualconsole = props.height / props.width;
+      props.width = settings.size.width;
+      props.height = settings.size.width * ratio_visualconsole;
 
-    props.width = settings.size.width;
+      if (props.height > settings.size.height) {
-    props.height = settings.size.width * ratio_visualconsole;
+        props.height = settings.size.height;
+        props.width = settings.size.height / ratio_visualconsole;
+      }
 
-    if (props.height > settings.size.height) {
+      // Update the data structure.
-      props.height = settings.size.height;
+      visualConsole.props = props;
-      props.width = settings.size.height / ratio_visualconsole;
-    }
 
-    // Update the data structure.
+      // Update the items.
-    visualConsole.props = props;
+      visualConsole.updateElements(items);
-    // Update the items.
+    };
-    visualConsole.updateElements(items);
+  } else {
-  };
+    beforeUpdate = function(items, visualConsole, props) {
+      var ratio_visualconsole = props.height / props.width;
+      var ratio_t = settings.size.width / props.width;
+      var ratio_h = settings.size.height / props.height;
+      props.width = settings.size.width;
+      props.height = settings.size.width * ratio_visualconsole;
 
-  var handleUpdate = function(prevProps, newProps) {
+      if (props.height > settings.size.height) {
-    if (!newProps) return;
+        ratio_t = ratio_h;
+        props.height = settings.size.height;
+        props.width = settings.size.height / ratio_visualconsole;
+      }
 
+      $.ajax({
+        method: "post",
+        url: "../ajax.php",
+        data: {
+          page: settings.page,
+          load_css_cv: 1,
+          uniq: settings.cellId,
+          ratio: ratio_t
+        },
+        dataType: "html",
+        success: function(css) {
+          $("#css_cv_" + settings.cellId)
+            .empty()
+            .append(css);
+
+          // Add the datetime when the item was received.
+          items.map(function(item) {
+            item["receivedAt"] = receivedAt;
+            return item;
+          });
+
+          // Update the data structure.
+          visualConsole.props = props;
+
+          // Update the items.
+          visualConsole.updateElements(items);
+
+          // Update Url.
+          var regex = /(id=|id_visual_console=|id_layout=|id_visualmap=)\d+(&?)/gi;
+          var replacement = "$1" + props.id + "$2";
+
+          var regex_hash = /(hash=)[^&]+(&?)/gi;
+          var replacement_hash = "$1" + props.hash + "$2";
+
+          // Change the URL (if the browser has support).
+          if ("history" in window) {
+            var href = window.location.href.replace(regex, replacement);
+            href = href.replace(regex_hash, replacement_hash);
+            window.history.replaceState({}, document.title, href);
+
+            $(window).on("orientationchange", function() {
+              window.location.href =
+                settings.baseUrl +
+                "mobile/index.php?page=visualmap&id=" +
+                props.id;
+            });
+          }
+        },
+        error: function(error) {
+          console.error(error);
+        }
+      });
+    };
+  }
+
+  var handleUpdate = function() {
     //Remove spinner change VC.
-    document
+    container.classList.remove("is-updating");
-      .getElementById("visual-console-container" + settings.cellId)
-      .classList.remove("is-updating");
 
-    var div = document
+    var div = container.querySelector(".div-visual-console-spinner");
-      .getElementById("visual-console-container" + settings.cellId)
-      .querySelector(".div-visual-console-spinner");
 
     if (div !== null) {
       var parent = div.parentElement;
@@ -1256,20 +1320,6 @@ function dashboardLoadVC(settings) {
         parent.removeChild(div);
       }
     }
-
-    // Change the links.
-    if (prevProps && prevProps.id !== newProps.id) {
-      var regex = /(id=|id_visual_console=|id_layout=|id_visualmap=)\d+(&?)/gi;
-      var replacement = "$1" + newProps.id + "$2";
-
-      // Tab links.
-      var menuLinks = document.querySelectorAll("div#menu_tab a");
-      if (menuLinks !== null) {
-        menuLinks.forEach(function(menuLink) {
-          menuLink.href = menuLink.href.replace(regex, replacement);
-        });
-      }
-    }
   };
 
   settings.items.map(function(item) {

pandora_console/include/javascript/pandora_visual_console.js

@@ -56,13 +56,9 @@ function createVisualConsole(
           function(error, data) {
             if (error) {
               //Remove spinner change VC.
-              document
+              container.classList.remove("is-updating");
-                .getElementById("visual-console-container")
-                .classList.remove("is-updating");
 
-              var div = document
+              var div = container.querySelector(".div-visual-console-spinner");
-                .getElementById("visual-console-container")
-                .querySelector(".div-visual-console-spinner");
 
               if (div !== null) {
                 var parent = div.parentElement;
@@ -105,6 +101,7 @@ function createVisualConsole(
 
                   // Update the data structure.
                   visualConsole.props = props;
+
                   // Update the items.
                   visualConsole.updateElements(items);
                 }

pandora_console/include/rest-api/index.php

@@ -96,13 +96,13 @@ if ($getVisualConsole === true) {
         $visualConsoleData = $visualConsole->toArray();
         $ratio_visualconsole = ($visualConsoleData['height'] / $visualConsoleData['width']);
         $ratio = ($size['width'] / $visualConsoleData['width']);
-        $radio_h = ($size['height'] / $visualConsoleData['height']);
+        $ratio_h = ($size['height'] / $visualConsoleData['height']);
 
         $visualConsoleData['width'] = $size['width'];
         $visualConsoleData['height'] = ($size['width'] * $ratio_visualconsole);
 
         if ($visualConsoleData['height'] > $size['height']) {
-            $ratio = $radio_h;
+            $ratio = $ratio_h;
 
             $visualConsoleData['height'] = $size['height'];
             $visualConsoleData['width'] = ($size['height'] / $ratio_visualconsole);

pandora_console/include/styles/dashboards.css

@@ -562,12 +562,12 @@ div#main_pure {
 }
 
 /* Mobile trick */
-.ui-mobile-viewport.ui-overlay-c > #main_page > .ui-content {
+#main_page > .ui-content {
   overflow: visible;
   overflow-x: visible;
   margin: 0 !important;
   padding: 0 !important;
 }
-.ui-mobile-viewport.ui-overlay-c > #main_page > .ui-content div.label > p {
+#main_page > .ui-content div.label > p {
   margin: 0;
 }

pandora_console/include/styles/visual_maps.css

@@ -458,6 +458,312 @@ div.label strong span {
   z-index: 999;
 }
 
-/*.termframe{
+.visual_font_size_4pt,
-	background-color: #82b92e;
+.visual_font_size_4pt > em,
-}*/
+.visual_font_size_4pt > strong,
+.visual_font_size_4pt > strong > span,
+.visual_font_size_4pt > span,
+.visual_font_size_4pt > strong > em,
+.visual_font_size_4pt > em > strong,
+.visual_font_size_4pt em span,
+.visual_font_size_4pt span em {
+  font-size: 4pt;
+  line-height: 4pt;
+}
+.visual_font_size_6pt,
+.visual_font_size_6pt > em,
+.visual_font_size_6pt > strong,
+.visual_font_size_6pt > strong > span,
+.visual_font_size_6pt > span,
+.visual_font_size_6pt > strong > em,
+.visual_font_size_6pt > em > strong,
+.visual_font_size_6pt em span,
+.visual_font_size_6pt span em {
+  font-size: 6pt;
+  line-height: 6pt;
+}
+.visual_font_size_8pt,
+.visual_font_size_8pt > em,
+.visual_font_size_8pt > strong,
+.visual_font_size_8pt > strong > span,
+.visual_font_size_8pt > span,
+.visual_font_size_8pt > strong > em,
+.visual_font_size_8pt > em > strong,
+.visual_font_size_8pt em span,
+.visual_font_size_8pt span em {
+  font-size: 8pt;
+  line-height: 8pt;
+}
+.visual_font_size_10pt,
+.visual_font_size_10pt > em,
+.visual_font_size_10pt > strong,
+.visual_font_size_10pt > strong > span,
+.visual_font_size_10pt > span,
+.visual_font_size_10pt > strong > em,
+.visual_font_size_10pt > em > strong,
+.visual_font_size_10pt em span,
+.visual_font_size_10pt span em {
+  font-size: 10pt;
+  line-height: 10pt;
+}
+.visual_font_size_12pt,
+.visual_font_size_12pt > em,
+.visual_font_size_12pt > strong,
+.visual_font_size_12pt > strong > span,
+.visual_font_size_12pt > span,
+.visual_font_size_12pt > strong > em,
+.visual_font_size_12pt > em > strong,
+.visual_font_size_12pt em span,
+.visual_font_size_12pt span em {
+  font-size: 12pt;
+  line-height: 12pt;
+}
+.visual_font_size_14pt,
+.visual_font_size_14pt > em,
+.visual_font_size_14pt > strong,
+.visual_font_size_14pt > strong > span,
+.visual_font_size_14pt > span,
+.visual_font_size_14pt > strong > em,
+.visual_font_size_14pt > em > strong,
+.visual_font_size_14pt em span,
+.visual_font_size_14pt span em {
+  font-size: 14pt;
+  line-height: 14pt;
+}
+.visual_font_size_18pt,
+.visual_font_size_18pt > em,
+.visual_font_size_18pt > strong,
+.visual_font_size_18pt > strong > span,
+.visual_font_size_18pt > span,
+.visual_font_size_18pt > strong > em,
+.visual_font_size_18pt > em > strong,
+.visual_font_size_18pt em span,
+.visual_font_size_18pt span em {
+  font-size: 18pt;
+  line-height: 18pt;
+}
+
+.visual_font_size_24pt,
+.visual_font_size_24pt > em,
+.visual_font_size_24pt > strong,
+.visual_font_size_24pt > strong > span,
+.visual_font_size_24pt > span,
+.visual_font_size_24pt > strong > em,
+.visual_font_size_24pt > em > strong,
+.visual_font_size_24pt em span,
+.visual_font_size_24pt span em {
+  font-size: 24pt;
+  line-height: 24pt;
+}
+.visual_font_size_28pt,
+.visual_font_size_28pt > em,
+.visual_font_size_28pt > strong,
+.visual_font_size_28pt > strong > span,
+.visual_font_size_28pt > span,
+.visual_font_size_28pt > strong > em,
+.visual_font_size_28pt > em > strong,
+.visual_font_size_28pt em span,
+.visual_font_size_28pt span em {
+  font-size: 28pt;
+  line-height: 28pt;
+}
+.visual_font_size_36pt,
+.visual_font_size_36pt > em,
+.visual_font_size_36pt > strong,
+.visual_font_size_36pt > strong > span,
+.visual_font_size_36pt > span,
+.visual_font_size_36pt > strong > em,
+.visual_font_size_36pt > em > strong,
+.visual_font_size_36pt em span,
+.visual_font_size_36pt span em {
+  font-size: 36pt;
+  line-height: 36pt;
+}
+.visual_font_size_48pt,
+.visual_font_size_48pt > em,
+.visual_font_size_48pt > strong,
+.visual_font_size_48pt > strong > span,
+.visual_font_size_48pt > span,
+.visual_font_size_48pt > strong > em,
+.visual_font_size_48pt > em > strong,
+.visual_font_size_48pt em span,
+.visual_font_size_48pt span em {
+  font-size: 48pt;
+  line-height: 48pt;
+}
+.visual_font_size_60pt,
+.visual_font_size_60pt > em,
+.visual_font_size_60pt > strong,
+.visual_font_size_60pt > strong > span,
+.visual_font_size_60pt > span,
+.visual_font_size_60pt > strong > em,
+.visual_font_size_60pt > em > strong,
+.visual_font_size_60pt em span,
+.visual_font_size_60pt span em {
+  font-size: 60pt;
+  line-height: 60pt;
+}
+.visual_font_size_72pt,
+.visual_font_size_72pt > em,
+.visual_font_size_72pt > strong,
+.visual_font_size_72pt > strong > span,
+.visual_font_size_72pt > span,
+.visual_font_size_72pt > strong > em,
+.visual_font_size_72pt > em > strong,
+.visual_font_size_72pt em span,
+.visual_font_size_72pt span em {
+  font-size: 72pt;
+  line-height: 72pt;
+}
+
+.visual_font_size_84pt,
+.visual_font_size_84pt > em,
+.visual_font_size_84pt > strong,
+.visual_font_size_84pt > strong > span,
+.visual_font_size_84pt > span,
+.visual_font_size_84pt > strong > em,
+.visual_font_size_84pt > em > strong,
+.visual_font_size_84pt em span,
+.visual_font_size_84pt span em {
+  font-size: 84pt;
+  line-height: 84pt;
+}
+
+.visual_font_size_96pt,
+.visual_font_size_96pt > em,
+.visual_font_size_96pt > strong,
+.visual_font_size_96pt > strong > span,
+.visual_font_size_96pt > span,
+.visual_font_size_96pt > strong > em,
+.visual_font_size_96pt > em > strong,
+.visual_font_size_96pt em span,
+.visual_font_size_96pt span em {
+  font-size: 96pt;
+  line-height: 96pt;
+}
+
+.visual_font_size_116pt,
+.visual_font_size_116pt > em,
+.visual_font_size_116pt > strong,
+.visual_font_size_116pt > strong > span,
+.visual_font_size_116pt > span,
+.visual_font_size_116pt > strong > em,
+.visual_font_size_116pt > em > strong,
+.visual_font_size_116pt em span,
+.visual_font_size_116pt span em {
+  font-size: 116pt;
+  line-height: 116pt;
+}
+
+.visual_font_size_128pt,
+.visual_font_size_128pt > em,
+.visual_font_size_128pt > strong,
+.visual_font_size_128pt > strong > span,
+.visual_font_size_128pt > span,
+.visual_font_size_128pt > strong > em,
+.visual_font_size_128pt > em > strong,
+.visual_font_size_128pt em span,
+.visual_font_size_128pt span em {
+  font-size: 128pt;
+  line-height: 128pt;
+}
+
+.visual_font_size_140pt,
+.visual_font_size_140pt > em,
+.visual_font_size_140pt > strong,
+.visual_font_size_140pt > strong > span,
+.visual_font_size_140pt > span,
+.visual_font_size_140pt > strong > em,
+.visual_font_size_140pt > em > strong,
+.visual_font_size_140pt em span,
+.visual_font_size_140pt span em {
+  font-size: 140pt;
+  line-height: 140pt;
+}
+
+.visual_font_size_154pt,
+.visual_font_size_154pt > em,
+.visual_font_size_154pt > strong,
+.visual_font_size_154pt > strong > span,
+.visual_font_size_154pt > span,
+.visual_font_size_154pt > strong > em,
+.visual_font_size_154pt > em > strong,
+.visual_font_size_154pt em span,
+.visual_font_size_154pt span em {
+  font-size: 154pt;
+  line-height: 154pt;
+}
+
+.visual_font_size_196pt,
+.visual_font_size_196pt > em,
+.visual_font_size_196pt > strong,
+.visual_font_size_196pt > strong > span,
+.visual_font_size_196pt > span,
+.visual_font_size_196pt > strong > em,
+.visual_font_size_196pt > em > strong,
+.visual_font_size_196pt em span,
+.visual_font_size_196pt span em {
+  font-size: 196pt;
+  line-height: 196pt;
+}
+
+.resize_visual_font_size_8pt,
+.resize_visual_font_size_8pt > em,
+.resize_visual_font_size_8pt > strong,
+.resize_visual_font_size_8pt > strong > span,
+.resize_visual_font_size_8pt > span,
+.resize_visual_font_size_8pt > strong > em,
+.resize_visual_font_size_8pt > em > strong,
+.visual_font_size_8pt em span,
+.visual_font_size_8pt span em {
+  font-size: 4pt;
+  line-height: 4pt;
+}
+.resize_visual_font_size_14pt,
+.resize_visual_font_size_14pt > em,
+.resize_visual_font_size_14pt > strong,
+.resize_visual_font_size_14pt > strong > span,
+.resize_visual_font_size_14pt > span,
+.resize_visual_font_size_14pt > strong > em,
+.resize_visual_font_size_14pt > em > strong,
+.visual_font_size_14pt em span,
+.visual_font_size_14pt span em {
+  font-size: 7pt;
+  line-height: 7pt;
+}
+.resize_visual_font_size_24pt,
+.resize_visual_font_size_24pt > em,
+.resize_visual_font_size_24pt > strong,
+.resize_visual_font_size_24pt > strong > span,
+.resize_visual_font_size_24pt > span,
+.resize_visual_font_size_24pt > strong > em,
+.resize_visual_font_size_24pt > em > strong,
+.visual_font_size_14pt em span,
+.visual_font_size_14pt span em {
+  font-size: 12pt;
+  line-height: 12pt;
+}
+.resize_visual_font_size_36pt,
+.resize_visual_font_size_36pt > em,
+.resize_visual_font_size_36pt > strong,
+.resize_visual_font_size_36pt > strong > span,
+.resize_visual_font_size_36pt > span,
+.resize_visual_font_size_36pt > strong > em,
+.resize_visual_font_size_36pt > em > strong,
+.visual_font_size_36pt em span,
+.visual_font_size_36pt span em {
+  font-size: 18pt;
+  line-height: 18pt;
+}
+.resize_visual_font_size_72pt,
+.resize_visual_font_size_72pt > em,
+.resize_visual_font_size_72pt > strong,
+.resize_visual_font_size_72pt > strong > span,
+.resize_visual_font_size_72pt > span,
+.resize_visual_font_size_72pt > strong > em,
+.resize_visual_font_size_72pt > em > strong,
+.visual_font_size_72pt em span,
+.visual_font_size_72pt span em {
+  font-size: 36pt;
+  line-height: 36pt;
+}

pandora_console/mobile/include/style/main.css

@@ -1102,7 +1102,7 @@ li.ui-btn {
   }
 
   .ui-header .ui-title {
-    font-size: 18px !important;
+    font-size: 14px;
     min-height: 1.1em;
     text-align: center;
     display: block;
@@ -1114,10 +1114,6 @@ li.ui-btn {
     outline: 0 !important;
   }
 
-  * {
-    font-size: 18px !important;
-  }
-
   .event_name {
     font-size: 15px !important;
   }
@@ -1444,7 +1440,7 @@ div.nodata_container {
 }
 
 .ui-page-active {
-  padding-top: 2.8em !important;
+  padding-top: 3.2em !important;
 }
 
 .ui-header-fixed {

pandora_console/mobile/operation/visualmap.php

@@ -126,13 +126,6 @@ class Visualmap
         $this->id = (int) $system->getRequest('id', 0);
         $this->width = (int) $system->getRequest('width', 0);
         $this->height = (int) $system->getRequest('height', 0);
-
-        if ($this->width < $this->height) {
-            $w = $this->width;
-            $this->width = $this->height;
-            $this->height = $w;
-            $this->rotate = true;
-        }
     }
 
 
@@ -151,9 +144,13 @@ class Visualmap
             // Reload forcing user to send width and height.
             $ui = Ui::getInstance();
             $ui->retrieveViewPort();
+            $this->show_visualmap();
+            return;
         }
 
-        $this->height -= 30;
+        // Padding.
+        $this->height -= 40;
+        $this->width -= 0;
 
         $this->visualmap = db_get_row(
             'tlayout',
@@ -310,13 +307,13 @@ class Visualmap
         $visualConsoleData = $visualConsole->toArray();
         $ratio_visualconsole = ($visualConsoleData['height'] / $visualConsoleData['width']);
         $ratio_t = ($size['width'] / $visualConsoleData['width']);
-        $radio_h = ($size['height'] / $visualConsoleData['height']);
+        $ratio_h = ($size['height'] / $visualConsoleData['height']);
 
         $visualConsoleData['width'] = $size['width'];
         $visualConsoleData['height'] = ($size['width'] * $ratio_visualconsole);
 
         if ($visualConsoleData['height'] > $size['height']) {
-            $ratio_t = $radio_h;
+            $ratio_t = $ratio_h;
 
             $visualConsoleData['height'] = $size['height'];
             $visualConsoleData['width'] = ($size['height'] / $ratio_visualconsole);
@@ -366,37 +363,8 @@ class Visualmap
             $ratio_t
         );
 
-        // Horrible trick! due to the use of tinyMCE
+        $output .= '<style id="css_cv_'.$uniq.'" type="text/css">';
-        // it is necessary to modify specific classes of each
+        $output .= css_label_styles_visual_console($uniq, $ratio_t);
-        // of the visual consoles.
-        $output .= '<style type="text/css">';
-        $output .= '.c-'.$uniq.', .c-'.$uniq.' *:not(.parent_graph p table tr td span) { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t) * 1.5).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_4pt, .c-'.$uniq.' .visual_font_size_4pt * { font-size: '.(4 * $ratio_t).'pt; line-height:'.(4 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_6pt, .c-'.$uniq.' .visual_font_size_6pt * { font-size: '.(6 * $ratio_t).'pt; line-height:'.(6 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_8pt, .c-'.$uniq.' .visual_font_size_8pt * { font-size: '.(8 * $ratio_t).'pt; line-height:'.(8 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_10pt, .c-'.$uniq.' .visual_font_size_10pt * { font-size: '.(10 * $ratio_t).'pt; line-height:'.(10 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_12pt, .c-'.$uniq.' .visual_font_size_12pt * { font-size: '.(12 * $ratio_t).'pt; line-height:'.(12 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_14pt, .c-'.$uniq.' .visual_font_size_14pt * { font-size: '.(14 * $ratio_t).'pt; line-height:'.(14 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_18pt, .c-'.$uniq.' .visual_font_size_18pt * { font-size: '.(18 * $ratio_t).'pt; line-height:'.(18 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_24pt, .c-'.$uniq.' .visual_font_size_24pt * { font-size: '.(24 * $ratio_t).'pt; line-height:'.(24 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_28pt, .c-'.$uniq.' .visual_font_size_28pt * { font-size: '.(28 * $ratio_t).'pt; line-height:'.(28 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_36pt, .c-'.$uniq.' .visual_font_size_36pt * { font-size: '.(36 * $ratio_t).'pt; line-height:'.(36 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_48pt, .c-'.$uniq.' .visual_font_size_48pt * { font-size: '.(48 * $ratio_t).'pt; line-height:'.(48 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_60pt, .c-'.$uniq.' .visual_font_size_60pt * { font-size: '.(60 * $ratio_t).'pt; line-height:'.(60 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_72pt, .c-'.$uniq.' .visual_font_size_72pt * { font-size: '.(72 * $ratio_t).'pt; line-height:'.(72 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_84pt, .c-'.$uniq.' .visual_font_size_84pt * { font-size: '.(84 * $ratio_t).'pt; line-height:'.(84 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_96pt, .c-'.$uniq.' .visual_font_size_96pt * { font-size: '.(96 * $ratio_t).'pt; line-height:'.(96 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_116pt, .c-'.$uniq.' .visual_font_size_116pt * { font-size: '.(116 * $ratio_t).'pt; line-height:'.(116 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_128pt, .c-'.$uniq.' .visual_font_size_128pt * { font-size: '.(128 * $ratio_t).'pt; line-height:'.(128 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_140pt, .c-'.$uniq.' .visual_font_size_140pt * { font-size: '.(140 * $ratio_t).'pt; line-height:'.(140 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_154pt, .c-'.$uniq.' .visual_font_size_154pt * { font-size: '.(154 * $ratio_t).'pt; line-height:'.(154 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .visual_font_size_196pt, .c-'.$uniq.' .visual_font_size_196pt * { font-size: '.(196 * $ratio_t).'pt; line-height:'.(196 * ($ratio_t)).'pt; }';
-        $output .= '.c-'.$uniq.' .flot-text, .c-'.$uniq.' .flot-text * { font-size: '.(8 * $ratio_t).'pt !important; line-height:'.(8 * ($ratio_t)).'pt !important; }';
-        $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.time {font-size: '.(50 * $ratio_t).'px !important; line-height: '.(50 * $ratio_t).'px !important;}';
-        $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.date {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
-        $output .= '.c-'.$uniq.' .visual-console-item .digital-clock span.timezone {font-size: '.(25 * $ratio_t).'px !important; line-height: '.(25 * $ratio_t).'px !important;}';
-        $output .= '.c-'.$uniq.' .visual-console-item .donut-graph * {font-size: '.(8 * $ratio_t).'px !important; line-height: '.(8 * $ratio_t).'px !important;}';
-        $output .= '.c-'.$uniq.' .visual-console-item .donut-graph g rect {width:'.(25 * $ratio_t).' !important; height: '.(15 * $ratio_t).' !important;}';
         $output .= '</style>';
 
         $visualConsoleItems = array_reduce(
@@ -413,9 +381,11 @@ class Visualmap
                 'props'   => $visualConsoleData,
                 'items'   => $visualConsoleItems,
                 'baseUrl' => ui_get_full_url('/', false, false, false),
+                'page'    => 'include/ajax/visual_console.ajax',
                 'ratio'   => $ratio_t,
                 'size'    => $size,
                 'cellId'  => $uniq,
+                'mobile'  => true,
             ]
         );
 
@@ -429,8 +399,7 @@ class Visualmap
 
         $output .= '$( window ).on( "orientationchange", function( event )';
         $output .= ' { window.location.href = "';
-        $output .= ui_get_full_url('/');
+        $output .= ui_get_full_url('/', false, false, false);
-        $output .= (is_metaconsole() === true) ? '../../' : '';
         $output .= 'mobile/index.php?page=visualmap&id='.$visualConsoleId;
         $output .= '" });';
 
@@ -438,12 +407,6 @@ class Visualmap
 
         $ui->contentAddHtml($output);
 
-        // Load Visual Console Items.
-        $visualConsoleItems = VisualConsole::getItemsFromDB(
-            $visualConsoleId,
-            $aclUserGroups
-        );
-
         $javascript = ob_get_clean();
         $ui->contentAddHtml($javascript);
 

visual_console_client/src/Item.ts

@@ -558,9 +558,23 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
           const divSpinner = document.createElement("div");
           divSpinner.className = "visual-console-spinner";
           divParent.appendChild(divSpinner);
-          const containerVC = document.getElementById(
+          let path = e.composedPath();
-            "visual-console-container"
+          let containerId = "visual-console-container";
-          );
+          for (let index = 0; index < path.length; index++) {
+            const element = path[index] as HTMLInputElement;
+            if (
+              element.id != undefined &&
+              element.id != null &&
+              element.id != ""
+            ) {
+              if (element.id.includes(containerId) === true) {
+                containerId = element.id;
+                break;
+              }
+            }
+          }
+
+          const containerVC = document.getElementById(containerId);
           if (containerVC != null) {
             containerVC.classList.add("is-updating");
             containerVC.appendChild(divParent);