UI/SimpleQuerier.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
  This is a simple page for querying Open Syllabus Project through its REST API.
  API documentation is at:  https://github.com/dhcolumbia/opensyllabus/wiki/REST-API
  Use at your own risk and for any purpose you want.
  All copyright is disclaimed for this simple file.  
  Jon Freed, 2014
  http://www.linkedin.com/in/jonfreed
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Simple Page for Querying Open Syllabus Project REST API</title>
<style>
	.tableApiParameters {border-collapse:collapse;border-spacing:0;border-color:#999;}
	.tableApiParameters th{text-align:left;font-weight:bold;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}
	.tableApiParameters td{vertical-align:top;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#444;background-color:#F7FDFA;}

	.tableResultsHeader {border-collapse:collapse;border-spacing:0;border-color:#999;width:100%;}
	.tableResultsHeader th{text-align:left;font-weight:bold;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#999;color:#fff;background-color:#26ADE4;}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript">

	// Prevent errors for browsers that don't support the console.log function
	if (!window.console) console = {log: function() {}}; 

	$(document).ready(function(){
		onUrlComponentChange();
	}); 

	function onUrlComponentChange() {
	
		var baseUrl = $("#baseUrlInput").val();

		var url = baseUrl
		          + "?criteriaTextArea=" + encodeURIComponent( $("#criteriaTextArea").val() )
		          + "&fieldsTextArea=" + encodeURIComponent( $("#fieldsTextArea").val() )
		          + "&sortTextArea=" + encodeURIComponent( $("#sortTextArea").val() )
		          + "&skipInput=" + encodeURIComponent( $("#skipInput").val() )
		          + "&limitInput=" + encodeURIComponent( $("#limitInput").val() )
		          + "&explainInput=" + encodeURIComponent( $("#explainInput").val() )
		          + "&batch_sizeInput=" + encodeURIComponent( $("#batch_sizeInput").val() );

		console.log("url = " + url);
		$("#constructedURL").val(url);
	}

	function queryOSPRESTAPI() {
		$("#executeQueryBtn").attr("disabled","true");
		$("#executeQueryBtn").html("Querying... (please wait)");
		$.getJSON({
			'url': $("#constructedURL").val()
			,'beforeSend': function(xhr) {
				//May need to use "Authorization" instead
				xhr.setRequestHeader("Authentication",
				                     "Basic " + encodeBase64( $("#usernameInput").val() + ":" + $("#passwordInput").val() ) )
			}
		}).always(
			function(data) {
				// make the data pretty for display
				data = JSON.stringify(data,null,4)
				$("#divForQueryResults").html("<pre>" + data + "</pre>");
				$("#executeQueryBtn").removeAttr("disabled");
				$("#executeQueryBtn").html("Query");
			}
		);
	}
</script>
</head>
<body>

<h1>Simple Page for querying Open Syllabus Project <a href="https://github.com/dhcolumbia/opensyllabus/wiki/REST-API">REST API</a></h1>
<p>
	Instructions:  (1) specify parameter values, (2) click the Query button, (3) scroll down to review the results.
</p>
<p>
<table class="tableApiParameters">
<tr>
	<th>Parameter Name</th>
	<th>Parameter Value</th>
	<th>Parameter Information</th>
</tr><tr>
	<td>Base URL</td>
	<td><input id="baseUrlInput" type="text" size="80" onchange="onUrlComponentChange()"
	           value='http://IP:PORT/opensyllabus/opensyllabus/_find'></td>
	<td>The URL for querying the Open Syllabus Project MongoDb.  (Get this from the OSP.)</td>
</tr><tr>
	<td>Username</td>
	<td><input id="usernameInput" type="text" size="80" onchange="onUrlComponentChange()"></td>
	<td>Your username.  (Get this from the OSP.)</td>
</tr><tr>
	<td>Password</td>
	<td><input id="passwordInput" type="text" size="80" onchange="onUrlComponentChange()"></td>
	<td>Your password.  (Get this from the OSP.)</td>
</tr><tr>
	<td>criteria</td>
	<td><textarea id="criteriaTextArea" rows="8" cols="60" onchange="onUrlComponentChange()"></textarea></td>
	<td>Search criteria, formatted as a JSON object.</td>
</tr><tr>
	<td>fields</td>
	<td><textarea id="fieldsTextArea" rows="8" cols="60" onchange="onUrlComponentChange()"></textarea></td>
	<td>Names of fields, formatted into a JSON object, that you want in the results.</td>
</tr><tr>
	<td>sort</td>
	<td><textarea id="sortTextArea" rows="5" cols="60" onchange="onUrlComponentChange()"></textarea></td>
	<td>Names of fields, formatted into a JSON object, by which you want the results to be sorted.</td>
</tr><tr>
	<td>skip</td>
	<td><input id="skipInput" type="text" value="0" onchange="onUrlComponentChange()"></td>
	<td>number</td>
</tr><tr>
	<td>limit</td>
	<td><input id="limitInput" type="text" value="5" onchange="onUrlComponentChange()"></td>
	<td>number</td>
</tr><tr>
	<td>explain</td>
	<td><input id="explainInput" type="text" value="true" onchange="onUrlComponentChange()"></td>
	<td></td>
</tr><tr>
	<td>batch_size</td>
	<td><input id="batch_sizeInput" type="text" value="5" onchange="onUrlComponentChange()"></td>
	<td>number to return</td>
</tr><tr>
	<td>Constructed URL for query</td>
	<td><textarea id="constructedURL" rows="3" cols="60"></textarea></td>
	<td>You do not need to edit this because it is dynamically constructed from the preceding 
	parameter values you provide.  However, if desired, you can skip providing parameter values 
	other than base URL, username, and password and provide your own constructed URL directly.
	</td>
</tr>
</table>
</p>
<p>
	<button id="executeQueryBtn" onclick="queryOSPRESTAPI()">Query</button>
</p>
<p>
	<table class="tableResultsHeader">
	<tr>
		<th>Query Results</th>
	</tr>
	</table>
</p>
<p>
	<div id="divForQueryResults"></div>
</p>
</body>
</html>