tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-04-08 18:55:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

fixed errors VC

Browse Source
This commit is contained in:
Daniel Barbero Martin 2020-01-28 16:42:51 +01:00
parent 73dcabc48d
commit 3f5e418d98
5 changed files with 39 additions and 15 deletions
pandora_console
include/visual-console-client
vc.main.min.jsvc.main.min.js.map
operation/visual_console
view.php
visual_console_client/src
Item.ts
items
Percentile.ts

2
pandora_console/include/visual-console-client/vc.main.min.js vendored

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map

File diff suppressed because one or more lines are too long

16
pandora_console/operation/visual_console/view.php

@ -400,6 +400,22 @@ ui_require_css_file('form');
var handleUpdate = function (prevProps, newProps) {
if (!newProps) return;
//Remove spinner change VC.
document
.getElementById("visual-console-container")
.classList.remove("is-updating");
var div = document
.getElementById("visual-console-container")
.querySelector(".div-visual-console-spinner");
if (div !== null) {
var parent = div.parentElement;
if (parent !== null) {
parent.removeChild(div);
}
}
// Change the background color when the fullscreen mode is enabled.
if (prevProps
&& prevProps.backgroundColor != newProps.backgroundColor

1
visual_console_client/src/Item.ts

@ -523,6 +523,7 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
divParent.appendChild(divSpinner);
const containerVC = document.getElementById("visual-console-container");
if (containerVC != null) {
containerVC.classList.add("is-updating");
containerVC.appendChild(divParent);
}
}

33
visual_console_client/src/items/Percentile.ts

@ -112,8 +112,6 @@ export default class Percentile extends Item<PercentileProps> {
const progress = this.getProgress();
// Main element.
const element = document.createElement("div");
// SVG container.
const svg = document.createElementNS(svgNS, "svg");
var formatValue;
if (this.props.value != null) {
@ -124,30 +122,36 @@ export default class Percentile extends Item<PercentileProps> {
}
}
// SVG container.
const svg = document.createElementNS(svgNS, "svg");
switch (this.props.percentileType) {
case "progress-bar":
{
const backgroundRect = document.createElementNS(svgNS, "rect");
backgroundRect.setAttribute("fill", colors.background);
backgroundRect.setAttribute("fill-opacity", "0.5");
backgroundRect.setAttribute("width", "100");
backgroundRect.setAttribute("height", "20");
backgroundRect.setAttribute("width", "100%");
backgroundRect.setAttribute("height", "100%");
backgroundRect.setAttribute("rx", "5");
backgroundRect.setAttribute("ry", "5");
const progressRect = document.createElementNS(svgNS, "rect");
progressRect.setAttribute("fill", colors.progress);
progressRect.setAttribute("fill-opacity", "1");
progressRect.setAttribute("width", `${progress}`);
progressRect.setAttribute("height", "20");
progressRect.setAttribute("width", `${progress}%`);
progressRect.setAttribute("height", "100%");
progressRect.setAttribute("rx", "5");
progressRect.setAttribute("ry", "5");
const text = document.createElementNS(svgNS, "text");
text.setAttribute("text-anchor", "middle");
text.setAttribute("alignment-baseline", "middle");
text.setAttribute("font-size", "12");
text.setAttribute("font-size", "15");
text.setAttribute("font-family", "arial");
text.setAttribute("font-weight", "bold");
text.setAttribute("transform", "translate(50 11)");
text.setAttribute(
"transform",
`translate(${this.props.width / 2}, 17.5)`
);
text.setAttribute("fill", colors.text);
if (this.props.valueType === "value") {
@ -160,8 +164,8 @@ export default class Percentile extends Item<PercentileProps> {
text.textContent = `${progress}%`;
}
// Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
svg.setAttribute("viewBox", "0 0 100 20");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
svg.append(backgroundRect, progressRect, text);
}
break;
@ -257,7 +261,7 @@ export default class Percentile extends Item<PercentileProps> {
break;
}
element.append(svg);
if (svg !== null) element.append(svg);
return element;
}
@ -279,7 +283,7 @@ export default class Percentile extends Item<PercentileProps> {
*/
protected resizeElement(width: number, height: number): void {
if (this.props.percentileType === "progress-bar") {
super.resizeElement(width, width / 4);
super.resizeElement(width, 35);
} else {
super.resizeElement(width, width);
}
@ -291,7 +295,10 @@ export default class Percentile extends Item<PercentileProps> {
*/
public resize(width: number): void {
this.resizeElement(width, width);
const height = this.props.maxValue || 0;
let height = this.props.maxValue || 0;
if (this.props.percentileType === "progress-bar") {
height = 35;
}
super.setProps({
...this.props, // Object spread: http://es6-features.org/#SpreadOperator
width,