Skip to content

Instantly share code, notes, and snippets.

@krisrice

krisrice/sql-replay.html

Created October 3, 2022 19:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save krisrice/ed8b9c9a0acf358b5b3a9c2fa856249b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save krisrice/ed8b9c9a0acf358b5b3a9c2fa856249b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sql-replay.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css" integrity="sha512-XgCw4Srl8lC1ECwcaHwAU0WnxQwHkqmInzg9wJLtGB7DRuMaXPuK2k9WJ2AwRDGdrgK9eJpZl2hUlLi2WQssmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://mattboldt.com/demos/typed-js/js/typed.custom.js"></script>
<script>$( document ).ready(function() {
var data = [
{
action: 'type',
strings: ["select * from emp;"],
output: `<pre>
+-------+----------+-------------+------+------------+--------------+------+--------+----+
| EMPNO | ENAME | JOB | MGR | HIREDATE | SAL | COMM | DEPTNO | |
+-------+----------+-------------+------+------------+--------------+------+--------+----+
| 7369 | "SMITH" | "CLERK" | 7902 | 12/17/1980 | 12:00:00 AM | 800 | | 20 |
| 7499 | "ALLEN" | "SALESMAN" | 7698 | 2/20/1981 | 12:00:00 AM | 1600 | 300 | 30 |
| 7521 | "WARD" | "SALESMAN" | 7698 | 2/22/1981 | 12:00:00 AM | 1250 | 500 | 30 |
| 7566 | "JONES" | "MANAGER" | 7839 | 4/2/1981 | 12:00:00 AM | 2975 | | 20 |
| 7654 | "MARTIN" | "SALESMAN" | 7698 | 9/28/1981 | 12:00:00 AM | 1250 | 1400 | 30 |
| 7698 | "BLAKE" | "MANAGER" | 7839 | 5/1/1981 | 12:00:00 AM | 2850 | | 30 |
| 7782 | "CLARK" | "MANAGER" | 7839 | 6/9/1981 | 12:00:00 AM | 2450 | | 10 |
| 7788 | "SCOTT" | "ANALYST" | 7566 | 12/9/1982 | 12:00:00 AM | 3000 | | 20 |
| 7839 | "KING" | "PRESIDENT" | | 11/17/1981 | 12:00:00 AM | 5000 | | 10 |
| 7844 | "TURNER" | "SALESMAN" | 7698 | 9/8/1981 | 12:00:00 AM | 1500 | 0 | 30 |
| 7876 | "ADAMS" | "CLERK" | 7788 | 1/12/1983 | 12:00:00 AM | 1100 | | 20 |
| 7900 | "JAMES" | "CLERK" | 7698 | 12/3/1981 | 12:00:00 AM | 950 | | 30 |
| 7902 | "FORD" | "ANALYST" | 7566 | 12/3/1981 | 12:00:00 AM | 3000 | | 20 |
| 7934 | "MILLER" | "CLERK" | 7782 | 1/23/1982 | 12:00:00 AM | 1300 | | 10 |
+-------+----------+-------------+------+------------+--------------+------+--------+----+</pre>`,
postDelay: 1000
},
{
action: 'type',
strings: ["select * from dept;"],
output: `<pre>
+--------+--------------+-----------+
| DEPTNO | DNAME | LOC |
+--------+--------------+-----------+
| 10 | "ASDF1" | "ASDF" |
| 20 | "RESEARCH" | "DALLAS" |
| 30 | "SALES" | "CHICAGO" |
| 40 | "OPERATIONS" | "BOSTON" |
+--------+--------------+-----------+
</pre>
`,
postDelay: 1000
},
{
action: 'type',
//clear: true,
strings: ['select JSON_OBJECT(*) from emp;'],
output: $('.json_object-output').html()
},
{
action: 'type',
strings: ["that was easy!", ''],
postDelay: 2000
}
];
runScripts(data, 0);
});
function runScripts(data, pos) {
var prompt = $('.prompt'),
script = data[pos];
if(script.clear === true) {
$('.history').html('');
}
switch(script.action) {
case 'type':
// cleanup for next execution
prompt.removeData();
$('.typed-cursor').text('');
prompt.typed({
strings: script.strings,
typeSpeed: 30,
callback: function() {
var history = $('.history').html();
history = history ? [history] : [];
history.push('$ ' + prompt.text());
if(script.output) {
history.push(script.output);
prompt.html('');
$('.history').html(history.join('<br>'));
}
// scroll to bottom of screen
$('section.terminal').scrollTop($('section.terminal').height());
// Run next script
pos++;
if(pos < data.length) {
setTimeout(function() {
runScripts(data, pos);
}, script.postDelay || 1000);
}
}
});
break;
case 'view':
break;
}
}
</script>
<style>
body {
background: #6D7074;
}
.terminal-window {
text-align: left;
width: 800px;
height: 640px;
border-radius: 10px;
margin: auto;
position: relative;
}
.terminal-window header {
background: #E0E8F0;
height: 30px;
border-radius: 8px 8px 0 0;
padding-left: 10px;
}
.terminal-window header .button {
width: 12px;
height: 12px;
margin: 10px 4px 0 0;
display: inline-block;
border-radius: 8px;
}
.terminal-window header .button.green {
background: #3BB662;
}
.terminal-window header .button.yellow {
background: #E5C30F;
}
.terminal-window header .button.red {
background: #E75448;
}
.terminal-window section.terminal {
color: white;
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
font-size: 11pt;
background: #30353A;
padding: 10px;
box-sizing: border-box;
position: absolute;
width: 100%;
top: 30px;
bottom: 0;
overflow: auto;
}
.terminal-window section.terminal .typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.terminal-data { display: none; }
.terminal-window .gray { color: gray; }
.terminal-window .green { color: green;}
</style>
</head>
<div class="terminal-window">
<header>
<div class="button green"></div>
<div class="button yellow"></div>
<div class="button red"></div>
</header>
<section class="terminal">
<div class="history"></div>
$&nbsp;<span class="prompt"></span>
<span class="typed-cursor"></span>
</section>
</div>
<!-- data -->
<div class="terminal-data json_object-output">
<pre>
| JSON_OBJECT(*) | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
|----------------------------------------------------------------------------------------------------------------------------------|----|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|----|
| {"EMPNO":7369,"ENAME":"SMITH","JOB":"CLERK","MGR":7902,"HIREDATE":"1980-12-17T00:00:00","SAL":800,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7499,"ENAME":"ALLEN","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-02-20T00:00:00","SAL":1600,"COMM":300,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7521,"ENAME":"WARD","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-02-22T00:00:00","SAL":1250,"COMM":500,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7566,"ENAME":"JONES","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-04-02T00:00:00","SAL":2975,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7654,"ENAME":"MARTIN","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-09-28T00:00:00","SAL":1250,"COMM":1400,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7698,"ENAME":"BLAKE","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-05-01T00:00:00","SAL":2850,"COMM":null,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7782,"ENAME":"CLARK","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-06-09T00:00:00","SAL":2450,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7788,"ENAME":"SCOTT","JOB":"ANALYST","MGR":7566,"HIREDATE":"1982-12-09T00:00:00","SAL":3000,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7839,"ENAME":"KING","JOB":"PRESIDENT","MGR":null,"HIREDATE":"1981-11-17T00:00:00","SAL":5000,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7844,"ENAME":"TURNER","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-09-08T00:00:00","SAL":1500,"COMM":0,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7876,"ENAME":"ADAMS","JOB":"CLERK","MGR":7788,"HIREDATE":"1983-01-12T00:00:00","SAL":1100,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7900,"ENAME":"JAMES","JOB":"CLERK","MGR":7698,"HIREDATE":"1981-12-03T00:00:00","SAL":950,"COMM":null,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7902,"ENAME":"FORD","JOB":"ANALYST","MGR":7566,"HIREDATE":"1981-12-03T00:00:00","SAL":3000,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| {"EMPNO":7934,"ENAME":"MILLER","JOB":"CLERK","MGR":7782,"HIREDATE":"1982-01-23T00:00:00","SAL":1300,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Elapsed: 00:00:00.009 | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| 14 rows selected. | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
</pre>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment