announcement-test/temp_file/app/views/admin/sites/update_manager.erb

<!-- test for some stuff -->
<style type="text/css">
	.container{
	}

	#new_update_container{
		display: none;
	}

	#update_progress{
		margin: 0 auto;
		text-align: center;
	}

	#update_status{
		/*display: none;*/
	}

	#update_done{
		display: none;	
	}

	#update_failed{
		display: none;
	}

	.panel{
		/*max-height: 400px;*/
		border-radius: 5px;
		overflow: hidden;
		border: 1px solid #DFDFDF;
		background: #FFF;
		box-shadow: 0px 0px 10px #CCC;
	}

	.panel-heading{
		font-size: 16px;
		color: #666;
		padding: 10px 20px;

		background-color: #fafafa;
		background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
		background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
		*zoom: 1;
		border-bottom:  1px solid #DDD;
	}

	.table{
		margin: 0;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	.pannel-body{
		max-height:  400px;
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: hidden;
		padding: 15px;
	}

	.pannel-body:hover{
		overflow-y: scroll;
	}

	::-webkit-scrollbar {
		width: 5px;
	}
	::-webkit-scrollbar-track {
		background-color: #AAA;
	} 
	::-webkit-scrollbar-thumb {
		background-color: #666;
	}

	.break{
		border-left: 1px solid #FCFCFC;
		border-right: 1px solid #DDD;
		padding: 10px 0;
		margin: 0 15px;
	}
</style>
<div class="container">
	<div class="row-fluid">
		<div class="span6">
			<div  id="new_update_container">
				<div class="panel">
					<div class="panel-heading">
						<i class="icon-exclamation-sign"></i>
						<span class="break"></span>
						<span class="panel-title"><%= t("update_manager_.available_updates") %></span>
						<span id="num_new_updates" class="badge badge-important pull-right"></span>
						<% if !@store_permissions["permission_granted"] %>
							<span class="break pull-right"></span>
							<small class="pull-right text-error">
								<% if @store_permissions["message"].size > 30 %>
									<a class="tooltipalert text-error" href="#"
									onclick="return false;" title="<%=  @store_permissions["message"] %>"><%= @store_permissions["message"][0..17] + "..." %></a>
									<script type="text/javascript">
										$('.tooltipalert').tooltip({
								            position: {
								                my: "center bottom-4",
								                at: "center top"
								            }
								        });
									</script>
								<% else %>
									<%=  @store_permissions["message"] %>
								<% end %>
							</small>
						<% end %>
					</div>
					<div class="pannel-body">
						<table class="table table-striped">
							<tbody id="new_update_table">
								
							</tbody>
						</table>
					</div>	
				</div>
				<div style="height: 55px;">
				<% if @store_permissions["permission_granted"] %>
					<button id="update_btn" class="btn btn-primary pull-right"  style="margin: 10px;"><i class="icon-inbox icon-white"></i> <%= t("update_manager_.system_update") %></button>
				<% else %>
					<a href="/<%= I18n.locale.to_s  %>/admin/designs" class="pull-right">Please register here.</a>
				<% end %>
				</div>
			</div>
			<div id="update_status">
				<div class="panel">
					<div class="panel-heading">
						<i class="icon-info-sign"></i>
						<span class="break"></span>
						<span class="panel-title"><%= t("update_manager_.update_status") %></span>
						<% if !@store_permissions["permission_granted"] %>
							<small class="pull-right text-error">
								<% if @store_permissions["message"].size > 30 %>
									<a class="tooltipalert text-error" href="#"
									onclick="return false;" title="<%=  @store_permissions["message"] %>"><%= @store_permissions["message"][0..17] + "..." %></a>
									<script type="text/javascript">
										$('.tooltipalert').tooltip({
								            position: {
								                my: "center bottom-4",
								                at: "center top"
								            }
								        });
									</script>
								<% else %>
									<%=  @store_permissions["message"] %>
								<% end %>
							</small>
						<% end %>
					</div>
					<div class="pannel-body">
						<div id="update_done" class="alert alert-success" style="font-size: 16px; text-align: center; margin: 0px;">
							<i class="icon-ok-sign">&nbsp;&nbsp;&nbsp;&nbsp;<%= t("update_manager_.update_done") %></i>
						</div>
						<div id="update_failed" class="alert alert-error" style="font-size: 16px; text-align: center; margin: 0px;">
							<i class="icon-remove">&nbsp;&nbsp;&nbsp;&nbsp;<%= t("update_manager_.update_faild") %></i>
						</div>
						<div id="update_progress">
							<img src="/assets/spin.gif" width="50"><br/>
							<span id="progress_msg"></span>
						</div>
					</div>	
				</div>
				<div style="padding: 10px 0; height: 65px;">
					<button id="chech_update_btn" class="btn btn-small btn-inverse pull-right"><i class="icon-refresh icon-white"></i> <%= t("update_manager_.check_update") %></button>
				</div>
			</div>
		</div>
  		<div class="span6">
  			<div class="panel">
				<div class="panel-heading">
					<i class="icon-th-list"></i>
					<span class="break"></span>
					<span class="panel-title"><%= t("update_manager_.update_history") %></span>
					<span id="num_updates" class="badge badge-success pull-right"></span>
				</div>
				<div class="pannel-body" id="update-history-body">
					<table class="table table-striped">
						<tbody id="update_history_table">
							
						</tbody>
					</table>
				</div>
			</div>
  		</div>
	</div>
</div>
<script>
	var update_logs;
	var update_log_display;
	var new_updates;

	function get_update_history(){
		$.getJSON("<%= admin_site_get_update_history_path %>",function(data){
			update_logs = data;
			update_log_display = 0;
			$("#num_updates").text(update_logs.length);
			$("#update_history_table").html("");
			
			show_update_history();
		});
	}
	
	function show_update_history(){
		for(var i = 0; i<30; i++){
			var log = update_logs[update_log_display];
			update_log_display++;
			$("#update_history_table").append("<tr data-id='"+log[0]+"'><td width=30%'>"+log[1]+"</td><td width=50%'>"+log[2]+"</td><td width=20%'><button type='button' class='btn btn-primary' onclick='restore_orbit(this)'>restore</button></td></tr>");
			if((update_log_display+1)>update_logs.length) break;
		}
	}

	function check_updates(){
		$("#progress_msg").html("<strong><%= t("update_manager_.checking_update") %></strong>");
		$("#new_update_container").fadeOut(function(){
			$("#update_done").fadeOut(function(){
				$("#update_status").fadeIn(function(){
					$("#update_progress").fadeIn();
					$.getJSON("<%= admin_site_check_updates_path %>",function(data){
						new_updates = data;
						show_new_updates();
					});
				});
			});
		});
	}

	function show_new_updates(){
		if(new_updates.length){
			$("#num_new_updates").text(new_updates.length);
			$.each(new_updates,function(){
				$("#new_update_table").append("<tr><td>"+$(this)[0]+"</td><td>"+$(this)[1]+"</td></tr>");
			});
			$("#update_status").fadeOut(function(){$("#new_update_container").fadeIn();});
		}else{
			$("#update_progress").fadeOut(function(){$("#update_done").fadeIn();});
		}
	}

	function check_module_updates(){
		$("#progress_msg").html("<strong><%= t("update_manager_.updating_orbit") %></strong>");
		$("#new_update_container").fadeOut(function(){
			$("#update_done").fadeOut(function(){
				$("#update_status").fadeIn(function(){
					$("#update_progress").fadeIn();
					$.get("<%= admin_site_bundle_install_path %>",function(result){
						$("#update_progress").fadeOut(function(){$("#update_done").fadeIn();});
						$("#update_status").fadeIn();
					});
				});
			});
		});
	}
	function restore_orbit(ele){
		$("#update_done").hide()
		$("#update_progress").show()
		$("#progress_msg").html("<strong>restoring...</strong>");
		$("#new_update_container").fadeOut(function(){
			$("#update_status").fadeIn();
		});
		id = $(ele).parents('tr').data('id')
		update_orbit('restore',id)
	}
	function update_orbit(type,id){
		$.get("<%= admin_site_update_orbit_path %>",{type: type,id: id},function(result){
				if (result=='finish'){
					$("#progress_msg").html("<strong><%= t("update_manager_.restart_server") %></strong>");
					$.get("<%= admin_site_restart_server_path %>").always(function(){
							setTimeout(function(){window.location.href="<%= admin_site_update_manager_path %>"},5000)
						});
				}else if(result=='waiting'){
					$("#progress_msg").html("<strong><%= t("update_manager_.restart_server") %></strong>");
					setTimeout(function(){update_orbit('get_result')},1000)
				}
			});
	}
	$(document).ready(function(){
		check_updates();
		get_update_history();

		// $("#module_update_btn").click(check_module_updates);

		$("#chech_update_btn").click(check_updates);

		$("#update_btn").click(function(){
			$("#progress_msg").html("<strong><%= t("update_manager_.updating_orbit") %></strong>");
			$("#new_update_container").fadeOut(function(){
				$("#update_status").fadeIn();
			});
			update_orbit('update','')
		});

		$("#update-history-body").scroll(function () {
			if((update_log_display+1)<update_logs.length){
				var scroll_pos =  ($("#update-history-body").scrollTop()+$("#update-history-body").height())/$("#update_history_table").height()*100;
				if(scroll_pos>90){
					show_update_history();
				}
			}
		});
	});
</script>