history tab few changes

pmd/scripts/history.js

@@ -1,14 +1,59 @@
 var history_array = [];
- function history(ncolumn_name,nobj,ntab,nobj_no) {
+var tab_array = [];
+function panel() {
+	$(".toggle_container").hide(); 
+		$("h2.tiger").click(function(){
+		$(this).toggleClass("active").next().slideToggle("slow");
+		});
+}
+
+function display(init,final) {
+	 var str,i,j,k,sto;
+	 for (i = init;i < final;i++) {
+		sto = history_array[i];
+		var temp = history_array[i].get_tab() + '.' + history_array[i].get_obj_no();
+		for(j = 0;j < i;j++){
+			if(temp > (history_array[j].get_tab() + '.' + history_array[j].get_obj_no())) {
+				for(k = i;k > j;k--) {
+					history_array[k] = history_array[k-1];
+				}
+				history_array[j] = sto;
+				break;
+			}
+		}
+	 }
+	 str ='';
+	 for ( var i=0; i < history_array.length; i++){
+		var temp = history_array[i].get_tab() + '.' + history_array[i].get_obj_no();
+		str += '<h2 class="tiger"><a href="#"></a>' + temp + '</h2>';  				
+		str +='<div class="toggle_container">\n';
+		while((history_array[i].get_tab() + '.' + history_array[i].get_obj_no()) == temp) {
+			str +='<div class="block"> <table>';
+			str += '<thead><tr><td>' + history_array[i].get_column_name() + '<td></tr></thead><tr><td>';
+			str += history_array[i].get_type() + '</td><td><img src=""/></td><td><img src="pmd/style/default/images/minus.png"></td></tr>';
+			i++;
+			if(i >= history_array.length) {
+				break;
+			}
+			str += '</table></div><br/>';
+		}
+		i--;
+	 	str += '</div><br/>';
+	 }
+	 return str;
+}
+ 
+ function history(ncolumn_name,nobj,ntab,nobj_no,ntype) {
 	var and_or;
 	var obj;
 	var tab;
 	var column_name;
 	var obj_no;
-	this.setcolumn_name = function (ncolumn_name) {
+	var type;
+	this.set_column_name = function (ncolumn_name) {
 		column_name = ncolumn_name;
 	};
-	this.getcolumn_name = function() {
+	this.get_column_name = function() {
 		return column_name;
 	};
 	this.set_and_or = function(nand_or) {
@@ -27,7 +72,7 @@ var history_array = [];
 		tab = ntab;
 	};
 	this.get_tab = function() {
-		return obj;
+		return tab;
 	};
 	this.set_obj_no = function(nobj_no) {
 		obj_no = nobj_no;
@@ -35,12 +80,18 @@ var history_array = [];
 	this.get_obj_no = function() {
 		return obj_no;
 	};
-
+	this.set_type = function(ntype) {
+		type = ntype;
+	}
+	this.get_type = function() {
+		return type;
+	}
 	this.set_obj_no(nobj_no);
 	this.set_tab(ntab);
 	this.set_and_or(0);
 	this.set_obj(nobj);
-	this.setcolumn_name(ncolumn_name);
+	this.set_column_name(ncolumn_name);
+	this.set_type(ntype);
 };
 
 var where = function (nrelation_operator,nquery) {
@@ -77,5 +128,8 @@ var aggregate = function(noperator) {
 	this.set_operator = function(noperator) {
 		operator=noperator;
 	};
+	this.get_operator = function() {
+		return operator;
+	};
 	this.set_operator(noperator);
 };

pmd/scripts/move.js

@@ -966,18 +966,21 @@ function getColorByTarget( target )
   return color;    
 }
 
-function Click_option(id_this) 
+function Click_option(id_this,column_name,table_name) 
 {
-	 var left = Glob_X - (document.getElementById(id_this).offsetWidth>>1);
+	  var left = Glob_X - (document.getElementById(id_this).offsetWidth>>1);
      document.getElementById(id_this).style.left = left + 'px';
     // var top = Glob_Y - document.getElementById(id_this).offsetHeight - 10;
      document.getElementById(id_this).style.top  = (screen.height / 4) + 'px';
      document.getElementById(id_this).style.visibility = "visible";
+	 document.getElementById('option_col_name').innerHTML = 'column_name';
+	 col_name = column_name;
+	 tab_name = table_name;
 }
 
 function Close_option()
 {
-	document.getElementById('pmd_options').style.visibility = "hidden";
+	document.getElementById('pmd_optionse').style.visibility = "hidden";
 }
 
 function Select_all(id_this)
@@ -1005,3 +1008,54 @@ function Table_onover(id_this,val)
 		document.getElementById("id_zag_" + id_this + "_2").className="tab_zag";
 	}
 }
+
+
+function add_object() {
+	var rel = document.getElementById('rel_opt');
+	var sum = 0;
+	var init = history_array.length;
+	if (rel.value != '--') {
+		if (document.getElementsByName('Query').value == "") {
+			document.getElementById('hint').innerHTML = "value/subQuery is empty" ;
+		    document.getElementById('hint').style.visibility = "visible";
+			return;
+		}
+		 var w = document.getElementById('rel_opt').value;
+		 var p = document.getElementsByName('Query');
+		 var where_obj = new where(w,p.value);//make where object
+		 history_array.push(new history(col_name,where_obj,tab_name,h_tabs[tab_name],"Where"));
+		 sum = sum + 1;
+	}
+	if (document.getElementById('new_name').value !="") {
+		var rename_obj = new rename(document.getElementById('new_name').value);//make Rename object
+		history_array.push(new history(col_name,rename_obj,tab_name,h_tabs[tab_name],"Rename"));
+		sum = sum + 1;
+		document.getElementById('new_name').value = "" ;
+	}
+	if (document.getElementById('operator').value != '---') {
+		var aggregate_obj = new aggregate(document.getElementById('operator').value) ;
+		history_array.push(new history(col_name,aggregate_obj,tab_name,h_tabs[tab_name],"Aggregate"));
+		sum = sum + 1;
+		//make aggregate operator
+	}
+	if (document.getElementById('groupby').checked == true ) {
+		history_array.push(new history(col_name,'GroupBy',tab_name,h_tabs[tab_name],"Group By"));
+		sum = sum + 1;
+		document.getElementById('groupby').checked = false;
+		//make groupby
+	}
+	if (document.getElementById('orderby').checked == true) {
+		history_array.push(new history(col_name,'OrderBy',tab_name,h_tabs[tab_name],"Order By"));
+		sum = sum + 1;
+		document.getElementById('orderby').checked = false;
+		//make orderby
+	}
+	document.getElementById('hint').innerHTML = sum + "object created" ;
+    document.getElementById('hint').style.visibility = "visible";
+	//output sum new objects created
+	var existingDiv = document.getElementById('ab');
+	existingDiv.innerHTML = display(init,history_array.length);
+	Close_option();
+	panel();
+	
+}

pmd/styles/default/style1.css

@@ -409,90 +409,96 @@ position: fixed;
 top: 50px;
 right: 0;
 display: none;
-background: #000000;
+background: #FFF;
-border:1px solid #111111;
+border:1px solid #F5F5F5;
--moz-border-radius-topleft: 20px;
+width: auto;
--webkit-border-top-left-radius: 20px;
--moz-border-radius-bottomleft: 20px;
--webkit-border-bottom-left-radius: 20px;
-width: 330px;
 height: auto;
-padding: 30px 30px 30px 130px;
+padding: 30px 170px 30px 30px;
-filter: alpha(opacity=85);
-opacity: .85;
 color:#FFF;
-
+z-index:99;
-}
-
-.panel p{
-margin: 0 0 15px 0;
-padding: 0;
-color: #cccccc;
-}
-
-.panel a, .panel a:visited{
-margin: 0;
-padding: 0;
-color: #9FC54E;
-text-decoration: none;
-border-bottom: 1px solid #9FC54E;
-}
-
-.panel a:hover, .panel a:visited:hover{
-margin: 0;
-padding: 0;
-color: #ffffff;
-text-decoration: none;
-border-bottom: 1px solid #ffffff;
-}
-.panel tr {
-	color:#CCC;
-	background-color:#B9E24B;
 }
 
 a.trigger{
 position: fixed;
 text-decoration: none;
-top: 80px; right: 0;
+top: 60px; right: 0;
 font-size: 16px;
-letter-spacing:-1px;
 font-family: verdana, helvetica, arial, sans-serif;
 color:#fff;
-padding: 20px 40px 20px 15px;
+padding: 10px 40px 10px 15px;
 font-weight: 700;
 background:#333333 url(images/plus.png) 85% 55% no-repeat;
 border:1px solid #444444;
--moz-border-radius-topleft: 20px;
--webkit-border-top-left-radius: 20px;
--moz-border-radius-bottomleft: 20px;
--webkit-border-bottom-left-radius: 20px;
--moz-border-radius-bottomright: 0px;
--webkit-border-bottom-right-radius: 0px;
 display: block;
 }
 
 a.trigger:hover{
 position: fixed;
 text-decoration: none;
-top: 80px; right: 0;
+top: 60px; right: 0;
 font-size: 16px;
-letter-spacing:-1px;
 font-family: verdana, helvetica, arial, sans-serif;
-color:#fff;
+color:#080808;
-padding: 20px 40px 20px 20px;
+padding: 10px 40px 10px 15px;
 font-weight: 700;
-background:#222222 url(images/plus.png) 85% 55% no-repeat;
+background:#fff696 url(images/plus.png) 85% 55% no-repeat;
-border:1px solid #444444;
+border:1px solid #999;
--moz-border-radius-topleft: 20px;
--webkit-border-top-left-radius: 20px;
--moz-border-radius-bottomleft: 20px;
--webkit-border-bottom-left-radius: 20px;
--moz-border-radius-bottomright: 0px;
--webkit-border-bottom-right-radius: 0px;
 display: block;
 }
 
 a.active.trigger {
 background:#222222 url(images/minus.png) 85% 55% no-repeat;
+z-index:999;
+}
+
+a.active.trigger:hover {
+background:#fff696 url(images/minus.png) 85% 55% no-repeat;
+z-index:999;
+}
+
+h2.tiger{
+	background-image: url(images/Header.png);
+    background-repeat: repeat-x;
+    padding: 1px;
+    font-weight: bold;
+	font-size:14px;
+	padding: 50 20 50 20px;
+	margin: 0 0 5px 0;
+	float: left;
+	color : #333;
+	text-align: center;
+}
+
+h2.tiger a {
+	text-align: center;
+	color : #333;
+	display: block;
+}
+
+h2.tiger a:hover {  
+	color: #ccc; 
+}
+
+h2.active {
+	background-image: url(images/Header.png);
+    background-repeat: repeat-x;
+    padding: 1px;
+	background-position: left bottom;
+} /*--When toggle is tigered, it will shift the image to the bottom to show its "opened" state--*/
+
+.toggle_container {
+	margin: 0 0 5px;
+	padding: 0;
+	border-top: 1px solid #d6d6d6;
+	background: #83B0B8 ;
+	overflow: hidden;
+	font-size: 1.2em;
+	clear: both;
+}
+
+.toggle_container .block {
+	background-color: #E7E7E7;
+	padding:40 15 40 15px; /*--Padding of Container--*/
+	border:1px solid #999;
+	color:#000;
 }
-a.test { font-weight: bold; color:#C06; }

pmd_general.php

@@ -28,6 +28,7 @@ $hidden           = "hidden";
     <link rel="shortcut icon" href="pmd/images/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="pmd/styles/<?php echo $GLOBALS['PMD']['STYLE'] ?>/style1.css" />
     <title>Designer</title>
+     <script src="./js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
     <script type="text/javascript">
     // <![CDATA[
 <?php
@@ -35,8 +36,18 @@ echo '
     var server = "' . PMA_escapeJsString($server) . '";
     var db = "' . PMA_escapeJsString($db) . '";
     var token = "' . PMA_escapeJsString($token) . '";';
+	echo "\n";
+	if($_REQUEST['query']) {
+	echo '
+	 $(document).ready(function(){
+		$(".trigger").click(function(){
+		$(".panel").toggle("fast");
+		$(this).toggleClass("active");
+		return false;
+		});
+	});';
+	}
 ?>
-
     // ]]>
     </script>
 <?php
@@ -47,7 +58,8 @@ if (isset($GLOBALS['db'])) {
 ?>
     <script src="js/messages.php<?php echo PMA_generate_common_url($params); ?>" type="text/javascript"></script>
     <script src="pmd/scripts/ajax.js" type="text/javascript"></script>
-    <script src="pmd/scripts/move.js" type="text/javascript"></script>
+    <script src="pmd/scripts/history.js" type="text/javascript"></script> 
+	<script src="pmd/scripts/move.js" type="text/javascript"></script>
     <!--[if IE]>
     <script src="pmd/scripts/iecanvas.js" type="text/javascript"></script>
     <![endif]-->
@@ -298,9 +310,10 @@ for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) {
    </td>
    <?php 
    if(isset($_REQUEST['query'])) {
+	   $temp = $GLOBALS['PMD_OUT']["OWNER"][$i].'.'.$GLOBALS['PMD_OUT']["TABLE_NAME_SMALL"][$i];
 	   echo '<td class="small_tab_pref" onmouseover="this.className=\'small_tab_pref2\';"';
 	   echo 'onmouseout="this.className=\'small_tab_pref\';"';
-	   echo 'onclick="Click_option(\'pmd_optionse\')" >';
+	   echo 'onclick="Click_option(\'pmd_optionse\',\''.urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]).'\',\''.$temp.'\')" >';
 	   echo  '<img src="pmd/images/exec_small.png" title="options" alt="" /></td> ';
 	} ?>
 </tr>
@@ -430,10 +443,11 @@ for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) {
     <td class="frams8"></td>
     <td class="input_tab">
         <table width="168" border="0" align="center" cellpadding="2" cellspacing="0">
-        <thead>
+       <thead>
         <tr>
-            <td colspan="2" align="center" nowrap="nowrap"><strong>Options</strong></td>
+            <td colspan="2" align="center" nowrap="nowrap"><strong>Options For</strong></td>
         </tr>
+        <tr ><td id="option_col_name"></td></tr>
         </thead>
         <tbody id="where">
         <tr><td align="center" nowrap="nowrap"><b>Where</b></td></tr>
@@ -455,13 +469,13 @@ for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) {
         </tr>
         <tr>
             <td nowrap="nowrap">Value/<br />Subquery</td>
-            <td><textarea name="Query" value=" " cols="15"></textarea>
+            <td><textarea name="Query" value="" cols="15"></textarea>
             </td>
         </tr>
         <tr><td align="center" nowrap="nowrap"><b>Rename To</b></td></tr>
         <tr>
             <td width="58" nowrap="nowrap">New Name</td>
-        	<td width="102"><input type="text" value="" /></td>
+        	<td width="102"><input type="text" value="" id="new_name"/></td>
         </tr>
         <tr><td align="center" nowrap="nowrap"><b>Aggregate</b></td></tr>   
          <tr>
@@ -477,21 +491,21 @@ for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) {
            </td></tr>
            <tr>
 				<td nowrap="nowrap" width="58" align="center"><b>Group By</b></td>
-                <td><input type="checkbox" value="groupby" /></td>
+                <td><input type="checkbox" value="groupby" id="groupby"/></td>
            </tr>           	
            <tr>
 				<td nowrap="nowrap" width="58" align="center"><b>Order By</b></td>
-                <td><input type="checkbox" value="orderby" /></td>
+                <td><input type="checkbox" value="orderby" id="orderby"/></td>
            </tr>
         </tbody>
         <tbody>
         <tr>
             <td colspan="2" align="center" nowrap="nowrap">
                 <input type="button" class="butt" name="Button"
-                    value="<?php echo __('OK'); ?>" onclick="New_relation()" />
+                    value="<?php echo __('OK'); ?>" onclick="add_object()" />
                 <input type="button" class="butt" name="Button"
                     value="<?php echo __('Cancel'); ?>"
-                    onclick="document.getElementById('pmd_optionse').style.visibility = 'hidden';" />
+                    onclick="Close_option()" />
             </td>
         </tr>
         </tbody>
@@ -506,6 +520,14 @@ for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) {
 </tr>
 </tbody>
 </table>
+
+ <div class="panel">
+  <div style="clear:both;"></div>
+   <div id="ab"></div>
+ 
+  <div style="clear:both;"></div>
+  </div>
+  <a class="trigger" href="#">History</a>
 <!-- cache images -->
 <img src="pmd/images/2leftarrow_m.png" width="0" height="0" alt="" />
 <img src="pmd/images/rightarrow1.png" width="0" height="0" alt="" />