', {
'class': 'col-sm-10 col-sm-offset-2'
}).appendTo(jQuery('
', {
'class': 'form-group'
}).appendTo(body)));
this.wid_text = jQuery('
', {
'type': 'text',
'class': 'form-control input-sm',
'placeholder': Sao.i18n.gettext('Search'),
'name': attributes.name,
}).appendTo(group);
if (!attributes.completion || attributes.completion == '1') {
this.wid_completion = Sao.common.get_completion(
group,
this._update_completion.bind(this),
this._completion_match_selected.bind(this));
this.wid_text.completion = this.wid_completion;
}
this.but_add = jQuery('
', {
'class': 'btn btn-default btn-sm',
'type': 'button',
'aria-label': Sao.i18n.gettext("Add"),
'title': Sao.i18n.gettext("Add"),
}).append(Sao.common.ICONFACTORY.get_icon_img('tryton-add')
).appendTo(jQuery('
', {
'class': 'input-group-btn'
}).appendTo(group));
this.but_add.click(this.add.bind(this));
this._readonly = false;
this._record_id = null;
this._popup = false;
},
_required_el: function() {
return this.wid_text;
},
_invalid_el: function() {
return this.wid_text;
},
add: function() {
var context = this.field.get_context(this.record);
var value = this.wid_text.val();
var domain = this.field.get_domain(this.record);
if (this._popup) {
return;
} else {
this._popup = true;
}
const callback = result => {
if (!jQuery.isEmptyObject(result)) {
var ids = result.map(function(e) {
return e[0];
});
this.add_new_keys(ids);
}
this.wid_text.val('');
this._popup = false;
};
var parser = new Sao.common.DomainParser();
new Sao.Window.Search(this.schema_model,
callback, {
sel_multi: true,
context: context,
domain: domain,
new_: false,
search_filter: parser.quote(value),
title: this.attributes.string
});
},
add_new_keys: function(ids) {
var field = this.field;
field.add_new_keys(ids, this.record)
.then(new_names => {
this.send_modified();
var value = this.field.get_client(this.record);
for (const key of new_names) {
value[key] = null;
}
this.field.set_client(this.record, value);
this._display().then(() => {
this.fields[new_names[0]].input.focus();
});
});
},
remove: function(key, modified=true) {
delete this.fields[key];
this.rows[key].remove();
delete this.rows[key];
if (modified) {
this.send_modified();
this.set_value(this.record, this.field);
}
},
set_value: function() {
this.field.set_client(this.record, this.get_value());
},
get_value: function() {
var value = {};
for (var key in this.fields) {
var widget = this.fields[key];
value[key] = widget.get_value();
}
return value;
},
get modified() {
if (this.record && this.field) {
var value = this.field.get_client(this.record);
for (var key in this.fields) {
var widget = this.fields[key];
if (widget.modified(value)) {
return true;
}
}
}
return false;
},
set_readonly: function(readonly) {
Sao.View.Form.Dict._super.set_readonly.call(this, readonly);
this._set_button_sensitive();
for (var key in this.fields) {
var widget = this.fields[key];
widget.set_readonly(readonly);
}
this.wid_text.prop('disabled', readonly);
},
_set_button_sensitive: function() {
var create = this.attributes.create;
if (create === undefined) {
create = 1;
} else if (typeof create == 'string') {
create = Boolean(parseInt(create, 10));
}
var delete_ = this.attributes['delete'];
if (delete_ === undefined) {
delete_ = 1;
} else if (typeof delete_ == 'string') {
delete_ = Boolean(parseInt(delete_, 10));
}
this.but_add.prop('disabled', this._readonly || !create);
for (var key in this.fields) {
var button = this.fields[key].button;
button.prop('disabled', this._readonly || !delete_);
}
},
add_line: function(key, position) {
var field, row;
var key_schema = this.field.keys[key];
this.fields[key] = field = new (
this.get_entries(key_schema.type))(key, this);
this.rows[key] = row = jQuery('
', {
'class': 'form-group'
});
var text = key_schema.string + Sao.i18n.gettext(':');
var label = jQuery('
', {
'text': text
}).appendTo(jQuery('
', {
'class': 'dict-label col-sm-2 control-label'
}).appendTo(row));
field.el.addClass('col-sm-10').appendTo(row);
label.uniqueId();
field.labelled.uniqueId();
field.labelled.attr('aria-labelledby', label.attr('id'));
label.attr('for', field.labelled.attr('id'));
field.button.click(() => {
this.remove(key, true);
});
var previous = null;
if (position > 0) {
previous = this.container.children().eq(position - 1);
}
if (previous) {
previous.after(row);
} else {
this.container.prepend(row);
}
},
display: function() {
this._display();
},
_display: function() {
Sao.View.Form.Dict._super.display.call(this);
var record = this.record;
var field = this.field;
if (!field) {
return;
}
var record_id = record ? record.id : null;
var key;
if (record_id != this._record_id) {
for (key in this.fields) {
this.remove(key, false);
}
this._record_id = record_id;
}
var value = field.get_client(record);
var new_key_names = Object.keys(value).filter(
e => !this.fields[e]);
var prm;
if (!jQuery.isEmptyObject(new_key_names)) {
prm = field.add_keys(new_key_names, record);
} else {
prm = jQuery.when();
}
prm.then(() => {
var i, len, key;
var keys = Object.keys(value)
.filter(function(key) {
return field.keys[key];
})
.sort(function(key1, key2) {
var seq1 = field.keys[key1].sequence;
var seq2 = field.keys[key2].sequence;
if (seq1 < seq2) {
return -1;
} else if (seq1 > seq2) {
return 1;
} else {
return 0;
}
});
// We remove first the old keys in order to keep the order
// inserting the new ones
var removed_key_names = Object.keys(this.fields).filter(
function(e) {
return !(e in value);
});
for (i = 0, len = removed_key_names.length; i < len; i++) {
key = removed_key_names[i];
this.remove(key, false);
}
var decoder = new Sao.PYSON.Decoder();
var inversion = new Sao.common.DomainInversion();
for (i = 0, len = keys.length; i < len; i++) {
key = keys[i];
var val = value[key];
if (!this.fields[key]) {
this.add_line(key, i);
}
var widget = this.fields[key];
widget.set_value(val);
widget.set_readonly(this._readonly);
var key_domain = (decoder.decode(field.keys[key].domain ||
'null'));
if (key_domain !== null) {
if (!inversion.eval_domain(key_domain, value)) {
widget.el.addClass('has-error');
} else {
widget.el.removeClass('has-error');
}
}
}
});
this._set_button_sensitive();
return prm;
},
_update_completion: function(text) {
if (this.wid_text.prop('disabled')) {
return jQuery.when();
}
if (!this.record) {
return jQuery.when();
}
return Sao.common.update_completion(
this.wid_text, this.record, this.field, this.schema_model);
},
_completion_match_selected: function(value) {
this.add_new_keys([value.id]);
this.wid_text.val('');
},
get_entries: function(type) {
switch (type) {
case 'char':
return Sao.View.Form.Dict.Entry;
case 'boolean':
return Sao.View.Form.Dict.Boolean;
case 'selection':
return Sao.View.Form.Dict.Selection;
case 'multiselection':
return Sao.View.Form.Dict.MultiSelection;
case 'integer':
return Sao.View.Form.Dict.Integer;
case 'float':
return Sao.View.Form.Dict.Float;
case 'numeric':
return Sao.View.Form.Dict.Numeric;
case 'date':
return Sao.View.Form.Dict.Date;
case 'datetime':
return Sao.View.Form.Dict.DateTime;
}
}
});
Sao.View.Form.Dict.Entry = Sao.class_(Object, {
init: function(name, parent_widget) {
this.name = name;
this.definition = parent_widget.field.keys[name];
this.parent_widget = parent_widget;
this.create_widget();
if (this.definition.help) {
this.el.attr('title', this.definition.help);
}
},
create_widget: function() {
this.el = jQuery('
', {
'class': this.class_
});
var group = jQuery('
', {
'class': 'input-group input-group-sm'
}).appendTo(this.el);
this.input = this.labelled = jQuery('
', {
'type': 'text',
'class': 'form-control input-sm mousetrap',
'name': this.name,
}).appendTo(group);
this.button = jQuery('
', {
'class': 'btn btn-default',
'type': 'button',
'arial-label': Sao.i18n.gettext("Remove"),
'title': Sao.i18n.gettext("Remove"),
}).append(Sao.common.ICONFACTORY.get_icon_img('tryton-remove')
).appendTo(jQuery('
', {
'class': 'input-group-btn'
}).appendTo(group));
this.el.on('keydown',
this.parent_widget.send_modified.bind(this.parent_widget));
this.el.change(
this.parent_widget.focus_out.bind(this.parent_widget));
},
modified: function(value) {
return (JSON.stringify(this.get_value()) !=
JSON.stringify(value[this.name]));
},
get_value: function() {
return this.input.val();
},
set_value: function(value) {
this.input.val(value || '');
},
set_readonly: function(readonly) {
this._readonly = readonly;
this.input.prop('readonly', readonly);
}
});
Sao.View.Form.Dict.Char = Sao.class_(Sao.View.Form.Dict.Entry, {
class_: 'dict-char',
modified: function(value) {
return (JSON.stringify(this.get_value()) !=
JSON.stringify(value[this.name] || ""));
}
});
Sao.View.Form.Dict.Boolean = Sao.class_(Sao.View.Form.Dict.Entry, {
class_: 'dict-boolean',
create_widget: function() {
Sao.View.Form.Dict.Boolean._super.create_widget.call(this);
this.input.attr('type', 'checkbox');
this.input.change(
this.parent_widget.focus_out.bind(this.parent_widget));
},
get_value: function() {
return this.input.prop('checked');
},
set_readonly: function(readonly) {
this._readonly = readonly;
this.input.prop('disabled', readonly);
},
set_value: function(value) {
this.input.prop('checked', value);
}
});
Sao.View.Form.Dict.SelectionEntry = Sao.class_(Sao.View.Form.Dict.Entry, {
create_widget: function() {
Sao.View.Form.Dict.SelectionEntry._super.create_widget.call(this);
var select = jQuery('
', {
'class': 'form-control input-sm mousetrap',
'name': this.name,
});
select.change(
this.parent_widget.focus_out.bind(this.parent_widget));
this.input.replaceWith(select);
this.input = this.labelled = select;
var selection = jQuery.extend([], this.definition.selection);
if (this.definition.sort === undefined || this.definition.sort) {
selection.sort(function(a, b) {
return a[1].localeCompare(b[1]);
});
}
for (const e of selection) {
select.append(jQuery('
', {
'value': JSON.stringify(e[0]),
'text': e[1],
'title': this.definition.help_selection[e[0]],
}));
}
},
set_readonly: function(readonly) {
this._readonly = readonly;
this.input.prop('disabled', readonly);
}
});
Sao.View.Form.Dict.Selection = Sao.class_(
Sao.View.Form.Dict.SelectionEntry, {
class_: 'dict-selection',
create_widget: function() {
Sao.View.Form.Dict.Selection._super.create_widget.call(this);
this.input.prepend(jQuery('
', {
'value': JSON.stringify(null),
'text': '',
}));
},
get_value: function() {
return JSON.parse(this.input.val());
},
set_value: function(value) {
this.input.val(JSON.stringify(value));
var title = this.definition.help_selection[value] || null;
if (this.definition.help && title) {
title = this.definition.help + '\n' + title;
}
this.input.attr('title', title);
},
});
Sao.View.Form.Dict.MultiSelection = Sao.class_(
Sao.View.Form.Dict.SelectionEntry, {
class_: 'dict-multiselection',
create_widget: function() {
Sao.View.Form.Dict.MultiSelection._super
.create_widget.call(this);
this.input.prop('multiple', true);
var widget_help = this.definition.help;
if (widget_help) {
this.input.children().each(function() {
var option = jQuery(this);
var help = option.attr('title');
if (help) {
help = widget_help + '\n' + help;
option.attr('title', help);
}
});
}
},
get_value: function() {
var value = this.input.val();
return value.map(function(e) { return JSON.parse(e); });
},
set_value: function(value) {
if (value) {
value = value.map(function(e) { return JSON.stringify(e); });
}
this.input.val(value);
}
});
Sao.View.Form.Dict.Integer = Sao.class_(Sao.View.Form.Dict.Entry, {
class_: 'dict-integer',
create_widget: function() {
Sao.View.Form.Dict.Integer._super.create_widget.call(this);
this.input_text = this.labelled = integer_input(this.input);
},
get_value: function() {
var value = parseInt(this.input.val(), 10);
if (isNaN(value)) {
return null;
}
return value;
},
set_value: function(value, options) {
if (value !== null) {
this.input.val(value);
this.input_text.val(value.toLocaleString(
Sao.i18n.BC47(Sao.i18n.getlang()), options));
} else {
this.input.val('');
this.input_text.val('');
}
},
set_readonly: function(readonly) {
Sao.View.Form.Dict.Integer._super.set_readonly.call(this, readonly);
this.input_text.prop('readonly', readonly);
},
});
Sao.View.Form.Dict.Float = Sao.class_(Sao.View.Form.Dict.Integer, {
class_: 'dict-float',
get digits() {
var record = this.parent_widget.record;
if (record) {
var digits = record.expr_eval(this.definition.digits);
if (!digits || !digits.every(function(e) {
return e !== null;
})) {
return null;
}
return digits;
} else {
return null;
}
},
get_value: function() {
var value = this.input.val();
if (!value && (value !== 0)) {
return null;
}
value = Number(value);
if (isNaN(value)) {
return null;
}
return value;
},
set_value: function(value) {
var step = 'any',
options = {};
var digits = this.digits;
if (digits) {
step = Math.pow(10, -digits[1]).toFixed(digits[1]);
options.minimumFractionDigits = digits[1];
options.maximumFractionDigits = digits[1];
}
this.input.attr('step', step);
Sao.View.Form.Dict.Float._super.set_value.call(this, value, options);
},
});
Sao.View.Form.Dict.Numeric = Sao.class_(Sao.View.Form.Dict.Float, {
class_: 'dict-numeric',
get_value: function() {
var value = this.input.val();
if (!value && (value !== 0)) {
return null;
}
value = new Sao.Decimal(value);
if (isNaN(value.valueOf())) {
return null;
}
return value;
}
});
Sao.View.Form.Dict.Date = Sao.class_(Sao.View.Form.Dict.Entry, {
class_: 'dict-date',
format: '%x',
_input: 'date',
_input_format: '%Y-%m-%d',
_format: Sao.common.format_date,
_parse: Sao.common.parse_date,
create_widget: function() {
Sao.View.Form.Dict.Date._super.create_widget.call(this);
var group = this.input.parent().find('.input-group-btn');
this.input_date = jQuery('
', {
'type': this._input,
'role': 'button',
'tabindex': -1,
});
this.input_date.click(() => {
var value = this.get_value();
value = this._format(this._input_format, value);
this.input_date.val(value);
});
this.input_date.change(() => {
var value = this.input_date.val();
if (value) {
value = this._parse(this._input_format, value);
value = this._format(this.format, value);
this.input.val(value).change();
this.input.focus();
}
});
if (this.input_date[0].type == this._input) {
var icon = jQuery('
', {
'class': 'btn btn-default',
'aria-label': Sao.i18n.gettext("Open the calendar"),
'title': Sao.i18n.gettext("Open the calendar"),
}).prependTo(group);
this.input_date.appendTo(icon);
Sao.common.ICONFACTORY.get_icon_img('tryton-date')
.appendTo(icon);
}
var mousetrap = new Mousetrap(this.el[0]);
mousetrap.bind('enter', (e, combo) => {
var value = this._parse(this.format, this.input.val());
value = this._format(this.format, value);
this.input.val(value).change();
});
mousetrap.bind('=', (e, combo) => {
e.preventDefault();
this.input.val(this._format(this.format, moment())).change();
});
Sao.common.DATE_OPERATORS.forEach(operator => {
mousetrap.bind(operator[0], (e, combo) => {
e.preventDefault();
var date = this.get_value() || Sao.DateTime();
date.add(operator[1]);
this.input.val(this._format(this.format, date)).change();
});
});
},
get_value: function() {
return this._parse(this.format, this.input.val());
},
set_value: function(value) {
this.input.val(this._format(this.format, value));
},
});
Sao.View.Form.Dict.DateTime = Sao.class_(Sao.View.Form.Dict.Date, {
class_: 'dict-datetime',
format: '%x %X',
_input: 'datetime-local',
_input_format: '%Y-%m-%dT%H:%M:%S',
_format: Sao.common.format_datetime,
_parse: Sao.common.parse_datetime,
});
Sao.View.Form.PYSON = Sao.class_(Sao.View.Form.Char, {
class_: 'form-pyson',
init: function(view, attributes) {
Sao.View.Form.PYSON._super.init.call(this, view, attributes);
this.encoder = new Sao.PYSON.Encoder({});
this.decoder = new Sao.PYSON.Decoder({}, true);
this.el.keyup(this.validate_pyson.bind(this));
this.icon = jQuery('
![]()
', {
'class': 'icon form-control-feedback',
}).appendTo(this.group);
this.group.addClass('has-feedback');
},
display: function() {
Sao.View.Form.PYSON._super.display.call(this);
this.validate_pyson();
},
get_encoded_value: function() {
var value = this.input.val();
if (!value) {
return value;
}
try {
return this.encoder.encode(eval_pyson(value));
}
catch (err) {
return null;
}
},
set_value: function() {
// avoid modification because different encoding
var value = this.get_encoded_value();
var record = this.record;
var field = this.field;
var previous = field.get_client(record);
if (value && previous && Sao.common.compare(
value, this.encoder.encode(this.decoder.decode(previous)))) {
value = previous;
}
field.set_client(record, value);
},
get_client_value: function() {
var value = Sao.View.Form.PYSON._super.get_client_value.call(this);
if (value) {
value = Sao.PYSON.toString(this.decoder.decode(value));
}
return value;
},
validate_pyson: function() {
var icon = 'ok';
if (this.get_encoded_value() === null) {
icon = 'error';
}
Sao.common.ICONFACTORY.get_icon_url('tryton-' + icon)
.then(url => {
this.icon.attr('src', url);
});
},
focus_out: function() {
this.validate_pyson();
Sao.View.Form.PYSON._super.focus_out.call(this);
}
});
let botuiInstance = null;
let previousValue = null;
Sao.View.Form.HTMLViewer = Sao.class_(Sao.View.Form.Widget, {
class_: 'form-htmlviewer',
expand: true,
init: function(view, attributes) {
Sao.View.Form.HTMLViewer._super.init.call(this, view, attributes);
this._collapsed = false;
this._collapse_button = null;
this._collapse_item = null;
this._collapse_target = null;
this._expanded_min_height = null;
this._expanded_child_min_height = null;
this.el = jQuery('
', {
'class': this.class_ + ' panel panel-default',
});
this.container = jQuery('
', {
'class': 'panel-body htmlviewer-content',
}).appendTo(this.el);
if (window.MutationObserver) {
this._theme_observer = new MutationObserver(mutations => {
var changed = mutations.some(mutation =>
mutation.attributeName == 'data-theme-mode');
if (!changed) {
return;
}
this._sync_theme_classes();
if (!document.documentElement.contains(this.el[0])) {
this._theme_observer.disconnect();
this._theme_observer = null;
return;
}
this.container.find('iframe[data-htmlviewer-dashboard="1"]')
.each(function() {
Sao.applyHTMLViewerThemeToIFrame(this);
});
if (!String(this._last_value || '').startsWith('d3:')) {
return;
}
window.requestAnimationFrame(() => this.display());
});
this._theme_observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme-mode'],
});
}
},
_ensure_collapse_control: function() {
var resolve_context = () => {
var target = this.el;
var button_parent = this.el;
var in_panel_heading = false;
var panel = this.el.closest('fieldset.form-panel');
if (panel.length) {
var legend = panel.children('legend').first();
var items = panel.find('> .form-container > .form-item');
if (legend.length) {
button_parent = legend;
in_panel_heading = true;
var other_items = items.filter(function() {
return !jQuery(this).hasClass('form-empty') &&
!jQuery(this).find(
'.form-htmlviewer, .form-purchase-summary')
.length;
});
if (!other_items.length) {
target = panel;
}
}
}
return {
target: target,
button_parent: button_parent,
in_panel_heading: in_panel_heading,
};
};
var context = resolve_context();
if (this._collapse_button) {
if (context.button_parent.length &&
this._collapse_button.parent()[0] !=
context.button_parent[0]) {
this._collapse_button.appendTo(context.button_parent);
}
this._collapse_target = context.target;
this._collapse_item = context.target.closest('.form-item');
this._collapse_button.toggleClass(
'htmlviewer-collapse-toggle-heading',
context.in_panel_heading);
this.el.toggleClass(
'htmlviewer-self-collapsible',
!context.in_panel_heading);
this._sync_collapse_state();
return;
}
this._collapse_target = context.target;
this._collapse_item = context.target.closest('.form-item');
this._collapse_button = jQuery('
', {
'type': 'button',
'class': 'htmlviewer-collapse-toggle',
'aria-label': Sao.i18n.gettext('Hide viewer'),
'title': Sao.i18n.gettext('Hide viewer'),
}).appendTo(context.button_parent);
this._collapse_button.on('click', evt => {
evt.preventDefault();
evt.stopPropagation();
this._collapsed = !this._collapsed;
this._sync_collapse_state();
});
if (context.in_panel_heading) {
this._collapse_button.addClass(
'htmlviewer-collapse-toggle-heading');
} else {
this.el.addClass('htmlviewer-self-collapsible');
}
this._sync_collapse_state();
},
_sync_collapse_state: function() {
if (!this._collapse_button || !this._collapse_target) {
return;
}
this._collapse_target.toggleClass(
'htmlviewer-collapsed', this._collapsed);
if (this._collapse_item) {
this._collapse_item.toggleClass(
'htmlviewer-collapsed-item', this._collapsed);
}
if (this._collapsed) {
this._expanded_min_height = this.el[0].style.minHeight;
this._expanded_child_min_height = this.container[0].style.minHeight;
this.el[0].style.setProperty('min-height', '0', 'important');
this.container[0].style.setProperty('min-height', '0', 'important');
} else {
this.el[0].style.removeProperty('min-height');
this.container[0].style.removeProperty('min-height');
if (this._expanded_min_height) {
this.el[0].style.minHeight = this._expanded_min_height;
}
if (this._expanded_child_min_height) {
this.container[0].style.minHeight =
this._expanded_child_min_height;
}
}
if (this._collapse_item) {
var form_container = this._collapse_item.parent('.form-container');
var container = form_container.data('sao-form-container');
if (container) {
container.set_grid_template();
}
}
this._collapse_button
.toggleClass('htmlviewer-collapse-toggle-collapsed',
this._collapsed)
.attr('aria-expanded', this._collapsed ? 'false' : 'true')
.attr('aria-label', Sao.i18n.gettext(
this._collapsed ? 'Show viewer' : 'Hide viewer'))
.attr('title', Sao.i18n.gettext(
this._collapsed ? 'Show viewer' : 'Hide viewer'));
},
_sync_theme_classes: function() {
var theme_mode = document.documentElement.getAttribute(
'data-theme-mode') || '';
var is_dark = theme_mode == 'dark';
this.container
.toggleClass('htmlviewer-theme-dark', is_dark)
.toggleClass('htmlviewer-theme-light', !is_dark);
this.el
.toggleClass('htmlviewer-theme-dark', is_dark)
.toggleClass('htmlviewer-theme-light', !is_dark);
},
display: function() {
Sao.View.Form.HTMLViewer._super.display.call(this);
window.setTimeout(() => this._ensure_collapse_control());
window.setTimeout(() => this._ensure_collapse_control(), 50);
var value = '';
var record = this.record;
if (record) {
value = record.field_get_client(this.field_name);
}
this._sync_theme_classes();
var theme_mode = document.documentElement.getAttribute(
'data-theme-mode') || '';
var render_key = String(value || '').startsWith('d3:') ?
value + '|theme:' + theme_mode : value;
// Si la valeur n'a pas changé, ne rien faire
if (this._last_render_key === render_key) {
return;
}
this._last_value = value;
this._last_render_key = render_key;
this.container.empty();
// if (!value) {
// return;
// }
let height = 300
let width = 400
if (this.attributes.height) {
height = parseInt(this.attributes.height);
}
if (this.attributes.width) {
width = parseInt(this.attributes.width);
}
Sao.renderHTMLViewerContent(this.container, value, height, width, this.record);
},
focus: function() {
// No input element to focus
return false;
},
get_value: function() {
// Read-only, no value
return null;
},
set_value: function() {
// No-op — viewer only
},
set_readonly: function(readonly) {
// Viewer is always read-only — nothing to do
},
get modified() {
return false;
},
});
Sao.View.Form.PurchaseSummary = Sao.class_(Sao.View.Form.HTMLViewer, {
class_: 'form-purchase-summary',
_summary_config: function(value) {
if (!value) {
return {};
}
if (typeof value == 'object') {
return value;
}
var text = String(value || '');
if (text.startsWith('purchase_summary:')) {
text = text.slice(17);
}
try {
return JSON.parse(text || '{}');
} catch (error) {
return {};
}
},
_approval_info: function(config) {
config = config || {};
var approval = config.approval || {};
var approval_raw = approval.status || config.approval_status || '';
var approval_key = String(approval_raw || 'need_approval')
.toLowerCase()
.replace(/[^a-z0-9]+/g, '_')
.replace(/^_+|_+$/g, '');
var approval_labels = {
need_approval: 'Need approval',
first_approval: 'First Approval',
final_approval: 'Final approval',
};
if (!approval_labels[approval_key]) {
approval_key = 'need_approval';
}
return {
key: approval_key,
label: approval.label || approval_labels[approval_key],
};
},
_update_summary_legend: function(config) {
var panel = this.el.closest('fieldset.form-panel');
var legend = panel.children('legend').first();
if (!legend.length) {
return;
}
legend.addClass('purchase-summary-legend');
legend.find('.purchase-summary-title-strip').remove();
legend.children('span').not('.purchase-summary-title-strip')
.first().text('Summary');
var escape = function(raw) {
return jQuery('
').text(raw === undefined || raw === null ?
'' : String(raw)).html();
};
var activity = (config.activity || config.activities || []).slice(0, 3);
var info = this._approval_info(config);
var activity_html = activity.map(function(item) {
var text = item.text || item.label || item.field || '';
var old_value = item.old_value !== undefined ? item.old_value :
item.old !== undefined ? item.old :
item.previous !== undefined ? item.previous : '';
var new_value = item.new_value !== undefined ? item.new_value :
item.new !== undefined ? item.new :
item.current !== undefined ? item.current : '';
if (old_value !== '' || new_value !== '') {
text = [text, [old_value, new_value].filter(function(part) {
return part !== '';
}).join(' => ')].filter(Boolean).join(' ');
}
text = [text, item.user, item.date || item.time]
.filter(Boolean).join(' - ');
return '
' + escape(text) + '';
}).join('');
var strip = jQuery(
'
' +
'' +
activity_html + '' +
'' + escape(info.label) + '' +
'');
if (this._collapse_button && this._collapse_button.parent()[0] ==
legend[0]) {
strip.insertBefore(this._collapse_button);
} else {
legend.append(strip);
}
},
display: function() {
Sao.View.Form.Widget.prototype.display.call(this);
window.setTimeout(() => this._ensure_collapse_control());
window.setTimeout(() => this._ensure_collapse_control(), 50);
var value = '';
var record = this.record;
if (record) {
value = record.field_get_client(this.field_name);
}
this._sync_theme_classes();
var render_key = 'purchase_summary|' + String(value || '');
if (this._last_render_key === render_key) {
return;
}
this._last_value = value;
this._last_render_key = render_key;
var height = parseInt(this.attributes.height || 168, 10);
var width = parseInt(this.attributes.width || 1200, 10);
this.el[0].style.setProperty('min-height', '0', 'important');
this.container[0].style.setProperty('min-height', '0', 'important');
if (value && !String(value).startsWith('purchase_summary:')) {
value = 'purchase_summary:' + String(value);
}
Sao.renderHTMLViewerContent(
this.container, value, height, width, this.record);
this._update_summary_legend(this._summary_config(value));
},
});
Sao.View.VisGraph = Sao.class_(Sao.View, {
editable: false,
view_type: 'graph',
xml_parser: Sao.View.GraphXMLViewParser,
init: function(view_id, screen, xml, children_field) {
this.el = jQuery('
', {
'class': 'graph'
});
this.container = this.el;
Sao.View.VisGraph._super.init.call(this, view_id, screen, xml);
},
display: function() {
const loads = [];
for (const record of this.screen.group) {
loads.push(record.load('vis_data'));
}
jQuery.when.apply(jQuery, loads).done(() => {
for (const record of this.screen.group) {
const visData = record.field_get_client('vis_data');
try {
let height = 300
let width = 400
if (this.attributes.height) {
height = parseInt(this.attributes.height);
}
if (this.attributes.width) {
width = parseInt(this.attributes.width);
}
Sao.renderHTMLViewerContent(this.container, visData,height,width, record);
} catch (e) {
console.warn('Erreur de parsing JSON pour vis_data', e);
}
}
});
},
reload: function() {
this.display();
},
get deletable() {
return false;
},
set_value: function() {
// No-op — viewer only
},
});
window.addEventListener("message", function (event) {
if (event.data?.type === "open_tab") {
const { model, res_id, view_mode, domain, context } = event.data.payload || {};
Sao.Tab.create({
model: model,
res_id: res_id,
mode: view_mode,
domain: domain,
target: "new",
context: context
});
}
if (event.data?.type === "exec_window"){
const { model, res_id, view_mode, domain, context } = event.data.payload || {};
var action = {
type: 'ir.action.act_window',
res_model: model,
pyson_domain: domain,
pyson_context: JSON.stringify(context),
pyson_order: 'null',
pyson_search_value: '[]',
views: [],
domains: []
};
Sao.Action.exec_action(action, { ids: [] }, {});
}
});
// window.addEventListener("message", function (event) {
// // ⚠️ Sécurité : vérifier l'origine
// // if (event.origin !== "https://ton-react.example.com") return;
// if (event.data?.type === "open_tab") {
// const { model, res_id, view_mode, domain } = event.data.payload || {};
// Sao.Tab.create({
// model: model,
// res_id: res_id,
// mode: [view_mode],
// domain: domain,
// target: "new",
// });
// }
// });
Sao.traceHTMLViewerTheme = function(stage, payload) {
if (!window.console) {
return;
}
var storage_theme = null;
try {
storage_theme = window.localStorage &&
localStorage.getItem('sao_theme_mode');
} catch (error) {
storage_theme = 'unavailable:' + (error && error.name || 'error');
}
try {
console.info('[HTMLVIEWER][THEME_DEBUG]', JSON.stringify(
jQuery.extend({
stage: stage,
href: window.location.href,
parentTheme: document.documentElement.getAttribute(
'data-theme-mode') || null,
storageTheme: storage_theme,
}, payload || {})));
} catch (error) {
console.info('[HTMLVIEWER][THEME_DEBUG]', stage, payload);
}
};
Sao.htmlViewerThemeMode = function() {
return document.documentElement.getAttribute('data-theme-mode') || 'light';
};
Sao.isHTMLViewerDashboardURL = function(value) {
return /\/dashboard\/index\.html(?:[?#]|$)/i.test(String(value || ''));
};
Sao.shouldRewriteHTMLViewerDashboardOrigin = function(url) {
if (!url || url.origin == window.location.origin) {
return false;
}
var current_host = window.location.hostname || '';
var dashboard_host = url.hostname || '';
return /(^|\.)open-squared\.tech$/i.test(current_host) &&
/(^|\.)open-squared\.tech$/i.test(dashboard_host);
};
Sao.withHTMLViewerThemeParam = function(value) {
var is_dashboard = Sao.isHTMLViewerDashboardURL(value);
if (!is_dashboard) {
Sao.traceHTMLViewerTheme('with-param-skip', {
value: value,
reason: 'not-dashboard-url',
});
return value;
}
try {
var url = new URL(value, window.location.href);
var input_origin = url.origin;
if (Sao.shouldRewriteHTMLViewerDashboardOrigin(url)) {
url.protocol = window.location.protocol;
url.host = window.location.host;
Sao.traceHTMLViewerTheme('origin-rewrite', {
input: value,
fromOrigin: input_origin,
toOrigin: url.origin,
currentOrigin: window.location.origin,
});
}
var mode = Sao.htmlViewerThemeMode();
url.searchParams.set('theme', mode);
url.searchParams.set('theme_mode', mode);
Sao.traceHTMLViewerTheme('with-param', {
input: value,
output: url.toString(),
mode: mode,
urlOrigin: url.origin,
urlPathname: url.pathname,
sameOrigin: url.origin == window.location.origin,
themeParam: url.searchParams.get('theme'),
themeModeParam: url.searchParams.get('theme_mode'),
});
return url.toString();
} catch (e) {
var separator = value.indexOf('?') == -1 ? '?' : '&';
var mode = encodeURIComponent(Sao.htmlViewerThemeMode());
var output = value + separator + 'theme=' + mode +
'&theme_mode=' + mode;
Sao.traceHTMLViewerTheme('with-param-fallback', {
input: value,
output: output,
mode: mode,
error: e && (e.name + ': ' + e.message),
});
return output;
}
};
Sao.applyHTMLViewerThemeToIFrame = function(iframe) {
var mode = Sao.htmlViewerThemeMode();
var dashboard = iframe.getAttribute('data-htmlviewer-dashboard') == '1';
Sao.traceHTMLViewerTheme('apply-start', {
dashboard: dashboard,
mode: mode,
src: iframe.getAttribute('src') || '',
originalSrc: iframe.getAttribute('data-original-src') || '',
});
if (!dashboard) {
return;
}
var next_src = Sao.withHTMLViewerThemeParam(
iframe.getAttribute('data-original-src') || iframe.getAttribute('src') || '');
if (next_src && iframe.getAttribute('src') != next_src) {
Sao.traceHTMLViewerTheme('apply-src-update', {
previousSrc: iframe.getAttribute('src') || '',
nextSrc: next_src,
});
iframe.setAttribute('src', next_src);
}
try {
var doc = iframe.contentDocument || iframe.contentWindow.document;
if (!doc || !doc.documentElement) {
Sao.traceHTMLViewerTheme('apply-no-document', {
src: iframe.getAttribute('src') || '',
});
return;
}
var existing_style = doc.getElementById(
'tradon-htmlviewer-theme-bridge');
Sao.traceHTMLViewerTheme('apply-document-access', {
src: iframe.getAttribute('src') || '',
readyState: doc.readyState,
docUrl: doc.location && doc.location.href || null,
docThemeBefore: doc.documentElement.getAttribute(
'data-theme-mode') || null,
bodyThemeBefore: doc.body &&
doc.body.getAttribute('data-theme-mode') || null,
hasHead: Boolean(doc.head),
hasBody: Boolean(doc.body),
bridgeBefore: Boolean(existing_style),
});
doc.documentElement.setAttribute('data-theme-mode', mode);
doc.body && doc.body.setAttribute('data-theme-mode', mode);
var style = doc.getElementById('tradon-htmlviewer-theme-bridge');
if (!style) {
style = doc.createElement('style');
style.id = 'tradon-htmlviewer-theme-bridge';
doc.head.appendChild(style);
}
var dashboard_logo_url = new URL(
'dist/tradon_wbg.png', window.location.href).toString();
var compact_dashboard_css = `
:root {
--tradon-dashboard-card-radius: 6px;
font-size: 14px !important;
}
body {
font-size: 0.9rem !important;
}
#root > [class*="min-h-screen"],
#app > [class*="min-h-screen"],
body > [class*="min-h-screen"] {
padding: 0.75rem !important;
}
[class*="container"], [class*="max-w-"] {
padding-left: 0.6rem !important;
padding-right: 0.6rem !important;
}
[class*="grid"][class*="gap-6"],
[class*="grid"][class*="gap-5"],
[class*="grid"][class*="gap-4"] {
gap: 0.7rem !important;
}
[class*="gap-6"], [class*="gap-5"], [class*="gap-4"] {
gap: 0.7rem !important;
}
[class*="gap-3"], [class*="gap-2"] {
gap: 0.4rem !important;
}
[class*="p-8"], [class*="p-7"], [class*="p-6"] {
padding: 0.75rem !important;
}
[class*="p-5"], [class*="p-4"] {
padding: 0.65rem !important;
}
[class*="px-6"], [class*="px-5"], [class*="px-4"] {
padding-left: 0.7rem !important;
padding-right: 0.7rem !important;
}
[class*="py-6"], [class*="py-5"], [class*="py-4"] {
padding-top: 0.55rem !important;
padding-bottom: 0.55rem !important;
}
[class*="mb-8"], [class*="mb-7"], [class*="mb-6"] {
margin-bottom: 0.75rem !important;
}
[class*="mt-8"], [class*="mt-7"], [class*="mt-6"] {
margin-top: 0.75rem !important;
}
[class*="space-y-6"] > :not([hidden]) ~ :not([hidden]),
[class*="space-y-5"] > :not([hidden]) ~ :not([hidden]),
[class*="space-y-4"] > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.7rem !important;
}
[class*="bg-white"], [class*="card"], [class*="Card"],
section, article {
border-radius: var(--tradon-dashboard-card-radius) !important;
min-height: 0 !important;
}
[class*="rounded-2xl"], [class*="rounded-xl"], [class*="rounded-lg"] {
border-radius: var(--tradon-dashboard-card-radius) !important;
}
[class*="shadow-lg"], [class*="shadow-xl"], [class*="shadow-md"] {
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12) !important;
}
[class*="text-6xl"], [class*="text-5xl"] {
font-size: 1.75rem !important;
line-height: 2rem !important;
}
[class*="text-4xl"] {
font-size: 1.55rem !important;
line-height: 1.85rem !important;
}
[class*="text-3xl"] {
font-size: 1.3rem !important;
line-height: 1.6rem !important;
}
[class*="text-2xl"] {
font-size: 1.1rem !important;
line-height: 1.35rem !important;
}
[class*="text-xl"] {
font-size: 1rem !important;
line-height: 1.25rem !important;
}
[class*="text-lg"] {
font-size: 0.95rem !important;
line-height: 1.2rem !important;
}
[class*="w-12"][class*="h-12"],
[class*="w-10"][class*="h-10"],
[class*="w-8"][class*="h-8"] {
width: 1.35rem !important;
height: 1.35rem !important;
}
[class*="w-6"][class*="h-6"],
[class*="w-5"][class*="h-5"] {
width: 1rem !important;
height: 1rem !important;
}
svg {
max-width: 1.35rem !important;
max-height: 1.35rem !important;
}
[class*="h-3"], [class*="h-4"] {
min-height: 0 !important;
}
canvas, [class*="chart"], [class*="Chart"], [class*="recharts"] {
max-height: 150px !important;
}
`;
var dark_dashboard_css = `
:root { color-scheme: dark; }
html {
font-size: 14px !important;
}
body {
font-size: 0.9rem !important;
}
#root > [class*="min-h-screen"],
#app > [class*="min-h-screen"],
body > [class*="min-h-screen"] {
padding: 0.75rem !important;
}
[class*="grid"][class*="gap-4"] {
gap: 0.7rem !important;
}
[class*="p-6"] {
padding: 0.75rem !important;
}
[class*="p-4"] {
padding: 0.65rem !important;
}
[class*="mb-6"] {
margin-bottom: 0.75rem !important;
}
[class*="gap-2"] {
gap: 0.4rem !important;
}
[class*="text-4xl"] {
font-size: 1.55rem !important;
line-height: 1.85rem !important;
}
html, body, #root, #app, [id*="root"], [class*="app"] {
background: #000000 !important;
color: #eaf7f4 !important;
}
body {
scrollbar-color: #31534e #000000;
}
body > div, #root, #app,
#root > div, #app > div,
#root > div > div, #app > div > div,
main,
[class*="min-h-screen"], [class*="dashboard"], [class*="Dashboard"] {
background-color: #000000 !important;
}
[class*="bg-gray-50"], [class*="bg-slate-50"],
[class*="bg-neutral-50"], [class*="bg-zinc-50"],
[class*="bg-gray-100"], [class*="bg-slate-100"],
[class*="bg-neutral-100"], [class*="bg-zinc-100"] {
background: #000000 !important;
}
[class*="bg-white"], [class*="card"],
[class*="Card"], section, article {
background: linear-gradient(180deg, #142326 0%, #101d20 100%) !important;
border-color: rgba(118, 173, 165, 0.22) !important;
color: #eaf7f4 !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
[class*="text-gray"], [class*="text-slate"], [class*="text-neutral"],
[class*="text-zinc"] {
color: #c3d4cf !important;
}
[class*="text-gray-400"], [class*="text-gray-500"],
[class*="text-slate-400"], [class*="text-slate-500"],
[class*="text-neutral-400"], [class*="text-neutral-500"] {
color: #a9c1bb !important;
}
h1, h2, h3, h4, h5, h6,
[class*="font-semibold"], [class*="font-bold"] {
color: #f4fbf8 !important;
}
svg, svg * {
color: #a9e3dd !important;
stroke: currentColor !important;
}
svg {
opacity: 0.94 !important;
}
[class*="bg-gray-200"], [class*="bg-slate-200"],
[class*="bg-neutral-200"], [class*="bg-zinc-200"] {
background: #1b2c2e !important;
}
[class*="bg-green"], [class*="bg-emerald"], [class*="bg-teal"],
[class*="bg-cyan"] {
background: #11625d !important;
color: #a2fff7 !important;
}
[class*="text-green"], [class*="text-emerald"], [class*="text-teal"] {
color: #5ee6dc !important;
}
[class*="bg-blue"], [class*="bg-sky"], [class*="bg-indigo"] {
background: #0f5e83 !important;
color: #9be0ff !important;
}
[class*="bg-red"], [class*="bg-rose"], [class*="bg-pink"] {
background: #4a2228 !important;
color: #ff9ba6 !important;
}
[class*="bg-yellow"], [class*="bg-amber"], [class*="bg-orange"] {
background: #4a3818 !important;
color: #ffd071 !important;
}
[class*="rounded-full"], [class*="badge"], [class*="Badge"] {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
font-weight: 700 !important;
}
[class*="bg-green"][class*="rounded"],
[class*="bg-emerald"][class*="rounded"],
[class*="bg-teal"][class*="rounded"],
[class*="bg-cyan"][class*="rounded"],
[class*="bg-blue"][class*="rounded"],
[class*="bg-sky"][class*="rounded"],
[class*="bg-indigo"][class*="rounded"] {
box-shadow: inset 0 0 0 1px rgba(126, 228, 220, 0.20) !important;
}
[class*="bg-green"][class*="rounded-lg"],
[class*="bg-green"][class*="rounded-xl"],
[class*="bg-emerald"][class*="rounded-lg"],
[class*="bg-emerald"][class*="rounded-xl"],
[class*="bg-teal"][class*="rounded-lg"],
[class*="bg-teal"][class*="rounded-xl"],
[class*="bg-cyan"][class*="rounded-lg"],
[class*="bg-cyan"][class*="rounded-xl"] {
background: rgba(20, 88, 82, 0.18) !important;
border: 1px solid rgba(46, 196, 182, 0.52) !important;
color: #dffdfa !important;
box-shadow: inset 0 0 0 1px rgba(126, 228, 220, 0.08) !important;
}
[class*="bg-blue"][class*="rounded-lg"],
[class*="bg-blue"][class*="rounded-xl"],
[class*="bg-sky"][class*="rounded-lg"],
[class*="bg-sky"][class*="rounded-xl"],
[class*="bg-indigo"][class*="rounded-lg"],
[class*="bg-indigo"][class*="rounded-xl"] {
background: rgba(35, 82, 118, 0.18) !important;
border: 1px solid rgba(82, 153, 214, 0.50) !important;
color: #e6f5ff !important;
box-shadow: inset 0 0 0 1px rgba(155, 224, 255, 0.08) !important;
}
[class*="flex"][class*="items-center"][class*="justify-between"],
[class*="flex"][class*="justify-between"][class*="items-center"] {
background: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
[class*="w-3"][class*="h-3"], [class*="w-4"][class*="h-4"] {
box-shadow: none !important;
}
button, a[role="button"], [role="button"] {
color: #edf8f5 !important;
border-color: rgba(118, 173, 165, 0.20) !important;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover, button:focus,
a[role="button"]:hover, a[role="button"]:focus,
[role="button"]:hover, [role="button"]:focus {
background: #1b3436 !important;
border-color: rgba(126, 228, 220, 0.34) !important;
color: #ffffff !important;
}
canvas, [class*="chart"], [class*="Chart"], [class*="recharts"] {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[class*="chart"] svg, [class*="Chart"] svg,
[class*="recharts"] svg {
background: transparent !important;
overflow: visible !important;
}
[class*="chart"] svg text,
[class*="Chart"] svg text,
[class*="chart"] svg line,
[class*="Chart"] svg line,
[class*="chart"] svg rect,
[class*="Chart"] svg rect {
opacity: 0 !important;
}
[class*="recharts-cartesian-axis"],
[class*="recharts-cartesian-grid"],
[class*="recharts-tooltip-cursor"],
[class*="axis"], [class*="Axis"],
[class*="tick"], [class*="Tick"] {
opacity: 0 !important;
}
[class*="recharts-line-curve"],
[class*="recharts-area-curve"],
[class*="chart"] svg path,
[class*="Chart"] svg path,
[class*="chart"] svg polyline,
[class*="Chart"] svg polyline {
stroke: #15d6a4 !important;
stroke-width: 3 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
filter: drop-shadow(0 0 7px rgba(21, 214, 164, 0.34)) !important;
}
[class*="chart"] svg path[fill="none"],
[class*="Chart"] svg path[fill="none"],
[class*="chart"] svg polyline,
[class*="Chart"] svg polyline {
fill: none !important;
}
[class*="chart"] svg polygon,
[class*="Chart"] svg polygon,
[class*="chart"] svg path:not([fill="none"]),
[class*="Chart"] svg path:not([fill="none"]) {
fill: rgba(21, 214, 164, 0.13) !important;
stroke: transparent !important;
}
[class*="recharts-area-area"] {
fill: rgba(21, 214, 164, 0.14) !important;
}
svg [stroke="#000"], svg [stroke="black"],
svg [stroke="#111"], svg [stroke="#222"] {
stroke: #7ed6cf !important;
}
[class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"] {
background: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
img[src*="logo"], img[src*="Logo"], img[src*="tradon"], img[src*="Tradon"] {
content: url("${dashboard_logo_url}") !important;
object-fit: contain !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[class*="logo"], [class*="Logo"] {
background-image: url("${dashboard_logo_url}") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[class*="splash"], [class*="Splash"],
[class*="loading"], [class*="Loading"],
[class*="loader"], [class*="Loader"] {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[class*="border"], hr {
border-color: rgba(118, 173, 165, 0.22) !important;
}
input, select, textarea {
background: #1a3033 !important;
border-color: rgba(118, 173, 165, 0.26) !important;
color: #f4fbf8 !important;
}
`;
if (mode != 'dark') {
style.textContent = compact_dashboard_css;
Sao.traceHTMLViewerTheme('apply-light-compact-injected', {
src: iframe.getAttribute('src') || '',
bridgePresent: Boolean(doc.getElementById(
'tradon-htmlviewer-theme-bridge')),
styleLength: style && style.textContent ?
style.textContent.length : 0,
});
return;
}
style.textContent = compact_dashboard_css + dark_dashboard_css;
doc.querySelectorAll('img').forEach(function(img) {
var marker = [
img.getAttribute('src') || '',
img.getAttribute('alt') || '',
img.className || '',
img.id || '',
].join(' ');
if (!/logo|tradon/i.test(marker)) {
return;
}
if (!img.getAttribute('data-tradon-light-src')) {
img.setAttribute('data-tradon-light-src', img.getAttribute('src') || '');
}
img.setAttribute('src', dashboard_logo_url);
var parent = img.parentElement;
var depth = 0;
while (parent && depth < 3) {
var parent_marker = [
parent.className || '',
parent.id || '',
].join(' ');
if (/logo|tradon|splash|loading|loader/i.test(parent_marker) ||
parent.children.length == 1) {
parent.style.setProperty('background', 'transparent', 'important');
parent.style.setProperty('background-color', 'transparent', 'important');
parent.style.setProperty('border-color', 'transparent', 'important');
parent.style.setProperty('box-shadow', 'none', 'important');
}
parent = parent.parentElement;
depth += 1;
}
});
Sao.traceHTMLViewerTheme('apply-dark-injected', {
src: iframe.getAttribute('src') || '',
docThemeAfter: doc.documentElement.getAttribute(
'data-theme-mode') || null,
bodyThemeAfter: doc.body &&
doc.body.getAttribute('data-theme-mode') || null,
bridgePresent: Boolean(doc.getElementById(
'tradon-htmlviewer-theme-bridge')),
styleLength: style && style.textContent ?
style.textContent.length : 0,
bodyClass: doc.body && doc.body.className || '',
rootFound: Boolean(doc.getElementById('root') ||
doc.getElementById('app')),
});
} catch (e) {
Sao.traceHTMLViewerTheme('apply-error', {
src: iframe.getAttribute('src') || '',
errorName: e && e.name || '',
errorMessage: e && e.message || String(e),
});
// Cross-origin dashboards can still read the theme query parameter.
}
};
Sao.renderPurchaseSummaryMap = function(node, map, height) {
var ensure_scripts = function(callback) {
var remaining = 0;
var done = function() {
remaining -= 1;
if (remaining <= 0) {
callback();
}
};
if (typeof d3 == 'undefined') {
remaining += 1;
var d3_script = document.createElement('script');
d3_script.src = 'https://d3js.org/d3.v7.min.js';
d3_script.onload = done;
document.head.appendChild(d3_script);
}
if (typeof topojson == 'undefined') {
remaining += 1;
var topo_script = document.createElement('script');
topo_script.src = 'https://d3js.org/topojson.v3.min.js';
topo_script.onload = done;
document.head.appendChild(topo_script);
}
if (!remaining) {
callback();
}
};
var label_boxes = [];
var as_point = function(point) {
if (!point || !isFinite(Number(point.lat)) ||
!isFinite(Number(point.lon))) {
return null;
}
return {
lat: Number(point.lat),
lon: Number(point.lon),
};
};
var auto_sea_waypoints = function(from_point, to_point) {
if (!from_point || !to_point) {
return [];
}
var east_asia = from_point.lon >= 95 && from_point.lat > 10;
var east_africa = to_point.lon >= 25 && to_point.lon <= 55 &&
to_point.lat <= 5;
if (east_asia && east_africa) {
return [
{lon: 122, lat: 22},
{lon: 104, lat: 1},
{lon: 79, lat: -8},
{lon: 55, lat: -20},
{lon: 43, lat: -21},
];
}
if (east_africa && east_asia) {
return [
{lon: 43, lat: -21},
{lon: 55, lat: -20},
{lon: 79, lat: -8},
{lon: 104, lat: 1},
{lon: 122, lat: 22},
];
}
return [];
};
var route_points = function(map, from_point, to_point) {
var configured = map.route_points || map.sea_route ||
map.waypoints || [];
var middle = configured.map(as_point).filter(Boolean);
if (!middle.length) {
middle = auto_sea_waypoints(from_point, to_point);
}
return [from_point].concat(middle, [to_point]).filter(Boolean);
};
var place_label = function(projection, point, text, base_dy) {
var projected = projection([point.lon, point.lat]);
if (!projected) {
return null;
}
var value = String(text || '');
var width = Math.max(34, value.length * 6.8);
var candidates = [
{dx: 0, dy: base_dy || -18, anchor: 'middle'},
{dx: 17, dy: -3, anchor: 'start'},
{dx: -17, dy: -3, anchor: 'end'},
{dx: 0, dy: 18, anchor: 'middle'},
];
for (const candidate of candidates) {
var x = projected[0] + candidate.dx;
var y = projected[1] + candidate.dy;
var x1 = candidate.anchor == 'end' ? x - width :
candidate.anchor == 'middle' ? x - width / 2 : x;
var box = {x1: x1, x2: x1 + width, y1: y - 11, y2: y + 3};
var overlaps = label_boxes.some(existing =>
!(box.x2 < existing.x1 || box.x1 > existing.x2 ||
box.y2 < existing.y1 || box.y1 > existing.y2));
if (!overlaps) {
label_boxes.push(box);
return {x: x, y: y, anchor: candidate.anchor, text: value};
}
}
return {
x: projected[0],
y: projected[1] + (base_dy || -18),
anchor: 'middle',
text: value,
};
};
ensure_scripts(function() {
var el = jQuery(node);
el.empty();
var max_width = Number(map.width || map.max_width || 214);
var width = Math.min(
Math.max(170, node.clientWidth || max_width),
Math.max(170, max_width));
var h = Math.max(88, height || node.clientHeight || 104);
node.style.width = width + 'px';
node.style.maxWidth = width + 'px';
node.style.flex = '0 0 ' + width + 'px';
var departures = map.departures || [];
var arrivals = map.arrivals || [];
var from = map.from || (departures[0] && departures[0].name) || '';
var to = map.to || (arrivals[0] && arrivals[0].name) || '';
var points = departures.concat(arrivals).filter(point =>
isFinite(Number(point.lat)) && isFinite(Number(point.lon)));
var center_lon = points.length ?
d3.mean(points, point => Number(point.lon)) : 15;
var center_lat = points.length ?
d3.mean(points, point => Number(point.lat)) : 15;
var projection = d3.geoNaturalEarth1()
.scale(Math.min(width, h) * 0.43)
.center([center_lon, center_lat])
.translate([width / 2, h / 2]);
var path = d3.geoPath().projection(projection);
var svg = d3.select(node).append('svg')
.attr('class', 'purchase-summary-world-svg')
.attr('width', width)
.attr('height', h)
.attr('viewBox', '0 0 ' + width + ' ' + h)
.style('width', width + 'px')
.style('max-width', width + 'px');
d3.json('https://unpkg.com/world-atlas@2.0.2/countries-110m.json')
.then(function(world) {
var countries = topojson.feature(
world, world.objects.countries).features;
svg.selectAll('path.purchase-summary-country')
.data(countries)
.join('path')
.attr('class', 'purchase-summary-country')
.attr('d', path);
var draw_point = function(point, letter, extra_class) {
var projected = projection([point.lon, point.lat]);
if (!projected) {
return;
}
var group = svg.append('g')
.attr('class', 'purchase-summary-map-marker ' +
(extra_class || ''))
.attr('transform', 'translate(' + projected[0] +
' ' + projected[1] + ')');
group.append('circle').attr('r', 7);
group.append('text').attr('y', 3).text(letter);
};
if (departures[0]) {
draw_point(departures[0], 'A', '');
}
if (arrivals[0]) {
draw_point(arrivals[0], 'D',
'purchase-summary-map-marker-to');
}
if (departures[0] && arrivals[0]) {
var route = route_points(
map, as_point(departures[0]), as_point(arrivals[0]))
.map(function(point) {
return projection([point.lon, point.lat]);
})
.filter(Boolean);
if (route.length >= 2) {
var route_line = d3.line()
.x(point => point[0])
.y(point => point[1])
.curve(d3.curveCatmullRom.alpha(0.5));
svg.insert('path', '.purchase-summary-map-marker')
.attr('class', 'purchase-summary-route-svg')
.attr('d', route_line(route));
}
}
[
{point: departures[0], text: from, dy: -17},
{point: arrivals[0], text: to, dy: 20},
].forEach(function(item) {
if (!item.point) {
return;
}
var placed = place_label(
projection, item.point, item.text, item.dy);
if (!placed) {
return;
}
svg.append('text')
.attr('class', 'purchase-summary-map-label')
.attr('x', placed.x)
.attr('y', placed.y)
.attr('text-anchor', placed.anchor)
.text(placed.text);
});
});
});
};
Sao.renderPurchaseSummaryContent = function(container, value, height) {
var decode = function(raw) {
if (!raw) {
return {};
}
if (typeof raw == 'object') {
return raw;
}
var text = String(raw || '');
if (text.startsWith('purchase_summary:')) {
text = text.slice(17);
}
return JSON.parse(text || '{}');
};
var escape = function(raw) {
return jQuery('
').text(raw === undefined || raw === null ?
'' : String(raw)).html();
};
var doc_link = function(kind, link, label) {
link = link || {};
var count = Number(link.count || link.total || (link.res_id ? 1 : 0));
var model = link.model || '';
var res_id = link.res_id || link.id || '';
var view_mode = link.view_mode || link.view || 'form';
var disabled = !model || !res_id;
var title = link.title || (kind == 'shipment' ? 'Open shipment' :
kind == 'sale' ? 'Open sale' : 'Open invoice');
return '
';
};
var number = function(value, digits) {
var numeric = Number(value || 0);
return numeric.toLocaleString(undefined, {
maximumFractionDigits: digits === undefined ? 0 : digits,
minimumFractionDigits: digits === undefined ? 0 : digits,
});
};
var clean_label = function(value) {
var label = value === undefined || value === null ? '' :
String(value);
if (/^\d+$/.test(label)) {
label = '';
}
return label;
};
var money = function(value, currency, digits) {
var label = currency === undefined || currency === null ? '' :
String(currency);
if (/^\d+$/.test(label)) {
label = '';
}
return [escape(label), number(value, digits)].filter(Boolean)
.join(' ');
};
var signed = function(value, suffix) {
var numeric = Number(value || 0);
var sign = numeric >= 0 ? '+' : '';
return sign + number(numeric, 2) + (suffix || '');
};
var tone = function(value) {
var numeric = Number(value || 0);
if (numeric > 0) return 'positive';
if (numeric < 0) return 'negative';
return 'neutral';
};
var config = decode(value);
var map = config.map || {};
var execution = config.execution || {};
var totals = execution.totals || {};
var rows = execution.rows || [];
var links = execution.links || config.links || {};
var sale_link = links.sale || links.sales || execution.sale ||
execution.sales || config.sale || config.sales || {};
var shipment_link = links.shipment || links.shipments ||
execution.shipment || execution.shipments || config.shipment ||
config.shipments || {};
var pnl = config.pnl || {};
var mtm = config.mtm || {};
var amount = config.amount || config.financial_amount || totals.amount ||
pnl.amount || {};
var amount_value = typeof amount == 'object' ? amount.value : amount;
var amount_currency = clean_label(config.total_currency ||
config.currency_badge || (typeof amount == 'object' ?
amount.currency : '') || config.currency);
var normalize_chips = function(raw) {
if (!raw) {
return [];
}
if (raw instanceof Array) {
return raw;
}
if (typeof raw == 'object') {
if (raw.dimension || raw.label || raw.name || raw.value ||
raw.text) {
return [raw];
}
return Object.keys(raw).map(function(key) {
return {
dimension: key,
value: raw[key],
};
});
}
return [];
};
var total_chips = normalize_chips(config.total_chips ||
config.total_badges || config.dimension_chips ||
config.total_dimensions || config.dimensions ||
(typeof amount == 'object' ? amount.dimensions : []));
var total_chips_html = total_chips.slice(0, 2).map(function(item) {
if (item instanceof Array) {
item = {
dimension: item[0],
value: item[1],
};
}
var dimension = item.dimension || item.label || item.name ||
item.key || '';
var chip_value = item.value !== undefined ? item.value :
item.text !== undefined ? item.text : '';
if (!dimension || chip_value === undefined || chip_value === null ||
chip_value === '') {
return '';
}
return '
' +
escape(dimension) + ': ' + escape(chip_value) + '';
}).filter(Boolean).join('');
var departures = map.departures || [];
var arrivals = map.arrivals || [];
var from = map.from || (departures[0] && departures[0].name) || '';
var to = map.to || (arrivals[0] && arrivals[0].name) || '';
var h = Math.max(162, Number(config.height || config.banner_height ||
Math.min(Number(height || 162), 162)));
var map_id = 'purchase-summary-map-' + Math.random().toString(36).slice(2);
var row_quantity = function(row) {
var physical = row.physical !== undefined ? row.physical :
row.physic !== undefined ? row.physic :
row.open !== undefined ? row.open :
row.shipped || 0;
var open = row.open !== undefined && row.physical !== undefined ?
row.open : row.quantity || totals.quantity || 0;
return number(physical) + '/' + number(open) + ' ' +
(row.unit || totals.unit || '');
};
var quantity_value = function(value, row) {
return number(value || 0) + (row.unit || totals.unit ?
' ' + (row.unit || totals.unit) : '');
};
var percent_value = function(row, keys) {
for (var i = 0; i < keys.length; i++) {
if (row[keys[i]] !== undefined && row[keys[i]] !== null &&
row[keys[i]] !== '') {
if (typeof row[keys[i]] == 'string' &&
row[keys[i]].indexOf('%') >= 0) {
return row[keys[i]];
}
return number(row[keys[i]], 0) + '%';
}
}
return '';
};
var money_value = function(value, row) {
if (value && typeof value == 'object') {
return money(value.value, value.currency || row.currency ||
config.currency, value.digits);
}
return money(value || 0, row.currency || config.currency, 0);
};
var raw_metric_value = function(value) {
if (value && typeof value == 'object') {
return Number(value.value || 0);
}
return Number(value || 0);
};
var line_metric = function(label, value, row, extra_class) {
return '';
};
var exec_icon = function(name) {
return '
';
};
var exec_metric = function(row_class, label, icon, value) {
return '
' +
exec_icon(icon) +
'' +
escape(label) + '' + escape(value) +
'';
};
var period_value = function(row) {
return row.period || row.shipment_period || row.period_at ||
row.date_period || totals.period || totals.shipment_period || '';
};
var visible_rows = rows.length ? rows : [{
index: 1,
product: totals.product || 'Line',
quantity: totals.quantity,
period: totals.period || totals.shipment_period,
matched: totals.matched,
shipped: totals.shipped,
unit: totals.unit,
pnl: totals.pnl,
mtm: totals.mtm,
amount: totals.amount,
}];
var exec_count = visible_rows.length;
var exec_mode = exec_count <= 1 ? 'one' :
exec_count == 2 ? 'two' :
'paged';
var rows_per_page = exec_mode == 'paged' ? 2 : visible_rows.length;
var page_count = Math.max(1,
Math.ceil(visible_rows.length / rows_per_page));
var page = 0;
var rows_html = function(current_page) {
current_page = Math.max(0, Math.min(page_count - 1,
current_page || 0));
var start = current_page * rows_per_page;
var page_rows = visible_rows.slice(start, start + rows_per_page);
return page_rows.map(function(row, index) {
var row_sale = row.sale || row.sales || sale_link;
var row_shipment = row.shipment || row.shipments || shipment_link;
return '
' +
'
' +
escape(row.index || row.sequence || start + index + 1) +
'' +
'
Product' +
'
Contract & Status' +
'
' + escape(row.product || row.label || 'Line') + '' +
'
Qty' +
escape(row_quantity(row)) + '' +
exec_metric('purchase-summary-exec-period', 'Period',
'calendar', period_value(row)) +
exec_metric('purchase-summary-exec-priced', 'Priced',
'tag', percent_value(row, ['priced', 'priced_pct',
'priced_percent'])) +
exec_metric('purchase-summary-exec-hedged', 'Hedged',
'ok-circle', percent_value(row, ['hedged', 'hedged_pct',
'hedged_percent'])) +
exec_metric('purchase-summary-exec-invoiced', 'Invoiced',
'list-alt', percent_value(row, ['invoiced', 'invoiced_pct',
'invoiced_percent'])) +
exec_metric('purchase-summary-exec-paid', 'Paid',
'usd', percent_value(row, ['paid', 'paid_pct',
'paid_percent'])) +
exec_metric('purchase-summary-exec-matched', 'Matched',
'th-large', quantity_value(row.matched, row)) +
exec_metric('purchase-summary-exec-shipped', 'Shipped',
'transfer', quantity_value(row.shipped, row)) +
'
' +
doc_link('sale', row_sale, 'Sales') + '' +
'
' +
doc_link('shipment', row_shipment, 'Shipments') +
'' +
'
' +
line_metric('PnL', row.pnl, row, 'purchase-summary-exec-pnl') +
line_metric('MTM', row.mtm, row, 'purchase-summary-exec-mtm') +
line_metric('Amount', row.amount, row,
'purchase-summary-exec-amount') +
'
' +
'
';
}).join('');
};
var pager_html = page_count > 1 ?
'' : '';
container.empty().append(
'
' +
'' +
'
' +
'Route' +
'' + escape([from, to].filter(Boolean)
.join(' \u2192 ')) + '' +
'
' +
'
' +
'
' +
'
' + rows_html(page) + '
' +
pager_html +
'
' +
(amount_currency ? '
' +
escape(amount_currency) + '' : '') +
'
' +
'PnL' +
money(pnl.value, pnl.currency || config.currency, 0) +
'' + signed(
pnl.change_d1, pnl.change_suffix || '') +
'' +
'MTM' +
money(mtm.value, mtm.currency || pnl.currency ||
config.currency, 0) + '' + signed(
mtm.change, mtm.change_suffix || '') +
'' +
'Amount' +
number(amount_value, typeof amount == 'object' ?
amount.digits : 0) + '' +
'
' +
(total_chips_html ? '
' +
total_chips_html + '
' : '') +
'
');
var bind_doc_links = function(scope) {
scope.find('.purchase-summary-doc-link').off('click').on(
'click', function(evt) {
evt.preventDefault();
evt.stopPropagation();
var button = jQuery(this);
if (button.is('[disabled], .disabled')) {
return;
}
var model = button.attr('data-model');
var res_id = parseInt(button.attr('data-res-id'), 10);
var view_mode = button.attr('data-view-mode') || 'form';
if (!model || isNaN(res_id)) {
return;
}
Sao.Tab.create({
model: model,
res_id: res_id,
mode: [view_mode],
});
});
};
var update_page = function(next_page) {
page = Math.max(0, Math.min(page_count - 1, next_page));
var start = page * rows_per_page + 1;
var end = Math.min(visible_rows.length, (page + 1) * rows_per_page);
var rows_node = container.find('.purchase-summary-exec-rows');
rows_node.html(rows_html(page));
bind_doc_links(rows_node);
container.find('.purchase-summary-exec-page-label')
.text(start + '-' + end + ' / ' + visible_rows.length);
container.find('.purchase-summary-exec-page-prev')
.prop('disabled', page <= 0);
container.find('.purchase-summary-exec-page-next')
.prop('disabled', page >= page_count - 1);
};
bind_doc_links(container);
container.find('.purchase-summary-exec-page-prev').on('click',
function(evt) {
evt.preventDefault();
update_page(page - 1);
});
container.find('.purchase-summary-exec-page-next').on('click',
function(evt) {
evt.preventDefault();
update_page(page + 1);
});
update_page(page);
Sao.renderPurchaseSummaryMap(
container.find('#' + map_id)[0], map, Math.max(88, h - 34));
};
Sao.renderHTMLViewerContent = function(container, value, height, width, record) {
function decodeHtmlEntities(str) {
const txt = document.createElement('textarea');
txt.innerHTML = str;
return txt.value;
}
container.empty();
container.removeClass('htmlviewer-react-dashboard');
if (!value) return;
if (String(value || '').startsWith('purchase_summary:')) {
Sao.renderPurchaseSummaryContent(container, value, height);
return;
} else if (/^imo:\d+$/.test(value)) {
// Case 1: VesselFinder ship by IMO
var imo = value.split(':')[1];
var iframe = document.createElement('iframe');
iframe.style.width = '100%';
iframe.style.height = height.toString()+'px';
iframe.style.border = '0';
iframe.src = `https://www.vesselfinder.com/aismap?width=100%25&height=${height-10}&names=true&imo=${imo}&track=true`;
container[0].appendChild(iframe);
} else if (/^https?:\/\//i.test(value)) {
// Case 2: Generic URL (not VesselFinder)
var is_dashboard = Sao.isHTMLViewerDashboardURL(value);
Sao.traceHTMLViewerTheme('render-url', {
value: value,
isDashboard: is_dashboard,
height: height,
width: width,
});
var iframe = jQuery('
', {
src: Sao.withHTMLViewerThemeParam(value),
width: '100%',
height: height.toString()+'px',
frameborder: 0,
scrolling: 'auto',
// sandbox: 'allow-same-origin allow-scripts allow-popups allow-forms', // optional: adjust based on your security needs
});
if (is_dashboard) {
iframe.attr({
'data-htmlviewer-dashboard': '1',
'data-original-src': value,
});
container.addClass('htmlviewer-react-dashboard');
iframe.on('load', function() {
Sao.traceHTMLViewerTheme('iframe-load', {
src: this.getAttribute('src') || '',
originalSrc: this.getAttribute('data-original-src') || '',
});
Sao.applyHTMLViewerThemeToIFrame(this);
});
} else {
container.removeClass('htmlviewer-react-dashboard');
}
container.append(iframe);
if (is_dashboard) {
Sao.applyHTMLViewerThemeToIFrame(iframe[0]);
}
} else if (value.startsWith("metabase:")) {
const url = value.replace(/^metabase:/, '');
const iframe = jQuery('
', {
src: url,
width: '100%',
height: height.toString()+'px',
frameborder: 0,
allowtransparency: 'true',
sandbox: 'allow-same-origin allow-scripts allow-popups allow-forms',
});
container.append(iframe);
} else if (value.startsWith("chatbot:")) {
let chatData = JSON.parse(value.replace(/^chatbot:/, '')) || [];
let lastMessage = chatData[chatData.length - 1];
container.empty();
const chatHeight = height - 60;
// 1. Ajouter le conteneur HTML
$('
', {
id: 'chat-wrapper',
html: `
`,
css: {
width: '100%',
height: height.toString()+'px',
boxSizing: 'border-box'
}
}).appendTo(container);
$('#chat-container').css({
height: chatHeight.toString() + 'px',
overflowY: 'auto',
borderRadius: '16px',
border: '1px solid #ccc',
padding: '10px',
boxSizing: 'border-box',
background: '#fff'
});
// 2. Ajout des messages de l'historique
const chatContainer = document.getElementById('chat-container');
const addMessage = (type, content) => {
if ((type === 'bot') || (type === 'user')){
const bubble = document.createElement('div');
bubble.className = `chat-bubble ${type}`;
bubble.innerHTML = decodeHtmlEntities(content);
chatContainer.appendChild(bubble);
bubble.querySelectorAll('a.tryton-link').forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const target = event.currentTarget;
const model = target.getAttribute('data-model');
const res_id = parseInt(target.getAttribute('data-id'), 10);
const view_mode = target.getAttribute('data-view') || 'form';
if (!model || isNaN(res_id)) return;
Sao.Tab.create({
model: model,
res_id: res_id,
mode: [view_mode],
target: "new",
});
});
});
chatContainer.scrollTop = chatContainer.scrollHeight;
}
};
for (let msg of chatData) {
addMessage(msg.type, msg.content);
}
// 3. Gérer la saisie utilisateur
const input = document.getElementById('user-input');
const button = document.getElementById('send-btn');
button.addEventListener('click', () => {
const question = input.value.trim();
if (question) {
addMessage('user', question);
let currentUserId = Sao.Session.current_session.user_id;
// charger les inputs via RPC
let fields = ['id','user_id']; // les champs dont on a besoin
let domain = [['user_id', '=', currentUserId]]; // filtrer sur ce dashboard
Sao.rpc({
'method': 'model.purchase.dashboard.search_read',
'params': [domain, 0, null, null, fields, Sao.Session.current_session.context]
}, Sao.Session.current_session, true, false).then(inputs => {
console.log("RPC results",inputs);
let userInput = inputs.find(r => r.user_id === currentUserId);
Sao.Action.execute(479, {
model: 'purchase.dashboard',
id: userInput.id,
ids: [userInput.id]
}, {user_request: question}, Sao.Session.current_session.context, true)
.then(() => {
chatData.push({ type: 'user', content: question });
input.value = '';
record.field_set_client('input', JSON.stringify(chatData));
})
});
}
});
// 4. Permettre la touche "Entrée"
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
button.click();
}
});
} else {
if (value.startsWith('d3:')) {
const json = value.slice(3);
const config = JSON.parse(json); // doit contenir { highlightedCountry: '250' }
if (config.type === 'execution-summary') {
let d3Div = container.find('.d3-execution-summary-container');
if (d3Div.length === 0) {
d3Div = $('
', {
class: 'd3-execution-summary-container',
css: {
width: '100%',
height: height.toString() + 'px',
overflow: 'hidden',
background: 'transparent'
}
}).appendTo(container);
} else {
d3Div.empty();
}
const loadD3ExecutionSummary = () => {
const node = d3Div[0];
const w = Math.max(300, node.clientWidth || width || 360);
const h = Math.max(125, height || 160);
const totals = config.totals || {};
const rows = config.rows || [];
const totalQty = Math.max(1, Number(totals.quantity || 0));
const matched = Number(totals.matched || 0);
const shipped = Number(totals.shipped || 0);
const matchedPct = Math.min(100, Math.round((matched / totalQty) * 100));
const shippedPct = Math.min(100, Math.round((shipped / totalQty) * 100));
const fmt = d3.format(',.0f');
const hasTitle = Boolean(config.title);
const statsY = hasTitle ? 30 : 8;
const barY = hasTitle ? 58 : 36;
const rowY = hasTitle ? 84 : 62;
const html = document.documentElement;
const themeMode = html.getAttribute('data-theme-mode');
const isDarkMode = themeMode === 'dark';
const isLightMode = !isDarkMode && (
html.getAttribute('theme') === 'default' ||
themeMode === 'light');
const palette = !isLightMode ? {
matched: '#65d7d0',
shipped: '#4fb8b2',
open: '#405b56',
text: '#eef7f4',
muted: '#b7cac5',
line: '#66817b'
} : {
matched: '#2b8c87',
shipped: '#4ba9a4',
open: '#dce9e5',
text: '#173b40',
muted: '#526967',
line: '#bfd4ce'
};
const svg = d3.select(node).append('svg')
.attr('width', w)
.attr('height', h)
.attr('viewBox', `0 0 ${w} ${h}`);
if (hasTitle) {
svg.append('text')
.attr('x', 4)
.attr('y', 15)
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 12)
.attr('font-weight', 700)
.attr('fill', palette.text)
.text(config.title);
}
const stats = [
{label: 'Lines', value: fmt(totals.lines || rows.length || 0)},
{label: 'Matched', value: matchedPct + '%'},
{label: 'Shipped', value: shippedPct + '%'}
];
const stat = svg.selectAll('g.stat')
.data(stats)
.join('g')
.attr('class', 'stat')
.attr('transform', (d, i) => `translate(${4 + i * Math.min(95, (w - 16) / 3)}, ${statsY})`);
stat.append('text')
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 10)
.attr('fill', palette.muted)
.text(d => d.label);
stat.append('text')
.attr('y', 16)
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 14)
.attr('font-weight', 700)
.attr('fill', palette.text)
.text(d => d.value);
const barX = 4;
const barW = Math.max(160, w - 8);
const barH = 8;
svg.append('rect')
.attr('x', barX)
.attr('y', barY)
.attr('width', barW)
.attr('height', barH)
.attr('rx', 4)
.attr('fill', palette.open);
svg.append('rect')
.attr('x', barX)
.attr('y', barY)
.attr('width', barW * Math.min(1, matched / totalQty))
.attr('height', barH)
.attr('rx', 4)
.attr('fill', palette.matched);
svg.append('rect')
.attr('x', barX)
.attr('y', barY)
.attr('width', barW * Math.min(1, shipped / totalQty))
.attr('height', barH)
.attr('rx', 4)
.attr('fill', palette.shipped);
const row = svg.selectAll('g.exec-row')
.data(rows.slice(0, 3))
.join('g')
.attr('class', 'exec-row')
.attr('transform', (d, i) => `translate(4, ${rowY + i * 24})`);
row.append('line')
.attr('x1', 0)
.attr('x2', w - 8)
.attr('y1', -8)
.attr('y2', -8)
.attr('stroke', palette.line);
row.append('text')
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 10)
.attr('font-weight', 700)
.attr('fill', palette.text)
.text(d => (d.product || 'Line').slice(0, 18));
row.append('text')
.attr('x', 170)
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 10)
.attr('fill', palette.muted)
.text(d => `${fmt(d.shipped || 0)}/${fmt(d.quantity || 0)} ${d.unit || ''}`);
row.append('text')
.attr('x', 250)
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 10)
.attr('fill', palette.muted)
.text(d => (d.route || '').slice(0, 32));
if (!rows.length) {
svg.append('text')
.attr('x', 4)
.attr('y', 90)
.attr('font-family', 'Inter, sans-serif')
.attr('font-size', 11)
.attr('fill', palette.muted)
.text('No purchase lines to summarize');
}
};
const ensureD3 = (cb) => {
if (typeof d3 !== 'undefined') {
cb();
return;
}
const script = document.createElement('script');
script.src = 'https://d3js.org/d3.v7.min.js';
script.onload = cb;
document.head.appendChild(script);
};
ensureD3(loadD3ExecutionSummary);
return;
}
// Réutilise le conteneur si déjà présent
let d3Div = container.find('.d3-map-container');
if (d3Div.length === 0) {
d3Div = $('
', {
class: 'd3-map-container',
css: {
width: '100%',
minWidth: '800px',
height: (height - 25*height/1000).toString() + 'px',
overflow: 'visible',
background: 'transparent'
}
}).appendTo(container);
} else {
d3Div.empty(); // vide sans supprimer le conteneur
}
const loadD3Map = () => {
const svg = d3.select(d3Div[0])
.append("svg")
.attr("width", width)
.attr("height", (height - 25*height/1000));
const scale = Math.min(width, height) * 0.3;
const projection = d3.geoNaturalEarth1()
.scale(scale)
.translate([width / 2, (height - 10) / 2]);
const path = d3.geoPath().projection(projection);
function showTooltip(data, type) {
// Supprime les anciens tooltips
svg.selectAll(".boat-tooltip-container").remove();
const svgHeight = +svg.attr("height");
const tooltipHeight = 400;
const tooltipGroup = svg.append("g")
.attr("class", "boat-tooltip-container")
.attr("transform", `translate(10, ${svgHeight - tooltipHeight - 100})`);
let html = `
${data.name || data.properties?.name || 'Objet'}
`;
if (type === 'boat') {
html += `
IMO: ${data.imo || 'N/A'}
Position: ${data.lat.toFixed(2)}, ${data.lon.toFixed(2)}
Statut: ${data.status || 'En route'}
${data.links ? `
` : ''}
${data.actions ? `
${data.actions.map(action => `
`).join('')}
` : ''}
`;
} else if (type === 'country') {
html += `
Country: ${data.properties.name}
`;
}
html += `