Add a 'Recent' tab to Spinner.

This commit is contained in:
Greyson Parrelli
2022-02-21 12:39:07 -05:00
parent acecd5f013
commit 9594be8fcf
20 changed files with 404 additions and 131 deletions

View File

@@ -1,8 +1,8 @@
<html>
{{> head title="Browse" }}
{{> partials/head title="Browse" }}
<body>
{{> prefix isBrowse=true}}
{{> partials/prefix isBrowse=true}}
<!-- Table Selector -->
<form action="browse" method="post">
@@ -70,6 +70,6 @@
<input type="submit" name="action" value="last" {{#if pagingData.lastPage}}disabled{{/if}} />
</form>
{{> suffix}}
{{> partials/suffix}}
</body>
</html>

View File

@@ -0,0 +1,89 @@
html, body {
font-family: 'Roboto Mono', monospace;
font-variant-ligatures: none;
font-size: 12px;
width: 100%;
}
select, input {
font-family: 'Roboto Mono', monospace;
font-variant-ligatures: none;
font-size: 1rem;
}
table, th, td {
border: 1px solid black;
font-size: 1rem;
}
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: 1rem;
}
.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;
}

View File

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

View File

@@ -1,99 +0,0 @@
<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">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<style type="text/css">
html, body {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
}
select, input {
font-family: 'JetBrains Mono', monospace;
font-size: 1rem;
}
table, th, td {
border: 1px solid black;
font-size: 1rem;
}
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: 1rem;
}
.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,15 @@
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();

View File

@@ -1,5 +1,5 @@
<html>
{{> head title="Home" }}
{{> partials/head title="Home" }}
<style type="text/css">
h1.collapse-header {
@@ -12,7 +12,7 @@
<body>
{{> prefix isOverview=true}}
{{> partials/prefix isOverview=true}}
<h1 class="collapse-header active" data-for="table-creates">Tables</h1>
<div id="table-creates">
@@ -50,6 +50,6 @@
{{/if}}
</div>
{{> suffix }}
{{> partials/suffix }}
</body>
</html>

View File

@@ -0,0 +1,14 @@
<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">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<style type="text/css">
</style>
</head>

View File

@@ -28,4 +28,5 @@
<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>
<li {{#if isRecent}}class="active"{{/if}}><a href="/recent?db={{database}}">Recent</a></li>
</ol>

View File

@@ -0,0 +1 @@
<script src="/js/main.js" type="text/javascript"></script>

View File

@@ -1,8 +1,8 @@
<html>
{{> head title="Query" }}
{{> partials/head title="Query" }}
<body>
{{> prefix isQuery=true}}
{{> partials/prefix isQuery=true}}
<!-- Query Input -->
<form action="query" method="post">
@@ -11,6 +11,8 @@
<input type="submit" name="action" value="run" />
or
<input type="submit" name="action" value="analyze" />
or
<button onclick="onFormatClicked(event)">format</button>
</form>
<!-- Query Result -->
@@ -38,6 +40,15 @@
No data.
{{/if}}
{{> suffix}}
{{> partials/suffix}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-formatter.min.js" integrity="sha512-JPoVzOHQvXbB4+lOX6GOBM3xOZhwAMKRYn2G0VpfPcwIixAAvPL+HKuaFuevm+i6Q4GktSKY/CxlcB/1BaV/6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
function onFormatClicked(e) {
e.preventDefault();
const queryInput = document.querySelector('.query-input')
queryInput.value = sqlFormatter.format(queryInput.value).replaceAll("! =", "!=").replaceAll("| |", "||");
}
</script>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<html>
{{> partials/head title="Home" }}
<style type="text/css">
h1.collapse-header {
font-size: 1.35rem;
}
h2.collapse-header {
font-size: 1.15rem;
}
table.recent {
width: 100%;
}
</style>
<body>
{{> partials/prefix isRecent=true}}
{{#if recentSql}}
<table class="recent">
{{#each recentSql}}
<tr>
<td>
{{formattedTime}}
</td>
<td>
<form action="query" method="post">
<input type="hidden" name="db" value="{{database}}" />
<input type="hidden" name="query" value="{{query}}" />
<input type="submit" name="action" value="run" />
<input type="submit" name="action" value="analyze" />
</form>
</td>
<td>{{query}}</td>
</tr>
{{/each}}
</table>
{{else}}
No recent queries.
{{/if}}
{{> partials/suffix }}
<script>
function onAnalyzeClicked(id) {
document.getElementById
}
</script>
</body>
</html>

View File

@@ -1,17 +0,0 @@
<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>