node-mongo-admin
Version:
A simple web application to visualize mongo data inspired by PHPMyAdmin
143 lines (135 loc) • 6.05 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Node Mongo Admin</title>
<link type="text/css" rel="stylesheet" href="css.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="clipboard.min.js"></script>
<script type="text/javascript" src="Populated.js"></script>
<script type="text/javascript" src="Storage.js"></script>
<script type="text/javascript" src="Select.js"></script>
<script type="text/javascript" src="Input.js"></script>
<script type="text/javascript" src="DataSelector.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="explore.js"></script>
<script type="text/javascript" src="Menu.js"></script>
<script type="text/javascript" src="Panel.js"></script>
<script type="text/javascript" src="Populate.js"></script>
<script type="text/javascript" src="Query.js"></script>
<script type="text/javascript" src="Simple.js"></script>
<script type="text/javascript" src="Distinct.js"></script>
<script type="text/javascript" src="Count.js"></script>
<script type="text/javascript" src="Aggregate.js"></script>
<script type="text/javascript" src="Export.js"></script>
<script type="text/javascript" src="Plot.js"></script>
<script type="text/javascript" src="header.js"></script>
<script type="text/javascript" src="auto-complete/Search.js"></script>
<script type="text/javascript" src="auto-complete/Parse.js"></script>
<script type="text/javascript" src="auto-complete/Suggest.js"></script>
<script type="text/javascript" src="auto-complete/AutoComplete.js"></script>
<script type="text/javascript" src="auto-complete/Replacer.js"></script>
</head>
<body>
<table id="sticky-table-header"></table>
<header>
<div class="header-contet">
<h1>Node Mongo Admin</h1>
<p id="mode-buttons" class="query-buttons">
</p>
</div>
</header>
<form id="query-form">
<span class="query-structure-text"></span>
<pre style="margin:0">use <span id="query-connections"></span></pre>
<pre>db.<span id="query-collections"></span><span
id="query-simple">.<span id="simple-find">find</span>({<span id="simple-selector" ></span>}, {<span id="simple-select"></span>}).sort({<span id="simple-sort"></span>}).limit(<span id="simple-limit"></span>)</span><span
id="query-distinct">.distinct('<span id="distinct-field"></span>', {<span id="distinct-selector"></span>})</span><span
id="query-aggregate">.aggregate([ <span class="add" id="aggregate-add"></span>
<span id="aggregate-stages"></span>])</span><span
id="query-count">.count({<span id="count-selector"></span>})</span> <span class="copy" title="Copy this query to use it on MongoDB Shell" id="query-copy"></span></pre>
<p class="query-buttons">
<input type="submit" value="Execute" class="execute-btn" id="query-execute">
<input type="button" value="Export data" class="border-btn" id="export" style="display:none">
<input type="button" value="Plot data" class="border-btn" id="plot">
<input type="button" value="Return selected" class="border-btn" id="return-selected" style="display:none">
<span class="query-refresh">
<label>
<input type="checkbox" id="query-refresh"> Auto-refresh
<span style="display:none" id="query-refresh-options">every
<select id="query-refresh-interval">
<option value="5">5s</option>
<option value="10" selected>10s</option>
<option value="30">30s</option>
<option value="60">60s</option>
</select>
</span>
</label>
</span>
<span id="query-loading" style="display: none">loading</span>
</p>
</form>
<div id="plot-options" style="display:none; padding:0 20px;">
<div id="plot-wrapper" class="plot-wrapper" style="width: 480px; height: 360px">
<div id="plot-canvas" class="plot-canvas"></div>
<div class="plot-actions">
<button id="plot-export" class="border-btn">Export image</button>
<button id="plot-set-size" class="border-btn">Set size</button>
</div>
</div>
<h2 class="plot-options-title">Plot options</h2>
<div>
Chart title: <span id="plot-title"></span>
</div>
<div>
Chart type:
<select id="plot-type">
<option value="area">Area</option>
<option value="bar">Bar</option>
<option value="column">Column</option>
<option value="histogram">Histogram</option>
<option value="line">Line</option>
<option value="pie">Pie</option>
</select>
<select id="plot-stacked">
<option value="no">Not stacked</option>
<option value="yes">Stacked</option>
<option value="percent">Percent stacked</option>
</select>
</div>
<div>
<span id="plot-x-axis-label">X axis</span>: <span id="plot-x-axis"></span>
</div>
<div>
Series: <span class="add" id="plot-add-series"></span>
<ol id="plot-series">
</ol>
</div>
<button id="plot-clear" class="border-btn">Close chart</button>
</div>
<p id="query-controls" class="pagination">
<span id="query-prev" class="prev-off"></span>
<span id="query-page" class="pagination-text"></span>
<span id="query-next" class="next-off"></span>
</p>
<p id="query-unhide-p" style="display:none">
<input type="button" value="Unhide columns" id="query-unhide" class="border-btn" style="margin: 0 10px;">
</p>
<table id="query-result"></table>
<p id="query-controls2" style="display:none" class="pagination">
<span id="query-prev2" class="prev-off"></span>
<span id="query-page2" class="pagination-text"></span>
<span id="query-next2" class="next-off"></span>
</p>
<div id="explore-window" class="window" style="display: none">
<div class="window-content">
<h1>Explore object</h1>
<p>
<input type="button" value="Show as JSON" id="explore-show" class="border-btn">
</p>
<div class="json" id="explore-json"></div>
</div>
</div>
</body>
</html>