Location: PHPKode > projects > AJAX MySQL Admin > ajaxmysqladmin/www/index.html
<!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();" />&#160;<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();" />&#160;<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();" />&#160;<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>
Return current item: AJAX MySQL Admin