<?php
  // Time-stamp: <mark 2010-05-20 04:00:26>
  include "./config.php";
  include INCPATH."/template_functions.php";

  //$identifier=uniqid();
  $identifier=rand();
  $upload_id=1;

  header('Content-type: text/html;charset=utf8');	
  session_start();
  get_header();
?>

<link rel="stylesheet" href="./style/progress_bar.css" type="text/css" media="screen"/>
<script type='text/javascript' src='./includes/prototype-1.6.1.js'></script>
<script type='text/javascript' src='./includes/progress_bar.js'></script>


<style>    
table.progress_monitor {
	margin: 5px auto;
	padding: 0px auto;
	text-align: center;
	border-collapse: collapse;
}
table.progress_monitor caption {
	font-weight: bold;
	font-size: 1.2em;
	margin: 0px auto;
	padding: 10px 0px;
}
table.progress_monitor th, table.progress_monitor td {
	border: 3px solid #fff;
	/*background-color: #fff5ce;*/
	background-color: #f0f0f0;
	padding: 2px 2px;
}
table.progress_monitor th, table.progress_monitor td.green {
	border: 3px solid #fff;
	/*background-color: #fff5ce;*/
	background-color: #f0f0f0;
	color: #ff0000;
	padding: 2px 2px;
}
table.progress_monitor thead th{
	border-bottom: 3px solid #ffff;
	background-color: #cae1fb;
	color: #333333;
	padding: 2px 5px;
	font-size: 1em;
}
table.progress_monitor tfoot td{
	border-width: 0px;
	text-align: right;
	font-size: 1em;
	color: #777777;
	background-color: transparent;
}
table.progress_monitor a{
	padding: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #f3f3f3;
	text-decoration: none;
	cursor: pointer;
    
}
table.progress_monitor td a:hover{
	padding: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #000080;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}
table.progress_monitor td .warning a:hover{
	padding: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: #cc0000;
	text-decoration: none;
	color: #fff;	
	cursor: pointer;
	
}
table.progress_monitor .marked td{
	background-color: #ffcc66;
}
</style>
  
<script type="text/javascript">
    var ajax_periodical_updater=null;

    function is_response_error(response) {
	var myRegExp = /Error/;       
	var matchPos1 = response.search(myRegExp);
	if (matchPos1 != -1) //Can't find an error sign.
	    return true;
	else 
	    return false;
    }

    function get_datetime_str(){
	var currentDate = new Date(); 
	var day = currentDate.getDate();
	if (day<10) day='0'+day;
	var month = currentDate.getMonth();
	if (month<10) month='0'+month;
	var year = currentDate.getFullYear();
	var hours = currentDate.getHours();
	if (hours<10) hours='0'+hours;
	var minutes = currentDate.getMinutes();
	if (minutes<10) minutes='0'+minutes;
	var seconds = currentDate.getSeconds();
	if (seconds<10) seconds='0'+seconds;
	
	return "("+hours+":"+minutes+":"+seconds+", "+month+"/"+day+"/"+year+")";
    }

    function kill_process(work_id)
    {
	new Ajax.Request('<?php echo $G_KILLER["path"]; ?>',{
	    method:'get',
	    parameters: {id: work_id},
	    onSuccess: function(transport){       
		var response = transport.responseText || "no response text";

		var msg_box=document.getElementById("msg_box");
		var err_box=document.getElementById("err_box");

		if (is_response_error(response)){
		    err_box.innerHTML=get_datetime_str()+response;
		    err_box.style.display="block";	     
		    msg_box.style.display="none";
		}
		else{
		    msg_box.innerHTML=get_datetime_str()+response;
		    msg_box.style.display="block";	     
		    err_box.style.display="none";
		}
		//alert("Success! \n\n" + response);
	    },
	    onFailure: function(){ alert('Something went wrong...')}
	});

    }

 function start_view(){
     
     document.getElementById("ajax_status").innerHTML="Running";
     document.getElementById("ajax_status").style.color="green";
     document.getElementById("server_status").innerHTML="Offline";
     document.getElementById("server_status").style.color="red";

     //document.getElementById("start_button").disabled=true;
     document.getElementById("stop_button").disabled=false;
     if (ajax_periodical_updater) {
	 ajax_periodical_updater.start();    
     }
     else {    

	 ajax_periodical_updater=new Ajax.PeriodicalUpdater(
	     'output', // 定时更新的页面元素
	     'monitor.php', // 请求的URL
	     {
		 method: 'get', // HTTP请求的方式为GET
		 //evalScripts: true, // 是否执行请求页面中的脚本
		 frequency: 5, // 更新的频率
		 decay: 1.5, // 衰减系数
		 
		 onSuccess: function(transport){
	             
		     var response = transport.responseText || "no response text";		     
                     if (response.indexOf("Error")>=0 || response=="no response text") {
                        document.getElementById("server_status").innerHTML="Offline";
                        document.getElementById("server_status").style.color="red";
                     }
                     else {           
             
                        document.getElementById("server_status").innerHTML="Online";
                        document.getElementById("server_status").style.color="green";

			//alert(response);
		     
			//a="{'abc':'2'}";
			
			//var test=a.evalJSON();       
			
		     var log_div=document.getElementById("log");
		     //alert(response)

		     var work_list=response.evalJSON();

		     log_div.innerHTML="";             
		     
		     tbody=document.getElementById("work_list_body");
		     
		     while(tbody.childNodes[0]){
			 tbody.removeChild(tbody.childNodes[0]);	 
		     }

			
		     for (var work_id in work_list) {
                         if (work_id=="server_schedule"){
                           document.getElementById("server_schedule").innerHTML=work_list[work_id];
                         }
                         else {
			 var row=document.createElement("tr");
			 
			 var cell=document.createElement("td");
			 var textNode=document.createTextNode(work_id);
			 cell.appendChild(textNode);
			 row.appendChild(cell);
			 
			 log_div.innerHTML+=("ID: " + work_id + ";");
			 for (var work_attr in work_list[work_id]) {
			     var cell=document.createElement("td");
				
			     if (work_attr=="status") {
				 if (work_list[work_id][work_attr]=="Cancelled") {
				     cell.style.color="#ff0000";
				     cell.style.fontWeight="bold";
				 }
				 else if (work_list[work_id][work_attr]=="Complete") {
				     cell.style.color="#00bb00";
				     cell.style.fontWeight="bold";
				 }
				 else if (work_list[work_id][work_attr]=="Running") {
				     cell.style.color="#0000ff";
				     cell.style.fontWeight="bold";
				 }else if (work_list[work_id][work_attr]=="Standby") {
				     cell.style.color="#eeaa00";
				     cell.style.fontWeight="bold";
				 }
			     }
			     if (work_attr=="remarks") {
				 cell.setAttribute("id","remarks_"+work_id);	       
			     }	       
			     else if (work_attr!="progress_percent") {
				 var textNode=document.createTextNode(work_list[work_id][work_attr]);
				 cell.appendChild(textNode);
				 
			     }
			     else {
				    
				 cell.innerHTML=make_progress_bar_div(work_id);	       
	       			 
			     }
			     
			     row.appendChild(cell);
			     log_div.innerHTML+=("["+work_attr+"]"+work_list[work_id][work_attr]+",");
			 }//for work_attr
			 
			 log_div.innerHTML+="<br/>";
			 tbody.appendChild(row);
                       }//if
		     }//for
		     
		     for (var work_id in work_list){
			 if (work_id=="server_schedule") continue;
			 var progress_percent=work_list[work_id]['progress_percent'];
			 
			 update_progress_bar_percent(work_id,progress_percent);	 
			 update_progress_bar_msg(work_id,progress_percent+"%");
			 
			 if (work_list[work_id]['remark']!="") {			     
			     document.getElementById("remarks_"+work_id).innerHTML=work_list[work_id][work_attr];
			 }	       
	             }
		   }
		 },
                    onFailed: function(){                      
                      document.getElementById("server_status").innerHTML="Offline";
                      document.getElementById("server_status").style.color="red";
                    }

		}
	    );

	}  
}

function stop_view(){
    //document.getElementById("start_button").disabled=false;
    document.getElementById("stop_button").disabled=true;
    document.getElementById("ajax_status").innerHTML="Stopped";
    document.getElementById("ajax_status").style.color="red";
    document.getElementById("server_status").innerHTML="Offline";
    document.getElementById("server_status").style.color="red";
    ajax_periodical_updater.stop()
}
</script>


<div id="content">

<div id="err_box" class="err_box"></div>
<div id="msg_box" class="msg_box"></div>
<div id="log" style="display:none"></div>

<fieldset style="width: 98%;">
<legend><b>Hints</b></legend>
  <p style='padding: 5px'>The <i>Progress Monitor</i> is updated automatically in a regular interval.</p>
  <p style='padding: 5px'>Press [Refresh] to update manually. Press [Stop] to disable automatic updating.</p>
  <p style='padding: 5px'>Users can cancel their <b>standby/running</b> jobs by clicking [Cancel].</p>
  <p style='padding: 5px'>To get the results of a <b>complete</b> job, press [Output].</p>
  <p style='padding: 5px'>At most <b>ten recent</b> jobs are listed for every user.</p>
</fieldset>

<h5>
  <table>
    <tr><td>AJAX Status:</td><td>[<div style='display:inline;' id="ajax_status"></div>]</td></tr>
    <tr><td>Server Status:</td><td>[<div style='display:inline;' id="server_status"></div>]</td></tr>
  </table>
</h5>

<div align='right'>
  <input type="button" value="Refresh" style='width:100px; border: 1px #000 solid; margin: 5px;'id="start_button" onClick="start_view()"/>
  <input type="button" value="Stop" style='width:100px; border: 1px #000 solid; margin:5px;' id="stop_button" onClick="stop_view()"/>
</div>
  <table class='progress_monitor'>
  <caption>
     Progress Monitor
  </caption>
    <thead>
      <tr>
	<th>Order</th>
<!--	<th>Owner</th> -->
	<th>Submitted time</th>
	<th>Runtime</th>
	<th>Status</th>
	<th>Progress</th>
	<th>Remarks</th>
      </tr>
    </thead>
    <tbody id="work_list_body">
    </tbody>   
    <tfoot>
     <tr><td colspan='7'><div align="right"><h5>Server load: [Running/Standby/Complete:<div id="server_schedule" style='display: inline'>0/0/0</div>]</h5></div></td></tr>
    </tfoot>
  </table>

</div>
<!-- end of <div id="content"> -->

<script type="text/javascript">
start_view()
</script>


<?php
   get_sidebar(6);
   get_footer();   
   flush();
?>
