fix bug change variabilized colors #23

ifpen · bengaid · Jul 1, 2023 · Jul 1, 2023 · Jul 1, 2023 · 2a863398a1268e46b252d5e98896efd6cf6711f0
commit 2a863398a1268e46b252d5e98896efd6cf6711f0
diff --git a/front-end/server.py b/front-end/server.py
@@ -87,6 +87,7 @@ def get_files():
  "Success": True,
  "Msg": None,
  "FileList": file_list,
+ "Path": path_dir,
  "Python": None
  })
  except Exception as err:

diff --git a/front-end/source/kernel/dashboard/plugins/annotation-scoring/plugin-annotation-widgets.js b/front-end/source/kernel/dashboard/plugins/annotation-scoring/plugin-annotation-widgets.js
@@ -60,6 +60,7 @@ modelsParameters.annotationLabel = {
  "valueFontFamily": "var(--widget-font-family)",
  "textAlign": "left",
  "displayBorder": false,
+ "borderColor": "var(--widget-border-color)",
  "centerVertically": true
 };
 modelsParameters.annotationImage = {
@@ -255,13 +256,13 @@ function annotationWidgetsPluginClass() {
  ' height: inherit; white-space: pre-wrap' +
  '; color:' + modelsParameters[idInstance].textColor +
  '; text-align: ' + modelsParameters[idInstance].textAlign +
+ '; background-color: ' + modelsParameters[idInstance].backgroundColor +
  '; padding: 4px; resize: inherit; margin: auto; vertical-align: middle ; border-radius: 6px; ' +
  this.fontSize() + this.valueFontFamily() + this.border() + 'display: ' + displayDiv2 + '" readonly>' +
  text + '</textarea>';
 
  widgetHtml.innerHTML = divContent;
- widgetHtml.setAttribute("style", "width: inherit; height: inherit; display: " + displayDiv1 + "; " +
- "justify-content: center; background-color:" + modelsParameters[idInstance].backgroundColor);
+ widgetHtml.setAttribute("style", "width: inherit; height: inherit; display: " + displayDiv1 + "; justify-content: center;");
  $("#" + idDivContainer).html(widgetHtml);
  };
 

diff --git a/front-end/source/kernel/dashboard/plugins/basic/plugin-flat-ui-boolean-widgets.js b/front-end/source/kernel/dashboard/plugins/basic/plugin-flat-ui-boolean-widgets.js
@@ -26,7 +26,8 @@ modelsParameters.flatUiCheckbox = {
  "labelColor": "var(--widget-label-color)",
  "labelFontFamily": "var(--widget-font-family)",
  "checkboxSize": 1,
- "checkboxColor": "var(--widget-input-checked-color)"
+ "checkedColor": "var(--widget-input-checked-color)",
+ "uncheckedColor": "var(--widget-input-unchecked-color)"
 };
 modelsParameters.flatUiSwitch = {
  "label": "labelText",
@@ -74,16 +75,9 @@ function flatUiBooleanWidgetsPluginClass() {
  this.render();
  };
 
- this.backwardCompatibility = function () {
- if (_.isUndefined(modelsParameters[idInstance]["checkboxSize"])) {
- modelsParameters[idInstance]["checkboxSize"] = 1;
- }
- if (_.isUndefined(modelsParameters[idInstance]["checkboxColor"])) {
- modelsParameters[idInstance]["checkboxColor"] = "#447bdc";
- }
- }
 
- this.backwardCompatibility();
+
+
 
  this.render = function () {
  //AEF
@@ -95,6 +89,12 @@ function flatUiBooleanWidgetsPluginClass() {
  if (!_.isNull($(".icons").width())) {
  checkboxWidth = $(".icons").width();
  }
+
+ // backward compatibility
+ if (_.isUndefined(modelsParameters[idInstance].checkboxSize)) {
+ modelsParameters[idInstance].checkboxSize = 1;
+ }
+
  var padding = modelsParameters[idInstance].checkboxSize * checkboxWidth + 12;
  var lineHeight = modelsParameters[idInstance].checkboxSize * checkboxHeight;
  //
@@ -135,27 +135,17 @@ function flatUiBooleanWidgetsPluginClass() {
  $('[data-toggle="checkbox"]').radiocheck();
  $('[data-toggle="radio"]').radiocheck();
 
- //AEF
- if ($(".icons").length >= 1) {
- for (let i = 0; i < $(".icons").length; i++) {
- if ($(".icons")[i].parentNode.id == "label" + idWidget) {
- $(".icons")[i].style.zoom = modelsParameters[idInstance].checkboxSize;
- $(".icons")[i].style.color = modelsParameters[idInstance].checkboxColor;
- //for (let j = 0; j < $(".icons")[i].childNodes.length; j++) {
- // if ($(".icons")[i].childNodes[j].className == "icon-checked") {
- // $(".icons")[i].childNodes[j].style.color = modelsParameters[idInstance].checkboxColor;
- // }
- // }
- }
- }
- }
  //
  if (modelsHiddenParams[idInstance].value == true) {
  $("#checkbox" + idWidget).radiocheck('check');
  } else if (modelsHiddenParams[idInstance].value == false) {
  $("#checkbox" + idWidget).radiocheck('uncheck');
  }
 
+ document.styleSheets[0].addRule('#label' + idWidget + ' .icons *' , 'zoom: ' + modelsParameters[idInstance].checkboxSize);
+ document.styleSheets[0].addRule('#label' + idWidget + ' .icons .icon-checked' , this.checkedColor());
+ document.styleSheets[0].addRule('#label' + idWidget + ' .icons .icon-unchecked' , this.uncheckedColor());
+
  if (this.bIsInteractive) {
  self.enable();
  } else {

diff --git a/front-end/source/kernel/dashboard/plugins/basic/plugin-load-file-widgets.js b/front-end/source/kernel/dashboard/plugins/basic/plugin-load-file-widgets.js
@@ -4,7 +4,7 @@
 // │ Copyright © 2022-2023 IFPEN │ \\
 // | Licensed under the Apache License, Version 2.0 │ \\
 // ├──────────────────────────────────────────────────────────────────────────────┤ \\
-// │ Original authors(s): Ghiles HIDEUR, Tristan BARTEMENT, Guillaume CORBELIN │ \\ │ \\
+// │ Original authors(s): Ghiles HIDEUR, Tristan BARTEMENT, Guillaume CORBELIN │ \\
 // └──────────────────────────────────────────────────────────────────────────────┘ \\
 
 /*******************************************************************/

diff --git a/front-end/source/kernel/dashboard/plugins/gauges/plugin-led-light.js b/front-end/source/kernel/dashboard/plugins/gauges/plugin-led-light.js
@@ -132,17 +132,19 @@ function ledWidgetsPluginClass() {
  this.insertLabel = function (widgetHtml) {
  // conversion to enable HTML tags
  const labelText = this.getTransformedText("label");
- const widgetLabel = document.createElement('span');
- widgetLabel.setAttribute('class', 'led-span');
- widgetLabel.setAttribute('id', 'led-span' + idWidget);
+ const widgetLabel = $('<span>', {
+ class: 'led-span',
+ id: 'led-span' + idWidget,
+ html: labelText
+ });
+ let labelStyle = "height: inherit; " + this.labelFontSize() + this.labelColor() + this.labelFontFamily();
  if (!_.isUndefined(modelsParameters[idInstance].labelWidthProportion)) {
- widgetLabel.setAttribute('style', 'height: inherit; width:' + modelsParameters[idInstance].labelWidthProportion +
- ';' + this.labelFontSize());
+ labelStyle += modelsParameters[idInstance].labelWidthProportion + "; ";
  } else {
- widgetLabel.setAttribute('style', 'height: inherit; width: 20%; ' + this.labelFontSize() + this.labelColor() + this.labelFontFamily());
+ labelStyle += " width: 20%; ";
  }
- widgetLabel.innerHTML = labelText;
- widgetHtml.appendChild(widgetLabel);
+ widgetLabel.attr('style', labelStyle);
+ widgetHtml.append(widgetLabel[0]);
  };
 
  this.rescale = function () {

diff --git a/front-end/source/kernel/dashboard/plugins/geo-time/plugin-flat-ui-address-completion.js b/front-end/source/kernel/dashboard/plugins/geo-time/plugin-flat-ui-address-completion.js
@@ -64,7 +64,7 @@ function flatUiAddressCompletionWidgetsPluginClass() {
  };
 
  this.enable = function () {
- //$("#ac-value" + idWidget).prop("disabled", false);
+ $("#ac-value" + idWidget).prop("disabled", false);
  $("#ac-value" + idWidget).bind('typeahead:selected', function (e, val, name) {
  modelsHiddenParams[idInstance].value = val.word;
  self.value.updateCallback(self.value, val.word);
@@ -86,7 +86,7 @@ function flatUiAddressCompletionWidgetsPluginClass() {
  };
 
  this.disable = function () {
- //$("#ac-value" + idWidget).prop("disabled", true);
+ $("#ac-value" + idWidget).prop("disabled", true);
  };
 
  this.formatHereSuggestTable = function (data) {
@@ -175,39 +175,37 @@ function flatUiAddressCompletionWidgetsPluginClass() {
  };
 
  this.render = function () {
- var valueHeightPx = Math.min($('#' + idDivContainer).height(), $('#' + idDivContainer).width() / 2); // keepRatio
- var widgetHtml = document.createElement('div');
+ let valueHeightPx = Math.min($('#' + idDivContainer).height(), $('#' + idDivContainer).width() / 2); // keepRatio
+ const widgetHtml = document.createElement('div');
  widgetHtml.setAttribute('id', 'ac-value-widget-html' + idWidget);
  widgetHtml.setAttribute('class', 'ac-value-widget-html');
- var divContent = '';
- let widthStyle = "";
+ let divContent = '';
  if (modelsParameters[idInstance].label != "" && modelsParameters[idInstance].displayLabel) {
+ let widthStyle = "";
  valueHeightPx = Math.min($('#' + idDivContainer).height(), $('#' + idDivContainer).width() / 4); // keepRatio
  if (!_.isUndefined(modelsParameters[idInstance].valueWidthProportion)) {
- var proportion = Math.max(0, 100 - parseFloat(modelsParameters[idInstance].valueWidthProportion)) + "%";
- widthStyle = "width: " + proportion + '; ';
+ const proportion = Math.max(0, 100 - parseFloat(modelsParameters[idInstance].valueWidthProportion)) + "%";
+ widthStyle = "width: " + proportion + "; ";
  } else {
  widthStyle = "max-width: 45%; ";
  }
- }
-
- // conversion to enable HTML tags
- const label = this.getTransformedText("label");
 
- divContent = '<span id ="ac-value-span' + idWidget + '" class="ac-value-span" style="' + widthStyle + 
- + this.labelFontSize() + this.labelColor() + this.labelFontFamily() + '">' +
- label + '</span>';
+ // conversion to enable HTML tags
+ const label = this.getTransformedText("label");
+ divContent += '<span id ="ac-value-span' + idWidget + '" class="ac-value-span" style="' + this.labelFontSize() + 
+ this.labelColor() + this.labelFontFamily() + widthStyle + '">' + label + '</span>';
+ }
 
- var border = this.border();
+ const border = this.border();
 
- divContent = divContent + '<div id="ac-value-no-input-group">';
- divContent = divContent + '<input id="ac-value' + idWidget +
+ divContent += '<div id="ac-value-no-input-group">';
+ divContent += '<input id="ac-value' + idWidget +
  '" type="text" placeholder="Type an address" autocomplete="off" spellcheck="false" class="value-input form-control" style="height: ' +
  valueHeightPx + 'px; ' + border +
  '; float: right; ' + this.valueFontSize() + this.valueColor() + this.valueFontFamily() + this.backgroundColor() +
  'text-align: left;">';
- divContent = divContent + '</input>';
- divContent = divContent + '</div>';
+ divContent += '</input>';
+ divContent += '</div>';
 
  widgetHtml.innerHTML = divContent;
 

diff --git a/front-end/source/kernel/dashboard/plugins/widget-base.js b/front-end/source/kernel/dashboard/plugins/widget-base.js
@@ -27,18 +27,25 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  }
 
  // Helper function to set the color value from the modelParameters (for backward compatibility)
- this.setColorValueFromModelParameters = function (value, defaultValue) {
- const paramValue = modelsParameters[idInstance][value];
-
+ this.setColorValueFromModelParameters = function (prop, defaultValue) {
+ let colorValue = defaultValue;
+ if (_.isUndefined(modelsParameters[idInstance][prop])) {
+ modelsParameters[idInstance][prop] = defaultValue;
+ } else {
+ colorValue = modelsParameters[idInstance][prop];
+ }
  // TODO theme backwards compatibility
  // if (!paramValue || paramValue.startsWith("#")) {
  // modelsParameters[idInstance][value] = defaultValue;
  // return defaultValue;
  // }
-
- return paramValue;
+ const colorHex = this.getColorValueFromCSSProperty(colorValue);
+ return colorHex;
  }
 
+ // +--------------------------------------------------------------------¦ \\
+ // | Global functions | \\
+ // +--------------------------------------------------------------------¦ \\
  this.labelFontSize = function () {
  const fs = 'font-size: calc(7px + ' +
  modelsParameters[idInstance].labelFontSize * getFontFactor() +
@@ -53,7 +60,6 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  return fs;
  };
 
-
  this.valueFormat = function (val) {
 
  const decDigits = parseInt(modelsParameters[idInstance].decimalDigits, 10);
@@ -116,7 +122,7 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  let border = 'border: none; ';
  if (modelsParameters[idInstance].displayBorder) {
  const borderColor = this.setColorValueFromModelParameters("borderColor", "var(--widget-border-color)");
- border = ' border: 2px solid ' + borderColor + '; ';
+ border = 'border: 2px solid ' + borderColor + '; ';
  } else {
  border += + '-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);';
  border += '-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);';
@@ -140,10 +146,8 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
 
  this.backgroundColor = function () {
  // Backward compatibility
- if (_.isUndefined(modelsParameters[idInstance].backgroundColor)) {
- modelsParameters[idInstance].backgroundColor = "#ffffff";
- }
- const bc = 'background-color:' + modelsParameters[idInstance].backgroundColor + "; ";
+ const color = this.setColorValueFromModelParameters("backgroundColor", "#ffffff");
+ const bc = 'background-color:' + color + "; ";
  return bc;
  }
 
@@ -297,7 +301,7 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  // +--------------------------------------------------------------------¦ \\
  this.graphColor = function () {
  const color = this.setColorValueFromModelParameters("graphColor", "var(--widget-label-color)");
- return this.getColorValueFromCSSProperty(color);
+ return color;
  };
 
  this.subLabelFontFamily = function () {
@@ -321,6 +325,24 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  return fs;
  };
 
+ // +--------------------------------------------------------------------¦ \\
+ // | Checkbox widget | \\
+ // +--------------------------------------------------------------------¦ \\
+ this.checkedColor = function () {
+ if (!_.isUndefined(modelsParameters[idInstance].checkboxColor)) {
+ delete modelsParameters[idInstance].checkboxColor;
+ }
+ const color = this.setColorValueFromModelParameters("checkedColor", "var(--widget-input-checked-color)");
+ const fc = 'color: ' + color + "; ";
+ return fc;
+ }
+
+ this.uncheckedColor = function () {
+ const color = this.setColorValueFromModelParameters("uncheckedColor", "var(--widget-input-unchecked-color)");
+ const fc = 'color: ' + color + "; ";
+ return fc;
+ }
+
  // +--------------------------------------------------------------------¦ \\
  // | Switch widget | \\
  // +--------------------------------------------------------------------¦ \\
@@ -618,13 +640,13 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  // +--------------------------------------------------------------------¦ \\
  this.thicknessBackgroundColor = function () {
  const color = this.setColorValueFromModelParameters("thicknessBackgroundColor", "var(--widget-segment-color)");
- const bc = ' background-color="' + this.getColorValueFromCSSProperty(color) + '" ';
+ const bc = ' background-color="' + color + '" ';
  return bc;
  };
 
  this.thicknessColor = function () {
  const color = this.setColorValueFromModelParameters("thicknessColor", "var(--widget-range-color)");
- const bc = ' foreground-color="' + this.getColorValueFromCSSProperty(color) + '" ';
+ const bc = ' foreground-color="' + color + '" ';
  return bc;
  };
 
@@ -633,14 +655,12 @@ function baseWidget(idDivContainer, idWidget, idInstance, bInteractive) {
  // +--------------------------------------------------------------------¦ \\
  this.tipBackgroundColor = function () {
  const color = this.setColorValueFromModelParameters("tipBackgroundColor", "var(--widget-button-color)");
- const bc = this.getColorValueFromCSSProperty(color);
- return bc;
+ return color;
  };
 
  this.tipBorderColor = function () {
  const color = this.setColorValueFromModelParameters("tipBorderColor", "var(--widget-button-text)");
- const bc = this.getColorValueFromCSSProperty(color);
- return bc;
+ return color;
  };
 
 }

diff --git a/front-end/source/kernel/datanodes/base/DatanodeModel.js b/front-end/source/kernel/datanodes/base/DatanodeModel.js
@@ -259,7 +259,12 @@ DatanodeModel = function (
  self.settings(object.settings);
  self.name(object.name);
  self.type(object.type);
- const iconName = 'icn-' + datanodePlugins[object.type].icon_type.replace(/\.[^/.]+$/, '');
+ let iconName = 'icn-';
+ if (_.isUndefined(datanodePlugins[object.type])) {
+ iconName += 'json-variable';
+ } else {
+ iconName += datanodePlugins[object.type].icon_type.replace(/\.[^/.]+$/, '');
+ }
  self.iconType(iconName);
  if (self.error())
  //ABK