1

// widget_jsontable.ysl2

     2

     3

widget_desc("JsonTable") {

     4

    longdesc

     5

    || 

     6

    Send given variables as POST to http URL argument, spread returned JSON in

     7

    SVG sub-elements of "data" labeled element.

     8

     9

    Documentation to be written. see svghmi exemple.

    10

    ||

    11

    12

    shortdesc > Http POST variables, spread JSON back

    13

    14

    arg name="url" accepts="string" >  

    15

    16

    path name="edit" accepts="HMI_INT, HMI_REAL, HMI_STRING" > single variable to edit

    17

    18

}

    19

    20

widget_class("JsonTable")

    21

    ||

    22

        // arbitrary defaults to avoid missing entries in query

    23

        cache = [0,0,0];

    24

        init_common() {

    25

            this.spread_json_data_bound = this.spread_json_data.bind(this);

    26

            this.handle_http_response_bound = this.handle_http_response.bind(this);

    27

            this.fetch_error_bound = this.fetch_error.bind(this);

    28

            this.promised = false;

    29

        }

    30

    31

        handle_http_response(response) {

    32

            if (!response.ok) {

    33

              console.log("HTTP error, status = " + response.status);

    34

            }

    35

            return response.json();

    36

        }

    37

    38

        fetch_error(e){

    39

            console.log("HTTP fetch error, message = " + e.message + "Widget:" + this.element_id);

    40

        }

    41

    42

        do_http_request(...opt) {

    43

            this.abort_controller = new AbortController();

    44

            return Promise.resolve().then(() => {

    45

    46

                const query = {

    47

                    args: this.args,

    48

                    range: this.cache[1],

    49

                    position: this.cache[2],

    50

                    visible: this.visible,

    51

                    extra: this.cache.slice(4),

    52

                    options: opt

    53

                };

    54

    55

                const options = {

    56

                     method: 'POST',

    57

                     body: JSON.stringify(query),

    58

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

    59

                     signal: this.abort_controller.signal

    60

                };

    61

    62

                return fetch(this.args[0], options)

    63

                        .then(this.handle_http_response_bound)

    64

                        .then(this.spread_json_data_bound)

    65

                        .catch(this.fetch_error_bound);

    66

            });

    67

        }

    68

    69

        unsub(){

    70

            this.abort_controller.abort();

    71

            super.unsub();

    72

        }

    73

    74

        sub(...args){

    75

            this.cache[0] = undefined;

    76

            super.sub(...args);

    77

        }

    78

    79

        dispatch(value, oldval, index) {

    80

    81

            if(this.cache[index] != value)

    82

                this.cache[index] = value;

    83

            else

    84

                return;

    85

    86

            if(!this.promised){

    87

                this.promised = true;

    88

                this.do_http_request().finally(() => {

    89

                    this.promised = false;

    90

                });

    91

            }

    92

        }

    93

        make_on_click(...options){

    94

            let that = this;

    95

            return function(evt){

    96

                that.do_http_request(...options);

    97

            }

    98

        }

    99

        // on_click(evt, ...options) {

   100

        //     this.do_http_request(...options);

   101

        // }

   102

    ||

   103

   104

gen_index_xhtml {

   105

   106

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

   107

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

   108

}

   109

   110

   111

def "func:json_expressions" {

   112

    param "expressions";

   113

    param "label";

   114

   115

    // compute javascript expressions to access JSON data

   116

    // desscribed in given svg element's "label"

   117

    // knowing that parent element already has given "expressions".

   118

   119

    choose {

   120

        when "$label" {

   121

            const "suffixes", "str:split($label)";

   122

            const "res" foreach "$suffixes" expression {

   123

                const "suffix",".";

   124

                const "pos","position()";

   125

                // take last available expression (i.e can have more suffixes than expressions)

   126

                const "expr","$expressions[position() <= $pos][last()]/expression";

   127

                choose {

   128

                    when "contains($suffix,'=')" {

   129

                        const "name", "substring-before($suffix,'=')";

   130

                        if "$expr/@name[. != $name]"

   131

                            error > JsonTable : missplaced '=' or inconsistent names in Json data expressions.

   132

                        attrib "name" value "$name";

   133

                        attrib "content" > «$expr/@content»«substring-after($suffix,'=')»

   134

                    }

   135

                    otherwise {

   136

                        copy "$expr/@name";

   137

                        attrib "content" > «$expr/@content»«$suffix»

   138

                    }

   139

                }

   140

            }

   141

            result "exsl:node-set($res)";

   142

        }

   143

        // Empty labels are ignored, expressions are then passed as-is.

   144

        otherwise result "$expressions";

   145

    }

   146

   147

}

   148

   149

const "initexpr" expression attrib "content" > jdata

   150

