_dev/util/v_database.php

<?php defined('START') and AUTH_OK or die;
 
if (START == 'ajax'):
 
switch (PAGE):
    case 's': set('tbls', serialize(json_decode($PVAL, true))); break;
    case 'r': echo json_encode(unserialize($tbls)); break;
    case 'st': 
        $ary = Record::ary(7); # 52618  7
        echo implode("\n", $ary[1][2]);
        break;
endswitch;
 
else: # HTML PAGE
 
$div = '<div class="bb %s"><div class="fr nu"><a href="javascript:;" onclick="%s(this)">%s</a></div><span>%s</span> <span>%s</span> <span>%s</span></div>';
$tables = fetch(sql("show table status where left(name,5)<>'_dev_'"), 0);
#trace($tables);
for ($out = ''; list($table, $d) = each($tables); $out .= '</div>') {
    $out .= '<div class="tpl">';
    $out .= sprintf($div, 'blue', 'acn', '+', $table, "<b>$d[3]r</b>", "0f");
    $q = sql("explain `$table`");
    for ($i = 0; $r = fetch($q, true); $i++) {
        if ($r[3]) $r[0] = "<b>$r[0]</b>";
        $type = $r[1].('NO'==$r[2]?' !0 ':' ').($r[5] ? ' AI' : ($r[4] === null ? '' : "'$r[4]'"));
        $out .= sprintf($div, 'y', 'dcn', 'X', pad00($i), $r[0], $type);
    }
}
?><form id="f1" style="display:none">
<div id="top">
    <label id="allow"><input type="checkbox" />allow drop table</label>
    <?=pad()?><a href="javascript:cst()">Create standard tables</a>
