Skip to content

Instantly share code, notes, and snippets.

@krisrice

krisrice/jsbin.ewEmAfeb.html

Created December 31, 2013 21:32
Show Gist options
  • Save krisrice/8202424 to your computer and use it in GitHub Desktop.
Save krisrice/8202424 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ewEmAfeb.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<title>JS Bin</title>
<style type="text/css">
.demo {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}.demo table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.demo tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.demo table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.demo tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.demo tr:hover td{
}
.demo tr:nth-child(odd){ background-color:#e5e5e5; }
.demo tr:nth-child(even) { background-color:#ffffff; }.demo td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:3px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.demo tr:last-child td{
border-width:0px 1px 0px 0px;
}.demo tr td:last-child{
border-width:0px 0px 1px 0px;
}.demo tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="accordion">
<!-- CREATE -->
<h3>Create Collection</h3>
<div>
<form id="createForm" action="javascript:void(0);">
<button id="create">Create</button>
<input type="text" id="createName" name="createName"/>
</form>
</div>
<!-- PUTS -->
<h3>Put Items into the Collection</h3>
<div>
<form id="putForm" action="javascript:void(0);">
<button id="puts">Put</button>
<select id="putdbname" name="putdbname" style="width:200px;">
</select>
<select id="num" name="num" style="width:200px;">
<option>1</option>
<option>10</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
</select>
</form>
</div>
<!-- QUERY -->
<h3>Query a Collection</h3>
<div>
<form id="queryForm" action="javascript:void(0);">
<button id="query">Query</button>
<select id="querydbname" name="querydbname" style="width:200px;">
</select>
<input type="text" id="search" name="search"/>
</form>
</div>
<!-- DELETE -->
<h3>Delete a Collection</h3>
<div>
<form id="deleteForm" action="javascript:void(0);">
<button id="delete">Delete</button>
<select id="deldbname" name="deldbname" style="width:200px;">
</select>
</form>
</div>
</div>
<div id="log">Log:</div>
</body>
</html>
Raw
jsbin.ewEmAfeb.js
var url = "https://apex.oracle.com/pls/apex/dbtools/db";
var myDB = new db(url);
function createCollection2(name){
console.log(name);
myDB.createDB(name);
loadCollectionNames2();
}
function deleteCollection2(name){
myDB.deleteDB(name);
loadCollectionNames2();
}
function createItems2(dbName,num){
// set to the select list value
myDB.setCurrentDB(dbName);
$.ajax({
url: "https://apex.oracle.com/pls/apex/dbtools/names/random?num=" + num,
contentType: "application/json",
type: "GET",
success: function (data) {
$("#log").append("<div>Got:"+ data.items.length+ "</div>");
$.each(data.items, function(key,value) {
var uri = "https://apex.oracle.com/pls/apex/dbtools/db/" + myDB.currentName + "/" + value.guid;
myDB.putItem(value,value.guid);
console.log("Added:" + JSON.stringify(value));
$("#log").prepend("<div>Added:<a href='"+uri+"' target='_new'>"+ uri+ "</a></div>");
});
}
});
}
function loadCollectionNames2(){
var data = myDB.listDBs(function(data){
// clear old select list
$('#putdbname').find('option').remove();
$('#querydbname').find('option').remove();
$('#deldbname').find('option').remove();
// add in new select list
$.each(data.items, function(key,value) {
var cname = value.collection_name;
$('#putdbname').append($("<option></option>").attr("value",cname).text(cname));
$('#querydbname').append($("<option></option>").attr("value",cname).text(cname));
$('#deldbname').append($("<option></option>").attr("value",cname).text(cname));
});
});
}
function queryItems2(dbName,query){
//
myDB.setCurrentDB(dbName);
myDB.query(query, function(data){
$("#log").prepend("<div class='demo'><table id='results'></table></div>");
$.each(data.items, function(key,value) {
var row="<tr>";
jQuery.each(value, function(i, val) {
row = row +"<td>" + val+"</td>";
});
$("#results").append(row + "</tr>");
});
});
}
//
// Document Ready Bindings
//
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
// setup buttons
$("#create").click(function(){
createCollection2($("#createName").val());
});
$("#puts").click(function(){
createItems2($("#putdbname").val(),$("#num").val());
});
$("#query").click(function(){
queryItems2($("#querydbname").val(),$("#search").val());
});
$("#delete").click(function(){
deleteCollection2( $("#deldbname").val() );
});
// load names
loadCollectionNames2();
});
//
// Simple Library Calls
//
function db(baseUrl){
this.currentUrl = baseUrl;
this.currentName = null;
}
db.prototype.setCurrentDB = function(name){
this.currentName = name;
};
db.prototype.createDB = function(name){
var sendInfo = { 'name' : name };
json = JSON.stringify(sendInfo);
console.log(json);
$.ajax({
url: this.currentUrl + "/creates",
contentType: "application/json",
data : json,
type: "POST",
success: function (data) {
console.log(data);
this.currentName = name;
}
});
};
db.prototype.listDBs = function(callback){
$.ajax({
url: this.currentUrl + "/list",
contentType: "application/json",
type: "GET",
success: function (data) {
console.log(data);
callback(data);
}
});
};
db.prototype.putItem = function(value,id){
var uri = this.currentUrl + "/" + this.currentName + "/" + id;
$.ajax({
url: uri,
type: "PUT",
data : JSON.stringify(value)
});
};
db.prototype.deleteDB = function(name){
$.ajax({
url: this.currentUrl + "/" + name,
type: "DELETE",
success: function (data) {
console.log(data);
}
});
};
db.prototype.query = function(query,callback){
var uri = this.currentUrl + "/" + this.currentName;
console.log("Query:"+uri);
$.ajax({
url: uri,
type: "GET",
success: function (data) {
var d=jQuery.parseJSON( data );
console.log(d);
callback(d);
}
});
};
//
// Filter all AJAX calls and time them
//
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.start = new Date().getTime();
if ( options.success ) {
options.realsuccess = options.success;
}
options.success = function( data ) {
var end = new Date().getTime();
$("#log").prepend("<div>Elapsed:"+ (end - options.start)+ "ms</div>");
if ( options.realsuccess ) options.realsuccess( data );
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment