step1_1.html

<script>
  var roottypefields = {{roottypefieldsjson|safe}};
  model = [];

  get_label = function (id) {
    for (i = 0; i < roottypefields.length; i++) {
      if (roottypefields[i].field == id) return roottypefields[i].label;
    }
    return id;
  };

  get_idx = function (id) {
    for (i = 0; i < roottypefields.length; i++) {
      if (roottypefields[i].field == id) return i;
    }
  };

  get_field_from_label = function (label) {
    for (i = 0; i < roottypefields.length; i++) {
      if (roottypefields[i].label == label) return roottypefields[i].field;
    }
  };

  delete_node = function(node, m) {
    if (m === undefined) { m = model; }
    for (var i = 0; i < m.length; i++) {
      if (m[i] == node) {
        m.splice(i, 1);
        break;
      }
      else {
        if (m[i].children) { delete_node(node, m[i].children) };
      }
    }
  };

  update_tree = function() {
    var el = $("#tree");
    el.children().remove();

    var build_tree = function(root, isroot) {
      var el = $("<ul></ul>");
      for (var i = 0; i < root.length; i++) {
        var n = root[i];
        var newnode;
        if (n.name) {
          // filter
          newnode = $("<li>"+n.name+"<select><option>LIKE</option>"+
              "<option>&lt;</option><option>&gt;</option><option>&lt;=</option>"+
              "<option>&gt;=</option><option>=</option></select>"+
              "<input></input><a href=\"#\">x</a></li>");
          $(newnode).children("select").val(n.predicate);
          $(newnode).children("select").change({target: n}, function(ev){ ev.data.target.predicate = $(this).val(); });
          $(newnode).children("input").val(n.value);
          $(newnode).children("input").change({target: n}, function(ev){ ev.data.target.value = $(this).val(); });
          $(newnode).children("a").click({target: n}, function(ev){ delete_node(ev.data.target); update_tree(); });
          el.append(newnode);
        }
        else if (n.operator) {
          // OR AND
          newnode = $("<li>"+n.operator+"<a href=\"#\">x</a></li>");
          $(newnode).children("a").click({target: n}, function(ev){ delete_node(ev.data.target); update_tree(); });
          el.append(newnode);
          el.append(build_tree(n.children));
        }
      }
      el.append(changer);
      var changer = $("<select><option>...</option><option>AND</option><option>OR</option></select>");

      $(roottypefields).each(function(idx, val){
        $(changer).append($("<option></option>").attr("value", idx).text(val.label));
      });


      changer.on("change", root, function(ev) {
        var d = $(this).val(), a;
        if (d == "AND" || d == "OR") { a = {operator: d, children: []};}
        else {a = {name: roottypefields[d].label, predicate: "LIKE", value:"", idx: d, field: roottypefields[d].field};}
        ev.data.push(a);
        update_tree();
        });

      if (!(isroot & root.length > 0)) { el.append(changer); }
      return el;
    };

    el.append(build_tree(model, true));
  };

  var getselectedfields = function(){
    var selecfields = [];
    $('input[type="checkbox"]:checked').each(function(){ selecfields.push($(this).attr('name')) });
    return selecfields;
  };

  var sendquery = function() {
    var selecfields = getselectedfields();
    var passw = $('input[id="inputPassw"]').val();
    var user = $('input[id="inputUser"]').val();
    var host = $('input[id="inputHost"]').val();
    $.ajax("/send_query", { success: function(data) {
      var newDoc = document.open("text/html", "replace");
      newDoc.write(data);
      newDoc.close();
      window.history.pushState("", $("title").text(), "/send_query");
      },
    data:{"passw":JSON.stringify(passw), "user":JSON.stringify(user), "host":JSON.stringify(host), "model":JSON.stringify(model), "fields":JSON.stringify(selecfields)}, method:"POST" });
  };

  var setquery = function(jsonobj){

    var add_to_model = function(m) {
        var i2;
        if (m[0] == "AND" || m[0] == "OR") { // conjunktion
          var rest = [];
          for (i2 = 1; i2 < m.length; i2++) // über rest der selben ebene
            {
              rest.push(add_to_model(m[i2]))
            }
          return {operator: m[0], children: rest}
        }
        else {// filterfield
          return  {name: get_label(m[0]), predicate: m[1], value: m[2], idx: get_idx(m[0]), field: m[0]}
        }
    };

    var new_model = [], i;

    for (i = 0; i < jsonobj.query.length; i++) {
      new_model.push(add_to_model(jsonobj.query[i]));
    }

    model = new_model;
    update_tree();

    for(i = 0; i < jsonobj.labels.length; i++) {
      var field = get_field_from_label(jsonobj.labels[i]);
      $("#check input[name='" + field + "']").attr("checked","checked");
    }
  };

  var downloadquery = function(){
    var selecfields = getselectedfields();
    $.download("/downl_query", {"model":JSON.stringify(model), "fields":JSON.stringify(selecfields)}, "POST");
  };


</script>

{% if state.roottype %}

<h4>
  <div id="tree"/>
</h4>
<script>update_tree();</script>

<h2 class="sub-header">Choose the fields you want to request</h2>
<div class="col-md-12">
  <form role="form" id="check">
    {% for field in roottypefields %}
    <div class="checkbox">
      <label><input name="{{field.field}}" type="checkbox" value="" {% if field.required %}checked="checked" disabled="disabled"{% endif %}>{{field.label}}</label>
    </div>
    {% endfor %}
  </form>
</div>


<div class="col-md-12 main">
  <h2 class="sub-header">Server Settings</h2>
  <div class="input-group">
    <span class="input-group-addon">Host-Address</span>
    <input id="inputHost" class="form-control" placeholder="Your Host-Address" required="required" autofocus="" type="" value="{{state.host}}">
  </div>

  <h3> </h3>
  <div class="input-group">
    <span class="input-group-addon">Username</span>
    <input id="inputUser" class="form-control" placeholder="Your User-Name" required="" autofocus="" type="" value="{{state.username}}">
    <span class="input-group-addon">Password</span>
    <input id="inputPassw" class="form-control" placeholder="Your User-Password" required="" autofocus="" type="password" value="{{state.password}}"/>
  </div>
</div>

<div class="col-md-12 main">
  <button type="button" onclick= "downloadquery()" class="btn btn-lg btn-primary">Download Query</button>
  <button type="button" class="btn btn-lg btn-primary" onclick="sendquery()">Send Query</button>
</div>

{% endif %}