Replace Flipper with Spinner.

This commit is contained in:
Greyson Parrelli
2022-02-14 14:18:03 -05:00
parent 4bdea886e3
commit 874067909d
46 changed files with 1558 additions and 297 deletions

View File

@@ -0,0 +1,47 @@
<html>
{{> head title="Browse" }}
<body>
{{> prefix isBrowse=true}}
<!-- Table Selector -->
<form action="browse" method="post">
<select name="table">
{{#each tableNames}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
<input type="hidden" name="db" value="{{database}}" />
<input type="submit" value="browse" />
</form>
<!-- Data -->
{{#if table}}
<h1>{{table}}</h1>
{{else}}
<h1>Data</h1>
{{/if}}
{{#if queryResult}}
<p>{{queryResult.rowCount}} row(s).</p>
<table>
<tr>
{{#each queryResult.columns}}
<th>{{this}}</th>
{{/each}}
</tr>
{{#each queryResult.rows}}
<tr>
{{#each this}}
<td>{{this}}</td>
{{/each}}
</tr>
{{/each}}
</table>
{{else}}
Select a table from above and click 'browse'.
{{/if}}
{{> suffix}}
</body>
</html>

View File

@@ -0,0 +1,8 @@
<html>
{{> head title="Error :(" }}
<body>
Hit an exception while trying to serve the page :(
<hr/>
{{{this}}}
</body>
</html>

View File

@@ -0,0 +1,86 @@
<head>
<title>Spinner - {{ title }}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌀</text></svg>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html, body {
font-family: monospace;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
}
.query-input {
width: 100%;
height: 10rem;
margin-bottom: 8px;
}
li.active {
font-weight: bold;
}
ol.tabs {
margin: 16px 0px 8px 0px;
padding: 0px;
font-size: 0px;
}
.tabs li {
list-style-type: none;
display: inline-block;
padding: 8px;
border-bottom: 1px solid black;
font-size: 12px;
}
.tabs li.active {
border: 1px solid black;
border-bottom: 0;
}
.tabs a {
text-decoration: none;
color: black;
}
.collapse-header {
cursor: pointer;
}
.collapse-header:before {
content: "⯈ ";
font-size: 1rem;
}
.collapse-header.active:before {
content: "⯆ ";
font-size: 1rem;
}
h2.collapse-header, h2.collapse-header+div {
margin-left: 16px;
}
.hidden {
display: none;
}
table.device-info {
margin-bottom: 16px;
}
table.device-info, table.device-info tr, table.device-info td {
border: 0;
padding: 2px;
font-size: 0.75rem;
font-style: italic;
}
</style>
</head>

View File

@@ -0,0 +1,52 @@
<html>
{{> head title="Home" }}
<style type="text/css">
h2 {
font-size: 1.25rem;
}
</style>
<body>
{{> prefix isOverview=true}}
<h1 class="collapse-header active" data-for="table-creates">Tables</h1>
<div id="table-creates">
{{#if tables}}
{{#each tables}}
<h2 class="collapse-header" data-for="table-create-{{@index}}">{{name}}</h2>
<div id="table-create-{{@index}}" class="hidden">{{{sql}}}</div>
{{/each}}
{{else}}
None.
{{/if}}
</div>
<h1 class="collapse-header active" data-for="index-creates">Indices</h1>
<div id="index-creates">
{{#if indices}}
{{#each indices}}
<h2 class="collapse-header active" data-for="index-create-{{@index}}">{{name}}</h2>
<div id="index-create-{{@index}}">{{{sql}}}</div>
{{/each}}
{{else}}
None.
{{/if}}
</div>
<h1 class="collapse-header active" data-for="trigger-creates">Triggers</h1>
<div id="trigger-creates">
{{#if triggers}}
{{#each triggers}}
<h2 class="collapse-header active" data-for="trigger-create-{{@index}}">{{name}}</h2>
<div id="trigger-create-{{@index}}">{{{sql}}}</div>
{{/each}}
{{else}}
None.
{{/if}}
</div>
{{> suffix }}
</body>
</html>

View File

@@ -0,0 +1,31 @@
<h1>SPINNER</h1>
<table class="device-info">
<tr>
<td>Device</td>
<td>{{deviceInfo.name}}</td>
</tr>
<tr>
<td>Package</td>
<td>{{deviceInfo.packageName}}</td>
</tr>
<tr>
<td>App Version</td>
<td>{{deviceInfo.appVersion}}</td>
</tr>
</table>
<div>
Database:
<select id="database-selector">
{{#each databases}}
<option value="{{this}}" {{eq database this yes="selected" no=""}}>{{this}}</option>
{{/each}}
</select>
</div>
<ol class="tabs">
<li {{#if isOverview}}class="active"{{/if}}><a href="/?db={{database}}">Overview</a></li>
<li {{#if isBrowse}}class="active"{{/if}}><a href="/browse?db={{database}}">Browse</a></li>
<li {{#if isQuery}}class="active"{{/if}}><a href="/query?db={{database}}">Query</a></li>
</ol>

View File

@@ -0,0 +1,43 @@
<html>
{{> head title="Query" }}
<body>
{{> prefix isQuery=true}}
<!-- Query Input -->
<form action="query" method="post">
<textarea name="query" class="query-input" placeholder="Enter your query...">{{query}}</textarea>
<input type="hidden" name="db" value="{{database}}" />
<input type="submit" name="action" value="run" />
or
<input type="submit" name="action" value="analyze" />
</form>
<!-- Query Result -->
<h1>Data</h1>
{{#if queryResult}}
{{queryResult.rowCount}} row(s). <br />
{{queryResult.timeToFirstRow}} ms to read the first row. <br />
{{queryResult.timeToReadRows}} ms to read the rest of the rows. <br />
<br />
<table>
<tr>
{{#each queryResult.columns}}
<th>{{this}}</th>
{{/each}}
</tr>
{{#each queryResult.rows}}
<tr>
{{#each this}}
<td>{{this}}</td>
{{/each}}
</tr>
{{/each}}
</table>
{{else}}
No data.
{{/if}}
{{> suffix}}
</body>
</html>

View File

@@ -0,0 +1,17 @@
<script type="text/javascript">
function init() {
document.querySelectorAll('.collapse-header').forEach(elem => {
elem.onclick = () => {
console.log('clicked');
elem.classList.toggle('active');
document.getElementById(elem.dataset.for).classList.toggle('hidden');
}
});
document.querySelector('#database-selector').onchange = (e) => {
window.location.href = window.location.href.split('?')[0] + '?db=' + e.target.value;
}
}
init();
</script>