<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX MySQL Admin</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="assets/css/all.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/flexigrid.css" type="text/css" media="all" />
<link rel="stylesheet" href="assets/css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="assets/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="assets/js/ui.core.packed.js"></script>
<script type="text/javascript" src="assets/js/ui.draggable.packed.js"></script>
<script type="text/javascript" src="assets/js/flexigrid.js"></script>
<script type="text/javascript" src="assets/js/thickbox-compressed.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON ("api/settings.php?action=list",
function(json) {
createDatabases ();
if (typeof json.host == "undefined") {
showSettings ();
} else {
$('#dbhost').val (json.host);
$('#dbport').val (json.port);
$('#dbuser').val (json.username);
$('#dbpass').val (json.password);
if (json.name != '') {
openDatabase (json.name);
}
}
}
);
createProperties ('', '');
});
var index = 0, zmax = 0;
var selectedTable = '';
function statusMessage (msg) {
$('#status').empty().html ('<div class="statusmessage">' + msg + '</div>');
}
function openDatabase (dbname) {
$('#navigator a.active').each(function(){$(this).removeClass('active');});
$('#navigator a').each(function(){if($(this).html()==dbname) $(this).addClass('active');});
$.getJSON("api/databases.php?set=" + dbname,
function(json){
if (json.response == 1) {
$('#sandbox').empty();
index = 0;
$.getJSON("api/objects.php?action=list",
function (json) {
if (typeof json.response == "undefined") {
for (var i = 0; i < json.tables.length; i ++) {
createTable (json.tables [i]);
}
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
}
);
}
function createDatabases () {
$("#databases").flexigrid (
{
url: 'api/databases.php',
dataType: 'json',
colModel : [
{display: 'id', name : 'id', width : 10, sortable : true, align: 'center'},
{display: 'Name', name : 'title', width : 148, sortable : true, align: 'left'}
],
buttons : [
{name: 'Add', bclass: 'adddatabase', onpress : dbButton},
{name: 'Delete', bclass: 'deletedatabase', onpress : dbButton},
{separator: true}
],
sortname: "id",
sortorder: "asc",
singleSelect: true,
title: 'Databases',
resizable: false,
clickCell: function (t, g) {
openDatabase ($('div:eq(1)', t).html ());
},
width: 201,
height: 500
}
);
}
function createTable (title) {
var top = 25 + (index * 25);
if (top > $('#sandbox').height () - 200) top = $('#sandbox').height () - 200;
var left = 25 + (index * 25);
if (left > $('#sandbox').width () - 260) left = $('#sandbox').width () - 260;
$('#sandbox').append ('<div class="object_wrapper" id="object' + index + '_wrapper" style="display:none; top:' + top + 'px; left:' + left + 'px"><p class="title">' + title + '</p><span class="close"><a href="javascript:removeTable(' + index + ',\'' + title + '\');"><img src="assets/img/button-remove-table.png" /></a></span><table id="object' + index + '"></table></div>');
$("#object" + index).flexigrid (
{
url: 'api/object.php?title=' + title,
dataType: 'json',
colModel : [
{display: 'id', name : 'id', width : 10, sortable : true, align: 'center'},
{display: 'Label', name : 'label', width : 100, sortable : true, align: 'left'},
{display: 'Type', name : 'type', width : 60, sortable : true, align: 'left'},
{display: 'Size', name : 'size', width : 20, sortable : true, align: 'left'}
],
buttons : [
{name: 'Add', bclass: 'add', onpress : tableButton},
{name: 'Delete', bclass: 'delete', onpress : tableButton},
{separator: true}
],
sortname: "id",
sortorder: "asc",
singleSelect: true,
showTableToggleBtn: true,
resizable: false,
useRp: false,
width: 260,
height: 200,
clickCell: function (t, g) {
if (selectedTable != '') {
selectedTable = $(t).parents(".object_wrapper");
focusFront (selectedTable);
var tname = $('.title', selectedTable).html ();
var name = $('div:eq(1)', t).html ();
refreshProperties (tname,name);
}
},
onToggleCol: function () {
alert ("Toggle");
}
}
);
$("#object" + index + "_wrapper").draggable(
{
handle: '.title',
containment: '#sandbox'
}
);
$("#object" + index + "_wrapper").mousedown (
function () {
focusFront (this);
}
);
$('#object' + index + '_wrapper').show ();
selectedTable = '#object' + index + '_wrapper';
index ++;
}
function focusFront (obj) {
var zobj = obj;
var zmax = $(obj).css('z-index') * 1;
var original = zmax;
$('.object_wrapper').each(function() {
var cur = $(this).css('z-index') * 1;
if (cur > original) {
zmax = cur;
var back = cur - 1;
$(this).css('z-index',back);
} else if (cur == original && this != zobj) {
zmax ++;
}
});
$(obj).css('z-index', zmax);
// statusMessage ("zmax:" + zmax);
selectedTable = obj;
}
function refreshProperties (tablename,collabel) {
$('#propertiesTable').flexOptions ({url: 'api/properties.php?action=list&tname=' + tablename + '&label=' + collabel});
$('#propertiesTable').flexReload ();
// statusMessage (tablename + "," + collabel);
}
function createProperties (tablename,collabel) {
$("#propertiesTable").flexigrid (
{
url: 'api/properties.php?action=list',
dataType: 'json',
colModel : [
{display: 'name', name : 'name', width : 90, sortable : true, align: 'left'},
{display: 'value', name : 'value', width : 90, sortable : true, align: 'left'}
],
buttons : [
{separator: true}
],
sortname: "name",
sortorder: "asc",
title: 'Properties',
singleSelect: true,
resizable: false,
width: 170,
height: 500
}
);
}
function dbButton (com,grid) {
if (com=='Delete') {
$('#navigator a.active').each (function () {
var dbname = $(this).html ();
if (confirm ("Are you sure you want to remove the database '" + dbname + "'?")) {
$.getJSON ("api/objects.php?action=removedb&name=" + dbname,
function (json) {
if (json.response == 1 || json.response == 11) {
$("#databases").flexReload();
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
});
} else if (com=='Add') {
tb_show("Add Database","#TB_inline?height=300&width=300&inlineId=adddatabase&modal=true","");
}
}
function tableButton (com,grid) {
if (com=='Delete') {
$('.trSelected', grid).each (function () {
var collabel = $('td:eq(1) div', this).html();
if (confirm ('Are you sure you want to remove the column \'' + collabel + '\'?')) {
var tname = $('.title', selectedTable).html ();
var object = $('table', selectedTable);
$.getJSON ("api/objects.php?action=removecol&tname=" + tname + "&label=" + collabel,
function (json) {
if (json.response == 1) {
$(object).flexReload();
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
});
} else if (com=='Add') {
tb_show("Add Column","#TB_inline?height=300&width=300&inlineId=addcolumn&modal=true","");
}
}
function addColumn () {
if (selectedTable != '') {
var tname = $('.title', selectedTable).html ();
var object = $('table', selectedTable);
var collabel = $('#collabel').val();
var coltype = $('#coltype').val();
var colsize = $('#colsize').val();
if (collabel == '') {
alert ('Please enter a column label to continue.');
} else if (coltype == '') {
alert ('Please enter a column type to continue.');
} else {
$.getJSON ("api/objects.php?action=addcol&tname=" + tname + "&label=" + collabel + "&type=" + coltype + "&size=" + colsize,
function (json) {
if (json.response == 1) {
tb_remove();
$(object).flexReload();
} else if (json.response == 200) {
alert ('This column label already exists.');
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
}
}
function addTable () {
var tablename = $('#tablename').val();
if (tablename == '') {
alert ('Please enter a table name to continue.');
} else {
$.getJSON ("api/objects.php?action=addtable&name=" + tablename,
function (json) {
if (json.response == 1) {
tb_remove();
createTable (tablename);
} else if (json.response == 100) {
alert ('This table already exists.');
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
}
function addDatabase () {
var dbname = $('#dbname').val();
if (dbname == '') {
alert ('Please enter a database name to continue.');
} else {
$.getJSON ("api/objects.php?action=adddb&name=" + dbname,
function (json) {
if (json.response == 1) {
tb_remove();
$("#databases").flexReload();
openDatabase (dbname);
} else if (json.response == 10) {
alert ('This database already exists.');
} else {
alert ('The database could not be added.');
}
}
);
}
}
function removeTable (tableindex,tablename) {
if (confirm ("Are you sure you want to remove the table '" + tablename + "'?")) {
$.getJSON ("api/objects.php?action=removetable&name=" + tablename,
function (json) {
if (json.response == 1 || json.response == 101) {
$('#object' + tableindex + '_wrapper').remove();
} else if (json.response == 0) {
alert (json.mysqlerror);
}
}
);
}
}
function showSettings () {
tb_show("Settings","#TB_inline?height=300&width=300&inlineId=settings","");
$('#dbhost').focus ();
}
function settings () {
var dbhost = $('#dbhost').val ();
var dbport = $('#dbport').val ();
var dbuser = $('#dbuser').val ();
var dbpass = $('#dbpass').val ();
if (dbhost == '') {
alert ('Please enter a host name.');
$('#dbhost').focus ();
} else if (dbport == '') {
alert ('Please enter a port number (the default is 3306).');
$('#dbport').focus ();
} else if (dbuser == '') {
alert ('Please enter a user name.');
$('#dbuser').focus ();
} else {
if (confirm('Save these database settings?')) {
$.getJSON ("api/settings.php?action=set&dbhost=" + dbhost + "&dbport=" + dbport + "&dbuser=" + dbuser + "&dbpass=" + dbpass,
function (json) {
if (json.response == 1) {
tb_remove ();
$("#databases").flexReload ();
$("#sandbox").empty ();
} else {
alert ("There was a problem saving your settings.");
}
}
);
}
}
}
function generateTomcat () {
$('#tomcatProgress').show ();
$('#tomcatForm').hide ();
$.getJSON ("api/generate.php?action=tomcat",
function (json) {
$('#tomcatProgress').hide();
$('#tomcatForm').show ();
}
);
}
</script>
</head>
<body>
<div id="page">
<div id="header">
<div class="options">
<ul>
<li><a href="javascript:showSettings ();">settings</a></li>
</ul>
</div>
</div>
<div id="navigator">
<table id="databases"></table>
</div>
<div id="viewer">
<div class="mDiv">
<div class="ftitle">Tables</div>
</div>
<div id="toolbox">
<div class="tDiv">
<div class="tDiv2">
<div class="fbutton">
<div>
<span class="addtable" style="padding-left: 26px;"><a href="#TB_inline?height=300&width=300&inlineId=addtable" title="Add Table" class="thickbox">Add Table</a></span>
</div>
</div>
<div class="btnseparator"></div>
<div class="fbutton">
<div>
<span class="gentomcat" style="padding-left: 26px;"><a href="#TB_inline?height=400&width=400&inlineId=gentomcat" title="Generate Tomcat Application" class="thickbox">Generate (tomcat)</a></span>
</div>
</div>
</div>
</div>
</div>
<div id="sandbox">
</div>
</div>
<div id="properties">
<table id="propertiesTable"></table>
</div>
<div id="status">
<div class="statusmessage">...</div>
</div>
</div>
<div id="addcolumn" style="display:none">
<div class="error"></div>
<form id="columnForm" name="columnForm">
<div id="formrow">
<label for="name">Label:</label>
<input type="text" name="collabel" id="collabel" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<label for="name">Type:</label>
<input type="text" name="coltype" id="coltype" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<label for="name">Size:</label>
<input type="text" name="colsize" id="colsize" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<input type="button" value="Create" onclick="return addColumn();" /> <input type="button" value="Cancel" onclick="tb_remove();" />
</div>
</form>
</div>
<div id="addtable" style="display:none">
<div class="error"></div>
<form id="tableForm" name="tableForm">
<div id="formrow">
<label for="name">Name:</label>
<input type="text" name="tablename" id="tablename" value="" size="40" maxlength="50" />
</div>
<div id="formrow">
<input type="button" value="Create" onclick="return addTable();" /> <input type="button" value="Cancel" onclick="tb_remove();" />
</div>
</form>
</div>
<div id="adddatabase" style="display:none">
<div class="error"></div>
<form id="tableForm" name="tableForm">
<div id="formrow">
<label for="name">Name:</label>
<input type="text" name="dbname" id="dbname" value="" size="40" maxlength="50" />
</div>
<div id="formrow">
<input type="button" value="Create" onclick="return addDatabase();" /> <input type="button" value="Cancel" onclick="tb_remove();" />
</div>
</form>
</div>
<div id="settings" style="display:none">
<div class="error"></div>
<form id="settingsForm" name="settingsForm">
<div id="formrow">
<label for="name">Host name:</label>
<input type="text" name="dbhost" id="dbhost" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<label for="dbport">Post number:</label>
<input type="text" name="dbport" id="dbport" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<label for="dbuser">Username:</label>
<input type="text" name="dbuser" id="dbuser" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<label for="dbpass">Password:</label>
<input type="password" name="dbpass" id="dbpass" value="" size="40" maxlength="255" />
</div>
<div id="formrow">
<input type="button" value="Apply" onclick="return settings();" />
</div>
</form>
</div>
<div id="gentomcat" style="display:none">
<div class="error"></div>
<form id="tomcatForm" name="tomcatForm">
<div id="formrow">
<input type="button" value="Generate" onclick="return generateTomcat();" />
</div>
</form>
<div id="tomcatProgress" style="display:none">
<img src="assets/img/generating.gif" />
</div>
</div>
</body>
</html>