client_management/app/views/admin/client_managements/edit_timeline.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "client_management/backend" %>
<% end %>

<div class="page-client page-contract">
	<div class="info-contract">
		<h3 class="sub-title">Site Info</h3>
		<div class="line-content">
			<span class="header-line">Site Id :</span>
			<span class="content-line"><%= @site_request.uid %></span>
		</div>
		<div class="line-content">
			<span class="header-line">Site type :</span>
			<span class="content-line"><%= @site_request.get_request_type %></span>
		</div>
	</div>
	
	<div class="info-detail">
		<h3 class="sub-title">User Details</h3>

		<% if !@user.fullname.nil? %>
		  <div class="line-content">
		    <span class="header-line">Name :</span>
		    <span class="content-line"><%= @user.fullname %></span>
		  </div>
		<% end %>
		<div class="line-content">
		<span class="header-line">Email :</span>
		<span class="content-line"><%= @site_request.c_panel_user.email %></span>
		</div>
		<% if !@user.phone_number.nil? %>
		  <div class="line-content">
		    <span class="header-line">Phone Number :</span>
		    <span class="content-line"><%= @user.phone_number %></span>
		  </div>
		<% end %>
		<% if !@user.address.nil? %>
		  <div class="line-content">
		    <span class="header-line">Address :</span>
		    <span class="content-line"><%= @user.address %></span>
		  </div>
		<% end %>
		<% if !@user.registered_site_ids.empty? %>
		  <div class="line-content">
		    <span class="header-line">Registered Sites :</span>
		    <span class="content-line">
		    	<% @user.registered_sites.each do |rs| %>
		    		<span class="label label-default"><a style="color:#fff;" href="http://<%= rs.site_domain %>" target="_blank"><%= rs.title %></a></span>
		    	<% end %>
		    </span>
		  </div>
		<% end %>
	</div>
	<div class="info-detail">
		<h3 class="sub-title">Timeline</h3>
		<div id="timeline-chart" style="height: 300px;">
			
		</div>
	</div>
	<div class="info-spec" id="timeline-form">
		<%= form_for @timeline, :url => {:action => :update_timeline}, :html => {:class => "form-horizontal contract-form"} do |f| %>
			<h3 class="sub-title">Timeline</h3>
			<%= render :partial => "site_timeline_form", :locals => {:f => f} %>
		<% end %>
	</div>
</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
	var chart = null,
			dataTable = null,
			titles = {
				"site_timeline_test_site_creation_end" : "Test Site Creation",
				"site_timeline_template_design_images_end" : "Template Images",
				"site_timeline_template_html_css_end" : "Template HTML & CSS",
				"site_timeline_customized_module_end" : "Customized Module",
				"site_timeline_data_migration_end" : "Data Migration",
				"site_timeline_site_structure_end" : "Structure & Data Finalizing ",
				"site_timeline_site_migration_end" : "Site Migration"
			}
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  var timelineOptions = {
    timeline: { showRowLabels: true }
  };
  function drawChart() {
    var container = document.getElementById('timeline-chart');
  	chart = new google.visualization.Timeline(container);
  	dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    // chart.draw(dataTable, timelineOptions);
    drawTimline();
  }
  var dt = [],
  		counter = 0;
  $("#timeline-form input[data-range=end]").on("blur",function(){
  	var id = $(this).attr("id"),
  			startdt = new Date($(this).parents(".content-line").find("input[data-range=start]").val()),
  			enddt = new Date($(this).val());
  	if(dt.indexOf(id) == -1){
  		dt.push(id);
			counter++;
  		dataTable.addRow([counter.toString(), titles[id], startdt, enddt]);
  	}else{
  		dataTable.setValue(dt.indexOf(id), 2, startdt);
  		dataTable.setValue(dt.indexOf(id), 3, enddt);
  	}
  	chart.draw(dataTable, timelineOptions)
	})
	var drawTimline = function(){
		$(".date-range").each(function(){
			var enddp = $(this).find("input[data-range=end]"),
					startdp = $(this).find("input[data-range=start]"),
					startdt = new Date(startdp.val()),
					enddt = new Date(enddp.val()),
					id = enddp.attr("id");

			if(dt.indexOf(id) == -1){
	  		dt.push(id);
				counter++;
	  		dataTable.addRow([counter.toString(), titles[id], startdt, enddt]);
	  	}else{
	  		dataTable.setValue(dt.indexOf(id), 2, startdt);
	  		dataTable.setValue(dt.indexOf(id), 3, enddt);
	  	}
	  	chart.draw(dataTable, timelineOptions)
		})
	}
</script>