queryable
Version:
Nosql database that supports subset of mongodb operators
181 lines (152 loc) • 4.54 kB
HTML
<html>
<head>
<script src="../queryable.js"></script>
<style>
input {
border: none;
width:auto;
font-size: 14px;
padding: 2px;
}
input:hover {
background-color: #eee;
}
input:focus {
background-color: #ccf;
}
input:not(:focus) { text-align: right; }
</style>
</head>
<body>
<h3>Topics I need to cover:</h3>
<table id="books_table"> </table>
<button id="books_btn" >Add A Row</button>
<br />
<table id="topics_table"> </table>
<button id="topics_btn" >Add A Row</button>
<script>
function Topic( _name, _done, _com ) {
this.name = _name;
this.done = _done ? _done : false;
this.comment = _com ? _com : '';
}
var TOPICS = [
new Topic('priority queue',true),
new Topic('binary tree'),
new Topic('min heap'),
new Topic('max heap'),
new Topic('stack'),
new Topic('A*'),
new Topic('Red Black Tree'),
new Topic('AVL Tree'),
new Topic('linked list'),
new Topic('treap'),
new Topic('hashtable'),
new Topic('sorting algorithms'),
new Topic('big-O notation of everything'),
new Topic('binary search'),
new Topic('string algorithms'),
new Topic('graphs'),
new Topic('bit manipulation techniques'),
new Topic('STL Library'),
new Topic('Whiteboard problems'),
new Topic('Read Google paper on GFS'),
new Topic('Read Google paper on MapReduce'),
new Topic('learn Go')
];
var BOOKS = [
new Topic('Cracking the Coding Interview'),
new Topic('Head First Design Patterns'),
new Topic('Probability and Statistics by Morris H. DeGroot'),
new Topic('Introduction to Algorithms (CLRS)')
];
var TOPICS_TABLE = document.getElementById('topics_table');
var BOOKS_TABLE = document.getElementById('books_table');
var BOOKS_BUTTON = document.getElementById('books_btn');
var TOPICS_BUTTON = document.getElementById('topics_btn');
var INPUTS = [];
function input( attr, style ) {
var inp = document.createElement('input');
if ( attr ) {
for (var a in attr) {
if ( attr.hasOwnProperty(a) ) {
inp[a] = attr[a];
}
}
}
if ( style ) {
for ( var s in style ) {
if ( style.hasOwnProperty(s) ) {
inp.style[s] = style[s];
}
}
}
if ( inp.type === "text" ) {
inp.onkeydown = function(e) {
if ( e.keyCode === 13 ) {
if ( inp.blur && Object.prototype.toString.call(inp.blur).slice(8,-1) === "Function" )
inp.blur();
} else if ( e.keyCode === 27 ) {
inp.blurNosave();
}
};
inp.onfocus = function(e) {
inp.saveValue = inp.value;
}
inp.blurNosave = function() {
inp.value = inp.saveValue;
inp.blur();
}
}
INPUTS.push(inp);
return inp;
}
function input_sizes_recompute() {
var l = 0;
for ( var i = INPUTS.length; i >= 0; --i ) {
if ( INPUTS[i] && INPUTS[i].value && INPUTS[i].value.length > l )
l = INPUTS[i].value.length;
}
for ( var i = INPUTS.length; i >= 0; --i ) {
if ( INPUTS[i] )
INPUTS[i].size = l;
}
}
function spit_table( title, LIST, TABLE, callback )
{
var row = TABLE.insertRow(-1);
var elt = row.insertCell(-1);
elt.innerHTML = '<u><b><center>' + title + '</center></b></u>';
elt.colSpan = 3;
var id = elt.id = title.toLowerCase() + '_id';
row = TABLE.insertRow(-1);
row.insertCell(-1).innerHTML = 'item';
row.insertCell(-1).innerHTML = 'completed ';
row.insertCell(-1).innerHTML = 'comments';
LIST.forEach(function(topic,ind){
var row = TABLE.insertRow(-1);
row.insertCell(-1).appendChild(input({id:id+ind+'_0',value:topic.name},{fontWeight:'bold'}));
row.insertCell(-1).appendChild(input({id:id+ind+'_1',type:'checkbox',checked:topic.done}));
row.insertCell(-1).appendChild(input({id:id+ind+'_2',value:topic.comment ? topic.comment:''},{border:"1px solid #ccc"}));
});
input_sizes_recompute();
TABLE.newrow = (function(){
var row = this.insertRow(-1);
var ind = this.rows.length - 1;
var id = this.id;
row.insertCell(-1).appendChild(input({id:id+ind+'_0',value:''},{fontWeight:'bold'}));
row.insertCell(-1).appendChild(input({id:id+ind+'_1',type:'checkbox',checked:false}));
row.insertCell(-1).appendChild(input({id:id+ind+'_2',value:''},{border:"1px solid #ccc"}));
}).bind(TABLE);
if ( callback )
callback();
}
spit_table( "Books", BOOKS, BOOKS_TABLE, function() {
BOOKS_BUTTON.onclick = function() { BOOKS_TABLE.newrow() };
spit_table( "Topics", TOPICS, TOPICS_TABLE );
TOPICS_BUTTON.onclick = function() { TOPICS_TABLE.newrow() };
});
</script>
</body>
</html>