</div>
<div id="hold">
<div id="bh" title="drag to/from from here to create/drop mysql tables">table's hole</div>
<div id="store"><?=$out?></div>
<div id="tpl"><div class="tpl"><?
printf($div, 'blue', 'acn', '+', '', '', '0f');
printf($div, 'y', 'dcn', 'X', '00', 'id', 'int(11) ^null ai');
printf($div, 'y', 'dcn', 'X', '01', 'name', 'varchar(100)');
printf($div, 'y', 'dcn', 'X', '02', 'dt', 'datetime'); ?></div></div>
</div>
<pre id="log"></pre>
</form>
<script type="text/javascript">
var hedit, mtv, drag, ztop = 1, create = 0, tables = ['<?=implode("','", array_keys($tables))?>'];
function walk(func) {
    var name, ary = [];
    $$('div', 'store', 'tpl', function(el, i) {
        ary[i] = [name = el.$$('span', 0).html(), el];
        if (func) func(el, i, name);
    });
    return ary;
}
function runsql(sql) {
    var pos;
    ajax('sql_query&sql=' + e$(sql = trim(sql)) + '&pos=-1', function(r, err) {
        pos = r.indexOf('<hr>');
        if (-1 != pos) r = r.substr(pos + 4);
        html('log', 'ab', sql + ' | ' + trim(r));
    });
}
function cst() {
    ajax('2&st=', function(r, err) {
        runsql(r); //alert
    });
}
function _loaded(e) {
    walk(function(div, i) {
        div.$({left: 170 + i * 16, top: 149 + 16 * i})
        set_tbl(div)
    });
    setTimeout(function () {
        ajax('2&r=1', function(r, err) {
 
    //        walk(function(el, j, name) {
    //            var dev = false;
    //            el.style.display == 'none' ? i == 2 ^ dev && a$show(el) : i == 1 ^ dev && a$hide(el);
    //        })
 
            var json = callback(r, err, '(visual) ');
            walk(function(div, i, name) {
                if ('object' == typeof json[name]) a$move(div, [json[name].x, json[name].y]);
            });
        });
    }, 300);
    $$('input', 'top', function(input, i) {
        input.onclick = function() {
            switch (i) {
                case 0: $('bh', {width: input.checked ? 90 : 96, padding: input.checked ? '5px 0' : '8px 0', border: input.checked ? '3px solid red' : 0});
                break; //input.$(-1, {background: input.checked ? 'pink' : '#fff'});
            }
        }
    });
    hedit = $().onclick = function() {
        $().$$('input', 'edit', function(input) {
            var span = input.html(-1, input.value);
            if ('bb blue' == span.$(-1).className && span.old != span.html()) {
                runsql('rename table ' + span.old + ' to ' + span.html())
            }
        })
    }
}
$('bh').onmouseout = function(e) {
    this.$({background:'#000'});
    if (create) create++;
}
$('bh').onmousedown = function(e) {
    create = 1;
    this.$({background:'red'});
    html('store', 'ab', get_tpl()).$$('span', 0).html('table' + ztop);
    var div = $$('div', 'store', 0, {left:e.clientX - 30, top:e.clientY - 5});
    set_tbl(div, e)
}
function set_tbl(tbl, event) {
    var under_hole = false, xy = [];
    tbl.$$('div', 'bb', function(div, i) {
        var mark = function() {
            $().$$('div', 'y', function(bb) {
                bb.className = bb == div ? 'bb y act2' : 'bb y'
            })
        }
        div.$$('span', function(span, j) {
            span.oncontextmenu = function() {
                hedit()
                if (i) mark()
                this.html('<input class="edit" value="' + (this.old = this.html()) + '">');
                this.firstChild.focus();
                return false;
            }
        })
        if (i) { // columns
            div.onclick = mark
            div.$$('span', function(span, i) {
                if (!i) span.ondblclick = function() {
                    var ash = div.$$('span', 0).html(), ast = div.$$('span', 0).text();
                    var table = div.$(-1).$$('span', 0).html();
                    runsql(ash == ast
                        ? 'create index `' + ast + '` on `' + table + '` (`' + ast + '`) -- '
                        : 'drop index `' + ast + '` on `' + table + '` -- '
                    )
                }
            })
        } else { // head
        }
    })
    var tbl_name = 'table' + ztop;
    tbl.$({width:15 + 16 * Math.floor(tbl.clientWidth / 16), zIndex:ztop++});
    a$drag(tbl, tbl.$$('div', 0), function(el, e) { // DOWN
        xy = [parseInt(el.style.left), parseInt(el.style.top)];
        walk(function(div) {
            if (div.style.zIndex > el.style.zIndex) div.style.zIndex--;
            div.className = 'tpl' + (el == div ? ' act1' : '');
        })
        el.style.zIndex = ztop;
    }, function(el, e) { // UP
        if (under_hole) {
            if (!create && !$('allow').firstChild.checked) a$move(el, xy);
            else {
                el.$('');
                var mz = 0
                walk(function(div) { if (div.style.zIndex > mz) mz = div.style.zIndex });
                walk(function(div) { if (div.style.zIndex == mz) div.$({zIndex: ztop}).className = 'tpl act1' });
                if (!create) runsql('drop table ' + tbl_name);
            }
        } else {
            el.style.left = 9 + 16 * Math.floor(el.offsetLeft / 16);
            el.style.top = 6 + 16 * Math.floor(el.offsetTop / 16);
            if (create > 1) runsql('create table ' + tbl_name + ' (qq char(1))');
        }
        create = 0;
        $('bh', {background: '#000'});
    }, function(el, e) { // MOVE
        if (mtv) clearTimeout(mtv);
        mtv = setTimeout(function () { // store position
            var s = {};
            walk(function(div, i, name) {
                s[name] = {x: parseInt(div.style.left), y: parseInt(div.style.top)}
            });
            ajax('2&s=' + e$(JSON.stringify(s)), function() {
                key_F2();
            });
        }, 3000);
        under_hole = parseInt(el.style.left) < 260 && parseInt(el.style.top) < 130;
        $('bh', {background: under_hole ? 'red' : '#000'});
    }, event);
}
function get_tpl(n) {
    walk(function(div) {
        if (div.className == 'tpl act1') n = div.html()
    })
    return n ? '<div class="tpl">' + n + '</div>' : html('tpl');
}
function acn(el) {
    el.html(-3, 'be', '<div class="bb y"><div class="fr nu"><a href="javascript:;" onclick="$(-2,\'\')">&nbsp;X&nbsp;</a></div>dt datetime</div>');
}
function dcn(el) {
    var div = el.$(-3);
    el.$(-2, '');
    div.style.width = 'auto';
    var w = div.clientWidth;
    div.$({width: 16*Math.floor(w / 16)+15});
}
var f1 = $('f1');
function save_1() {}
function adjust(x, y) {
    $('hold', {width: x = 16* Math.round((x - 185) / 16), height: 16* Math.round((y - 270) / 16)});
    $('log', {width: x, height: 38});
}
//$().body.$({overflow:'hidden'});
// f1.n.focus();
// console.log(ztop)
</script>
<style type="text/css">
#top {height: 30px}
#hold {background:url(dev.php?img=13.box.png); z-index:-100; overflow:auto;} #hold input {border:0}
#log {font:normal 12px courier; overflow-y:auto; line-height: 14px; border-top: 1px solid #f77; margin-top:0}
#allow {padding: 5px 3px;}
#bh {width:96px; background:#222; color:#fff; padding:8px 0; cursor:move; text-align: center; }
#tpl {display: none}
.tpl {background:#fff; position:absolute; border-left:1px solid #999; }
.bb {border-bottom:1px solid #999; height:15px !important; font:normal 12px courier; padding:0 3px; }
.blue {background: #B9D8F7}
.y {background: #C2F292}
.edit {height:15px; font:normal 12px courier; padding:0; background:#D4E9F7; width:50px; }
.nu {height: 15px}
.nu a {font:normal 11px courier; text-decoration:none; line-height:15px; padding:0 2px; display:block; }
.bd a {color:red;}
.act1 {border-left:1px solid red; }
.act2 {border-bottom:1px solid red; }
</style><?
 
endif;