Newer
Older
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Search XNAT</title>
<!-- Bootstrap core CSS -->
<link href="static/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="static/dashboard.css" rel="stylesheet">
<style type="text/css">
#ig_field { margin-bottom: 1em; }
input {margin-right: 0.5em;}
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var getadddata = function() {
$.ajax("/get_adddata", { success: function(data) {
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
window.history.pushState("", $("title").text(), "/get_adddata");
},
data:{}, method:"POST" });
var selected_field = "";
var update_chart = function(sel_field){
if (sel_field === undefined) {
sel_field=selected_field;
}
else{
selected_field=sel_field;
}
if(sel_field === ""){
return;
}
var subs = [];
var c_width = $("#chart").width();
$('input[type="text"]').each(function(){ subs.push($(this).val()) });
$("#chart_field button").html(sel_field + '<span class="caret"></span>');
$('#chart').load("/set_chart_field?f="+sel_field+"&s="+ subs+"&w="+c_width);
};
selectTab = function(tabname, idx) {
$(tabname).addClass("hidden");
$(tabname+":eq(" + idx+ ")").removeClass("hidden");
$(tabname+"-menu > li").removeClass("active");
$(tabname+"-menu > li:eq(" + idx+ ")").addClass("active");
};
var add = function(removeable){
var child=document.createElement("p");
var parent=document.getElementById("subs_con");
parent.appendChild(child);
$("<input placeholder='substring' type='text'></input>").on("keyup",function(){ update_chart(); }).appendTo(child);
if (removeable){ $("<a href='Javascript:'>X</a>").on("click", remove_cb).appendTo(child);}
};
var remove_cb = function(){
$(this).parents('p').remove();
update_chart();
};
</script>
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Search XNAT</a>
</div>
</div>
</nav>
<div class="col-sm-12 col-md-10 col-md-offset-1 main">
<h1 class="page-header">Results</h1>
<div class="alert alert-info" role="alert">
{{resultcount}} Results
</div>
<ul class="nav nav-tabs tabbed1-menu">
<li role="presentation" class="active" onclick="selectTab('.tabbed1',0)"><a href='Javascript:'>Table</a></li>
<li role="presentation" onclick="selectTab('.tabbed1',1)"><a href='Javascript:'>Chart</a></li>
<h2 class="sub-header">List of Results</h2>
<div class="btn-group" style="margin-top: 1em; margin-bottom:2em;" role="group" aria-label="...">
{% if rest_adddata%}
<button type="button" class="btn btn-lg btn-default" onclick="getadddata()">Get Additional Data</button>
{% endif %}
<a href="/downl_csv"><button type="button" class="btn btn-lg btn-default">Export as CSV</button></a>
</div>
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<div class="container">
<table class="table table-striped">
<thead>
<tr>
{% if rest_downl%}
<th></th>
{% endif %}
{% for field in roottypefields %}
<th>{{field["label"]}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for r in results %}
<tr>
{% if r["rest"] %}
<td style="text-align: center; vertical-align: middle;">
<a href="/download?url={{r['rest']}}"><button type="button" class="btn btn-lg btn-primary" >Download</button></a>
</td>
{% endif %}
{% for field in roottypefields %}
<td>{{r[field["key"]]}}</td>
{% endfor %}
</tr>
<div class="tabbed1 hidden">
<h2 class="sub-header">Chart</h2>
<div id="ig_field" class="input-group">
<span class="input-group-addon">Field</span>
<div class="btn-group" role="group" id="chart_field">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Choose a field!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for field in roottypefields %}
<li role="presentation"><a role="menuitem" tabindex="-1" onclick="update_chart('{{field["label"]}}') ">{{field["label"]}}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div id="subs_con">
<script> add(false);</script>
</div>
<button onclick="add(true)">+</button>
</body>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="static/jquery.js"></script>
<script src="static/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="static/ie10-viewport-bug-workaround.js"></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>