248 lines
8.4 KiB
HTML
248 lines
8.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CouchDB Data Explorer</title>
|
||
<link rel="stylesheet" href="style/reset.css" media="screen">
|
||
<link rel="stylesheet" href="style/css3buttons.css" media="screen">
|
||
<link rel="stylesheet" href="style/data-table.css" media="screen">
|
||
<link rel="stylesheet" href="style/demo.css" media="screen">
|
||
<script type="text/javascript" src="script/jquery-1.6.1.min.js"></script>
|
||
<script type="text/javascript" src="script/jquery.mustache.js"></script>
|
||
<script type="text/javascript" src="script/jquery.request.js"></script>
|
||
<script type="text/javascript">
|
||
var config, render;
|
||
$(function() {
|
||
|
||
function inVhost() {
|
||
var vhost = false;
|
||
if ( document.location.pathname.indexOf( "_design" ) === -1 ) {
|
||
vhost = true;
|
||
}
|
||
return vhost;
|
||
}
|
||
|
||
config = {
|
||
db: "api" // relative vhost links defined in rewrites.json
|
||
, design: "ddoc"
|
||
, vhost: true
|
||
, baseURL: "/"
|
||
, host: window.location.href.split( "/" )[ 2 ]
|
||
}
|
||
|
||
if ( !inVhost() ) {
|
||
config.vhost = false
|
||
config.db = document.location.href.split( '/' )[ 3 ];
|
||
config.design = unescape( document.location.href ).split( '/' )[ 5 ];
|
||
config.baseURL = "/" + config.db + "/_design/" + config.design + "/_rewrite/";
|
||
}
|
||
|
||
var reqOpts = {
|
||
uri: config.baseURL + "api",
|
||
method: "GET",
|
||
headers: {"Content-type": "application/json"},
|
||
cache: true
|
||
}
|
||
|
||
var csvUrl;
|
||
|
||
/** uses $.mustache to render a template out to a target DOM
|
||
* template == camelcase ID (minus the word Template) of the DOM object containg your mustache template
|
||
* target == ID of the DOM node you wish to render the template into
|
||
* data == data object to pass into the mustache template when rendering
|
||
*/
|
||
render = function( template, target, data ) {
|
||
if ( !data ) var data = {};
|
||
$( "#" + target ).html( $.mustache( $( "#" + template + "Template" ).text(), data ) );
|
||
}
|
||
|
||
function formatDiskSize(bytes) {
|
||
return (parseFloat(bytes)/1024/1024).toString().substr(0,4) + "MB"
|
||
}
|
||
|
||
function renderRows(err, resp, body) {
|
||
var response = JSON.parse(body);
|
||
var rows = [];
|
||
response.rows.map(function(row) {
|
||
var cells = [];
|
||
config.headers.map(function(header) {
|
||
var value = "";
|
||
if (row.value[header]) {
|
||
value = row.value[header];
|
||
if (typeof(value) == "object") value = JSON.stringify(value);
|
||
}
|
||
cells.push(value);
|
||
})
|
||
rows.push({cells: cells});
|
||
})
|
||
render('dataTable', 'dataTableContainer', {
|
||
rows: rows,
|
||
headers: config.headers
|
||
})
|
||
|
||
}
|
||
|
||
function gotDb( err, resp, body ) {
|
||
|
||
var dbInfo = JSON.parse(body);
|
||
|
||
$.extend(dbInfo, {
|
||
"host": window.location.host,
|
||
"disk_size": formatDiskSize(dbInfo.disk_size)
|
||
});
|
||
|
||
if( config.vhost ) dbInfo.db_name = "api";
|
||
|
||
render('tableContainer', 'main', dbInfo);
|
||
render('title', 'project-title', dbInfo);
|
||
render( 'generating', 'project-controls' );
|
||
|
||
function gotHeaders( err, resp, body ) {
|
||
csvUrl = config.baseURL + 'api/csv?headers=' + escape(body);
|
||
render( 'actions', 'project-controls', $.extend({}, dbInfo, {url: csvUrl}) );
|
||
config.headers = JSON.parse(body);
|
||
$.request($.extend({}, reqOpts, {uri: config.baseURL + 'api/rows?limit=10'}), renderRows);
|
||
}
|
||
|
||
$.request($.extend({}, reqOpts, {uri: config.baseURL + 'api/headers'}), gotHeaders);
|
||
|
||
}
|
||
|
||
$.request($.extend({}, reqOpts, {uri: config.baseURL + 'api'}), gotDb);
|
||
|
||
$( '.csv' ).live('click', ( function( e ) {
|
||
window.location.href = csvUrl;
|
||
e.preventDefault();
|
||
}))
|
||
|
||
})
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div id="header">
|
||
<div id="project-title" style="display: block; ">
|
||
|
||
</div>
|
||
<div id="project-controls" style="display: block; ">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="main">
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<a href='https://github.com/maxogden/removalist'>Fork this project on Github</a>. The <a href="http://github.com/michenriksen/css3buttons">pretty CSS3 Buttons</a> were created by <a href="http://michaelhenriksen.dk" title="Website of Michael Henriksen">Michael Henriksen</a>
|
||
</footer>
|
||
</div>
|
||
|
||
<script type='text/mustache' id="dbTemplate">
|
||
<div id="database" class="single_database">
|
||
<div class="group" id="current-head-database">
|
||
<table width="100%" cellspacing="0" cellpadding="0">
|
||
<tbody>
|
||
<tr class="database_oneline action">
|
||
<td class="date">
|
||
<nobr>db</nobr>
|
||
</td>
|
||
<td class="message">
|
||
<code><a href="http://{{host}}/{{db_name}}">http://{{host}}/<strong>{{db_name}}</strong></a> </code>
|
||
</td>
|
||
<td class="database">
|
||
size {{disk_size}}
|
||
</td>
|
||
<td class="tree">
|
||
docs <a href="http://{{host}}/{{db_name}}/_all_docs?include_docs=true" hotkey="t">{{doc_count}}</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' id="actionsTemplate">
|
||
<a href="javascript:void(false)" class="button csv"><span class="downarrow icon"></span>Download CSV</a>
|
||
</script>
|
||
|
||
<script type='text/mustache' id="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script>
|
||
<script type='text/mustache' id="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
|
||
<script type='text/mustache' id="generatingTemplate"><div class="loading">Precomputing CSV...</div></script>
|
||
|
||
<script type='text/mustache' id="tableContainerTemplate">
|
||
<div bind="rightPanelDiv" id="right-panel">
|
||
<div bind="toolPanelDiv" id="tool-panel">
|
||
<div bind="summaryBarDiv" id="summary-bar">
|
||
<span>
|
||
{{doc_count}} rows
|
||
</span>
|
||
</div>
|
||
<div id="download">
|
||
|
||
</div>
|
||
</div>
|
||
<div bind="viewPanelDiv" id="view-panel">
|
||
<div class="viewpanel-header">
|
||
<div class="viewpanel-pagesize" bind="pageSizeControls">
|
||
<span>
|
||
Show:
|
||
</span>
|
||
<a href="javascript:{}" class="viewPanel-pagingControls-page action">5</a>
|
||
<a href="javascript:{}" class="viewPanel-pagingControls-page selected">10</a>
|
||
<a href="javascript:{}" class="viewPanel-pagingControls-page action">25</a>
|
||
<a href="javascript:{}" class="viewPanel-pagingControls-page action">50</a>
|
||
<span>
|
||
rows
|
||
</span>
|
||
</div>
|
||
<div class="viewpanel-sorting" bind="sortingControls">
|
||
</div>
|
||
<div class="viewpanel-paging" bind="pagingControls">
|
||
<a href="javascript:{}" class="inaction">« first</a>
|
||
<a href="javascript:{}" class="inaction">‹ previous</a>
|
||
<span class="viewpanel-pagingcount">
|
||
1 - 10
|
||
</span>
|
||
<a href="javascript:{}" class="action">next ›</a>
|
||
<a href="javascript:{}" class="action">last »</a>
|
||
</div>
|
||
</div>
|
||
<div id="dataTableContainer" class="data-table-container">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' id="dataTableTemplate">
|
||
<table bind="table" class="data-table" cellspacing="0">
|
||
<tbody>
|
||
<tr>
|
||
{{#headers}}
|
||
<td class="column-header">
|
||
<div class="column-header-title">
|
||
<a class="column-header-menu" bind="dropdownMenu"></a>
|
||
<span class="column-header-name" bind="nameContainer">{{.}}</span>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
{{/headers}}
|
||
</tr>
|
||
{{#rows}}
|
||
<tr>
|
||
{{#cells}}
|
||
<td>
|
||
<div class="data-table-cell-content">
|
||
<span>{{.}}</span>
|
||
</div>
|
||
</td>
|
||
{{/cells}}
|
||
</tr>
|
||
{{/rows}}
|
||
</tbody>
|
||
</table>
|
||
</script>
|
||
</body>
|
||
</html> |