fixed CV in console mobile metaconsole #8676

This commit is contained in:
Daniel Barbero Martin 2022-03-15 11:39:57 +01:00
parent a3d248912a
commit 9e07afdab2
13 changed files with 489 additions and 115 deletions

View File

@ -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 = [];

View File

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

View File

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

View File

@ -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) {
// Add the datetime when the item was received.
items.map(function(item) {
item["receivedAt"] = receivedAt;
return item;
});
var beforeUpdate = function() {};
if (settings.mobile == undefined || settings.mobile !== true) {
beforeUpdate = function(items, visualConsole, props) {
// Add the datetime when the item was received.
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;
props.height = settings.size.width * ratio_visualconsole;
if (props.height > settings.size.height) {
props.height = settings.size.height;
props.width = settings.size.height / ratio_visualconsole;
}
if (props.height > settings.size.height) {
props.height = settings.size.height;
props.width = settings.size.height / ratio_visualconsole;
}
// Update the data structure.
visualConsole.props = props;
// Update the data structure.
visualConsole.props = props;
// Update the items.
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 (!newProps) return;
if (props.height > settings.size.height) {
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
.getElementById("visual-console-container" + settings.cellId)
.classList.remove("is-updating");
container.classList.remove("is-updating");
var div = document
.getElementById("visual-console-container" + settings.cellId)
.querySelector(".div-visual-console-spinner");
var div = container.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) {

View File

@ -56,13 +56,9 @@ function createVisualConsole(
function(error, data) {
if (error) {
//Remove spinner change VC.
document
.getElementById("visual-console-container")
.classList.remove("is-updating");
container.classList.remove("is-updating");
var div = document
.getElementById("visual-console-container")
.querySelector(".div-visual-console-spinner");
var div = 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);
}

View File

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

View File

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

View File

@ -458,6 +458,312 @@ div.label strong span {
z-index: 999;
}
/*.termframe{
background-color: #82b92e;
}*/
.visual_font_size_4pt,
.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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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
// it is necessary to modify specific classes of each
// 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 id="css_cv_'.$uniq.'" type="text/css">';
$output .= css_label_styles_visual_console($uniq, $ratio_t);
$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 .= (is_metaconsole() === true) ? '../../' : '';
$output .= ui_get_full_url('/', false, false, false);
$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);

View File

@ -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(
"visual-console-container"
);
let path = e.composedPath();
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);