// widget_jsontable.ysl2

template "widget[@type='JsonTable']", mode="widget_class"

||

class JsonTableWidget extends Widget{

do_http_request() {

const query = {

offset: '42',

filter: '*powerloss*',

args: this.args

};

const options = {

method: 'POST',

body: JSON.stringify(query),

headers: {'Content-Type': 'application/json'}

}

fetch(this.args[0], options)

.then(res => res.json())

.then(this.spread_json_data);

}

dispatch(value) {

this.do_http_request();

}

on_click(evt) {

this.do_http_request();

}

init() {

this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");

}

}

||

template "svg:*", mode="json_table_elt_render" {

error > JsonTable Widget can't contain element of type «local-name()».

}

template "svg:use", mode="json_table_elt_render" {

param "value_expr";

// cloned element must be part of a HMI:List

const "targetid", "substring-after(@xlink:href,'#')";

const "from_list", "$hmi_lists[(@id | */@id) = $targetid]";

if "count($from_list) = 0"

error > Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or HMI:List item. Reference "«@xlink:href»" is not valid.

| id("«@id»").setAttribute("xlink:href",

// obtain new target id from HMI:List widget

| "#"+hmi_widgets["«$from_list/@id»"].items[«$value_expr»]);

}

template "svg:text", mode="json_table_elt_render" {

param "value_expr";

| id("«@id»").textContent = String(«$value_expr»);

}

template "svg:*", mode="json_table_render" {

param "objname";

apply ".", mode="json_table_elt_render" with "value_expr" > «$objname»«@inkscape:label»

}

template "svg:g", mode="json_table_render" {

param "objname";

| let obj_«@id» = «$objname»«@inkscape:label»;

apply "*[@inkscape:label]", mode="json_table_render"

with "objname" > obj_«@id»

}

template "widget[@type='JsonTable']", mode="widget_defs" {

param "hmi_element";

labels("data");

optional_labels("forward backward cursor");

const "data_elt", "$result_svg_ns//*[@id = $hmi_element/@id]/*[@inkscape:label = 'data']";

| spread_json_data: function(jdata) {

apply "$data_elt/*", mode="json_table_render" with "objname","'jdata'";

| }

}