const "initexpr_ns", "exsl:node-set($initexpr)";

   151

   152

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

   153

    param "expressions";

   154

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

   155

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

   156

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

   157

   158

    choose {

   159

        when "count($from_list) > 0" {

   160

            |         id("«@id»").href.baseVal =

   161

            // obtain new target id from HMI:List widget

   162

            |             "#"+hmi_widgets["«$from_list/@id»"].items[«$expressions/expression[1]/@content»];

   163

        }

   164

        otherwise

   165

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

   166

    }

   167

}

   168

   169

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

   170

    param "expressions";

   171

    const "value_expr", "$expressions/expression[1]/@content";

   172

    const "original", "@original";

   173

    const "from_textstylelist", "$textstylelist_related_ns/list[elt/@eltid = $original]";

   174

    choose {

   175

   176

        when "count($from_textstylelist) > 0" {

   177

            const "content_expr", "$expressions/expression[2]/@content";

   178

            if "string-length($content_expr) = 0 or $expressions/expression[2]/@name != 'textContent'"

   179

                error > Clones (svg:use) in JsonTable Widget pointing to a HMI:TextStyleList widget or item must have a "textContent=.someVal" assignement following value expression in label.

   180

            |         {

   181

            |           let elt = id("«@id»");

   182

            |           elt.textContent = String(«$content_expr»);

   183

            |           elt.style = hmi_widgets["«$from_textstylelist/@listid»"].styles[«$value_expr»];

   184

            |         }

   185

        }

   186

        otherwise {

   187

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

   188

        }

   189

    }

   190

}

   191

   192

   193

// only labels comming from Json widget are counted in

   194

def "func:filter_non_widget_label" {

   195

    param "elt";

   196

    param "widget_elts";

   197

    const "eltid" choose {

   198

        when "$elt/@original" value "$elt/@original";

   199

        otherwise value "$elt/@id";

   200

    }

   201

    result "$widget_elts[@id=$eltid]/@inkscape:label";

   202

}

   203

   204

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

   205

    param "expressions";

   206

    param "widget_elts";

   207

   208

    const "label", "func:filter_non_widget_label(., $widget_elts)";

   209

    // filter out "# commented" elements

   210

    if "not(starts-with($label,'#'))" 

   211

        apply ".", mode="json_table_render"{

   212

            with "expressions", "$expressions";

   213

            with "widget_elts", "$widget_elts";

   214

            with "label", "$label";

   215

        }

   216

}

   217

   218

   219

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

   220

    param "expressions";

   221

    param "widget_elts";

   222

    param "label";

   223

   224

    const "new_expressions", "func:json_expressions($expressions, $label)";

   225

   226

    const "elt",".";

   227

    foreach "$new_expressions/expression[position() > 1][starts-with(@name,'onClick')]"

   228

    |         id("«$elt/@id»").onclick = this.make_on_click('«@name»', «@content»);

   229

   230

    apply ".", mode="json_table_elt_render"

   231

        with "expressions", "$new_expressions";

   232

}

   233

   234

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

   235

    param "expressions";

   236

    param "widget_elts";

   237

    param "label";

   238

   239

    // use intermediate variables for optimization

   240

    const "varprefix" > obj_«@id»_

   241

    |         try {

   242

   243

    foreach "$expressions/expression"{

   244

    |          let «$varprefix»«position()» = «@content»;

   245

    |          if(«$varprefix»«position()» == undefined) {

   246

    |               throw null;

   247

    |          }

   248

    }

   249

   250

    // because we put values in a variables, we can replace corresponding expression with variable name

   251

    const "new_expressions" foreach "$expressions/expression" xsl:copy {

   252

        copy "@name";

   253

        attrib "content" > «$varprefix»«position()»

   254

    }

   255

   256

    // revert hiding in case it did happen before

   257

    |           id("«@id»").style = "«@style»";

   258

   259

    apply "*", mode="json_table_render_except_comments" {

   260

        with "expressions", "func:json_expressions(exsl:node-set($new_expressions), $label)";

   261

        with "widget_elts", "$widget_elts";

   262

    }

   263

    |         } catch(err) {

   264

    |           id("«@id»").style = "display:none";

   265

    |         }

   266

}

   267

   268

}

   269

   270

widget_defs("JsonTable") {

   271

    labels("data");

   272

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

   273

    |     visible: «count($data_elt/*[@inkscape:label])»,

   274

    |     spread_json_data: function(janswer) {

   275

    |         let [range,position,jdata] = janswer;

   276

    |         [[1, range], [2, position], [3, this.visible]].map(([i,v]) => {

   277

    |              this.apply_hmi_value(i,v);

   278

    |              this.cache[i] = v;

   279

    |         });

   280

    apply "$data_elt", mode="json_table_render_except_comments" {

   281

        with "expressions","$initexpr_ns";

   282

        with "widget_elts","$hmi_element/*[@inkscape:label = 'data']/descendant::svg:*";

   283

    }

   284

    |     },

   285

    |     init() {

   286

    |        this.init_common();

   287

    foreach "$hmi_element/*[starts-with(@inkscape:label,'action_')]" {

   288

    |         id("«@id»").onclick = this.make_on_click("«func:escape_quotes(@inkscape:label)»");

   289

    }

   290

    |     }

   291

   292

}