JSFiddle - React, Tailwind, and code Playground

by saluce

HTML

<textarea name="DDD" id="DDD" style="width: 100%; height: 400px;">hello</textarea>
<div style="display: none">
<DIV id=exGridToolBoxFields>
<DIV class=exFields data-type="char" data-field="active_status" data-lookup="N" data-datatype="char" display_field="Active Status">Active Status</DIV>
<DIV class=exFields data-type="char" data-field="bol_no" data-lookup="N" data-datatype="char" display_field="Bill Of Lading No.">Bill Of Lading No.</DIV>
<DIV class=exFields data-type="char" data-field="business_group" data-lookup="N" data-datatype="char" display_field="Business Group">Business Group</DIV>
<DIV class=exFields data-type="char" data-field="car_init" data-lookup="N" data-datatype="char" display_field="Car Initials">Car Initials</DIV>
<DIV class=exFields data-type="char" data-field="car_no" data-lookup="N" data-datatype="char" display_field="Car Number">Car Number</DIV>
<DIV class=exFields data-type="char" data-field="car_status" data-lookup="N" data-datatype="char" display_field="Car Status">Car Status</DIV>
<DIV class=exFields data-type="char" data-field="clm_loc_city" data-lookup="N" data-datatype="char" display_field="CLM City">CLM City</DIV>
<DIV class=exFields data-type="datetime" data-field="clm_date_time" data-lookup="N" data-datatype="datetime" display_field="CLM Date">CLM Date</DIV>
<DIV class=exFields data-type="char" data-field="clm_dest_city" data-lookup="N" data-datatype="char" display_field="CLM Destination City">CLM Destination City</DIV>
<DIV class=exFields data-type="char" data-field="clm_dest_state" data-lookup="N" data-datatype="char" display_field="CLM Destination State">CLM Destination State</DIV>
<DIV class=exFields data-type="char" data-field="clm_trn_jct" data-lookup="N" data-datatype="char" display_field="CLM Junction">CLM Junction</DIV>
<DIV class=exFields data-type="char" data-field="clm_loc_state" data-lookup="N" data-datatype="char" display_field="CLM State">CLM State</DIV>
<DIV class=exFields data-type="char" data-field="comm_ref1"...

JavaScript

if (typeof String.prototype.startsWith != 'function') {
  String.prototype.startsWith = function (str){
    return this.slice(0, str.length) == str;
  };
}
if (typeof String.prototype.endsWith != 'function') {
  String.prototype.endsWith = function (str){
    return this.slice(-str.length) == str;
  };
}

function getHtmlFromArray(elems, reverse) {
    if (reverse) return $(elems).toArray().join().reverse(); else return $(elems).toArray().join();
}


// This presumes to receive elements INSIDE a div, not the div itself
function convertBasicUIExpressionToObject(elem) {
    var thisElem = $(elem); //$("<div>" + getHtmlFromArray(elem) + "</div>");
    console.log(thisElem);
    var expression = new Object;
    $(thisElem).each(function () {
        if ($(this).hasClass("exActionItemInEx")) {
            var prev = Array.prototype.reverse.call($(this).prevAll());
            var next = $(this).nextAll();
            expression.operand = new Object;
            expression.operand["@type"] = $(this).html();
            console.log("Left call:");
            console.log(prev);
            expression.operand.left = convertBasicUIExpressionToObject(prev);
            console.log("Right call:");
            console.log(next);
            expression.operand.right = convertBasicUIExpressionToObject(next);
            
            return false;
    //    } else if () {
    //    } else if () {
    //    } else if () {
        }
    });
    console.log("Return:");
    console.log(expression);
    return expression;
}

var obj = convertBasicUIExpressionToObject($("#drop *"));




function convertBasicUIExpressionToDisplayExpression(element) {
    var FinalXml = "";
    for (var i = 0; i < element.length; i++) {
        var currentItem = $(element).get(i);
        if ($(currentItem).hasClass("exFuncItemInEx")) {
            var params = $(currentItem).attr("ParamsIn");
            var netFunc = $(currentItem).attr("netFunc");
            var paramList = params.split(',');
      ...