Skip to content

GitLab

Commit 4be237c9 authored by Franziska Koehn's avatar Franziska Koehn
Browse files

Loading Queries

parent 7270dfa0
Hide whitespace changes
Inline Side-by-side
xsaweb/main.py
View file @ 4be237c9
......@@ -20,7 +20,7 @@ def step1():
from xsa.datatypereader import get_root_types, get_fields
root_types = get_root_types()
roottypefields = ()
roottypefieldsjson = ""
roottypefieldsjson = {}
if state["roottype"]:
roottypefields = get_fields(state["roottype"])
import json
......@@ -28,6 +28,25 @@ def step1():
return render_template("step1.html", state=state, roottypes=root_types,
roottypefields=roottypefields, roottypefieldsjson=roottypefieldsjson)
@app.route("/set_root_type", methods=["GET"])
def set_root_type():
state["roottype"] = request.args.get("t")
from xsa.datatypereader import get_root_types, get_fields
root_types = get_root_types()
roottypefields = ()
roottypefieldsjson = {}
if state["roottype"]:
roottypefields = get_fields(state["roottype"])
import json
roottypefieldsjson = json.dumps(roottypefields, indent=2)
return render_template("step1_1.html", state=state, roottypes=root_types,
roottypefields=roottypefields, roottypefieldsjson=roottypefieldsjson)
#TODO Funktionen zusammenführen
#MODEL: [{"operator":"AND","children":[{"name":"Type","predicate":"LIKE","value":"%t1%","idx":"0","field":"xnat:mrScanData/TYPE"}]}]
@app.route("/results")
def results(res):
from xsa.datatypereader import get_field_label_by_key
......@@ -68,14 +87,6 @@ def download():
response.headers["Content-Disposition"] = "attachment; filename=test.zip"#TODO rename file
return response
@app.route("/set_root_type", methods=["GET"])
def set_root_type():
state["roottype"] = request.args.get("t")
return step1()
#MODEL: [{"operator":"AND","children":[{"name":"Type","predicate":"LIKE","value":"%t1%","idx":"0","field":"xnat:mrScanData/TYPE"}]}]
@app.route("/send_query", methods=["POST", "GET"])
def send_query():
import json
......
xsaweb/templates/step1.html
View file @ 4be237c9
......@@ -26,95 +26,33 @@
</style>
<script>
model = [];
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(function(){ n.predicate = $(this).val(); });
$(newnode).children("input").val(n.value);
$(newnode).children("input").change(function(){ n.value = $(this).val(); });
$(newnode).children("a").click(function(){ delete_node(n); update_tree(); });
el.append(newnode);
}
else if (n.operator) {
// OR AND
newnode = $("<li>"+n.operator+"<a href=\"#\">x</a></li>");
$(newnode).children("a").click(function(){ delete_node(n); update_tree(); });
el.append(newnode);
el.append(build_tree(n.children));
}
}
el.append(changer);
var roottypefields = {{roottypefieldsjson|safe}};
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));
var handleFiles = function(file){
console.log(file)
var reader = new FileReader();
reader.onload = function(file) {
set_root_type(JSON.parse(file.target.result).root,
function() {
setquery(JSON.parse(file.target.result));
});
};
reader.readAsText(file[0]);
}
var set_root_type = function(rt, cb) {
console.log("srt", rt);
$('#step1_1').load("/set_root_type?t="+rt, cb);
$("#roottypes button").html(rt + '<span class="caret"></span>');
};
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 sendquery = function() {
var selecfields = [];
$('input[type="checkbox"]:checked').each(function(){ selecfields.push($(this).attr('name')) });
var passw = $('input[id="inputPassw"]').val();
var user = $('input[id="inputUser"]').val();
var host = $('input[id="inputHost"]').val();
$.ajax("/send_query", { success: function(data) { console.log(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" });
};
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
......@@ -143,16 +81,17 @@
{% endwith %}
{% block body %}{% endblock %}
<div class="alert alert-info" role="alert">
If you have already saved a query, you can load it
<a href="#" class="alert-link">here</a>
</div>
<h2 class="sub-header">Open a saved Query</h2>
<input type="file" id="fileElem" onchange="handleFiles(this.files)">
<p class="help-block">...or skip this point and define a new one.</p>
<h2 class="sub-header">Define Your Constraints</h2>
<div class="input-group">
<span class="input-group-addon">Root-Type</span>
<div class="btn-group" role="group">
<div class="btn-group" role="group" id="roottypes">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
{% if state.roottype %}
{{state.roottype}}
......@@ -163,67 +102,20 @@
</button>
<ul class="dropdown-menu" role="menu">
{% for rt in roottypes %}
<li role="presentation"><a role="menuitem" tabindex="-1" href="/set_root_type?t={{rt}}">{{rt}}</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" onclick="set_root_type('{{rt}}')">{{rt}}</a></li>
{% endfor %}
</ul>
</div>
</div>
{% if state.roottype %}
<h4>
<div id="tree">
</div>
</h4>
<h2 class="sub-header">Choose the fields you want to request</h2>
<div class="col-md-12">
<form role="form">
{% 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 %}
</div>
</form>
</div>
<div class="col-sm-12 col-md-10 col-md-offset-1 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-sm-12 col-md-10 col-md-offset-1 main">
<button type="button" 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 %}
<div id="step1_1">
</div>
</div>
</div>
</div>
</body>
<!-- Bootstrap core JavaScript
......@@ -234,5 +126,12 @@
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="static/ie10-viewport-bug-workaround.js"></script>
<script>update_tree();</script>
<svg style="visibility: hidden; position: absolute; top: -100%; left: -100%;" preserveAspectRatio="none" viewBox="0 0 200 200" height="200" width="200"><defs></defs><text style="font-weight:bold;font-size:10pt;font-family:Arial, Helvetica, Open Sans, sans-serif;dominant-baseline:middle" y="10" x="0">200x200</text></svg></body></html>
<script>
$(function() {
fileElem = document.getElementById("fileElem");
});
</script>
xsaweb/templates/step1_1.html 0 → 100644
View file @ 4be237c9
<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() {
console.log("t", model);
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(function(){ n.predicate = $(this).val(); });
$(newnode).children("input").val(n.value);
$(newnode).children("input").change(function(){ n.value = $(this).val(); });
$(newnode).children("a").click(function(){ delete_node(n); update_tree(); });
el.append(newnode);
}
else if (n.operator) {
// OR AND
newnode = $("<li>"+n.operator+"<a href=\"#\">x</a></li>");
$(newnode).children("a").click(function(){ delete_node(n); 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 sendquery = function() {
var selecfields = [];
$('input[type="checkbox"]:checked').each(function(){ selecfields.push($(this).attr('name')) });
var passw = $('input[id="inputPassw"]').val();
var user = $('input[id="inputUser"]').val();
var host = $('input[id="inputHost"]').val();
$.ajax("/send_query", { success: function(data) { console.log(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;
console.log("add", m);
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]));
}
console.log(new_model);
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");
}
}
</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" 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 %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment