recruitment/app/views/admin/recruitments/index.html.erb

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick"%>
<style type="text/css">
	.all-stats{
		list-style: none;
		display: inline-block;
		text-align: center;
		font-size: 16px;
	}
	.all-stats li{
		display: inline-block;
		width: 150px;
		height: 100px;
		background-color: #ff8700;
		padding-top: 40px;
		color: #fff;
		border-radius: 5px;
		margin-right: 20px;
		border: 2px solid yellow;
	}
	.all-stats li:hover{
		background-color: #ff8700cc;
	}
	.all-stats li .heading{
		margin-bottom: 5px;
		height: 20px;
	}
	.all-stats li .count{
		margin-top: 30px;
		font-size: 20px;
	}
	.loading-area{
		margin-top: 25px;
	}
	.start-chart{
		margin-bottom: 30px;
	}
</style>
<div id="all-stats">
	<h3>Summary</h3>
	<ul class="all-stats">
		<li>
			<div class="heading"><%= t("recruitment.total_job_postings") %></div>
			<div class="count"><%= @job_postings %></div>
		</li>
		<li>
			<div class="heading"><%= t("recruitment.total_internship_postings") %></div>
			<div class="count"><%= @internship_postings %></div>
		</li>
		<li>
			<div class="heading"><%= t("recruitment.total_exchange_postings") %></div>
			<div class="count"><%= @exchange_postings %></div>
		</li>
		<li>
			<div class="heading"><%= t("recruitment.total_employees") %></div>
			<div class="count"><%= @total_employees %></div>
		</li>
		<li>
			<div class="heading"><%= t("recruitment.total_employers") %></div>
			<div class="count"><%= @total_employers %></div>
		</li>
		<li>
			<div class="heading"><%= t("recruitment.total_positions_filled") %></div>
			<div class="count"><%= @total_position_filled %></div>
		</li>
	</ul>
</div>
<hr>
<div id="posting-chart" class="stat-chart">
	<div class="form pull-right">
		<form class="form-inline" id="posting-chart-form">
		  <select name="year" class="input-small">
	    	<option><%= t("recruitment.select_year") %></option>
	    	<% (2017..Time.now.year).each do |year| %>
	    		<option value="<%= year %>"><%= year %></option>
	    	<% end %>
	    </select>
			<select name="month" class="input-small">
	    	<option><%= t("recruitment.select_month") %></option>
	    	<% (01..12).each do |month| %>
	    		<option value="<%= month %>"><%= month %></option>
	    	<% end %>
	    </select>
		  <button type="submit" class="btn">Load</button>
		</form>
	</div>
	<div class="loading-area">
		<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
	</div>
</div>
<div id="registration-chart" class="stat-chart">
	<div class="form pull-right">
		<form class="form-inline" id="registration-chart-form">
		  <select name="year" class="input-small">
	    	<option><%= t("recruitment.select_year") %></option>
	    	<% (2017..Time.now.year).each do |year| %>
	    		<option value="<%= year %>"><%= year %></option>
	    	<% end %>
	    </select>
			<select name="month" class="input-small">
	    	<option><%= t("recruitment.select_month") %></option>
	    	<% (1..12).each do |month| %>
	    		<option value="<%= month %>"><%= month %></option>
	    	<% end %>
	    </select>
		  <button type="submit" class="btn">Load</button>
		</form>
	</div>
	<div class="loading-area">
		<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
	</div>
</div>
<div id="filled-chart" class="stat-chart">
	<div class="form pull-right">
		<form class="form-inline" id="filled-chart-form">
		  <select name="year" class="input-small">
	    	<option><%= t("recruitment.select_year") %></option>
	    	<% (2017..Time.now.year).each do |year| %>
	    		<option value="<%= year %>"><%= year %></option>
	    	<% end %>
	    </select>
			<select name="month" class="input-small">
	    	<option><%= t("recruitment.select_month") %></option>
	    	<% (1..12).each do |month| %>
	    		<option value="<%= month %>"><%= month %></option>
	    	<% end %>
	    </select>
		  <button type="submit" class="btn">Load</button>
		</form>
	</div>
	<div class="loading-area">
		<div style="text-align: center;"><img src="/assets/preloader.gif" width="75px"></div>
	</div>
</div>


<script type="text/javascript">
	$(document).ready(function(){
		loadChart("posting");
		loadChart("registration");
		loadChart("filled");
	})
	var loadChart = function(type, month, year){
		$.ajax({
			url : "<%= load_chart_admin_recruitments_path %>",
			data : {"type" : type, "month" : month, "year" : year},
			dataType : "html",
			type : "get"
		}).done(function(html){
			console.log($("#" + type + "-chart .loading-area"));
			$("#" + type + "-chart .loading-area").html(html);
		})
	}
	$("#posting-chart-form").on("submit",function(){
		var month = $(this).find("select[name=month]").val(),
				year = $(this).find("select[name=year]").val();
		loadChart("posting", month, year);
		return false;
	})
	$("#registration-chart-form").on("submit",function(){
		var month = $(this).find("select[name=month]").val(),
				year = $(this).find("select[name=year]").val();
		loadChart("registration", month, year);
		return false;
	})
	$("#filled-chart-form").on("submit",function(){
		var month = $(this).find("select[name=month]").val(),
				year = $(this).find("select[name=year]").val();
		loadChart("filled", month, year);
		return false;
	})
</script>