32a74949cc
* Why: it is then explicitly clear in demos what vendor libs are needed and make its easier to use those demos as a template for integration elsewhere.
248 lines
9.3 KiB
HTML
Executable File
248 lines
9.3 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Data Explorer</title>
|
||
<link rel="stylesheet" href="style/reset.css" media="screen">
|
||
<link rel="stylesheet" href="style/data-table.css" media="screen">
|
||
<link rel="stylesheet" href="style/flot-graph.css" media="screen">
|
||
<link rel="stylesheet" href="style/style.css" media="screen">
|
||
|
||
<script type="text/javascript" src="../vendor/000-jquery-1.6.1.min.js"></script>
|
||
<script type="text/javascript" src="../vendor/000-underscore-1.1.6.js"></script>
|
||
<script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||
|
||
<script type="text/javascript" src="../src/util.js"></script>
|
||
<script type="text/javascript" src="../src/costco.js"></script>
|
||
<script type="text/javascript" src="../src/model.js"></script>
|
||
<script type="text/javascript" src="../src/view.js"></script>
|
||
<script type="text/javascript" src="js/app.js"></script>
|
||
</head>
|
||
<body class="bod">
|
||
<div class="container">
|
||
<div id="header">
|
||
<div class="project-title">
|
||
<a href="http://github.com/okfn/recline">Recline DataExplorer</a>
|
||
/ Demo
|
||
</div>
|
||
<div class="project-actions">
|
||
<form class="webstore-load">
|
||
<label for="source">Source</label>
|
||
<input type="text" name="source" size="50" />
|
||
<input type="submit" name="" value="Update" />
|
||
</form>
|
||
</div>
|
||
<div class="project-controls"></div>
|
||
</div>
|
||
<div class="data-explorer-here"></div>
|
||
<!--
|
||
<div class="main_content">
|
||
<div class="left-panel"></div>
|
||
<div class="right-panel"></div>
|
||
</div>
|
||
<div class="data-table-container"></div>
|
||
-->
|
||
</div>
|
||
|
||
<script type='text/mustache' class="busyTemplate">
|
||
<div id="loading-message">
|
||
<img src="images/large-spinner.gif">
|
||
<span> Working...</span>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="controlsTemplate">
|
||
<a id="logged-in-status" href="JavaScript:void(0);" class="secondary">{{text}}</a>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="actionsTemplate">
|
||
<a class="button" data-action="import" href="javascript:{}"><span data-action="import" class="button-menu">Import</span></a>
|
||
<!-- <a class="button" data-action="edit" href="javascript:{}"><span data-action="transform" class="button-menu">Edit</span></a> -->
|
||
<a class="button" data-action="export" href="javascript:{}"><span data-action="export" class="button-menu">Export</span></a>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="importActionsTemplate">
|
||
<li><a data-action="urlImport" class="menuAction" href="JavaScript:void(0);">JSON API</a></li>
|
||
<li><a data-action="pasteImport" class="menuAction" href="JavaScript:void(0);">Paste JSON</a></li>
|
||
<li><a data-action="uploadImport" class="menuAction" href="JavaScript:void(0);">Upload CSV</a></li>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="exportActionsTemplate">
|
||
<li><a data-action="csv" class="menuAction" href="JavaScript:void(0);">CSV</a></li>
|
||
<li><a data-action="json" class="menuAction" href="JavaScript:void(0);">JSON</a></li>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="titleTemplate"><span id="project-name-button" class="app-path-section">{{db_name}}</span></script>
|
||
<script type='text/mustache' class="bulkTemplate">http://{{host}}/{{db_name}}/_bulk_docs</script>
|
||
<script type='text/mustache' class="generatingTemplate"><div class="loading">Loading...</div></script>
|
||
|
||
<script type='text/mustache' class="tableContainerTemplate">
|
||
<div id="tool-panel">
|
||
<div id="summary-bar">
|
||
<span id="docCount"></span>
|
||
</div>
|
||
<div id="download">
|
||
</div>
|
||
</div>
|
||
<div id="view-panel">
|
||
<div class="viewpanel-header">
|
||
<div class="viewpanel-pagesize">
|
||
<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">
|
||
</div>
|
||
<div class="viewpanel-paging">
|
||
<a href="javascript:{}" class="first inaction">« first</a>
|
||
<a href="javascript:{}" class="previous inaction">‹ previous</a>
|
||
<span class="viewpanel-pagingcount">
|
||
1 - 10
|
||
</span>
|
||
<a href="javascript:{}" class="next action">next ›</a>
|
||
<a href="javascript:{}" class="last action">last »</a>
|
||
</div>
|
||
</div>
|
||
<div class="data-table-container">
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="signInTemplate">
|
||
<div class="dialog-header">
|
||
Sign in
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div class="grid-layout layout-tight layout-full">
|
||
<form name="sign-in-form" id="sign-in-form">
|
||
<table class="form-table">
|
||
<tbody>
|
||
<tr>
|
||
<th>
|
||
<label for="username">Username</label>
|
||
</th>
|
||
<td>
|
||
<input type="text" size="25" id="username-input" name="username">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>
|
||
<label for="password">Password</label>
|
||
</th>
|
||
<td>
|
||
<input type="password" size="25" id="password-input" name="password">
|
||
</td>
|
||
</tr>
|
||
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
|
||
</tbody>
|
||
</table>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<button class="okButton button"> Sign in </button>
|
||
<button class="cancelButton button">Cancel</button>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="urlImportTemplate">
|
||
<div class="dialog-header">
|
||
Download and import from a URL or API
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div class="grid-layout layout-full">
|
||
<p class="info">
|
||
Currently only <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>-enabled APIs are supported, for example:
|
||
</p>
|
||
<p class="info">
|
||
<code>https://api.github.com/repos/maxogden/recline/commits</code>
|
||
</p>
|
||
<form name="api-import-form" id="sign-in-form">
|
||
<table class="form-table">
|
||
<tbody>
|
||
<tr>
|
||
<th>
|
||
<label for="url">URL</label>
|
||
</th>
|
||
<td>
|
||
<input type="text" size="65" id="url-input" name="url">
|
||
</td>
|
||
</tr>
|
||
<input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px; display: none;" hidefocus="true" />
|
||
</tbody>
|
||
</table>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<button class="okButton button"> Fetch </button>
|
||
<button class="cancelButton button">Cancel</button>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="pasteImportTemplate">
|
||
<div class="dialog-header">
|
||
Import raw copy & pasted JSON
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div class="grid-layout layout-tight layout-full">
|
||
<p class="info">
|
||
Paste in an array of JSON objects representing the documents that you would like to insert into the database.
|
||
</p>
|
||
<p class="info">
|
||
<code>[{"woo": "pizza"}, {"tasty": "muffins"}]</code>
|
||
</p>
|
||
<div class="menu-container data-table-cell-editor">
|
||
<textarea class="data-table-cell-copypaste-editor" bind="textarea">{{value}}</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<button class="okButton button"> Import </button>
|
||
<button class="cancelButton button">Cancel</button>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="uploadImportTemplate">
|
||
<div class="dialog-header">
|
||
Upload and import a CSV
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div class="grid-layout layout-tight layout-full">
|
||
<strong>Please choose a CSV file to upload:</strong><br />
|
||
<input type="file" id="file" />
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<button class="okButton button"> Import </button>
|
||
<button class="cancelButton button">Cancel</button>
|
||
</div>
|
||
</script>
|
||
|
||
<script type='text/mustache' class="jsonTreeTemplate">
|
||
<div class="dialog-header">
|
||
Please highlight the array of JSON objects to convert to documents.
|
||
</div>
|
||
<div class="dialog-body">
|
||
<div id="document-container">
|
||
<div id="document-editor"></div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<button class="okButton button"> Import </button>
|
||
<button class="cancelButton button">Cancel</button>
|
||
</div>
|
||
</script>
|
||
</body>
|
||
</html>
|