Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
308 lines (299 sloc) 11.7 KB
<!DOCTYPE html>
<html>
<head>
<title>Hydra Console</title>
<meta charset="utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.page-header {
margin: 15px 0;
padding-bottom: 5px;
}
.navbar-form label {
margin-bottom: 0;
line-height: 30px;
vertical-align: bottom;
}
.btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] {
margin-top: 0;
}
tr.prop-highlight td, tr.prop-highlight th {
background-color: #f5f5f5;
}
.popover {
width:auto;
}
.table.no-border th, .table.no-border td {
border-top: none;
}
#addressbar > label {
line-height: 30px;
vertical-align: bottom;
}
#addressbar input {
width: 675px;
}
#operationsModal {
width: 700px;
margin-left: -350px;
}
#operationsModal-body {
min-height: 250px;
}
#response .not-mapped-prop {
color: #aaa;
}
#response .context, #response .prop-key, #response .literal {
cursor: help;
}
tr.request td, tr.request th {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1>Hydra Console</h1>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="row-fluid">
<div class="span12">
<form id="addressbar" class="navbar-form form-inline">
<label for="url">Enter an URL:</label>
<div class="input-append">
<input id="url" type="text" class="input-xxlarge" placeholder="http://">
<button id="load" class="btn btn-inverse" data-loading-text="Loading..."><i class="icon-refresh icon-white"></i> Load</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<h4>Response</h4>
<!-- <div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning</strong>
</div> -->
<pre id="response">
Hi,
This is the Hydra Console - a generic client for Hydra-powered Web APIs. The
user interface consists of three parts: the address bar on the top, this
response pane, and the documentation pane.
As the name suggests, the address bar allows you to enter an URL to access
the Web API. The response will then be rendered in the response pane and
in the pane to the right you'll find the corresponding documentation.
When you move your mouse over a property, the corresponding item in the
documentation will be highlighted. Additionally, a tooltip with the full IRI
of the property will be shown. If you move your mouse over a context
definition, the active context at that level will be shown.
All links are blue and underlined. To invoke an operation, simply click on
it and follow the instructions. If you want to browse an API and GET the
target of a link, simply press the SHIFT-key while clicking on a link.
To get started, enter the URL of the API in the address bar above and click
on &quot;Load&quot;. If you wish, you can use the demo API featuring a simple issue
tracker at <a href="http://www.markus-lanthaler.com/hydra/event-api/" data-action="GET">http://www.markus-lanthaler.com/hydra/event-api/</a>.
</pre>
<!-- <div id="pagination" class="pull-right">
<a class="btn btn-info btn-small" href="#"><i class="icon-chevron-left icon-white"></i></a>
<a class="btn btn-info btn-small" href="#"><i class="icon-chevron-right icon-white"></i></a>
</div> -->
<br class="clearfix">
</div>
<div id="documentation" class="span6">
<div class="clearfix">
<h4 class="pull-left">Documentation:&nbsp;</h4>
<div class="dropdown pull-left">
<a id="documentation-title" class="dropdown-toggle" data-toggle="dropdown" data-trigger="hover" data-target="#"></a>
<ul class="dropdown-menu">
</ul>
</div>
</div>
<div id="documentation-details">
<p>Hydra API documentation not available.</p>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="operationsModal" tabindex="-1" role="dialog">
<script type="underscore/template" id="operationsModal-template">
<form id="operationsForm" class="modal-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<% if (target) { %>
<h3>Invoke an Operation</h3>
<% } else { %>
<h3>Documented Operations</h3>
<% } %>
</div>
<div id="operationsModal-body" class="modal-body">
<% if (target) { %>
<form>
<table class="table no-border">
<tr>
<td>Target IRI:</td>
<td><code><%= target %></code></td>
</tr>
<% } else { %>
<table class="table no-border">
<% } %>
<tr>
<td>Operation:</td>
<td>
<div class="dropdown">
<% if ((null !== selected) && (selected < operations.length)) { %>
<span class="label label-info"><%= operations[selected].method %></span>
<a class="dropdown-toggle" data-toggle="dropdown" data-trigger="hover" href="#"><% if (operations[selected].label) { %><%= operations[selected].label %><% } else { %><span class="muted">no documentation available</span><% } %> <b class="caret"></b></a>
<% } else { %>
<a class="dropdown-toggle" data-toggle="dropdown" data-trigger="hover" href="#">Select an operation <b class="caret"></b></a>
<% } %>
<ul class="dropdown-menu">
<% _.each(operations, function(operation, index) { %>
<li><a href="#" class="operation" data-index="<%= index %>"><span class="label<% if (true !== operation.isDefault) print(' label-info'); %>"><%= operation.method %></span>
<% if (operation.label) { %><%= operation.label %><% } else { %><span class="muted">no documentation available</span><% } %></a></li>
<% }); %>
</ul>
</div>
</td>
</tr>
<% if (selected) { %>
<tr>
<td>Type:</td>
<td><% if (operations[selected]['@type']) { %>
<a href="<%- operations[selected]['@type'] %>" target="_blank"><%- operations[selected]['@type'] %></a>
<% } else { %>
<span class="muted">hydra:Operation</span>
<% } %></td>
</tr>
<% if (operations[selected].description) { %>
<tr>
<td>Description:</td>
<td><%- operations[selected].description %></td>
</tr>
<% } %></td>
<tr>
<td>Expects:</td>
<td><% if (operations[selected].expects) { %>
<code title="<%- operations[selected].expects %>"><%- (operations[selected].expectsLabel) ? operations[selected].expectsLabel : operations[selected].expects %></code>
<% } else { %>
<span class="muted">n/a</span>
<% } %></td>
</tr>
<tr>
<td>Returns:</td>
<td><% if (operations[selected].returns) { %>
<code title="<%- operations[selected].returns %>"><%- (operations[selected].returnsLabel) ? operations[selected].returnsLabel : operations[selected].returns %></code>
<% } else { %>
<span class="muted">n/a</span>
<% } %></td>
</tr>
<tr>
<td>Status Codes:</td>
<td><% if (operations[selected].statusCodes && (operations[selected].statusCodes.length > 0)) { %>
<% _.each(operations[selected].statusCodes, function(statusCode) { %>
<code><%- statusCode.code %></code> <%- statusCode.description %>
<% }); %>
<% } else { %>
<span class="muted">n/a</span>
<% } %></td>
</tr>
<% if (target && (('POST' == operations[selected].method) || ('PUT' == operations[selected].method))) { %>
<tr class="request">
<th colspan="2">Request Data</th>
</tr>
<% if (expectsDef) { %>
<% _.each(expectsDef.properties, function(property) { %>
<% if (!property.readonly) { %>
<tr class="request">
<th><label for="<%- property.label %>"><%- property.label %></label></th>
<td>
<input type="text" name="<%- property.label %>" class="input-xlarge" placeholder="<%- property.description %>" />
</td>
</tr>
<% } %>
<% }); %>
<% } else { %>
<!--<tr class="request">
<th><label for="headers">Request headers</label></th>
<td>
<textarea rows="3" class="input-xlarge" name="headers" placeholder="Type in the request headers. They will be sent as-is">Content-Type: application/ld+json</textarea>
</td>
</tr>-->
<tr class="request">
<th><label for="body">Request body</label></th>
<td>
<textarea rows="10" class="input-xlarge" name="body" placeholder="Type in the request body. It will be sent as-is"></textarea>
</td>
</tr>
<% } %>
<% } %>
<% } %>
</table>
<% if (target) { %>
<% } %>
</div>
<div class="modal-footer">
<% if (target) { %>
<button class="btn btn-primary">Invoke</button>
<% } %>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</form>
</script>
</div>
<script type="underscore/template" id="documentation-template" style="display:none">
<%
if (!docu.description)
docu.description = '';
if (!docu.supportedOperations)
docu.supportedOperations = [];
%>
<p><%= docu.description.replace(/\n/g, '<br>') %></p>
<table class="table table-hover">
<tbody>
<tr>
<th width="50">@id</th>
<td width="50">
<code>IRI</code>
<br /><small class="muted">readonly</small>
</td>
<td>
The entity&#039;s IRI
<% if (docu.supportedOperations.length > 0) { %>
<p><a class="btn btn-link btn-small operations" data-iri="<%- docu['@id'] %>" href="#"><i class="icon-tags icon"></i> Operations</a></p>
<% } %>
</td>
</tr>
<% _.each(docu.properties, function(property) {
if (!property.description)
property.description = '';
if (!property.supportedOperations)
property.supportedOperations = [];
%>
<tr id="<%= property['@id'] %>">
<th title="<%- property['@id'] %>"><%= property.label %></th>
<td>
<code title="<%- property.range %>"><% if (property.range) { print(_.escape((property.rangeLabel) ? property.rangeLabel : property.range)); } else { print('<span class="muted">n/a</span>'); }; %></code>
<% if (property.readonly) { %><br /><small class="muted">readonly</small><% } %>
<% if (property.writeonly) { %><br /><small class="muted">writeonly</small><% } %>
</td>
<td>
<%= property.description.replace(/\n/g, '<br>') %><% if (property.supportedOperations.length > 0) { %><br />
<a class="btn btn-link btn-small operations" data-iri="<%- property['@id'] %>" href="#"><i class="icon-tags icon"></i> Operations</a>
<% } %>
</td>
</tr>
<% }); %>
</tbody>
</table>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="js/hydra.js"></script>
</body>
</html>